<!DOCTYPE html>
<style>
body {
height: 500px;
position: relative;
}
.container {
position: absolute;
top: 0;
bottom: 0;
}
.a, .b {
position: absolute;
bottom: 0;
}
.a {
top: 0;
}
.b {
top: 100%;
}
.b * {
height: 100%;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body>
<div>crbug.com/468521: When a positioned container changes height and has percent height descedants ensure its children get a layout.</div>
<div id="console"></div>
<div class="container">
<div class="a" data-expected-height=350></div>
<div class="b">
<div>
<img></img>
</div>
</div>
</div>
</body>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function runTest() {
document.querySelector('.container').style.bottom = '150px';
checkLayout('.a', document.getElementById('console'));
if (window.testRunner)
testRunner.notifyDone();
}
window.onload=function(){
setTimeout(function() { runTest(); }, 0);
}
</script>