third_party/WebKit/LayoutTests/fast/block/positioned-container-changes-height-with-percent-descendant.html

   1 <!DOCTYPE html>
   2 <style>
   3 body {
   4     height: 500px;
   5     position: relative;
   6 }
   7
   8 .container {
   9     position: absolute;
  10     top: 0;
  11     bottom: 0;
  12 }
  13
  14 .a, .b {
  15     position: absolute;
  16     bottom: 0;
  17 }
  18
  19 .a {
  20     top: 0;
  21 }
  22
  23 .b {
  24     top: 100%;
  25 }
  26
  27 .b * {
  28     height: 100%;
  29 }
  30 </style>
  31 <script src="../../resources/check-layout.js"></script>
  32 <body>
  33 <div>crbug.com/468521: When a positioned container changes height and has percent height descedants ensure its children get a layout.</div>
  34 <div id="console"></div>
  35 <div class="container">
  36     <div class="a" data-expected-height=350></div>
  37     <div class="b">
  38         <div>
  39             <img></img>
  40         </div>
  41     </div>
  42 </div>
  43 </body>
  44 <script>
  45     if (window.testRunner)
  46         testRunner.waitUntilDone();
  47     function runTest() {
  48         document.querySelector('.container').style.bottom = '150px';
  49         checkLayout('.a', document.getElementById('console'));
  50         if (window.testRunner)
  51             testRunner.notifyDone();
  52     }
  53     window.onload=function(){
  54         setTimeout(function() { runTest(); }, 0);
  55     }
  56 </script>