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

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