percentage-height-with-dynamic-container-height.html

<!DOCTYPE html>
<style>
img {
    height: 100%;
}
</style>
<script src="../../resources/check-layout.js"></script>
<script>
function setHeight(){
    document.getElementById('container').style.height = '10px';
}
var numLoads = 0;
function loaded() {
    numLoads++;
    if (numLoads == document.querySelectorAll('img').length)
        checkLayout('img');
}
</script>

<p>You should see two 20x10 green squares below.</p>

<div style="height: 10px">
    <img data-expected-width=20 data-expected-height=10 onload="loaded()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAYAAACqNX6+AAAABmJLR0QA/wD/AP+gvaeTAAAAj0lEQVR4nO3RQQ0AIBDAsAP/nuGNAvZoFSzZmjNnyNi/A3gZEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsRcpb0CYiXEAt8AAAAASUVORK5CYII=">
</div>

<br><br>

<div id="container">
    <!-- 100x50 green square -->
    <img data-expected-width=20 data-expected-height=10 onload="setHeight();loaded()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAYAAACqNX6+AAAABmJLR0QA/wD/AP+gvaeTAAAAj0lEQVR4nO3RQQ0AIBDAsAP/nuGNAvZoFSzZmjNnyNi/A3gZEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsRcpb0CYiXEAt8AAAAASUVORK5CYII=">
</div>

chromium/third_party/blink/web_tests/fast/replaced/percentage-height-with-dynamic-container-height.html