src/third_party/WebKit/LayoutTests/fast/regions/shape-inside/shape-inside-on-multiple-regions-bottom-adjustment.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .region {
   6     width: 100px;
   7     height: 100px;
   8     margin-top: 10px;
   9     background-color: #CCD8D4;
  10     -webkit-shape-inside: polygon(25px 0px, 100px 0px, 50px 100px);
  11 }
  12
  13 .content {
  14     font: 20px/1 Ahem, sans-serif;
  15     -webkit-flow-into: flow;
  16 }
  17
  18 .region { -webkit-flow-from: flow; }
  19 </style>
  20 </head>
  21
  22 <body>
  23     <div class="content">X X X X X X X X X X</div>
  24
  25     <div class="page">
  26         <div class="region"></div>
  27         <div class="region"></div>
  28     </div>
  29     <p style="margin-top: 40px;">
  30         Requires Ahem font. We have two regions, an up-side-down triangular shape is applied on the regions.
  31         The content should flow from the first shape to the second shape. The overflow should be pushed down below the content box.
  32     </p>
  33     <p>Issue <a href="https://code.google.com/p/chromium/issues/detail?id=333417">333417</a>: [CSS Regions][CSS Shapes] ASSERTION FAILED: m_segmentRanges.size() < m_segments.size()</p>
  34 </body>
  35 </html>