src/third_party/WebKit/LayoutTests/fast/regions/auto-size/abspos-autoheight-nested-region.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             #content1 {
   6                 -webkit-flow-into: flow1;
   7             }
   8
   9             #region1 {
  10                 -webkit-flow-from: flow1;
  11                 border: 5px solid blue;
  12                 width: 110px;
  13                 position: absolute;
  14                 top: 100px;
  15                 left: 50px;
  16             }
  17
  18             #content2 {
  19                 -webkit-flow-into: flow2;
  20                 width: 50px;
  21                 height: 50px;
  22                 background-color: green;
  23             }
  24
  25             #region2 {
  26                 -webkit-flow-from: flow2;
  27                 border: 5px solid green;
  28                 position: absolute;
  29                 top: 25px;
  30                 left: 25px;
  31             }
  32         </style>
  33         <script src="../../../resources/check-layout.js"></script>
  34     </head>
  35     <body onload="checkLayout('#region1, #region2')">
  36         <p>Test that an auto-height region taking content from a namedflow that contains another absolutely positioned auto-height region has its height computed properly.</p>
  37         <p>On success, you should see a green square inside a blue border rectangle and two PASS below.</p>
  38         <div id="content1">
  39             <div style="width: 110px; height: 110px;"></div>
  40             <div id="region2" data-expected-width=60 data-expected-height=60></div>
  41         </div>
  42         <div id="content2"></div>
  43         <div id="region1" data-expected-height=120></div>
  44     </body>
  45 </html>