src/third_party/WebKit/LayoutTests/fast/regions/region-with-float-parent.html

   1 <!DOCTYPE html>
   2 <style>
   3     .content {
   4         display: inline-block;
   5         width: 100px;
   6         height: 100px;
   7         background-color: salmon;
   8     }
   9
  10     .region { border: 5px solid pink; }
  11     .regionParent { float: left; border: 5px solid blue; }
  12 </style>
  13 <script src="../../resources/check-layout.js"></script>
  14 <body>
  15     <p>Test that the width of a floating block is correctly computed when its child is a region</p>
  16     <p>On success, you will see a series of PASS below.</p>
  17
  18     <div class="container" style="height: 150px;">
  19         <div class="content" style="-webkit-flow-into: flow1;"></div>
  20         <div class="regionParent" data-expected-width="220">
  21             <div class="region" style="-webkit-flow-from: flow1; width: 200px;"></div>
  22         </div>
  23     </div>
  24
  25     <div class="container" style="height: 150px;">
  26         <div class="content" style="-webkit-flow-into: flow2;"></div>
  27         <div class="regionParent" data-expected-width="220">
  28             <div class="region" style="-webkit-flow-from: flow2;  min-width: 200px;"></div>
  29         </div>
  30     </div>
  31
  32     <div class="container" style="height: 250px;">
  33         <div class="content" style="-webkit-flow-into: flow3;"></div>
  34         <div class="content" style="-webkit-flow-into: flow3;"></div>
  35         <div class="content" style="-webkit-flow-into: flow3;"></div>
  36         <div class="regionParent" data-expected-width="220">
  37             <div class="region" style="-webkit-flow-from: flow3; max-width: 200px;"></div>
  38         </div>
  39     </div>
  40
  41     <script>checkLayout(".regionParent");</script>
  42 </body>