third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-image-set.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     #image-shape-outside {
   6         float: left;
   7         /* The shape-outisde image's width is smaller than the float's width (120 < 150) to make it
   8            clear that the shape-outside defines the starting location for the text, not the float.
   9         */
  10         shape-outside: -webkit-image-set(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120px' height='50px'><rect x='0' y='0' width='120' height='50' fill='blue'/></svg>") 1x);
  11         background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120px' height='50px'><rect x='0' y='0' width='120' height='50' fill='blue'/></svg>");
  12         background-repeat: no-repeat;
  13         width: 150px;
  14         height: 50px;
  15     }
  16 </style>
  17 </head>
  18 <body>
  19   <p>The green "Hello World" should appear to the right of the blue rectangle.</p>
  20   <div style="color: green">
  21       <div id="image-shape-outside"></div>
  22       Hello World
  23   </div>
  24 </body>
  25 </html>