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

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4     <style>
   5         #rectangle {
   6             font: 20px Ahem, sans-serif;
   7             -webkit-font-smoothing: none;
   8             -webkit-flow-into: rectangle;
   9         }
  10
  11         .region { -webkit-flow-from: rectangle; }
  12
  13         #region1 {
  14             width: 180px;
  15             height: 100px;
  16             border: 1px solid green;
  17             shape-inside: rectangle(0, 0, 130px, 100px);
  18             margin-top: 10px;
  19         }
  20         #region2 {
  21             width: 300px;
  22             height: 150px;
  23             border: 1px solid green;
  24             shape-inside: rectangle(0, 0, 220px, 150px);
  25             margin-top: 60px;
  26         }
  27         #region3 {
  28             width: 300px;
  29             height: 50px;
  30             border: 1px solid green;
  31             margin-top: 60px;
  32         }
  33     </style>
  34 </head>
  35 <body>
  36     <div id="rectangle">
  37         X X X X X X X X X X X X X X X X X X X X X X X X
  38         X X X X X X X X X X X X X X X X X X X X X X X X
  39         X X X X X X X X X X X X X X X X X X X X X X X X
  40    </div>
  41     <div id="page">
  42         <div id="region1" class="region"></div>
  43         <div id="region2" class="region"></div>
  44         <div id="region3" class="region"></div>
  45     </div>
  46     <p>Requires Ahem font. Two different -shape-inside property are applied to the first and second region. The third region is a simple region without -shape-inside.
  47     The inline content should flow through the regions and the shape-insides should be applied to the first two regions thus the content should be only 130px wide in the first (original width: 180px) and only 220px wide in the second (original width: 300px) region.</p>
  48     <p>Bug <a href="http://webkit.org/b/115456">115456</a>: [CSS Regions][CSS Exclusions] Shape-inside on regions should respect region borders and paddings</p>
  49 </body>
  50 </html>