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

   1 <!DOCTYPE html>
   2 <script src="../../../resources/ahem.js"></script>
   3 <style>
   4 .container {
   5     width: 400px;
   6     text-align: right;
   7     font: 50px/1 Ahem, sans-serif;
   8     color: rgba(0, 255, 0, 0.5);
   9 }
  10
  11 .shape {
  12     float: right;
  13     width: 200px;
  14     height: 200px;
  15     shape-outside: content-box polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%);
  16     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>");
  17 }
  18 </style>
  19 <p>The green rectangles should wrap around the left edge of the blue shape.</p>
  20 <div class='container'>
  21     <div class='shape'></div>
  22     X<br>X<br>X<br>X<br>X
  23 </div>