src/third_party/WebKit/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content-basic-overflow-shape-top-offset.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4     <style>
   5         #rectangle {
   6             font: 20px Ahem, sans-serif;
   7             -webkit-font-smoothing: none;
   8             line-height: 20px;
   9             -webkit-flow-into: flow;
  10         }
  11         #region {
  12             -webkit-flow-from: flow;
  13             width: 200px;
  14             height: 200px;
  15             shape-inside: rectangle(50px, 50px, 100px, 100px);
  16             border: 2px solid green;
  17         }
  18         #border {
  19             position: absolute;
  20             top: 58px;
  21             left: 58px;
  22             width: 100px;
  23             height: 100px;
  24             border: 2px solid blue;
  25         }
  26     </style>
  27 </head>
  28 <body>
  29     <div id="rectangle">
  30        X X X X X X X X X X X X X X X X X X X X X X X
  31     </div>
  32
  33     <div id="page">
  34         <div id="border"></div>
  35         <div id="region"></div>
  36     </div>
  37     <p style="margin-top: 100px;">Requires Ahem font. The shape-inside on the region is illustrated by the blue rectangle. The content should wrap inside the the blue rectangle, the overflow should start on the left under the content box.</p>
  38     <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>
  39 </body>
  40 </html>