dynamic-descendant-percentage-height.html

<!DOCTYPE html>
<script>
    if (window.testRunner)
        testRunner.waitUntilDone();
</script>
<p>The following two green rectangles should be identical:</p>
<table>
    <tr>
        <td style="height:100px">
            <div style="height:100%; background-color:green; border:3px solid black">This text should have a green background.</div>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td style="height:100px" id="parent"></td>
    </tr>
</table>
<script type="text/javascript">
    window.setTimeout(function() {
        var child = document.createElement("div");
        child.style.height = '100%';
        child.style.backgroundColor = 'green';
        child.style.border="3px solid black";
        child.innerHTML = "This text should have a green background.";
        document.getElementById("parent").appendChild(child);
        
        if (window.testRunner)
            testRunner.notifyDone();
    }, 1);
</script>

chromium/third_party/blink/web_tests/fast/table/dynamic-descendant-percentage-height.html