third_party/WebKit/LayoutTests/http/tests/shapes/shape-outside-dynamic-shape-image-threshold-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="/js-test-resources/ahem.js"></script>
   5 <style>
   6     .container {
   7         width: 200px;
   8         height: 200px;
   9         overflow-wrap: break-word;
  10         border: 2px solid blue;
  11         font: 50px/1 Ahem, sans-serif;
  12         color: green;
  13         overflow: hidden;
  14     }
  15     .shape {
  16         float: left;
  17         position: relative;
  18         width: 100px;
  19         height: 100px;
  20         shape-outside: url('../resources/svg-shape-002.svg');
  21     }
  22     .shape::before {
  23         position: absolute;
  24         display: block;
  25         top: 0; left: 0;
  26         width: 100px;
  27         height: 100px;
  28         background-color: blue;
  29         content: ' ';
  30     }
  31
  32     .threshold25 {
  33         shape-image-threshold: 0.26;
  34     }
  35     .threshold25::before {
  36         width: 75px;
  37     }
  38
  39     .threshold75 {
  40         shape-image-threshold: 0.76;
  41     }
  42     .threshold75::before {
  43         width: 25px;
  44     }
  45 </style>
  46 </head>
  47 <body>
  48     <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>
  49
  50     <p>Setting shape-image-threshold with no prior entry</p>
  51     <div id='add-shape-image-threshold' class='container'><div class='shape threshold25'></div>x x x x x x x x x x</div>
  52
  53     <p>Setting shape-image-threshold with a prior entry</p>
  54     <div id='change-shape-image-threshold' class='container'><div class='shape threshold75'></div>x x x x x x x x x x</div>
  55
  56     <p>Removing shape-image-threshold with a prior entry</p>
  57     <div id='remove-shape-image-threshold' class='container'><div class='shape'></div>x x x x x x x x x x</div>
  58 </body>
  59 </html>