third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang.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-wrapper {
  30         width: 0;
  31         height: 0;
  32     }
  33     .shape {
  34         float: left;
  35         position: relative;
  36         width: 100px;
  37         height: 100px;
  38     }
  39     .shape::before {
  40         position: absolute;
  41         display: block;
  42         top: 0px; left: 0px;
  43         width: 100%;
  44         height: 100%;
  45         background-color: blue;
  46         content: ' ';
  47     }
  48
  49     .rectangle50 {
  50         shape-outside: polygon(0px 0px, 50px 0px, 50px 50px, 0px 50px);
  51     }
  52     .rectangle50::before {
  53         width: 50px;
  54         height: 50px;
  55     }
  56
  57     .rectangle25 {
  58         shape-outside: polygon(0px 0px, 25px 0px, 25px 25px, 0px 25px);
  59     }
  60     .rectangle25::before {
  61         width: 25px;
  62         height: 25px;
  63     }
  64 </style>
  65 </head>
  66 <body>
  67     <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>
  68
  69     <p>Setting shape-outside with no prior entry</p>
  70     <div id='add-shape-outside' class='container'><div class='shape-wrapper'><div class='shape'></div></div>x x x x x x x x x x</div>
  71
  72     <p>Setting shape-outside with a prior entry</p>
  73     <div id='change-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>
  74
  75     <p>Removing shape-outside with a prior entry</p>
  76     <div id='remove-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>
  77 </body>
  78 </html>