src/third_party/WebKit/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4     <style>
   5         #page {
   6             font: 20px Ahem, sans-serif;
   7             -webkit-font-smoothing: none;
   8             line-height: 20px;
   9         }
  10         .region {
  11             width: 200px;
  12             height: 200px;
  13             border: 2px solid green;
  14         }
  15         #region2 {
  16             margin-top: 10px;
  17             border-bottom: 10px solid yellow;
  18         }
  19         #border1 {
  20             position: absolute;
  21             top: 58px;
  22             left: 58px;
  23             width: 100px;
  24             height: 100px;
  25             border: 2px solid blue;
  26         }
  27         #border2 {
  28             position: absolute;
  29             top: 272px;
  30             left: 33px;
  31             width: 140px;
  32             height: 100px;
  33             border: 2px solid blue;
  34         }
  35         #overflow {
  36             width: 200px;
  37             margin-left: 2px;
  38             margin-top: -10px;
  39         }
  40     </style>
  41 </head>
  42 <body>
  43     <div id="page">
  44         <div id="border1">X X <p>X X X X X<p></div>
  45         <div id="region1" class="region"></div>
  46         <div id="border2">X<p>X X X X</p><p>X X X X</p></div>
  47         <div id="region2" class="region"></div>
  48         <div id="overflow">X X X X X X X</div>
  49     </div>
  50     <p style="margin-top: 20px;">Requires Ahem font. There are two regions with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The block content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box, it should start where the yellow border starts.</p>
  51     <p>Bug <a href="http://webkit.org/b/116252">116252</a> [CSS Regions][CSS Exclusions] shape-inside on regions should respect positioned shapes and overflow</p>
  52 </body>
  53 </html>