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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     #content {
   6         font: 13px Ahem, sans-serif;
   7         line-height: 15px;
   8     }
   9     .region1 {
  10         width: 200px;
  11         height: 200px;
  12         border: 5px solid black;
  13         border-top: 10px solid green;
  14         border-bottom: 15px solid yellow;
  15         margin-top: 10px;
  16     }
  17     .region2 {
  18         width: 400px;
  19         height: 400px;
  20         border: 15px solid black;
  21         margin-top: 10px;
  22         border-top: 30px solid green;
  23         shape-inside: polygon(30px 30px, 380px 380px, 10px 380px);
  24     }
  25 </style>
  26 </head>
  27 <body>
  28 <div id="content">
  29     <div class="region1">
  30         The Culture and the Idiran Empire are at war in a galaxy-spanning conflict. Horza, a mercenary capable of altering his appearance at will (a Changer), is
  31     </div>
  32     <div class="region2">
  33         assigned the task of retrieving a dispossessed Culture Mind by his Idiran handlers. The Mind, while fleeing attacking Idirans who consider its existence an abomination, has taken...
  34     </div>
  35 </div>
  36
  37 <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>
  38 <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>
  39 </body>
  40 </html>