diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-masking')
9 files changed, 401 insertions, 17 deletions
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit-ref.html new file mode 100644 index 0000000000..5b1cf39729 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + clip-path: circle(35px at 10px 10px); + } +</style> + +<body> + <div class="container"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit.html new file mode 100644 index 0000000000..50f314da34 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> +<link rel="match" href="clip-path-animation-inherit-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + body { + clip-path: circle(50% at 0 0); + } + + @keyframes clippath { + 0% { + clip-path: circle(20px at 20px 20px); + } + + 100% { + clip-path: inherit; + } + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div class="container"></div> + + <script> + waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-initial.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-initial.html new file mode 100644 index 0000000000..45e7714328 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-initial.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> +<link rel="match" href="clip-path-animation-none-ref.html"> +<!-- + This test verifies that + 1) clip-path: initial in an animation does not cause a crash + 2) that clip-path: initial displays correctly for an animation +--> +<style> + @keyframes clippath { + 0% { + clip-path: inset(25% 25%); + } + + 100% { + clip-path: initial; + } + } + + .target { + animation: clippath 20s steps(2, jump-end) -9.999s; + background-color: blue; + width: 100px; + height: 100px; + } + + /* + * Ensure that clip-path is truly none, and not a rectangle that + * encompasses area of the parent + */ + .outofbounds { + position: absolute; + top: 200px; + left: 200px; + height: 10px; + width: 10px; + background-color: blue + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div class="target"> + <div class="outofbounds"></div> + </div> + <script> + waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert-layer.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert-layer.html new file mode 100644 index 0000000000..cc23c96e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert-layer.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> +<link rel="match" href="clip-path-animation-none-ref.html"> +<!-- + This test verifies that + 1) clip-path: revert-layer in an animation does not cause a crash + 2) that clip-path: revert-layer displays correctly for an animation +--> +<style> + @keyframes clippath { + 0% { + clip-path: inset(25% 25%); + } + + 100% { + clip-path: revert-layer; + } + } + + .target { + animation: clippath 20s steps(2, jump-end) -9.999s; + background-color: blue; + width: 100px; + height: 100px; + } + + /* + * Ensure that clip path is truly none, and not a rectangle that + * encompasses area of the parent + */ + .outofbounds { + position: absolute; + top: 200px; + left: 200px; + height: 10px; + width: 10px; + background-color: blue + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div class="target"> + <div class="outofbounds"></div> + </div> + <script> + waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert.html new file mode 100644 index 0000000000..8599755d33 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> +<link rel="match" href="clip-path-animation-none-ref.html"> +<!-- + This test verifies that + 1) clip-path: revert in an animation does not cause a crash + 2) that clip-path: revert displays correctly for an animation +--> +<style> + @keyframes clippath { + 0% { + clip-path: inset(25% 25%); + } + + 100% { + clip-path: revert; + } + } + + .target { + animation: clippath 20s steps(2, jump-end) -9.999s; + background-color: blue; + width: 100px; + height: 100px; + } + + /* + * Ensure that clip path is truly none, and not a rectangle that + * encompasses area of the parent + */ + .outofbounds { + position: absolute; + top: 200px; + left: 200px; + height: 10px; + width: 10px; + background-color: blue + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div class="target"> + <div class="outofbounds"></div> + </div> + <script> + waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-unset.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-unset.html new file mode 100644 index 0000000000..655215dc7f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-unset.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> +<link rel="match" href="clip-path-animation-none-ref.html"> +<!-- + This test verifies that + 1) clip-path: unset in an animation does not cause a crash + 2) that clip-path: unset displays correctly for an animation +--> +<style> + @keyframes clippath { + 0% { + clip-path: inset(25% 25%); + } + + 100% { + clip-path: unset; + } + } + + .target { + animation: clippath 20s steps(2, jump-end) -9.999s; + background-color: blue; + width: 100px; + height: 100px; + } + + /* + * Ensure that clip-path: none is truly none, and not a rectangle that + * encompasses area of the parent + */ + .outofbounds { + position: absolute; + top: 200px; + left: 200px; + height: 10px; + width: 10px; + background-color: blue + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div class="target"> + <div class="outofbounds"></div> + </div> + <script> + waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-interpolation-discrete.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-interpolation-discrete.html new file mode 100644 index 0000000000..9c14372006 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-interpolation-discrete.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>clip-path interpolation with allow-discrete</title> + <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> + <meta name="assert" content="clip-path supports animation with allow-discrete."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <style> + .parent { + clip-path: circle(farthest-side); + } + .target { + clip-path: circle(10px); + } + </style> + <body> + <script> + 'use strict'; + + test_interpolation({ + property: 'clip-path', + behavior: 'allow-discrete', + from: 'circle(10px)', + to: 'inset(20px)', + }, [ + {at: -1, expect: 'circle(10px)'}, + {at: 0, expect: 'circle(10px)'}, + {at: 0.4, expect: 'circle(10px)'}, + {at: 0.5, expect: 'inset(20px)'}, + {at: 1, expect: 'inset(20px)'}, + {at: 1.5, expect: 'inset(20px)'}, + ]); + + test_interpolation({ + property: 'clip-path', + behavior: 'allow-discrete', + from: 'ellipse()', + to: 'padding-box', + }, [ + {at: -1, expect: 'ellipse()'}, + {at: 0, expect: 'ellipse()'}, + {at: 0.4, expect: 'ellipse()'}, + {at: 0.5, expect: 'padding-box'}, + {at: 1, expect: 'padding-box'}, + {at: 1.5, expect: 'padding-box'}, + ]); + + test_interpolation({ + property: 'clip-path', + behavior: 'allow-discrete', + from: neutralKeyframe, + to: 'none', + }, [ + {at: -1, expect: 'circle(10px)'}, + {at: 0, expect: 'circle(10px)'}, + {at: 0.4, expect: 'circle(10px)'}, + {at: 0.5, expect: 'none'}, + {at: 1, expect: 'none'}, + {at: 1.5, expect: 'none'}, + ]); + + test_interpolation({ + property: 'clip-path', + behavior: 'allow-discrete', + from: 'initial', + to: 'circle()', + }, [ + {at: -1, expect: 'none'}, + {at: 0, expect: 'none'}, + {at: 0.4, expect: 'none'}, + {at: 0.5, expect: 'circle()'}, + {at: 1, expect: 'circle()'}, + {at: 1.5, expect: 'circle()'}, + ]); + + test_interpolation({ + property: 'clip-path', + behavior: 'allow-discrete', + from: 'inherit', + to: 'circle()', + }, [ + {at: -0.1, expect: 'circle(farthest-side)'}, + {at: 0, expect: 'circle(farthest-side)'}, + {at: 0.4, expect: 'circle(farthest-side)'}, + {at: 0.5, expect: 'circle()'}, + {at: 1, expect: 'circle()'}, + {at: 1.5, expect: 'circle()'}, + ]); + + test_interpolation({ + property: 'clip-path', + behavior: 'allow-discrete', + from: 'unset', + to: 'inset(10%)', + }, [ + {at: -0.1, expect: 'none'}, + {at: 0, expect: 'none'}, + {at: 0.4, expect: 'none'}, + {at: 0.5, expect: 'inset(10%)'}, + {at: 1, expect: 'inset(10%)'}, + {at: 1.5, expect: 'inset(10%)'}, + ]); + + test_interpolation({ + property: 'clip-path', + behavior: 'allow-discrete', + from: 'stroke-box', + to: 'url("abc")', + }, [ + {at: -0.1, expect: 'stroke-box'}, + {at: 0, expect: 'stroke-box'}, + {at: 0.4, expect: 'stroke-box'}, + {at: 0.5, expect: 'url("abc")'}, + {at: 1, expect: 'url("abc")'}, + {at: 1.5, expect: 'url("abc")'}, + ]); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html index f647c1af59..5f6bb7299f 100644 --- a/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html @@ -3,21 +3,11 @@ <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> <link rel="match" href="two-clip-path-animation-diff-length1-ref.html"> <style> - .container { + #container { width: 100px; height: 100px; background-color: green; - animation: clippath2 10s step-end, clippath1 0.001s; - } - - @keyframes clippath1 { - 0% { - clip-path: circle(10% at 50% 50%); - } - - 100% { - clip-path: circle(50% at 50% 50%); - } + animation: clippath2 10s step-end; } @keyframes clippath2 { @@ -34,15 +24,20 @@ <script src="../../../../web-animations/testcommon.js"></script> <body> - <div class="container"></div> + <div id="container"></div> <script> // This test ensures that if we have two different-length animations, when // the one with higher compositing order finishes, the other one would still // run normally. - const animations = document.getAnimations(); - animations[1].finished.then(() => { - takeScreenshot(); + document.getAnimations()[0].ready.then(() => { + document.getElementById("container").animate( + [ + { clipPath: "circle(10% at 50% 50%)" }, + { clipPath: "circle(50% at 50% 50%)" }, + ], + 100, + ).finished.then(takeScreenshot); }); </script> </body> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-computed.html b/testing/web-platform/tests/css/css-masking/parsing/mask-computed.html index 28fc38defa..586683dd5d 100644 --- a/testing/web-platform/tests/css/css-masking/parsing/mask-computed.html +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-computed.html @@ -10,7 +10,7 @@ <script src="/css/support/computed-testcommon.js"></script> </head> <body> -<div id="target"></div> +<div id="target" style="display:none"></div> <script> // value: <mask-layer># // <mask-layer> = |