src/third_party/WebKit/LayoutTests/fast/regions/auto-size/autoheight-two-pass-layout-complex-001.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <style>
   5             #content { -webkit-flow-into: flow; font: 16px/1.25 monospace; }
   6             #regionsContainer { position: absolute; width: 250px; top: 200px; }
   7             .region { -webkit-flow-from: flow; }
   8             #region1 { width: 200px; height: auto; background-color: orange; }
   9             #region2 { width: 200px; position: absolute; height: 100%; left: 250px; top: 0px; background-color: green; }
  10             #region3 { width: 200px; height: auto; position: absolute; left: 500px; top: 200px; background-color: blue; }
  11             p { margin: 0; }
  12         </style>
  13     </head>
  14     <script src="../../../resources/check-layout.js"></script>
  15     <body onload="checkLayout('#region3')">
  16         <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=103738">WebKit Bug 103738</a> [CSS Regions] min-max height will not trigger a relayout when set on a region with auto-height</p>
  17         <p>The test flows content in 3 regions, orange region and blue region have auto height, green region's height depends on orange region's height.</p>
  18         <p>The test passes if all regions have the same height.</p>
  19         <div id="content">
  20             <p style="-webkit-region-break-after: always; color: orange;">
  21                 Content in region1.
  22                 Content in region1.
  23                 Content in region1.
  24                 Content in region1.
  25                 Content in region1
  26             </p>
  27             <p style="color:green;">
  28                 Content in region2.
  29                 Content in region2.
  30                 Content in region2.
  31                 Content in region2.
  32                 Content in region2.
  33             </p>
  34         </div>
  35         <div id="regionsContainer">
  36             <!-- Orange region, first region in chain, has auto height -->
  37             <div id="region1" class="region"></div>
  38             <!-- Green region, second region in chain, its height depends on orange region's height -->
  39             <div id="region2" class="region"></div>
  40         </div>
  41         <!-- Blue region, third region in chain, has auto height -->
  42         <div id="region3" class="region" data-expected-height=100></div>
  43         <script type="text/javascript">
  44             document.body.offsetTop;
  45             // Max height change determines layout for blue region.
  46             // The value is big enough to accomodate the second p.
  47             document.getElementById("region3").style.maxHeight = "200px";
  48         </script>
  49     </body>
  50 </html>
  51