third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang-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-wrapper {
  15         width: 0;
  16         height: 0;
  17     }
  18     .shape {
  19         float: left;
  20         width: 100px;
  21         height: 100px;
  22         background-color: blue;
  23     }
  24
  25     .rectangle50 {
  26         width: 50px;
  27         height: 50px;
  28     }
  29     .rectangle25 {
  30         width: 25px;
  31         height: 25px;
  32     }
  33 </style>
  34 </head>
  35 <body>
  36     <p>When shape-outside is modified dynamically, content affected by the shape's contour should relayout. This test is for shape-outside floats that overhang their parent container. 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>
  37
  38     <p>Setting shape-outside with no prior entry</p>
  39     <div id='add-shape-outside' class='container'><div class='shape-wrapper'><div class='shape rectangle50'></div></div>x x x x x x x x x x</div>
  40
  41     <p>Setting shape-outside with a prior entry</p>
  42     <div id='change-shape-outside' class='container'><div class='shape-wrapper'><div class='shape rectangle25'></div></div>x x x x x x x x x x</div>
  43
  44     <p>Removing shape-outside with a prior entry</p>
  45     <div id='remove-shape-outside' class='container'><div class='shape-wrapper'><div class='shape'></div></div>x x x x x x x x x x</div>
  46 </body>
  47 </html>