<!DOCTYPE html>
<style>
#container {
height: 400px;
text-align: center;
background-color: lime;
}
#child {
height: 100%;
}
</style>
<p>
Tests that a replaced child with percentage height should keep the aspect ratio
when the size of its container changes.
</p>
<div id="container">
<img id="child" src="resources/square-blue-100x100.png" data-expected-width="200" />
</div>
<script src="../../resources/check-layout.js"></script>
<script>
function runTest() {
document.body.offsetTop;
var container = document.getElementById('container');
container.style.height = "200px";
document.body.offsetTop;
checkLayout("#container");
}
window.onload = runTest;
</script>