wpt/css/css-masking/clip-path/animations/clip-path-animation-no-inherit-clip-after-remove.html at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!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>