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

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