src/third_party/WebKit/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-polygon-with-adjustment.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     #content {
   6         -webkit-flow-into: flow;
   7         font: 13px Ahem, sans-serif;
   8         line-height: 15px;
   9     }
  10     .region1 {
  11         -webkit-flow-from: flow;
  12         width: 200px;
  13         height: 200px;
  14         border: 5px solid black;
  15         border-top: 10px solid green;
  16         border-bottom: 15px solid yellow;
  17         margin-top: 10px;
  18     }
  19     .region2 {
  20         -webkit-flow-from: flow;
  21         width: 400px;
  22         height: 400px;
  23         border: 15px solid black;
  24         border-top: 30px solid green;
  25         border-left: 0px;  /* FIXME: Content gets extra left offset when there is left-border on the content box:  http://webkit.org/b/117573 */
  26         margin-top: 10px;
  27         shape-inside: polygon(30px 30px, 380px 380px, 10px 380px);
  28     }
  29 </style>
  30 </head>
  31 <body>
  32 <div class="region1"></div>
  33 <div class="region2"></div>
  34
  35 <div id="content">
  36 The Culture and <p>the Idiran <p>Empire</p> are </p>at war in a galaxy-spanning conflict. Horza, a mercenary <p>capable of altering his appearance</p>at will <p>(a Changer),</p> is assigned the task of retrieving a dispossessed Culture Mind by his Idiran handlers.
  37 </div>
  38
  39 <p style="margin-top: 30px;">Requires Ahem font. There are two regions, there is a polygon shape-inside on the second region. The shape is positioned and it forces the content to be adjusted (pushed down from the top of the shape) inside the shape. The content should fill out the first region and it should fill out the polygon shape on the second region.</p>
  40 <p>Bug <a href="http://webkit.org/b/117599">117599</a>[CSS Shapes][CSS Regions] Respect bottom positioned shapes and content adjustment inside shapes</p>
  41
  42 </body>
  43 </html>