third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin.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-margin .shape');
  10         el.className = 'shape margin50';
  11
  12         el = document.querySelector('#change-shape-margin .shape');
  13         el.className = 'shape margin25';
  14
  15         el = document.querySelector('#remove-shape-margin .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         -webkit-shape-outside: inset(0 100% 100% 0);
  35     }
  36     .shape::before {
  37         position: absolute;
  38         display: block;
  39         top: 0px; left: 0px;
  40         width: 0;
  41         height: 0;
  42         background-color: blue;
  43         content: ' ';
  44     }
  45
  46     .margin25 {
  47         -webkit-shape-margin: 25px;
  48     }
  49     .margin25::before {
  50         width: 25px;
  51         height: 25px;
  52     }
  53
  54     .margin50 {
  55         -webkit-shape-margin: 50px;
  56     }
  57     .margin50::before {
  58         width: 50px;
  59         height: 50px;
  60     }
  61 </style>
  62 </head>
  63 <body>
  64     <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>
  65
  66     <p>Setting shape-margin with no prior entry</p>
  67     <div id='add-shape-margin' class='container'><div class='shape'></div>x x x x x x x x x x</div>
  68
  69     <p>Setting shape-margin with a prior entry</p>
  70     <div id='change-shape-margin' class='container'><div class='shape margin50'></div>x x x x x x x x x x</div>
  71
  72     <p>Removing shape-margin with a prior entry</p>
  73     <div id='remove-shape-margin' class='container'><div class='shape margin50'></div>x x x x x x x x x x</div>
  74 </body>
  75 </html>