third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-one-pixel.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     #content {
   6         font: 50px/1 Ahem, sans-serif;
   7         -webkit-font-smoothing: antialiased;
   8         color: green;
   9     }
  10     #image-shape {
  11         float: left;
  12         shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2px' height='2px'><rect width='1' height='1' fill='blue'/></svg>");
  13         shape-margin: 500px;
  14         margin-right: 50px;
  15         margin-bottom: 50px;
  16         width: 100px;
  17         height: 50px;
  18     }
  19 </style>
  20 </head>
  21 <body>
  22   <p>The shape-outside in this test is a 2x2 image with only the upper left pixel set. The shape
  23   element's margin-box is and the the shape-margin is big enough (is greater than 150 * sqrt(2))
  24   so that the shape-margin boundary extends beyond the margin-box's bounds. The shape-outside boundary
  25   is clipped to the margin-box, so it's as if the shape-outside was equal to the margin-box.</p>
  26   <div id="content">
  27       <div id="image-shape"></div>
  28       X<br>X
  29   </div>
  30 </body>
  31 </html>