third_party/WebKit/LayoutTests/fast/block/positioning/positioned-movement-layout-when-height-changes.html

   1 <!DOCTYPE HTML>
   2 <style>
   3     body {
   4         margin: 0;
   5     }
   6     #container {
   7         position: absolute;
   8         top: 0px;
   9         bottom: 0px;
  10         left: 0px;
  11         right: 0px;
  12         overflow: hidden;
  13     }
  14     #test {
  15         position: absolute;
  16         top: 0px;
  17         bottom: 500px;
  18         left: 140px;
  19         right: 540px;
  20         overflow: hidden;
  21     }
  22     .contents {
  23         display: inline-block;
  24         background-color: green;
  25         height: 100px;
  26         width: 100px;
  27         overflow: hidden;
  28     }
  29 </style>
  30 <script>
  31
  32     function addChildren(test)
  33     {
  34         for (i = 0; i < 20; i++) {
  35             box = document.createElement("div");
  36             box.setAttribute('class', 'contents');
  37             box.setAttribute('id', i);
  38             test.appendChild(box);
  39         }
  40     }
  41
  42     function runTest()
  43     {
  44         test = document.getElementById("test");
  45         addChildren(test);
  46
  47         for (i = 0; i < 20; i++) {
  48             box = document.getElementById(i);
  49             test.removeChild(box);
  50         }
  51         document.body.offsetTop;
  52
  53         addChildren(test);
  54         document.body.offsetTop;
  55
  56         test.style['top'] = '300px';
  57     }
  58     window.onload = runTest;
  59 </script>
  60 <div id="top">
  61 <div id="container">
  62     <div id="test"></div>
  63 </div>
  64 </div>
  65 Tests positioned movement layout when its height has changed.