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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     #image-shape {
   6         float: left;
   7         shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg==");
   8         shape-image-threshold: 0;
   9         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg==");
  10         background-repeat: no-repeat;
  11         width: 100px;
  12         height: 100px;
  13     }
  14
  15     #content {
  16         font: 20px/1 Ahem, sans-serif;
  17         color: green;
  18     }
  19 </style>
  20 </head>
  21 <body>
  22   <p>
  23       This test requires the Ahem font. It uses a 20x20 PNG solid blue image to define a shape-outside
  24       for a "float: left" div. The green content should wrap around the blue square.</p>
  25
  26   <div id="content">
  27       <div id="image-shape"></div>
  28       XX</br>XX
  29 </body>
  30 </html>