diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-masking/clip-path/animations | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-masking/clip-path/animations')
71 files changed, 2108 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function-ref.html new file mode 100644 index 0000000000..49732d361b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> + +<style> + .green { + background-color: green; + width: 200px; + height: 200px; + clip-path: inset(10.59741054822%); + } + +</style> + +<body> + <div class="green"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function-reverse-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function-reverse-ref.html new file mode 100644 index 0000000000..edaf92cb8a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function-reverse-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> + +<style> + .green { + background-color: green; + width: 200px; + height: 200px; + clip-path: inset(6.850317545375803%); + } + +</style> + +<body> + <div class="green"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function-reverse.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function-reverse.html new file mode 100644 index 0000000000..5346a4c224 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function-reverse.html @@ -0,0 +1,59 @@ +<!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-custom-timing-function-reverse-ref.html"> +<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-692" /> +<!-- + Test that ensures that the bounding rect for a clip path animation is not + limited to the size of the largest keyframe.a. + + This is the reverse of clip-path-animation-custom-timing-fumction.html, + and tests extrapolation in the negative direction +--> +<style> + @keyframes clippath { + 0% { + clip-path: inset(45% 45%); + } + + 25% { + clip-path: inset(49% 49%); + } + + 50% { + clip-path: inset(45% 45%); + } + + 75% { + clip-path: inset(40% 40%); + animation-timing-function: cubic-bezier(0, -9, 1, -9); + /* Test that the correct keyframe's timing function is being used. */ + } + + 100% { + clip-path: inset(45% 45%); + } + } + + .green { + background-color: green; + width: 200px; + height: 200px; + + animation: clippath 10000000s -8717082s + /* halfway between the second to last and last keyframes.*/ + ; + } + +</style> +<script src="/common/reftest-wait.js"></script> + +<body> + <div class="green anim"></div> + + <script> + document.getAnimations()[0].ready.then(takeScreenshot); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function.html new file mode 100644 index 0000000000..4dbf3a44a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-custom-timing-function.html @@ -0,0 +1,54 @@ +<!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-custom-timing-function-ref.html"> +<meta name=fuzzy content="0-2;0-320"> +<!-- + Test that ensures that the bounding rect for a clip path animation is not + limited to the size of the largest keyframe. +--> +<style> + @keyframes clippath { + 0% { + clip-path: inset(45% 45%); + } + + 25% { + clip-path: inset(40% 40%); + } + + 50% { + clip-path: inset(45% 45%); + } + + 75% { + clip-path: inset(40% 40%); + } + + 100% { + clip-path: inset(45% 45%); + } + } + + .green { + background-color: green; + width: 200px; + height: 200px; + animation: clippath 10000000s -1286796s + /* roughly where the derivative of the cubic-bezier is zero */ + ; + animation-timing-function: cubic-bezier(0, 9, 1, 9); + } + +</style> +<script src="/common/reftest-wait.js"></script> + +<body> + <div class="green"></div> + + <script> + document.getAnimations()[0].ready.then(takeScreenshot); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ellipse-mixed-change.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ellipse-mixed-change.html new file mode 100644 index 0000000000..e42d3ee08e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ellipse-mixed-change.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-ellipse-ref.html"> +<style> + .container { + width: 50px; + height: 50px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + @keyframes clippath { + 0% { + clip-path: ellipse(60% 30% at 40px 80px); + } + + 100% { + clip-path: ellipse(10% 20% at 10px 20px); + } + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div id="target" class="container"></div> + + <script> + document.getAnimations()[0].ready.then(() => { + document.getElementById('target').style.width = "100px"; + document.getElementById('target').style.height = "100px"; + 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-ellipse-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ellipse-ref.html new file mode 100644 index 0000000000..63b3174806 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ellipse-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + clip-path: ellipse(35% 25% at 25% 50%); + } +</style> + +<body> + <div class="container"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ellipse.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ellipse.html new file mode 100644 index 0000000000..1c7c90ee84 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ellipse.html @@ -0,0 +1,34 @@ +<!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-ellipse-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + @keyframes clippath { + 0% { + clip-path: ellipse(60% 30% at 40% 80%); + } + + 100% { + clip-path: ellipse(10% 20% at 10% 20%); + } + } +</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-ensure-keyframe-update.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ensure-keyframe-update.html new file mode 100644 index 0000000000..a20595ead8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ensure-keyframe-update.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-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + animation: clippath 20s steps(1) -9.999s; + } + + @keyframes clippath { + 0% { + clip-path: circle(50% at 50% 50%); + } + + 50% { + clip-path: circle(35% at 35% 35%); + } + + 100% { + clip-path: circle(20% at 20% 20%); + } + } +</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-filter-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-filter-ref.html new file mode 100644 index 0000000000..5bb9a9c722 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-filter-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + filter: blur(5px); + clip-path: circle(75% at 75% 75%); +} +</style> +<body> +<div class="container"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-filter.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-filter.html new file mode 100644 index 0000000000..a9809cbc30 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-filter.html @@ -0,0 +1,28 @@ +<!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-filter-ref.html"> +<meta name="fuzzy" content="maxDifference=0-10; totalPixels=0-151"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + filter: blur(5px); + animation: clippath 20s steps(2, jump-end) -9.999s; +} +@keyframes clippath { + 0% { clip-path: circle(50% at 50% 50%); } + 100% { clip-path: circle(100% at 100% 100%); } +} +</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-fixed-position-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-ref.html new file mode 100644 index 0000000000..2a21cc445c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<style> + .container { + position: fixed; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + background-color: green; + clip-path: circle(200% at 35% 35%); + } + + .big { + position: absolute; + top: 100px; + width: 500px; + height: 500px; + background-color: blue; + } +</style> + +<body> + <div class="container"> + <div class="big"></div> + </div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error-ref.html new file mode 100644 index 0000000000..a069e4d3ae --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<style> + .container { + position: fixed; + width: 70px; + height: 126px; + background-color: green; + clip-path: inset(5% 5%) + } + +</style> + +<body> + <div class="container"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error.html new file mode 100644 index 0000000000..8a02a5b2a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error.html @@ -0,0 +1,40 @@ +<!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-fixed-position-rounding-error-ref.html"> +<!-- + Test that clip paths on elements with position: fixed draw correctly, + even in scenarios that involve partial pixels + + Currently uses fuzzy diff because of crbug.com/1249071 +--> +<style> + .container { + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; + position: fixed; + width: 70px; + height: 126px; + } + + @keyframes clippath { + 0% { + clip-path: inset(0% 0%); + } + + 100% { + clip-path: inset(10% 10%); + } + } +</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-fixed-position.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position.html new file mode 100644 index 0000000000..3ffc2a30a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta name=fuzzy content="0-10;0-150"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> +<link rel="match" href="clip-path-animation-fixed-position-ref.html"> +<!-- + Test that clip paths on elements with position: fixed draw correctly, + including clipping children that are out of bounds. +--> +<style> + .container { + width: 100px; + height: 100px; + position: fixed; + top: 100px; + left: 100px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + .big { + position: absolute; + top: 100px; + width: 500px; + height: 500px; + background-color: blue; + } + + @keyframes clippath { + 0% { + clip-path: circle(50% at 50% 50%); + } + + 100% { + clip-path: circle(350% at 20% 20%); + } + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div class="container"> + <div class="big"></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-font-size-inherited.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-font-size-inherited.html new file mode 100644 index 0000000000..6836af5a29 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-font-size-inherited.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-font-size-ref.html"> +<style> + body { + font-size: 20px; + } + + .container { + width: 100px; + height: 100px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + @keyframes clippath { + 0% { + clip-path: circle(1em); + } + + 100% { + clip-path: circle(2em); + } + } +</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-font-size-mixed-change.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-font-size-mixed-change.html new file mode 100644 index 0000000000..9e24aa905c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-font-size-mixed-change.html @@ -0,0 +1,46 @@ +<!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-font-size-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + font-size: 10px; + background-color: green; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: clippath 20s steps(2, jump-end) -9.999999s; + } + + @keyframes clippath { + 0% { + clip-path: circle(20px); + } + + 100% { + clip-path: circle(2em); + } + } +</style> +<script src="/common/reftest-wait.js"></script> + +<body> + <div id="target" class="container"></div> + + <script> + document.getAnimations()[0].ready.then(() => { + document.getElementById('target').style.fontSize = "20px"; + window.requestAnimationFrame(() => { + takeScreenshot(); + }) + }); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-font-size-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-font-size-ref.html new file mode 100644 index 0000000000..912a8e8464 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-font-size-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + font-size: 20px; + clip-path: circle(1.5em); + } +</style> + +<body> + <div class="container"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-font-size.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-font-size.html new file mode 100644 index 0000000000..00563305e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-font-size.html @@ -0,0 +1,35 @@ +<!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-font-size-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + font-size: 20px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + @keyframes clippath { + 0% { + clip-path: circle(1em); + } + + 100% { + clip-path: circle(2em); + } + } +</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-forward-fill.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-forward-fill.html new file mode 100644 index 0000000000..7088968828 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-forward-fill.html @@ -0,0 +1,35 @@ +<!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-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + animation: clippath 1s steps(3, jump-none) -0.9s; + animation-fill-mode: forwards; + } + + @keyframes clippath { + 0% { + clip-path: circle(50% at 50% 50%); + } + + 100% { + clip-path: circle(35% at 35% 35%); + } + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div class="container"></div> + + <script> + document.getAnimations()[0].finished.then(takeScreenshot); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fragmented-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fragmented-ref.html new file mode 100644 index 0000000000..8883679aca --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fragmented-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="columns: 2; width: 200px; height: 100px;"> + <div style="background-color: blue; height: 100px;clip-path: circle(25% at 50% 50%);"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fragmented.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fragmented.html new file mode 100644 index 0000000000..9f68c238fa --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fragmented.html @@ -0,0 +1,42 @@ +<!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-fragmented-ref.html"> +<style> + @keyframes clippath { + 0% { + clip-path: circle(5% at 50% 50%); + } + + 100% { + clip-path: circle(45% at 50% 50%); + } + } + + .outer { + columns: 2; + width: 200px; + height: 100px; + } + + .inner { + background-color: blue; + animation: clippath 20s steps(2, jump-end) -9.999s; + height: 100px; + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div class="outer"> + <div class="inner"> + </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-incompatible-shapes1-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes1-ref.html new file mode 100644 index 0000000000..cbfebddcdc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + clip-path: circle(50% at 50% 50%); +} +</style> +<body> +<div class="container"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes1.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes1.html new file mode 100644 index 0000000000..88c6862aa9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes1.html @@ -0,0 +1,37 @@ +<!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-incompatible-shapes1-ref.html"> +<meta name=fuzzy content="0-255;0-2"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + /* Use a long animation that start at 30% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: clippath 1000000s cubic-bezier(0,1,1,0) -300000s; +} +@keyframes clippath { + 0% { clip-path: circle(50% at 50% 50%); } + 100% { clip-path: ellipse(10% 20% at 50% 50%); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +// This test ensures that when selected keyframe shapes are incompatible +// and progress is less than 0.5, "from" keyframe is selected as a result. +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes2-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes2-ref.html new file mode 100644 index 0000000000..6cd7e76774 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes2-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.container { + width: 300px; + height: 300px; + background-color: green; + clip-path: path('M 100 100 L 200 0 L 200 200 L 0 120 z'); +} +</style> +<body> +<div class="container"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes2.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes2.html new file mode 100644 index 0000000000..f2aa4964ad --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes2.html @@ -0,0 +1,37 @@ +<!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-incompatible-shapes2-ref.html"> +<meta name=fuzzy content="0-255;0-300"> +<style> +.container { + width: 300px; + height: 300px; + background-color: green; + /* Use a long animation that start at 60% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: clippath 1000000s cubic-bezier(0,1,1,0) -600000s; +} +@keyframes clippath { + 0% { clip-path: circle(50% at 50% 50%); } + 100% { clip-path: path('M 100 100 L 200 0 L 200 200 L 0 120 z'); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +// This test ensures that when selected keyframe shapes are incompatible +// and progress >= 0.5, "to" keyframe is selected as a result. +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-missing-0-percent-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-missing-0-percent-ref.html new file mode 100644 index 0000000000..200edcd038 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-missing-0-percent-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> + .container { + + width: 100px; + height: 100px; + background-color: green; + clip-path: circle(15% at 50% 50%); + } +</style> + +<body> + <div class="container"></div> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-missing-0-percent.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-missing-0-percent.html new file mode 100644 index 0000000000..4d4fee1b5b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-missing-0-percent.html @@ -0,0 +1,44 @@ +<!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-missing-0-percent-ref.html"> +<style> + .container { + /*TODO(crbug.com/1349062): Support animation keyframes without 0% or 100%.*/ + width: 100px; + height: 100px; + background-color: green; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + clip-path: circle(5% at 50% 50%); + animation: clippath 1000000s cubic-bezier(0, 1, 1, 0) -400000s; + } + + @keyframes clippath { + 80% { + clip-path: circle(25% at 50% 50%); + } + + 100% { + clip-path: circle(50% at 50% 50%); + } + } +</style> +<script src="/common/reftest-wait.js"></script> + +<body> + <div class="container"></div> + + <script> + document.getAnimations()[0].ready.then(() => { + takeScreenshot(); + }); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-mixed-interpolation.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-mixed-interpolation.html new file mode 100644 index 0000000000..016f892f95 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-mixed-interpolation.html @@ -0,0 +1,26 @@ +<!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-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; +} +@keyframes clippath { + 0% { clip-path: circle(50% at 50% 50%); } + 100% { clip-path: circle(20px at 20px 20px); } +} +</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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-non-keyframe-timing-function-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-non-keyframe-timing-function-ref.html new file mode 100644 index 0000000000..d351f80a26 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-non-keyframe-timing-function-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + clip-path: circle(50% at 50% 50%); + } + +</style> + +<body> + <div class="container"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-non-keyframe-timing-function.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-non-keyframe-timing-function.html new file mode 100644 index 0000000000..9e4eb01943 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-non-keyframe-timing-function.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta name=fuzzy content="0-5;0-5"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> +<link rel="match" href="clip-path-animation-non-keyframe-timing-function-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + } + +</style> +<script src="/common/reftest-wait.js"></script> + +<body> + <div class="container"></div> + + <script> + document.querySelector('.container').animate([ + // 1st keyframe must have a non-linear easing function or the animation + // will extrapolate based on the animation-wide timing function + { clipPath: 'circle(20% at 20% 20%)', easing: 'ease' }, + { clipPath: 'circle(50% at 50% 50%)' } + ], { + easing: 'cubic-bezier(0, 2, 1, 2)', + duration: 1000000, + delay: -500000 + }); + document.getAnimations()[0].ready.then(() => { + takeScreenshot(); + }); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-none-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-none-ref.html new file mode 100644 index 0000000000..f47e9f31b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-none-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> +<style> + .target { + background-color: blue; + width: 100px; + height: 100px; + } + + .outofbounds { + position: absolute; + top: 200px; + left: 200px; + height: 10px; + width: 10px; + background-color: blue + } +</style> +<div class="target"> + <div class="outofbounds"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-none.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-none.html new file mode 100644 index 0000000000..3efb593b72 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-none.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: none in an animation does not cause a crash + 2) that clip-path: none displays correctly for an animation +--> +<style> + @keyframes clippath { + 0% { + clip-path: inset(25% 25%); + } + + 100% { + clip-path: none; + } + } + + .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-animation-overflow-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-overflow-ref.html new file mode 100644 index 0000000000..154a56d5f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-overflow-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> +.container { + width: 200px; + height: 200px; + background-color: green; + border: 20px solid black; + clip-path: circle(120px at 120px 120px); +} +</style> +<body> +<div class="container"><div class="container"></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-overflow.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-overflow.html new file mode 100644 index 0000000000..fc8c78efbf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-overflow.html @@ -0,0 +1,28 @@ +<!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-overflow-ref.html"> +<meta name=fuzzy content="0-255;0-800"> +<style> +.container { + width: 200px; + height: 200px; + background-color: green; + border: 20px solid black; + animation: clippath 20s steps(2, jump-end) -9.999s; +} +@keyframes clippath { + 0% { clip-path: circle(130px at 130px 130px); } + 100% { clip-path: circle(110px at 110px 110px); } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> +<body> +<div class="container"><div class="container"></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-path-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-path-ref.html new file mode 100644 index 0000000000..d53067f563 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-path-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> + .container { + width: 200px; + height: 200px; + background-color: green; + clip-path: path('M 0 150 L 15,75 A 5,5 0,0,1 150,75 L 150 150 z'); + } +</style> + +<body> + <div class="container"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-path.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-path.html new file mode 100644 index 0000000000..20400ba5ec --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-path.html @@ -0,0 +1,35 @@ +<!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-path-ref.html"> +<meta name=fuzzy content="0-10;0-200"> +<style> + .container { + width: 200px; + height: 200px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + @keyframes clippath { + 0% { + clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 150 200 z'); + } + + 100% { + clip-path: path('M 0 100 L 30,75 A 5,5 0,0,1 150,75 L 150 100 z'); + } + } +</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-polygon-mixed-change.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-polygon-mixed-change.html new file mode 100644 index 0000000000..569c0af66a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-polygon-mixed-change.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-polygon-ref.html"> +<style> + .container { + width: 50px; + height: 50px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + @keyframes clippath { + 0% { + clip-path: polygon(0px 0px, 100% 0%, 50% 100%) + } + + 100% { + clip-path: polygon(20px 20px, 80% 20%, 50% 80%) + } + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div id="target" class="container"></div> + + <script> + document.getAnimations()[0].ready.then(() => { + document.getElementById('target').style.width = "100px"; + document.getElementById('target').style.height = "100px"; + 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-polygon-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-polygon-ref.html new file mode 100644 index 0000000000..28e11e966d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-polygon-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + clip-path: polygon(10% 10%, 90% 10%, 50% 90%); + } +</style> + +<body> + <div class="container"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-polygon.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-polygon.html new file mode 100644 index 0000000000..1a9d0cc168 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-polygon.html @@ -0,0 +1,34 @@ +<!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-polygon-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + @keyframes clippath { + 0% { + clip-path: polygon(0% 0%, 100% 0%, 50% 100%) + } + + 100% { + clip-path: polygon(20% 20%, 80% 20%, 50% 80%) + } + } +</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-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ref.html new file mode 100644 index 0000000000..b548c5d590 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + clip-path: circle(35% at 35% 35%); +} +</style> +<body> +<div class="container"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg-ref.html new file mode 100644 index 0000000000..6cc3b4d58b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<style> + .clipped { + background-color: green; + stroke: black; + stroke-width: 3; + fill: red; + clip-path: circle(35% at 50% 50%); + } + + .svg { + width: 100px; + height: 100px; + } + +</style> + +<body> + <svg class="svg"> + <circle class="clipped" cx="50" cy="50" r="40" /> + </svg> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg-zoom-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg-zoom-ref.html new file mode 100644 index 0000000000..8d620ceb69 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg-zoom-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<style> + .clipped { + background-color: green; + stroke: black; + stroke-width: 3; + fill: red; + clip-path: circle(35% at 50% 50%); + } + + .svg { + width: 100px; + height: 100px; + zoom: 1.25; + } + +</style> + +<body> + <svg class="svg"> + <circle class="clipped" cx="40" cy="40" r="40" /> + </svg> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg-zoom.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg-zoom.html new file mode 100644 index 0000000000..f7be6d2532 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg-zoom.html @@ -0,0 +1,43 @@ +<!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-svg-zoom-ref.html"> +<style> + .clipped { + background-color: green; + stroke: black; + stroke-width: 3; + fill: red; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + .svg { + width: 100px; + height: 100px; + zoom: 1.25; + } + + @keyframes clippath { + 0% { + clip-path: circle(50% at 50% 50%); + } + + 100% { + clip-path: circle(20% at 50% 50%); + } + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <svg class="svg"> + <circle class="clipped" cx="40" cy="40" r="40" /> + </svg> + + <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-svg.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg.html new file mode 100644 index 0000000000..5318355585 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-svg.html @@ -0,0 +1,42 @@ +<!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-svg-ref.html"> +<style> + .clipped { + background-color: green; + stroke: black; + stroke-width: 3; + fill: red; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + .svg { + width: 100px; + height: 100px; + } + + @keyframes clippath { + 0% { + clip-path: circle(50% at 50% 50%); + } + + 100% { + clip-path: circle(20% at 50% 50%); + } + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <svg class="svg"> + <circle class="clipped" cx="50" cy="50" r="40" /> + </svg> + + <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-three-keyframes1-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1-ref.html new file mode 100644 index 0000000000..965d259d26 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + clip-path: ellipse(15% 25% at 60% 60%); +} +</style> +<body> +<div class="container"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1.html new file mode 100644 index 0000000000..61e24e6208 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1.html @@ -0,0 +1,45 @@ +<!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-three-keyframes1-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + /* Use a long animation that start at 5% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: clippath 1000000s cubic-bezier(0,1,1,0) -50000s; +} +@keyframes clippath { + 0% { clip-path: ellipse(10% 20% at 50% 50%) } + 10% { + clip-path: ellipse(20% 30% at 70% 70%); + animation-timing-function: cubic-bezier(0,1,1,0); + } + 100% { + clip-path: ellipse(10% 20% at 50% 50%); + animation-timing-function: cubic-bezier(0,1,1,0); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +// This test ensures that we select the correct start and end keyframes for +// interpolation. In this test, the start delay of the animation makes it +// jump to 5% right away. So for this test, we would choose the keyframes at +// 0% and 10% for interpolation. +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes2-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes2-ref.html new file mode 100644 index 0000000000..afc8c85561 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes2-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.container { + width: 300px; + height: 300px; + background-color: green; + clip-path: path('M 150 150 L 250 0 L 250 250 L 0 160 z'); +} +</style> +<body> +<div class="container"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes2.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes2.html new file mode 100644 index 0000000000..b70c136c32 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes2.html @@ -0,0 +1,49 @@ +<!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-three-keyframes2-ref.html"> +<meta name=fuzzy content="0-255;0-1000"> +<style> +.container { + width: 300px; + height: 300px; + background-color: green; + /* Use a long animation that start at 50% progress where the slope of the + selected timing function is zero. By setting up the animation in this way, + we accommodate lengthy delays in running the test without a potential drift + in the animated property value. This is important for avoiding flakes, + especially on debug builds. The screenshots are taken as soon as the + animation is ready, thus the long animation duration has no bearing on + the actual duration of the test. */ + animation: clippath 1000000s cubic-bezier(0,1,1,0) -500000s; +} +@keyframes clippath { + 0% { + clip-path: path('M 300 300 L 500 0 L 500 500 L 0 300 z'); + } + 10% { + clip-path: path('M 100 100 L 200 0 L 200 200 L 0 120 z'); + animation-timing-function: cubic-bezier(0,1,1,0); + } + 100% { + clip-path: path('M 200 200 L 300 0 L 300 300 L 0 200 z'); + animation-timing-function: cubic-bezier(0,1,1,0); + } +} + +</style> +<script src="/common/reftest-wait.js"></script> +<body> +<div class="container"></div> + +<script> +// The start delay of the animation makes it jump 50% of the animation, which +// means we would select the keyframes at 10% and 100% for animation. The +// progress would be (0.5-0.1) / (1-0.1) = 0.44. So a timing function input of +// 0.44 results in an output of 0.5. +document.getAnimations()[0].ready.then(() => { + takeScreenshot(); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-zoom-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-zoom-ref.html new file mode 100644 index 0000000000..99126195a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-zoom-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<style> + .container { + width: 80px; + height: 80px; + zoom: 1.25; + background-color: green; + clip-path: circle(35% at 35% 35%); + } + +</style> + +<body> + <div class="container"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-zoom.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-zoom.html new file mode 100644 index 0000000000..89641240f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-zoom.html @@ -0,0 +1,35 @@ +<!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-zoom-ref.html"> +<style> + .container { + width: 80px; + height: 80px; + background-color: green; + zoom: 1.25; + animation: clippath 20s steps(2, jump-end) -9.999s; + } + + @keyframes clippath { + 0% { + clip-path: circle(50% at 50% 50%); + } + + 100% { + clip-path: circle(20% at 20% 20%); + } + } +</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.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation.html new file mode 100644 index 0000000000..307d972ef6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation.html @@ -0,0 +1,26 @@ +<!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-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + animation: clippath 20s steps(2, jump-end) -9.999s; +} +@keyframes clippath { + 0% { clip-path: circle(50% at 50% 50%); } + 100% { clip-path: circle(20% at 20% 20%); } +} +</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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-001-ref.html new file mode 100644 index 0000000000..4e26ac61f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's path nonzero interpolation</title> + <style type="text/css"> + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: url("#clip"); + } + </style> +</head> +<body> + <div id="rect"></div> + <svg height="0" width="0"> + <defs> + <clipPath id="clip"> + <path clip-rule="nonzero" d="M35,35 H90 V90 H35Z M25,25 H70 V70 H25Z"/> + </clipPath> + </defs> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-001.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-001.html new file mode 100644 index 0000000000..0c988e090e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Masking: Test clip-path nonzero path interpolation</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> + <link rel="match" href="clip-path-path-interpolation-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'path()' for clipping. Test the interpolation of nonzero + path function."> + <style> + @keyframes anim { + from { + clip-path: path(nonzero, 'M20,20h60 v60 h-60z M30,30 h40 v40 h-40z'); + } + to { + clip-path: path(nonzero, 'M50,50h50 v50 h-50z M20,20 h50 v50 h-50z'); + } + } + #rect { + width: 100px; + height: 100px; + background-color: green; + animation: anim 10s -5s paused linear; + } + </style> +</head> +<body> + <div id="rect"></div> +</body> +<script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-002-ref.html new file mode 100644 index 0000000000..567764a301 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-002-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's path evenodd interpolation</title> + <style type="text/css"> + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: url("#clip"); + } + </style> +</head> +<body> + <div id="rect"></div> + <svg height="0" width="0"> + <defs> + <clipPath id="clip"> + <path clip-rule="evenodd" d="M35,35 H90 V90 H35Z M25,25 H70 V70 H25Z"/> + </clipPath> + </defs> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-002.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-002.html new file mode 100644 index 0000000000..4c1c485f7f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Masking: Test clip-path evenodd path interpolation</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> + <link rel="match" href="clip-path-path-interpolation-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'path()' for clipping. Test the interpolation of evenodd + path function."> + <style> + @keyframes anim { + from { + clip-path: path(evenodd, 'M20,20h60 v60 h-60z M30,30 h40 v40 h-40z'); + } + to { + clip-path: path(evenodd, 'M50,50h50 v50 h-50z M20,20 h50 v50 h-50z'); + } + } + #rect { + width: 100px; + height: 100px; + background-color: green; + animation: anim 10s -5s paused linear; + } + </style> +</head> +<body> + <div id="rect" class="path-evenodd-animation"></div> +</body> +<script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-with-zoom-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-with-zoom-ref.html new file mode 100644 index 0000000000..7e0d2a5426 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-with-zoom-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Masking: Test clip-path nonzero path interpolation with zoom</title> +<style type="text/css"> + #rect { + width: 300px; + height: 300px; + background-color: green; + clip-path: path('M105,105 H270 V270 H105Z M75,75 H210 V210 H75Z'); + } + +</style> +<div id="rect"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-with-zoom.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-with-zoom.html new file mode 100644 index 0000000000..50dc5e6f4e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-path-interpolation-with-zoom.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <title>CSS Masking: Test clip-path nonzero path interpolation with zoom</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> + <link rel="match" href="clip-path-path-interpolation-with-zoom-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'path()' for clipping. Test the interpolation of nonzero + path function."> + <style> + @keyframes anim { + from { + clip-path: path(nonzero, 'M20,20h60 v60 h-60z M30,30 h40 v40 h-40z'); + } + to { + clip-path: path(nonzero, 'M50,50h50 v50 h-50z M20,20 h50 v50 h-50z'); + } + } + #rect { + width: 100px; + zoom: 3; + height: 100px; + background-color: green; + animation: anim 10s -5s paused linear; + } + </style> + <div id="rect"></div> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-rect-interpolation-001.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-rect-interpolation-001.html new file mode 100644 index 0000000000..f204fb953a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-rect-interpolation-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Masking: Test clip-path rect() interpolation</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect"> + <link rel="match" href="clip-path-xywh-interpolation-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'rect()' for clipping. Test the interpolation of xywh function."> + <style> + @keyframes anim { + from { + clip-path: rect(0px 100px 100% 0px round 10px); + } + to { + clip-path: rect(20px 80px calc(20px + 60%) 20px round 20px); + } + } + #rect { + width: 100px; + height: 100px; + background-color: green; + animation: anim 10s -5s paused linear; + } + </style> +</head> +<body> + <div id="rect"></div> +</body> +<script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-001.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-001.html new file mode 100644 index 0000000000..dae7f24d37 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Masking: Test clip-path nonzero path interpolation</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="clip-path-path-interpolation-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test the interpolation of nonzero + path function."> + <style> + @keyframes anim { + from { + clip-path: shape(nonzero from 20px 20px, + hline by 60px, vline by 60px, hline by -60%, close, + move to 30% 30px, hline by 40px, vline by 40px, hline by -40px, close); + } + to { + clip-path: shape(nonzero from 50px 50px, + hline by 50px, vline by 50px, hline by -50%, close, + move to 20px 20%, hline by 50px, vline by 50px, hline by -50px, close); + } + } + #rect { + width: 100px; + height: 100px; + background-color: green; + animation: anim 10s -5s paused linear; + } + </style> +</head> +<body> + <div id="rect"></div> +</body> +<script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-002.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-002.html new file mode 100644 index 0000000000..6af23c37d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Masking: Test clip-path evenodd path interpolation</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="clip-path-path-interpolation-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test the interpolation of evenodd + path function."> + <style> + @keyframes anim { + from { + clip-path: shape(evenodd from 20px 20px, + hline by 60px, vline by 60px, hline by -60%, close, + move to 30% 30px, hline by 40px, vline by 40px, hline by -40px, close); + } + to { + clip-path: shape(evenodd from 50px 50px, + hline by 50px, vline by 50px, hline by -50%, close, + move to 20px 20%, hline by 50px, vline by 50px, hline by -50px, close); + } + } + #rect { + width: 100px; + height: 100px; + background-color: green; + animation: anim 10s -5s paused linear; + } + </style> +</head> +<body> + <div id="rect"></div> +</body> +<script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-transition-custom-timing-function.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-transition-custom-timing-function.html new file mode 100644 index 0000000000..f8bf6e08fe --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-transition-custom-timing-function.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-custom-timing-function-ref.html"> +<meta name="fuzzy" content="maxDifference=0-4; totalPixels=0-628"> +<style> + .green { + background-color: green; + width: 200px; + height: 200px; + + clip-path: inset(45%); + transition-property: clip-path; + transition-duration: 10000000s; + transition-timing-function: cubic-bezier(0, 9, 1, 9); + transition-delay: -5220715s; + } + +</style> +<script src="/common/reftest-wait.js"></script> + +<body> + <div class="green" id="target"></div> + + <script> + function update() { + document.getElementById('target').style.clipPath = "inset(40%)"; + requestAnimationFrame(() => { + takeScreenshot(); + }); + } + requestAnimationFrame(function () { + requestAnimationFrame(update); + }); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-transition-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-transition-ref.html new file mode 100644 index 0000000000..af164c30f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-transition-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.container { + width: 100px; + height: 100px; + background-color: green; + clip-path: circle(40% at 40% 40%); +} +</style> +<body> +<div class="container"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-transition.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-transition.html new file mode 100644 index 0000000000..980f7a53e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-transition.html @@ -0,0 +1,34 @@ +<!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-transition-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + clip-path: circle(50% at 50% 50%); + background-color: green; + transition-property: clip-path; + transition-duration: 20s; + transition-timing-function: steps(2, jump-end); + transition-delay: -9.999s; + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/resources/timing-utils.js"></script> + +<body> + <div class="container" id="target"></div> + + <script> + function update() { + document.getElementById('target').style.clipPath = "circle(30% at 30% 30%)"; + waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot); + } + requestAnimationFrame(function () { + requestAnimationFrame(update); + }); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-xywh-interpolation-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-xywh-interpolation-001-ref.html new file mode 100644 index 0000000000..e3f646b3e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-xywh-interpolation-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's xywh interpolation</title> + <style type="text/css"> + #rect { + position: absolute; + margin-left: 10px; + margin-top: 10px; + width: 80px; + height: 80px; + background-color: green; + clip-path: inset(0px round 15px); + } + </style> +</head> +<body> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-xywh-interpolation-001.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-xywh-interpolation-001.html new file mode 100644 index 0000000000..853195aa27 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-xywh-interpolation-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Masking: Test clip-path xywh() interpolation</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-xywh"> + <link rel="match" href="clip-path-xywh-interpolation-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'xywh()' for clipping. Test the interpolation of xywh function."> + <style> + @keyframes anim { + from { + clip-path: xywh(0px 0px 100px 100% round 10px); + } + to { + clip-path: xywh(20px 20px 60px 60% round 20px); + } + } + #rect { + width: 100px; + height: 100px; + background-color: green; + animation: anim 10s -5s paused linear; + } + </style> +</head> +<body> + <div id="rect"></div> +</body> +<script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1-ref.html new file mode 100644 index 0000000000..0feacb50ba --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> + .container { + + width: 100px; + height: 100px; + background-color: green; + clip-path: inset(10px 10px); + } +</style> + +<body> + <div class="container"></div> +</body> 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 new file mode 100644 index 0000000000..f647c1af59 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<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 { + 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%); + } + } + + @keyframes clippath2 { + 0% { + clip-path: inset(10px 10px); + } + + 100% { + clip-path: inset(11px 11px); + } + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/testcommon.js"></script> + +<body> + <div class="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(); + }); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length2-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length2-ref.html new file mode 100644 index 0000000000..0feacb50ba --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length2-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> + .container { + + width: 100px; + height: 100px; + background-color: green; + clip-path: inset(10px 10px); + } +</style> + +<body> + <div class="container"></div> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length2.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length2.html new file mode 100644 index 0000000000..bc3460111f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length2.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> +<link rel="match" href="two-clip-path-animation-diff-length2-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + animation: clippath2 100s step-end, clippath1 20s 30s; + } + + @keyframes clippath1 { + 0% { + clip-path: circle(10% at 50% 50%); + } + + 100% { + clip-path: circle(50% at 50% 50%); + } + } + + @keyframes clippath2 { + 0% { + clip-path: inset(10px 10px); + } + + 100% { + clip-path: inset(11px 11px); + } + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/testcommon.js"></script> + +<body> + <div class="container"></div> + + <script> + // This test ensures that when there are two animations where one of them has + // animation delays, we show the right clip when the delayed animation is not + // started yet. + const animations = document.getAnimations(); + Promise.all([animations[0].ready, animations[1].ready]).then(() => { + takeScreenshot(); + }); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length3-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length3-ref.html new file mode 100644 index 0000000000..853f47f9ba --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length3-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> + .container { + + width: 100px; + height: 100px; + background-color: green; + clip-path: circle(50% at 50% 50%); + } +</style> + +<body> + <div class="container"></div> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length3.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length3.html new file mode 100644 index 0000000000..5a66568132 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length3.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="two-clip-path-animation-diff-length3-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + background-color: green; + animation: clippath2 10000s step-end, clippath1 20s 0.001s; + } + + /* Use un-interpolatable keyframes to force discrete transition */ + @keyframes clippath1 { + 0% { + clip-path: circle(50% at 50% 50%); + } + + 100% { + clip-path: inset(11px 11px); + } + } + + @keyframes clippath2 { + 0% { + clip-path: circle(10% at 50% 50%); + } + + 100% { + clip-path: circle(25% at 50% 50%); + } + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="../../../../web-animations/testcommon.js"></script> + +<body> + <div class="container"></div> + + <script> + // This test ensures that when there are two animations where one of them has + // animation delays, we show the right clip when the delayed animation is + // started. + const animations = document.getAnimations(); + Promise.all([animations[0].ready, animations[1].ready]).then(() => { + waitForAnimationFrames(3).then(() => { + takeScreenshot(); + }); + }); + </script> +</body> + +</html> |