Blitz - WPT: clip-path-animation-no-inherit-clip-after-remove.html

wpt / css / css-masking / clip-path / animations / clip-path-animation-no-inherit-clip-after-remove.html

/css/css-masking/clip-path/animations/clip-path-animation-no-inherit-clip-after-remove.html

<!DOCTYPE html>
<html class="reftest-wait">
  <head>
    <title>Remove Ancestor Clip to Animated Clip-Path</title>
    <link rel="author" title="Claire Chambers" href="mailto:clchambers@microsoft.com">
    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path">
    <link rel="match" href="clip-path-animation-no-inherit-clip-after-remove-ref.html">
    <meta name="variant" content="?force-repaint">
    <meta name="variant" content="?skip-repaint">
    <script src="/common/reftest-wait.js"></script>
    <style>
      @keyframes clip-path-huge {
        0% {
          clip-path: inset(-100%);
        }
        99% {
          clip-path: inset(-100%);
        }
        /* Last 1% slightly different so animation doesn't get optimized as a NOP */
        100% {
          clip-path: inset(-101%);
        }
      }
      #container {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: black;
        /* ensure #container creates a stacking context */
        will-change: transform;
        /* hide the overflow */
        border-radius: 50px;
        overflow: hidden;
      }
      #container.stage-clip-removed {
        /* removing the overflow clip should reveal the outset */
        border-radius: initial;
        overflow: initial;
      }
      #clipped-element {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: blue;
        animation: clip-path-huge 1000s;
        /* for positioning the outset */
        position: relative;
        /* inherited clip must be expanded by 1px for the filter backdrop */
        filter: blur(1px);
      }
      #container.stage-foreground-repainted #clipped-element {
        background-color: purple;
      }
      #clipped-element-outset {
        left: -10px;
        top: -10px;
        position: absolute;
        border: 10px solid green;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <script src="/common/reftest-wait.js"></script>
    <script src="/web-animations/testcommon.js"></script>
    <p>
      Test passes if there is a green outset around a purple square.
    </p>
    <div id="container">
      <div id="clipped-element">
        <div id="clipped-element-outset">
        </div>
      </div>
    </div>
    <script>
      const container = document.getElementById("container");
      const skipRepaint = location.search.includes("skip-repaint");
      function addAncestorClip() {
        container.classList.add("stage-clip-removed");
      }
      function repaintForeground() {
        container.classList.add("stage-foreground-repainted");
      }
      window.addEventListener('load', async () => {
        /* if skipping repaint, set the updated color immediately so the ref requires no special logic */
        if(skipRepaint) {
          repaintForeground();
        }
        await waitForCompositorReady();
        await runAndWaitForFrameUpdate(addAncestorClip);
        if(!skipRepaint) {
          await runAndWaitForFrameUpdate(repaintForeground);
        }
        takeScreenshot();
      });
    </script>
  </body>
</html>

/css/css-masking/clip-path/animations/clip-path-animation-no-inherit-clip-after-remove-ref.html

<!DOCTYPE html>
<html>
  <head>
    <title>Remove Ancestor Clip to Animated Clip-Path</title>
    <link rel="author" title="Claire Chambers" href="mailto:clchambers@microsoft.com">
    <style>
      @keyframes clip-path-huge {
        0% {
          clip-path: inset(-100%);
        }
        99% {
          clip-path: inset(-100%);
        }
        /* Last 1% slightly different so animation doesn't get optimized as a NOP */
        100% {
          clip-path: inset(-101%);
        }
      }
      #container {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: black;
        /* ensure #container creates a stacking context */
        will-change: transform;
        /* for positioning the outset */
        position: relative;
      }
      #clipped-element {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: purple;
        animation: clip-path-huge 1000s;
        /* inherited clip must be expanded by 1px for the filter backdrop */
        filter: blur(1px);
      }
      #clipped-element-outset {
        left: -10px;
        top: -10px;
        position: absolute;
        border: 10px solid green;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <p>
      Test passes if there is a green outset around a purple square.
    </p>
    <div id="container">
      <div id="clipped-element">
        <div id="clipped-element-outset"></div>
      </div>
    </div>
  </body>
</html>