src/third_party/WebKit/LayoutTests/fast/regions/auto-size/autoheight-abspos-bottom-align-minheight.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             #content { -webkit-flow-into: flow; }
   6             #region { -webkit-flow-from: flow; position: absolute; bottom: 0px; right: 0px; width: 100px; background-color: green; min-height: 200px; }
   7             #reference { position: absolute; bottom: 0px; right: 0px; width: 100px; background-color: red; height: 200px; }
   8         </style>
   9     </head>
  10     <script src="../../../resources/check-layout.js"></script>
  11     <body onload="checkLayout('#region')">
  12         <p>Test that an auto-height region, absolutely positioned with bottom 0, is correctly sized and positioned when the region has min-height defined.</p>
  13         <p>On success you should see PASS below and a green rectangle in the lower right corner.</p>
  14         <div id="content">
  15             <div style="width: 100px; height: 50px;"></div>
  16             <div style="width: 100px; height: 50px;"></div>
  17             <div style="width: 100px; height: 50px;"></div>
  18         </div>
  19         <div id="reference">
  20         </div>
  21         <div id="region" data-total-y=0></div>
  22         <script>
  23             var referenceOffsetTop = document.getElementById('reference').offsetTop;
  24             document.getElementById("region").setAttribute("data-total-y", referenceOffsetTop);
  25         </script>
  26     </body>
  27 </html>