src/third_party/WebKit/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     #content {
   6         font: 14px Ahem, sans-serif;
   7         line-height: 16px;
   8         -webkit-flow-into: flow;
   9     }
  10     .region {
  11         width: 300px;
  12         height: 300px;
  13         margin-top: 10px;
  14         border: 1px solid black;
  15         background-color: yellow;
  16         -webkit-flow-from: flow;
  17     }
  18     #region_with_shape_inside {
  19         border: 1px solid black;
  20         shape-inside: rectangle(50px, 0px, 250px, 300px);
  21         overflow: hidden;
  22         background-color: orange;
  23     }
  24 </style>
  25 </head>
  26 <body>
  27
  28 <div class="region"></div>
  29 <div id="region_with_shape_inside" class="region"></div>
  30
  31 <div id="content">
  32     <p>Despite the passage of time, Major Quilan still suffers grief and bereavement from the death of his wife, killed during the Chelgrian civil war that resulted from the Culture's interference.
  33          <p>Quilan is offered the chance to avenge the lost Chelgrians who died in the civil war and is inducted into a plot to strike back at the Culture.</p>
  34          <p>As part of the plot, his
  35             <p>"soulkeeper"</p>
  36             (a device normally used to store its owner's personality upon their death) is equipped with both the mind of a long-dead Chelgrian general and a device...
  37          </p>
  38     </p>
  39 </div>
  40
  41 <p>Requires Ahem font. The content - what contains multiple nested paragraphs - flows into multiple regions, a shape-inside property is applied only on the second region. <br/>
  42 The content should start at the top of the second region inside a 200px (width) and 150px (height) rectangle - which has a 50px left offset - then flow into the original container.</p>
  43 <p>Bug <a href="http://webkit.org/b/112177">112177</a>: block children do not layout inline content correctly in a region with shape-inside set</p>
  44
  45 </body>
  46 </html>