src/third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-polygon-zero-vertex.html

   1 <!DOCTYPE html>
   2 <style>
   3 .container {
   4     width: 400px;
   5     text-align: right;
   6     font: 50px/1 Ahem, sans-serif;
   7     color: rgba(0, 255, 0, 0.5);
   8 }
   9
  10 .shape {
  11     float: right;
  12     width: 200px;
  13     height: 200px;
  14     shape-outside: content-box polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%);
  15     background-image: url("data:image/svg+xml;UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><polygon points='0,0 200,0 200,200 100,200 100,100, 0,100' fill='blue'/></svg>");
  16 }
  17 </style>
  18 <p>The green rectangles should wrap around the left edge of the blue shape.</p>
  19 <div class='container'>
  20     <div class='shape'></div>
  21     X<br>X<br>X<br>X<br>X
  22 </div>