| <!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> |
