third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin-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         width: 0;
  17         height: 0;
  18         background-color: blue;
  19     }
  20
  21     .margin25 {
  22         width: 25px;
  23         height: 25px;
  24     }
  25
  26     .margin50 {
  27         width: 50px;
  28         height: 50px;
  29     }
  30 </style>
  31 </head>
  32 <body>
  33     <p>When shape-margin 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>
  34
  35     <p>Setting shape-margin with no prior entry</p>
  36     <div id='add-shape-margin' class='container'><div class='shape margin50'></div>x x x x x x x x x x</div>
  37
  38     <p>Setting shape-margin with a prior entry</p>
  39     <div id='change-shape-margin' class='container'><div class='shape margin25'></div>x x x x x x x x x x</div>
  40
  41     <p>Removing shape-margin with a prior entry</p>
  42     <div id='remove-shape-margin' class='container'><div class='shape'></div>x x x x x x x x x x</div>
  43 </body>
  44 </html>