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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     #image-shape {
   6         float: left;
   7         shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAAQ0lEQVRIS2NkYPj/n4EowMhIlDIizQMaNmoxrgAdDWpcIUNcmhlNXHiy6mjiGk1csBAYzU7Y08JoATJagCCFAHWLTAAzb0/tZZmo4AAAAABJRU5ErkJggg==");
   8         shape-image-threshold: 0;
   9         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAAQ0lEQVRIS2NkYPj/n4EowMhIlDIizQMaNmoxrgAdDWpcIUNcmhlNXHiy6mjiGk1csBAYzU7Y08JoATJagCCFAHWLTAAzb0/tZZmo4AAAAABJRU5ErkJggg==");
  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 30x20 PNG image that contains a pair of 10x20
  24       blue rectangles for a "float: left" div. The green content should wrap around the rightmost blue
  25       rectangle</p>
  26
  27   <div id="content">
  28       <div id="image-shape"></div>
  29       XX</br>XX
  30 </body>
  31 </html>