src/third_party/WebKit/LayoutTests/http/tests/shapes/shape-outside-dynamic-shape-image-threshold-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         position: relative;
  17         width: 100px;
  18         height: 100px;
  19         shape-outside: url('../resources/svg-shape-002.svg');
  20     }
  21     .shape::before {
  22         position: absolute;
  23         display: block;
  24         top: 0; left: 0;
  25         width: 100px;
  26         height: 100px;
  27         background-color: blue;
  28         content: ' ';
  29     }
  30
  31     .threshold25 {
  32         shape-image-threshold: 0.26;
  33     }
  34     .threshold25::before {
  35         width: 75px;
  36     }
  37
  38     .threshold75 {
  39         shape-image-threshold: 0.76;
  40     }
  41     .threshold75::before {
  42         width: 25px;
  43     }
  44 </style>
  45 </head>
  46 <body>
  47     <p>When shape-image-threshold 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 rectangle in the upper left. This test requires the Ahem font.</p>
  48
  49     <p>Setting shape-image-threshold with no prior entry</p>
  50     <div id='add-shape-image-threshold' class='container'><div class='shape threshold25'></div>x x x x x x x x x x</div>
  51
  52     <p>Setting shape-image-threshold with a prior entry</p>
  53     <div id='change-shape-image-threshold' class='container'><div class='shape threshold75'></div>x x x x x x x x x x</div>
  54
  55     <p>Removing shape-image-threshold with a prior entry</p>
  56     <div id='remove-shape-image-threshold' class='container'><div class='shape'></div>x x x x x x x x x x</div>
  57 </body>
  58 </html>