tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

clip-path-svg-invalidate.html (1046B)

      1 <!doctype html>
      2 <html class="reftest-wait">
      3 <title>Clip Path: invalidate composited clip-path via SVG</title>
      4 <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
      5 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
      6 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path">
      7 <link rel="match" href="clip-path-svg-invalidate-ref.html">
      8 <script src="/common/reftest-wait.js"></script>
      9 
     10 <style>
     11  body {
     12    margin: 0;
     13  }
     14  div {
     15    height: 500px;
     16    background: black;
     17    clip-path: url(#clip);
     18    will-change: transform;
     19  }
     20  svg {
     21    width: 0;
     22    height: 0;
     23  }
     24 </style>
     25 
     26 <div></div>
     27 
     28 <svg viewBox="0 0 1 1">
     29  <clipPath id="clip" clipPathUnits="objectBoundingBox">
     30    <polygon points="0,0 0.5,0.5 1,0" />
     31  </clipPath>
     32 </svg>
     33 
     34 <script>
     35  const polygon = document.querySelector("polygon");
     36  const points = "0,0 0.5,1 1,0";
     37  requestAnimationFrame(() => requestAnimationFrame(() => {
     38      polygon.setAttribute("points", points);
     39      takeScreenshot();
     40  }));
     41 </script>