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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script>
   5     window.onload = function() {
   6         // fetch offsetTop to force a layout
   7         document.body.offsetTop;
   8
   9         var el = document.querySelector('#add-shape-outside .shape');
  10         el.className = 'shape rectangle50';
  11
  12         el = document.querySelector('#change-shape-outside .shape');
  13         el.className = 'shape rectangle25';
  14
  15         el = document.querySelector('#remove-shape-outside .shape');
  16         el.className = 'shape';
  17     }
  18 </script>
  19 <style>
  20     .container {
  21         width: 200px;
  22         height: 200px;
  23         overflow-wrap: break-word;
  24         border: 2px solid blue;
  25         font: 50px/1 Ahem, sans-serif;
  26         color: green;
  27         overflow: hidden;
  28     }
  29     .shape {
  30         float: left;
  31         position: relative;
  32         width: 100px;
  33         height: 100px;
  34     }
  35     .shape::before {
  36         position: absolute;
  37         display: block;
  38         top: 0px; left: 0px;
  39         width: 100%;
  40         height: 100%;
  41         background-color: blue;
  42         content: ' ';
  43     }
  44
  45     .rectangle50 {
  46         shape-outside: polygon(0px 0px, 50px 0px, 50px 50px, 0px 50px);
  47     }
  48     .rectangle50::before {
  49         width: 50px;
  50         height: 50px;
  51     }
  52
  53     .rectangle25 {
  54         shape-outside: polygon(0px 0px, 25px 0px, 25px 25px, 0px 25px);
  55     }
  56     .rectangle25::before {
  57         width: 25px;
  58         height: 25px;
  59     }
  60 </style>
  61 </head>
  62 <body>
  63     <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>
  64
  65     <p>Setting shape-outside with no prior entry</p>
  66     <div id='add-shape-outside' class='container'><div class='shape'></div>x x x x x x x x x x</div>
  67
  68     <p>Setting shape-outside with a prior entry</p>
  69     <div id='change-shape-outside' class='container'><div class='shape rectangle50'></div>x x x x x x x x x x</div>
  70
  71     <p>Removing shape-outside with a prior entry</p>
  72     <div id='remove-shape-outside' class='container'><div class='shape rectangle50'></div>x x x x x x x x x x</div>
  73 </body>
  74 </html>