src/third_party/WebKit/LayoutTests/fast/regions/shape-inside/shape-inside-on-multiple-regions-with-negative-shape-top-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 article { font: 20px/1 Ahem, sans-serif; }
   6 .regions {
   7     width: 260px;
   8     height: 200px;
   9     margin: 0px 20px 20px;
  10     background-color: #b0dcff;
  11     shape-inside: rectangle(10px, -20px, 100%, 50%);
  12 }
  13 .overflow {
  14     margin-top: -20px;
  15     margin-left: 20px;
  16 }
  17 </style>
  18 </head>
  19 <body>
  20 <article>
  21     <div class="regions">
  22         X X X X X X X X X X X X X X X X X X X X X X X X
  23     </div>
  24     <div class="regions">
  25         X X X X X X X X X X X X X X X X X X X X X X X X
  26     </div>
  27     <div class="overflow">
  28        X X X X X
  29     </div>
  30 </article>
  31 <p style="margin-top: 20px">
  32 Requires Ahem font. We have two regions, a rectangle shape with negative top coordinate and 10px left offset is applied on the regions.
  33 The content should flow from the first shape to the second shape. The overflow should be pushed down below the content box.
  34 </p>
  35 <p>Bug <a href="http://webkit.org/b/123103">123103</a>: [CSS Shapes][CSS Regions] Don't apply shape-inside when we have multiple auto-height regions and the height is not resolved</p>
  36 </body>
  37 </html>