relative-with-implicit-height-containing-block-2.html

<!DOCTYPE html>
<style>
#wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}
#child {
    position: relative;
    width: 100px;
    height: 100px;
    top: 50%;
    background-color: green;
}
#ref {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 300px;
    left: 0px;
    background-color: red;
}
</style>
<p>crbug.com/61049: There should be no red box below.</p>
<div id="log"></div>
<div id="ref"></div>
<div id="wrapper">
    <div id="child"></div>
</div>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script>
    test(() => {
        assert_equals(document.getElementById("child").getClientRects()[0].top, window.innerHeight / 2, "Child should be at 300px.");
    }, "Check that #child is in the correct position.");
</script>

chromium/third_party/blink/web_tests/fast/block/positioning/relative-with-implicit-height-containing-block-2.html