third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     .container {
   6         width: 200px;
   7         height: 200px;
   8         overflow-wrap: break-word;
   9         border: 2px solid blue;
  10         font: 50px/1 Ahem, sans-serif;
  11         color: green;
  12         overflow: hidden;
  13     }
  14     .shape {
  15         float: left;
  16         position: relative;
  17         width: 100px;
  18         height: 100px;
  19         background-color: blue;
  20     }
  21
  22     .rectangle50 {
  23         width: 50px;
  24         height: 50px;
  25     }
  26
  27     .rectangle25 {
  28         width: 25px;
  29         height: 25px;
  30     }
  31 </style>
  32 </head>
  33 <body>
  34     <p>When shape-outside is modified dynamically, content affected by the shape's contour should relayout. For each test, you should see green blocks separated by white space, wrapping around a blue square in the upper left. This test requires the Ahem font.</p>
  35
  36     <p>Setting shape-outside with no prior entry</p>
  37     <div id='add-shape-outside' class='container'><div class='shape rectangle50'></div>x x x x x x x x x x</div>
  38
  39     <p>Setting shape-outside with a prior entry</p>
  40     <div id='change-shape-outside' class='container'><div class='shape rectangle25'></div>x x x x x x x x x x</div>
  41
  42     <p>Removing shape-outside with a prior entry</p>
  43     <div id='remove-shape-outside' class='container'><div class='shape'></div>x x x x x x x x x x</div>
  44 </body>
  45 </html>