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 | |
| 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')
265 files changed, 6136 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> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-blending-offset-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-blending-offset-ref.html new file mode 100644 index 0000000000..c2613ac0a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-blending-offset-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 30px; background: green"></div> +<div style="width: 30px; height: 70px; background: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-blending-offset.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-blending-offset.html new file mode 100644 index 0000000000..806904d687 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-blending-offset.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Masking: Test clip-path with mix-blend-mode with offset</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> +<link rel="match" href="clip-path-blending-offset-ref.html"> +<style> +div { + width: 100px; + height: 100px; +} +#clip-path { + overflow: hidden; + background: green; + clip-path: polygon(0 0, 100px 0, 100px 30px, 30px 30px, 30px 100px, 0 100px); +} +#blend { + position: absolute; + mix-blend-mode: multiply; + left: 40px; + top: 50px; + background: red; +} +</style> +<div id="clip-path"> + <div id="blend"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1a.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1a.html new file mode 100644 index 0000000000..c0304a59bb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1a.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path border-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-400"> + <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element."> + <style> + div { + position: absolute; + left: 50px; + top: 50px; + background-color: blue; + width: 30px; + height: 30px; + padding: 10px; + border: solid blue 25px; + clip-path: circle(farthest-side) border-box; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1b.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1b.html new file mode 100644 index 0000000000..c253c3c9db --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1b.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path border-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element."> + <meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-394"> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 15px; top: 10px;"> + <rect x="35" y="40" width="100" height="100" fill="blue" + clip-path="circle(50%) border-box"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1c.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1c.html new file mode 100644 index 0000000000..99f6bb0fc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1c.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path border-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-65; totalPixels=0-368"> + <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG SVG element."> + <style> + svg { + position: absolute; + left: 50px; + top: 50px; + background-color: blue; + width: 30px; + height: 30px; + padding: 10px; + border: solid blue 25px; + clip-path: circle(farthest-side) border-box; + } + </style> + </head> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1d.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1d.html new file mode 100644 index 0000000000..3b63d9251f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1d.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with border-box</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="match" href="reference/green-100x100.html"> +<meta name="assert" content="Check that the 'clip-path' property supports border-box."> + +<style> + .clipped { + width: 50px; + height: 50px; + background-color: green; + clip-path: border-box; + border: 25px solid green; + /* This outline draws outside the border box and should be clipped. */ + outline: 8px solid red; + } +</style> +<div class="clipped"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1e.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1e.html new file mode 100644 index 0000000000..17ac0b0d72 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-borderBox-1e.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with border-box and border-radius</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-border-box"> +<link rel="match" href="reference/green-circle-100x100.html"> +<meta name="fuzzy" content="maxDifference=0-126; totalPixels=0-400"> +<meta name="assert" content="Check that the 'clip-path' property supports border-box with border-radius."> + +<style> + .clipped { + width: 50px; + height: 50px; + background-color: green; + clip-path: border-box; + border: 25px solid green; + border-radius: 50px; + /* This outline draws outside the border box and should be clipped. */ + outline: 8px solid red; + } +</style> +<div class="clipped"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-001.html new file mode 100644 index 0000000000..e40cdb103a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with absolute values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com"> + <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="reference/clip-path-circle-ref.html"> + <meta name="fuzzy" content="0-38; 0-800"> + <meta name="assert" content="The clip-path property takes the basic shape + 'circle' for clipping. Test absolute values for arguments. On pass you + should see a green circle and no red."> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: circle();"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-002.html new file mode 100644 index 0000000000..deb199a5b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with percentage values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="reference/clip-path-circle-ref.html"> + <meta name="fuzzy" content="0-38; 0-800"> + <meta name="assert" content="The clip-path property takes the basic shape + 'circle' for clipping. Test percentage values for arguments. If no + reference box was specified, percentage is relative to border-box. On pass + there should be a green circle."> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(50% at 50% 50%);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-003.html new file mode 100644 index 0000000000..24b3f31f61 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with percentage radius</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="reference/clip-path-circle-ref.html"> + <meta name="fuzzy" content="0-38; 0-800"> + <meta name="assert" content="The clip-path property takes the basic shape + 'circle' for clipping. Test percentage value as argument for radius and no + position arguments. The circle should be in the center of the element. On + pass there should be a green circle."> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(50%);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-004.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-004.html new file mode 100644 index 0000000000..ddbccf0336 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-004.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with percentage position</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="reference/clip-path-circle-ref.html"> + <meta name="fuzzy" content="0-38; 0-800"> + <meta name="assert" content="The clip-path property takes the basic shape + 'circle' for clipping. Test percentage value as argument for position and + no radius argument. The circle must behave like it has a radius of + 'closest-side'. On pass there should be a green circle."> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at 50%);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-005.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-005.html new file mode 100644 index 0000000000..3a25ce5fff --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-005.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with closest-side</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="reference/clip-path-circle-ref.html"> + <meta name="fuzzy" content="0-38; 0-800"> + <meta name="assert" content="The clip-path property takes the basic shape + 'circle' for clipping. The circle has a radius of 'closest-side'. This test + has a squred div-box. Therefore, 'closest-side', 50% and 'farthest-side' + show the same behavior. On pass there should be a green circle."> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(closest-side);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-006.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-006.html new file mode 100644 index 0000000000..8434edd216 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-006.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with farthest-side</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="reference/clip-path-circle-ref.html"> + <meta name="fuzzy" content="0-38; 0-800"> + <meta name="assert" content="The clip-path property takes the basic shape + 'circle' for clipping. The circle has a radius of 'farthest-side'. This + test has a squred div-box. Therefore, 'closest-side', 50% and + 'farthest-side' show the same behavior. On pass there should be a green + circle."> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(farthest-side);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-007.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-007.html new file mode 100644 index 0000000000..60c5cd52e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-007.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle with closest-side on rectangular div 1</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="reference/clip-path-circle-2-ref.html"> + <meta name="fuzzy" content="0-38; 0-800"> + <meta name="assert" content="The clip-path property takes the basic shape + 'circle' for clipping. The clipped div box is twice as wide as it is + height. With 'closest-side', there should be a full green circle."> + <style type="text/css"> + body, div { + padding: 0; + margin: 0; + } + </style> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: circle(closest-side);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-008.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-008.html new file mode 100644 index 0000000000..a931d3e319 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-circle-008.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle with closest-side on rectangular div 2</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="reference/clip-path-circle-3-ref.html"> + <meta name="fuzzy" content="0-38; 0-800"> + <meta name="assert" content="The clip-path property takes the basic shape + 'circle' for clipping. The clipped div box is twice as high as it is + wide. With 'closest-side', there should be a full green circle."> + <style type="text/css"> + body, div { + padding: 0; + margin: 0; + } + </style> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 400px; background-color: green; clip-path: circle(closest-side);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-columns-shape-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-columns-shape-001.html new file mode 100644 index 0000000000..de13607ad8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-columns-shape-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Masking: Test clip-path property in column</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=626097"> +<link rel="match" href="reference/clip-path-columns-shape-001-ref.html"> +<meta name="assert" content="This test ensures that clip-path property works correctly in column layout."> +<style> +body { margin: 0; } +.clipped { + background-color: green; + border: 5px solid red; + -webkit-clip-path: inset(5px); + clip-path: inset(5px); +} +</style> +<div style="columns: 2; column-gap: 0; width: 200px; height: 100px"> + <div style="height: 100px"></div> + <div style="height: 90px" class="clipped"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-columns-shape-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-columns-shape-002.html new file mode 100644 index 0000000000..6bd11a5e49 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-columns-shape-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Masking: Test clip-path property with svg clipPath element in column</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=626097"> +<link rel="match" href="reference/clip-path-columns-shape-002-ref.html"> +<meta name="assert" content="This test ensures that clip-path property works correctly in column layout when SVG <clipPath> elements with clipPathUnits='userSpaceOnUse' is referenced."> +<style> +body { margin: 0; } +.clipped { + background-color: green; + border: 5px solid red; + -webkit-clip-path: url(#c); + clip-path: url(#c); +} +</style> +<div style="columns: 2; column-gap: 0; width: 200px; height: 100px"> + <div style="height: 100px"></div> + <div style="height: 90px" class="clipped"></div> +</div> +<svg> + <clipPath id="c" clipPathUnits="userSpaceOnUse"> + <rect x="5" y="5" width="90" height="90"/> + </clipPath> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1a.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1a.html new file mode 100644 index 0000000000..b10dcbe3ad --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1a.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path content-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element."> + <meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-420"> + <style> + div { + background-color: blue; + position: absolute; + left: 10px; + top: 10px; + width: 100px; + height: 100px; + padding: 40px; + clip-path: circle(farthest-side) content-box; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1b.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1b.html new file mode 100644 index 0000000000..8c2a651766 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1b.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path content-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element."> + <meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-420"> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <rect x="50" y="50" width="100" height="100" fill="blue" + clip-path="circle(50%) content-box"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1c.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1c.html new file mode 100644 index 0000000000..e1b653aaf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1c.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path content-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-376"> + <meta name="assert" content="Test checks whether clip-path content-box works correctly or not."> + </head> + <style> + svg { + position: absolute; + left: 10px; + top: 10px; + width: 100px; + height: 100px; + padding: 40px; + clip-path: circle(farthest-side) content-box; + } + </style> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1d.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1d.html new file mode 100644 index 0000000000..1968fc8044 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1d.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with content-box</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="match" href="reference/green-100x100.html"> +<meta name="assert" content="Check that the 'clip-path' property supports content-box."> + +<style> + body { margin: 0; } + .clipped { + display: inline-block; + clip-path: content-box; + /* This background draws in the padding and should be clipped. */ + background-color: red; + padding: 4px; + /* This border draws outside the content box and should be clipped. */ + border: 4px solid darkred; + /* This outline draws outside the content box and should be clipped. */ + outline: 100px solid maroon; + } + .content { + width: 100px; + height: 100px; + background: green; + } +</style> +<div class="clipped"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1e.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1e.html new file mode 100644 index 0000000000..5fde5ccd9a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-contentBox-1e.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with content-box and border-radius</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-content-box"> +<link rel="match" href="reference/green-circle-100x100.html"> +<meta name="fuzzy" content="maxDifference=0-65; totalPixels=0-400"> +<meta name="assert" content="Check that the 'clip-path' property supports content-box with border-radius."> + +<style> + body { margin: 0; } + .clipped { + display: inline-block; + clip-path: content-box; + /* This background draws in the padding and should be clipped. */ + background-color: red; + padding: 4px; + border-radius: 58px; + /* This border draws outside the content box and should be clipped. */ + border: 4px solid darkred; + /* This outline draws outside the content box and should be clipped. */ + outline: 100px solid maroon; + } + .content { + width: 100px; + height: 100px; + background: green; + } +</style> +<div class="clipped"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-descendant-text-mutated-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-descendant-text-mutated-001.html new file mode 100644 index 0000000000..8753a25f1e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-descendant-text-mutated-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS Masking: Test ancestors update as text descendants change</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=901851"> +<link rel="match" href="reference/clip-path-descendant-text-mutated-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="This test ensures that ancestors are updated properly when a text descendant of clip path property changes."> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> +#target { + width: 100px; + height: 100px; + background-color: green; + border-right: 100px solid red; + clip-path: url(#clip); +} +</style> +<div id="target"></div> +<svg> + <clipPath id="clip"> + <text id="text" y="80" font-family="Ahem" font-size="100">XX</text> + </clipPath> +</svg> +<script> + waitForAtLeastOneFrame().then(function() { + text.firstChild.data = 'X'; + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-document-element-will-change.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-document-element-will-change.html new file mode 100644 index 0000000000..977eaca140 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-document-element-will-change.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<style> +html { + background: red; + /* an "L" shape */ + clip-path: polygon(50px 50px, 100px 50px, 100px 100px, 150px 100px, 150px 150px, 50px 150px); + will-change: transform; +} +div { + width: 500px; + height: 500px; + background: green; +} +</style> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.fxtf.org/compositing/#rootgroup"> +<link rel="help" href="https://drafts.fxtf.org/compositing/#pagebackdrop"> +<link rel="match" href="reference/clip-path-document-element-ref.html"> +<meta name="assert" content="Clip-path on the document element applies to the root background. + The test passes if there is a green 'L' shape without red."> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-document-element.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-document-element.html new file mode 100644 index 0000000000..56f2d5c8eb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-document-element.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<style> +html { + background: red; + /* an "L" shape */ + clip-path: polygon(50px 50px, 100px 50px, 100px 100px, 150px 100px, 150px 150px, 50px 150px); +} +div { + width: 500px; + height: 500px; + background: green; +} +</style> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.fxtf.org/compositing/#rootgroup"> +<link rel="help" href="https://drafts.fxtf.org/compositing/#pagebackdrop"> +<link rel="match" href="reference/clip-path-document-element-ref.html"> +<meta name="assert" content="Clip-path on the document element applies to the root background. + The test passes if there is a green 'L' shape without red."> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-001.html new file mode 100644 index 0000000000..1381f53cb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 1</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"> + <link rel="match" href="reference/clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes an external reference to a clipPath element for clipping. + On pass you should see a green box."> +</head> +<body> + <p>The test passes if there is a green box.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: url(#clip);"></div> + + <svg> + <clipPath id="clip"> + <rect x="50" y="50" width="150px" height="100" /> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-002.html new file mode 100644 index 0000000000..6d6d77ceca --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 2</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"> + <link rel="match" href="reference/clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes an reference to a clipPath element for clipping. + On pass you should see a green with a blue border."> +</head> +<body> + <p>The test passes if there is a green box.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: url(#clip);"></div> + + <svg> + <clipPath id="clip"> + <rect x="50" y="50" width="150px" height="100" /> + </clipPath> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-003.html new file mode 100644 index 0000000000..1eff3b4fce --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-003.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 1</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"> + <link rel="match" href="reference/clip-path-ref-right-green-ref.html"> + <meta name="assert" content="The clip-path property takes a reference to a clipPath element for clipping. Percentage values + are relative to the viewport for userSpaceOnUse on clipPathUnits. + On pass the left half of the site is white and the right half of the site is green."> + + <style> + html, body { + width: 100%; + height: 100%; + margin: 0; + } + </style> +</head> +<body> + <div style="width: 100%; height: 100%; background-color: green; clip-path: url(#clip); position: absolute;"></div> + <p style="position: absolute;">The test passes if the left half of the site is white and the right half of the site is green.</p> + + <svg> + <clipPath id="clip"> + <rect x="50%" y="0" width="50%" height="100%" /> + </clipPath> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-004.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-004.html new file mode 100644 index 0000000000..af65df668f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-004.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 2</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"> + <link rel="match" href="reference/clip-path-ref-bottom-green-ref.html"> + <meta name="assert" content="The clip-path property takes a reference to a clipPath element for clipping. Percentage values + are relative to the viewport for userSpaceOnUse on clipPathUnits. + On pass the top half of the site is white and the bottom half of the site is green."> + + <style> + html, body { + width: 100%; + height: 100%; + margin: 0; + } + </style> +</head> +<body> + <div style="width: 100%; height: 100%; background-color: green; clip-path: url(#clip); position: absolute;"></div> + <p style="position: absolute;">The test passes if the top half of the site is white and the bottom half of the site is green.</p> + + <svg> + <clipPath id="clip"> + <rect x="0" y="50%" width="100%" height="50%" /> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-001.html new file mode 100644 index 0000000000..f48b197137 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with absolute values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-ellipse-ref.html"> + <meta name="fuzzy" content="0-38; 0-400"> + <meta name="assert" content="The clip-path property takes the basic shape + 'ellipse' for clipping. Test absolute values for radii and position + arguments. On pass you should see a green ellipse."> +</head> +<body> + <p>The test passes if there is a full green ellipse.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse(75px 50px at 125px 100px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-002.html new file mode 100644 index 0000000000..ecc5ca090f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with percentage values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-ellipse-ref.html"> + <meta name="fuzzy" content="0-38; 0-400"> + <meta name="assert" content="The clip-path property takes the basic shape + 'ellipse' for clipping. Test percentage values for radii and position + arguments. Percentage values are relative to a reference box. If no + reference box was specified, percentage values are relative to border-box. + On pass you should see a green ellipse."> +</head> +<body> + <p>The test passes if there is a full green ellipse.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse(30% 25% at 50% 50%);"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-003.html new file mode 100644 index 0000000000..eff287614b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-003.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with percentage values on square</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-circle-ref.html"> + <meta name="fuzzy" content="0-38; 0-800"> + <meta name="assert" content="The clip-path property takes the basic shape + 'ellipse' for clipping. Test percentage values for radii and position + arguments. Percentage values are relative to a reference box. If no + reference box was specified, percentage values are relative to border-box. + On pass there should be a full green circle."> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: ellipse(50% 50% at 50% 50%);"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-004.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-004.html new file mode 100644 index 0000000000..3988840943 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with different absolute values on square</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-ellipse-ref.html"> + <meta name="fuzzy" content="0-38; 0-400"> + <meta name="assert" content="The clip-path property takes the basic shape + 'ellipse' for clipping. Test absolute values for arguments. On pass you + should see a green ellipse."> +</head> +<body> + <p>The test passes if there is a full green ellipse.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: ellipse(75px 50px at 125px 100px);"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-005.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-005.html new file mode 100644 index 0000000000..c7107d2617 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-005.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with different percentage values on square</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-ellipse-ref.html"> + <meta name="fuzzy" content="0-38; 0-400"> + <meta name="assert" content="The clip-path property takes the basic shape + 'ellipse' for clipping. Test percentage values for radii and position + arguments. Percentage values are relative to a reference box. If no + reference box was specified, percentage values are relative to border-box. + Different values for getting an ellipse from a square. On pass you should + see a green ellipse."> +</head> +<body> + <p>The test passes if there is a full green ellipse.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: ellipse(37.5% 25% at 62.5% 50%);"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-006.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-006.html new file mode 100644 index 0000000000..d0b4efafeb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with absolute values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-ellipse-ref.html"> + <meta name="fuzzy" content="0-38; 0-400"> + <meta name="assert" content="The clip-path property takes the basic shape + 'ellipse' for clipping. Test absolute values for radii and position + arguments. On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a full green ellipse.</p> + <div style="width: 150px; height: 100px; position: absolute; margin: 50px; background-color: green; clip-path: ellipse();"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-007.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-007.html new file mode 100644 index 0000000000..2105b36df3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-007.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with no arguments</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-ellipse-ref.html"> + <meta name="fuzzy" content="0-38; 0-400"> + <meta name="assert" content="The clip-path property takes the basic shape + 'ellipse' for clipping. If no further arguments were specified, the radii + are 'closest-side' each. The position is initialised to the center of the + element. On pass there is a full green ellipse."> +</head> +<body> + <p>The test passes if there is a full green ellipse.</p> + <div style="width: 150px; height: 100px; position: absolute; margin: 50px; background-color: green; clip-path: ellipse(farthest-side closest-side);"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-008.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-008.html new file mode 100644 index 0000000000..4e4ac51842 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-ellipse-008.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with 50% 50%</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-ellipse-ref.html"> + <meta name="fuzzy" content="0-38; 0-400"> + <meta name="assert" content="The clip-path property takes the basic shape + 'ellipse' for clipping. Test percentage values for radii and position + arguments. Percentage values are relative to a reference box. If no + reference box was specified, percentage values are relative to border-box. + Both radii are specified with percentage values. The position is + initialised to the center of the element. On pass there is a full green + ellipse."> +</head> +<body> + <p>The test passes if there is a full green ellipse.</p> + <div style="width: 150px; height: 100px; position: absolute; margin: 50px; background-color: green; clip-path: ellipse(50% 50%);"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fillBox-1a.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fillBox-1a.html new file mode 100644 index 0000000000..c14890e967 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fillBox-1a.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path fill-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-79; totalPixels=0-392"> + <meta name="assert" content="Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG SVG element."> + <style> + svg { + position: absolute; + left: 5px; + top: 5px; + background-color: blue; + width: 100px; + height: 100px; + margin: 10px; + padding: 10px; + border: solid blue 25px; + clip-path: circle(farthest-side) fill-box; + } + </style> + </head> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fillBox-1b.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fillBox-1b.html new file mode 100644 index 0000000000..529cee6a42 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fillBox-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path fill-box</title> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-376"> + <meta name="assert" content="Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG foreign object element."> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 50px; top: 50px;"> + <foreignObject x="0" y="0" width="100" height="100" fill="blue" clip-path="circle(50%) fill-box"> + <div style="width: 100px; height: 100px; background: blue"></div> + </foreignObject> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-order-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-order-ref.html new file mode 100644 index 0000000000..5fdef1e300 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-order-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Clip-path should be applied after filtering</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> + +<div> + <p>Expected: A green box.<br> + There should be no red visible.<br> + There should be a crisp, clipped edge around the green box (no blurring).</p> +</div> + +<style> + #testcase { + position: absolute; + width: 200px; + height: 200px; + background: green; + will-change: transform; + } +</style> +<div id="testcase"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-order.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-order.html new file mode 100644 index 0000000000..5806e75d53 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-order.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Clip-path should be applied after filtering</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement"> +<link rel="match" href="clip-path-filter-order-ref.html"> + +<div> + <p>Expected: A green box.<br> + There should be no red visible.<br> + There should be a crisp, clipped edge around the green box (no blurring).</p> +</div> + +<style> + #testcase { + position: absolute; + width: 400px; + height: 400px; + background: green; + will-change: transform; + filter: drop-shadow(16px 16px 20px red); + clip-path: inset(0px 200px 200px 0px); + } +</style> +<div id="testcase"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-radius-clips.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-radius-clips.html new file mode 100644 index 0000000000..f715f0de78 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-radius-clips.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#clipping-paths"> +<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint"> +<link rel="match" href="reference/clip-path-filter-radius-clips-ref.html"> +<meta name="assert" content="For crbug.com/1099234, ensure correct clip hierarchy with clip-path, filter and border radius clips"> +<div style="width: 400px; height: 400px; border-radius: 10px; contain: paint"> + <div style="width: 400px; height: 400px; border-radius: 10px; contain: paint"> + <div style="width: 100px; height: 10px; will-change: transform; clip-path: circle(50%)"></div> + <div style="margin-left: 10px; filter: invert(100%); will-change: filter; + width: 100px; height: 100px; background: magenta"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-nested-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-nested-ref.html new file mode 100644 index 0000000000..b860304f04 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-nested-ref.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<style> + body, html { + margin: 0; + padding: 0; + background: green; + } + + .purple-square { + background: purple; + width: 50px; + height: 50px; + } +</style> +<div class="purple-square"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-nested.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-nested.html new file mode 100644 index 0000000000..5090bc2aed --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-nested.html @@ -0,0 +1,38 @@ +<!doctype html> +<title>CSS Test: nested clip-path() inside the same reference frame with position: fixed</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1501111"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> +<link rel="match" href="clip-path-fixed-nested-ref.html"> +<style> + body, html { + margin: 0; + padding: 0; + } + .outer-clip { + height: 100vh; + clip-path: inset(0 0 0 0); + background: green; + } + .fixed { + position: fixed; + } + .inner-clip { + height: 50px; + width: 50px; + clip-path: inset(0 0 0 0); + } + .inner-clip-contents { + height: 100px; + width: 100px; + background: purple; + } +</style> +<div class="outer-clip"> + <div class="fixed"> + <div class="inner-clip"> + <div class="inner-clip-contents"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-scroll-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-scroll-ref.html new file mode 100644 index 0000000000..86aad95935 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-scroll-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<div style="height: 100vh"></div> +<div style="width: 200px; height: 200px; background: green"></div> +<script> + window.scrollTo(0, 1000); +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-scroll.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-scroll.html new file mode 100644 index 0000000000..2b6e09b0e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-fixed-scroll.html @@ -0,0 +1,20 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: clip-path above position: fixed scrolled</title> +<link rel="help" href="https://crbug.com/1267676"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> +<link rel="match" href="clip-path-fixed-scroll-ref.html"> +<script src="/common/rendering-utils.js"></script> +<script src="/common/reftest-wait.js"></script> +<div style="height: 100vh"></div> +<div style="width: 200px; height: 200px; clip-path: inset(0 0 0 0)"> + <div style="position: fixed; top: 0; left: 0; width: 2000px; height: 2000px; background: green"></div> +</div> +<script> +waitForAtLeastOneFrame().then(() => { + scrollTo(0, 1000); + takeScreenshot(); +}); +</script> +</html> + diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-foreignobject-non-zero-xy.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-foreignobject-non-zero-xy.html new file mode 100644 index 0000000000..a63f4c8aa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-foreignobject-non-zero-xy.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>CSS Masking: clip-path on a foreignObject with non-zero 'x' and 'y' render correctly</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1218383"> +<link rel="match" href="reference/green-100x100.html"> +<svg viewBox="25 50 200 100" width="200"> + <rect x="25" y="50" width="100" height="100" fill="red"/> + <clipPath id="r"> + <rect x="25" y="50" width="100" height="100"/> + </clipPath> + <foreignObject x="25" y="50" width="150" height="100" clip-path="url(#r)"> + <div style="width: 100px; height: 100px; background-color: green; border-right: 50px solid red"></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-geometryBox-1-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-geometryBox-1-ref.html new file mode 100644 index 0000000000..add81e8dfe --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-geometryBox-1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path geometry box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <circle cx="100" cy="100" r="50" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-geometryBox-2-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-geometryBox-2-ref.html new file mode 100644 index 0000000000..b9ee9ab63b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-geometryBox-2-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path geometry box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <polygon points="100,50 150,100 150,150 50,150 50,100" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-geometryBox-2.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-geometryBox-2.html new file mode 100644 index 0000000000..d4c47349d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-geometryBox-2.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path margin-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-2-ref.html"> + <meta name="assert" content="Test checks whether clip-path margin-box works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-394"> + <style> + div { + position: absolute; + left: 0px; + top: 0px; + background-color: blue; + width: 100px; + height: 100px; + margin: 50px; + clip-path: polygon(0% 75%, 50% 25%, 100% 75%) margin-box; + } + </style> + </head> + <body> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-001.html new file mode 100644 index 0000000000..76018614ba --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>clip-path on inline, horizontal-tb writing-mode</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path" title="5.1 Clipping Shape: the clip-path property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + body { + overflow: hidden; + } + .container { + writing-mode: horizontal-tb; + padding: 70px 30px; + margin: -170px -230px; + font: 100px/1 Ahem; + line-height: 100px; + color: transparent; + } + .container > span { + clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%); + color: red; + } + .container > span > span { + color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container"> + <br> + XX<span><span>X</span>X<br>XXXXX</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-002.html new file mode 100644 index 0000000000..ca8634b903 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>clip-path on inline, vertical-rl writing-mode</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path" title="5.1 Clipping Shape: the clip-path property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + body { + overflow: hidden; + } + .container { + writing-mode: vertical-rl; + padding: 70px 30px; + margin: -270px -130px; + font: 100px/1 Ahem; + line-height: 100px; + color: transparent; + } + .container > span { + clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); + color: red; + } + .container > span > span { + color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container"> + <br> + XX<span><span>X</span>X<br>XXXXX</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-003.html new file mode 100644 index 0000000000..471c54c1c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-003.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>clip-path on inline, vertical-lr writing-mode</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path" title="5.1 Clipping Shape: the clip-path property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + body { + overflow: hidden; + } + .container { + writing-mode: vertical-lr; + padding: 70px 30px; + margin: -270px -130px; + font: 100px/1 Ahem; + line-height: 100px; + color: transparent; + } + .container > span { + clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); + color: red; + } + .container > span > span { + color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container"> + <br> + XX<span><span>X</span>X<br>XXXXX</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-004-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-004-ref.html new file mode 100644 index 0000000000..9dfce3f7fa --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-004-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + margin: 50px; + clip-path: circle(50%); + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-004.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-004.html new file mode 100644 index 0000000000..8061a91988 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-004.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>clip-path on inline with margin-box</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-margin-box"> +<link rel="match" href="clip-path-inline-004-ref.html"> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + margin: 50px; + clip-path: circle(25%) margin-box; + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-005-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-005-ref.html new file mode 100644 index 0000000000..9dfce3f7fa --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-005-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + margin: 50px; + clip-path: circle(50%); + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-005.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-005.html new file mode 100644 index 0000000000..39dac759e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-005.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>clip-path on inline with content-box</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-content-box"> +<link rel="match" href="clip-path-inline-005-ref.html"> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + padding: 50px; + clip-path: circle(50%) content-box; + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-006-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-006-ref.html new file mode 100644 index 0000000000..9dfce3f7fa --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-006-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + margin: 50px; + clip-path: circle(50%); + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-006.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-006.html new file mode 100644 index 0000000000..7a37c04f44 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-006.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>clip-path on inline with padding-box</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-padding-box"> +<link rel="match" href="clip-path-inline-006-ref.html"> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + border: 50px solid red; + clip-path: circle(50%) padding-box; + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-007-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-007-ref.html new file mode 100644 index 0000000000..981482ff72 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-007-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + clip-path: circle(50%); + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-007.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-007.html new file mode 100644 index 0000000000..9518b587c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-007.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>clip-path on inline with border-box and border-radius</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-border-box"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box"> +<link rel="match" href="clip-path-inline-007-ref.html"> +<meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-332"> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + border-radius: 50px; + clip-path: border-box; + color: green; + /* This outline draws outside the border box and should be clipped. */ + outline: 8px solid red; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-008-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-008-ref.html new file mode 100644 index 0000000000..981482ff72 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-008-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + clip-path: circle(50%); + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-008.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-008.html new file mode 100644 index 0000000000..911f9cac4d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-008.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>clip-path on inline with margin-box and border-radius</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-margin-box"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box"> +<link rel="match" href="clip-path-inline-008-ref.html"> +<meta name="fuzzy" content="maxDifference=0-14; totalPixels=0-240"> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 50px/1 Ahem; + line-height: 50px; + } + .container > span { + margin: 25px; + border-radius: 50px; + clip-path: margin-box; + color: green; + /* This outline draws far outside the margin box and should be partially clipped. */ + outline: 200px solid green; + /* Disables margin collapsing. */ + float: left; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-009-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-009-ref.html new file mode 100644 index 0000000000..26da94d8f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-009-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + margin-left: 50px; + clip-path: circle(50%); + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-009.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-009.html new file mode 100644 index 0000000000..6a7fbb5498 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-009.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>clip-path on inline with content-box and border-radius</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-content-box"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box"> +<link rel="match" href="clip-path-inline-009-ref.html"> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + padding: 50px; + border-radius: 100px; + clip-path: content-box; + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-010-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-010-ref.html new file mode 100644 index 0000000000..981482ff72 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-010-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + clip-path: circle(50%); + color: green; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-010.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-010.html new file mode 100644 index 0000000000..dea78b6347 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-010.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>clip-path on inline with padding-box and border-radius</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-padding-box"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box"> +<link rel="match" href="clip-path-inline-010-ref.html"> +<meta name="fuzzy" content="maxDifference=0-43; totalPixels=0-319"> +<meta content="ahem" name="flags"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .container { + font: 100px/1 Ahem; + line-height: 100px; + } + .container > span { + margin-left: -8px; + border-radius: 58px; + clip-path: padding-box; + color: green; + /* This border draws outside the padding box and should be clipped. */ + border: 8px solid red; + } +</style> +<p>Test passes if there is a filled green circle with radius 50px. +<div class="container"> + <span>X</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inset-round-percent-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inset-round-percent-ref.html new file mode 100644 index 0000000000..597481d7db --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inset-round-percent-ref.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> +body { + margin: 0; +} +div { + width: 100px; + height: 100px; + background: deeppink; + clip-path: inset(80px 0 0 round 8px); +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inset-round-percent.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inset-round-percent.html new file mode 100644 index 0000000000..cb0e5ec735 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inset-round-percent.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>inset() with percentages resolves against reference box, not inset rect</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1704742"> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#basic-shape-functions"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="clip-path-inset-round-percent-ref.html"> +<style> +body { + margin: 0; +} +div { + width: 100px; + height: 100px; + background: deeppink; + clip-path: inset(80% 0 0 round 8%) +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-localRef-1-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-localRef-1-ref.html new file mode 100644 index 0000000000..d605e046fc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-localRef-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>Reference for clip-path linked to local-ref URL</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <svg height="0" width="0"> + <defs> + <clipPath id="c1"> + <circle cy="110" cx="137" r="90" /> + </clipPath> + </defs> + </svg> + <style> + div { + width: 300px; + height: 300px; + background-color: blue; + clip-path: url(#c1); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-localRef-1.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-localRef-1.html new file mode 100644 index 0000000000..e24afbcd6b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-localRef-1.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<html> + <head> + <head> + <base href="http://example.com"> + <meta charset="utf-8"> + <title>Testcase for clip-path linked to local-ref URL</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-localRef-1-ref.html"> + <meta name="assert" content="Test checks after changing base URL, whether fragment URLs works correctly or not."> + <svg height="0" width="0"> + <defs> + <clipPath id="c1"> + <circle cy="110" cx="137" r="90" /> + </clipPath> + </defs> + </svg> + <style> + div { + width: 300px; + height: 300px; + background-color: blue; + clip-path: url(#c1); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1a.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1a.html new file mode 100644 index 0000000000..009ba674d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1a.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path margin-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path margin-box works correctly or not. This test is for clip-path applied to an SVG element."> + <meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-420"> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 10px; top: 15px;"> + <rect x="40" y="35" width="100" height="100" fill="blue" + clip-path="circle(50%) margin-box"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1b.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1b.html new file mode 100644 index 0000000000..04f22e84d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1b.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with margin-box</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="match" href="reference/green-100x100.html"> +<meta name="assert" content="Check that the 'clip-path' property supports margin-box."> + +<style> + .clipped { + width: 50px; + height: 50px; + background-color: green; + clip-path: margin-box; + /* This outline draws far outside the margin box and should be partially clipped. */ + outline: 200px solid green; + margin: 25px; + /* Disables margin collapsing. */ + float: left; + } +</style> +<div class="clipped"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1c.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1c.html new file mode 100644 index 0000000000..7d6780731e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1c.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with margin-box and border-radius</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-margin-box"> +<link rel="match" href="reference/green-circle-100x100.html"> +<meta name="fuzzy" content="maxDifference=0-98; totalPixels=0-424"> +<meta name="assert" content="Check that the 'clip-path' property supports margin-box with border-radius."> + +<style> + .clipped { + width: 50px; + height: 50px; + background-color: green; + clip-path: margin-box; + border-radius: 50px; + /* This outline draws far outside the margin box and should be partially clipped. */ + outline: 200px solid green; + margin: 25px; + /* Disables margin collapsing. */ + float: left; + } +</style> +<div class="clipped"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1d-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1d-ref.html new file mode 100644 index 0000000000..cd78d2009a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1d-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + div { + width: 100px; + height: 100px; + background-color: green; + border-radius: 34.4px; + border: 25px solid green; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1d.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1d.html new file mode 100644 index 0000000000..39d3c9db5a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-marginBox-1d.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with margin-box and border-radius when the ratio of border-radius/margin is less than 1</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-margin-box"> +<link rel="match" href="clip-path-marginBox-1d-ref.html"> +<meta name="fuzzy" content="maxDifference=0-146; totalPixels=0-500"> +<meta name="assert" content="Check that the 'clip-path' property supports margin-box with border-radius."> + +<style> + .clipped { + width: 50px; + height: 50px; + background-color: green; + clip-path: margin-box; + border-radius: 10px; + /* This outline draws far outside the margin box and should be partially clipped. */ + outline: 200px solid green; + margin: 50px; + /* Disables margin collapsing. */ + float: left; + } +</style> +<!-- + Spec: If the ratio of border-radius/margin is less than 1, and margin is + positive, then the margin box corner radius is + border-radius + margin * (1 + (ratio-1)^3). + + This test has a border-radius of 10 and a margin of 50, and should use a + margin box corner radius of: 10 + 50 * (1 + (10/50-1)^3) = 34.4 +--> +<div class="clipped"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-mix-blend-mode-1-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-mix-blend-mode-1-ref.html new file mode 100644 index 0000000000..12bfbda589 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-mix-blend-mode-1-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>CSS clip-path reference</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style> + div.foreground { + position: absolute; + background-color: rgb(0,0,255); + z-index: 100; + width: 50px; + height: 50px; + } + + div.background { + position: absolute; + background-color: rgb(0,255,255); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div class="foreground"></div> + <div class="background"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-mix-blend-mode-1.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-mix-blend-mode-1.html new file mode 100644 index 0000000000..ff0c376905 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-mix-blend-mode-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path with mix-blend-mode</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-mix-blend-mode-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path works with mix-blend-mode correctly or not."> + <style> + div { + position: absolute; + width: 100px; + height: 100px; + } + + div.foreground { + background-color: rgb(255,0,255); + clip-path: url(#top_left); + z-index: 100; + mix-blend-mode: multiply; + } + + div.background { + background-color: rgb(0,255,255); + } + </style> + </head> + <body> + <div class="foreground"></div> + <div class="background"></div> + <svg height="0" width="0"> + <defs> + <clipPath id="top_left"> + <rect x="0" y="0" width="50" height="50"/> + </clipPath> + </defs> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-on-fixed-position-scroll-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-on-fixed-position-scroll-ref.html new file mode 100644 index 0000000000..a4f7dc5479 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-on-fixed-position-scroll-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> +.ref { + height: 100px; + width: 100px; + background: green; +} +</style> +<div style="height: 800px"></div> +<div class="ref"></div> +<script> +onload = () => { + window.scrollTo(0, 800); +}; +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-on-fixed-position-scroll.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-on-fixed-position-scroll.html new file mode 100644 index 0000000000..b947f10aa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-on-fixed-position-scroll.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>CSS Masking: Test out-of-view clip-path above fixed-position element scrolled into view</title> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#fixed-position"> +<link rel="help" href="https://crbug.com/1400107"> +<link rel="match" href="clip-path-on-fixed-position-scroll-ref.html"> +<style> +div { + width: 100px; + height: 100px; +} +.clip { + clip-path: inset(0); +} +.fixed { + position: fixed; + background: red; + z-index: -1; + bottom: 0; +} +.green { + position: relative; + background: green; +} +</style> +<div style="height: 800px">Scroll to the bottom. </div> +<div class="clip"> + <div class="fixed"></div> + <div class="green"></div> +</div> +<script> +onload = () => { + window.scrollTo(0, 400); +}; +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1a.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1a.html new file mode 100644 index 0000000000..493ba7ab05 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1a.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path padding-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an HTML element."> + <meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-420"> + <style> + div { + position: absolute; + left: 50px; + top: 50px; + background-color: blue; + width: 50px; + height: 50px; + padding: 25px; + clip-path: circle(farthest-side) padding-box; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1b.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1b.html new file mode 100644 index 0000000000..d3ea29633e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1b.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path padding-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG element."> + <meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-420"> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <rect x="50" y="50" width="100" height="100" fill="blue" + clip-path="circle(50%) padding-box"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1c.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1c.html new file mode 100644 index 0000000000..c3fc5a90af --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1c.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path padding-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-376"> + <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG SVG element."> + <style> + svg { + position: absolute; + left: 50px; + top: 50px; + background-color: blue; + width: 50px; + height: 50px; + padding: 25px; + clip-path: circle(farthest-side) padding-box; + } + </style> + </head> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1d.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1d.html new file mode 100644 index 0000000000..3425c3d2d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1d.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with padding-box</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="match" href="reference/green-100x100.html"> +<meta name="assert" content="Check that the 'clip-path' property supports padding-box."> + +<style> + body { margin: 0; } + .clipped { + width: 100px; + height: 100px; + background-color: green; + clip-path: padding-box; + /* This border draws outside the padding box and should be clipped. */ + border: 8px solid red; + } +</style> +<div class="clipped"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1e.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1e.html new file mode 100644 index 0000000000..cd0d3987d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-paddingBox-1e.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with padding-box and border-radius</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-padding-box"> +<link rel="match" href="reference/green-circle-100x100.html"> +<meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-400"> +<meta name="assert" content="Check that the 'clip-path' property supports padding-box with border-radius."> + +<style> + body { margin: 0; } + .clipped { + width: 100px; + height: 100px; + background-color: green; + clip-path: padding-box; + /* This border draws outside the padding box and should be clipped. */ + border: 8px solid red; + border-radius: 58px; + } +</style> +<div class="clipped"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-001.html new file mode 100644 index 0000000000..ebdfc2297b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and path function with nonzero fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> + <link rel="match" href="reference/clip-path-path-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'path()' for clipping. Test nonzero path function. On pass you should + see a green square."> +</head> +<style> + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: path(nonzero, 'M10,10h80v80h-80zM25,25h50v50h-50z'); + } +</style> +<body> + <p>The test passes if there are a green filled rect.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-002.html new file mode 100644 index 0000000000..e3049922eb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and path function with evenodd fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> + <link rel="match" href="reference/clip-path-path-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'path()' for clipping. Test evenodd path function. On pass you should + see a hollow green square."> +</head> +<style> + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: path(evenodd, 'M10,10h80v80h-80zM25,25h50v50h-50z'); + } +</style> +<body> + <p>The test passes if there are a green hollow rect.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-003.html new file mode 100644 index 0000000000..af1de750c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Masking: clip-path property and path() function with non-zero reference box offset</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#basic-shape-functions"> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#funcdef-basic-shape-path"> +<link rel="match" href="reference/green-100x100.html"> +<style> + #target { + clip-path: path('M0 100h100v100h-100z'); + } +</style> +<svg> + <g id="target"> + <rect y="-100" width="100" height="300" fill="red"/> + <rect width="100" height="100" fill="green"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html new file mode 100644 index 0000000000..30ceefcbc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Masking: Test clip-path property hit-testing when the page is zoomed</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> +<meta name="assert" content="The zoomed path is hit-tested correctly"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #triangle { + width: 100px; + height: 100px; + background-color: green; + clip-path: path(nonzero, 'M0 0, L100 0, L0 100, L 0 0'); + zoom: 2; + } +</style> +<div id="triangle"></div> +<script> + test(() => { + assert_equals(document.elementFromPoint(20, 20).id, 'triangle') + assert_equals(document.elementFromPoint(150, 20).id, 'triangle') + assert_equals(document.elementFromPoint(180, 180).tagName, 'BODY') + }, 'clip-path: path() hit-test takes zoom into account'); + +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html new file mode 100644 index 0000000000..5879917f36 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Masking: Test clip-path property when the page is zoomed</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> +<link rel="match" href="reference/clip-path-path-with-zoom-ref.html"> +<meta name="assert" content="The path gets zoomed together with the content"> +<style> + #red { + position: absolute; + width: 100px; + height: 100px; + background: red; + } + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: path(nonzero, 'M0 0, L100 0, L0 100, L 0 0'); + zoom: 2; + } +</style> +<div id="red"></div> +<div id="rect"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-001.html new file mode 100644 index 0000000000..954f0ba8d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with absolute values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. Test absolute value arguments. On pass you should + see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green box.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(50px 50px, 200px 50px, 200px 150px, 50px 150px)"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-002.html new file mode 100644 index 0000000000..ed2ede4fed --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with percentage values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. Test percentage values for arguments. Percentage + values are relative to specified reference box. If no reference box was + specified, percentage values are relative to border-box. A number of + percentage values are specified as coordinates. On pass you should see a + green square and no red."> +</head> +<body> + <p>The test passes if there is a green box.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(20% 25%, 80% 25%, 80% 75%, 20% 75%)"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-003.html new file mode 100644 index 0000000000..1ecf6803ab --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with absolute and percentage values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. Test absolute and percentage value arguments. On + pass you should see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green box.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip-path: polygon(20% 50px, 200px 25%, 200px 150px, 20% 75%)"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-004.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-004.html new file mode 100644 index 0000000000..cec947a361 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-004.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with fill rule evenodd</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-rectangle-border-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape 'polygon' for clipping. + The point list for the polygon creates a 'hole' with the dimension of the background. With + the fill rule 'evenodd', this whole is clipped out. The clipping makes the green background + of the parent div box visible. + On pass you should see a green box with a blue border."> +</head> +<body> + <p>The test passes if there is a green box with a blue border.</p> + <div style="background-color: green; width: 250px;"> + <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(evenodd, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 200px 50px, 200px 150px, 50px 150px, 50px 50px, 0 50px)"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-005.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-005.html new file mode 100644 index 0000000000..b687f2e752 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with fill rule nonzero</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-rectangle-border-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. The point list for the polygon creates a 'hole' + with the dimension of the background of the clipped element. With the fill + rule 'nonzero', this hole is clipped out. The clipping makes the green + background of the parent div box visible. On pass you should see a green + square with a blue border."> +</head> +<body> + <p>The test passes if there is a green box with a blue border.</p> + <div style="background-color: green; width: 250px;"> + <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(nonzero, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 50px 50px, 50px 150px, 200px 150px, 200px 50px, 0 50px)"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-006.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-006.html new file mode 100644 index 0000000000..1b33eaaf2f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-006.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with padding-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-square-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'padding-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green square + and no red."> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; +} +</style> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="clip-path: polygon(0% 0%, 100% 0%, 100px 100%, 0 100px) padding-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-007.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-007.html new file mode 100644 index 0000000000..9b59097942 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-007.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with border-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'border-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) border-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-008.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-008.html new file mode 100644 index 0000000000..454aba6915 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-008.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with margin-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-stripes-002-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'margin-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 25px; + border-left: lime solid 25px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-009.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-009.html new file mode 100644 index 0000000000..7d3ab5bb42 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-009.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with content-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-square-002-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'content-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green square + and no red."> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 25px; +} +</style> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="clip-path: polygon(0% 0px, 50px 0%, 100% 50px, 0px 100%) content-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-010.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-010.html new file mode 100644 index 0000000000..e74a134082 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-010.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with fill-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box. 'fill-box' was specified but is not supported for HTML + elements. The used value should be 'content-box' for the polygon() function + instead. By mixing percentage and absolute values as coordinates we check + the correct used reference box. On success you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(-75px -50%, 50% -25px, 25px 150%, -75px 75px) fill-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-011.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-011.html new file mode 100644 index 0000000000..7acccd1a69 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-011.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with stroke-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box. 'stroke-box' was specified but is not supported for HTML + elements. The used value should be 'border-box' for the polygon() function + instead. By mixing percentage and absolute values as coordinates we check + the correct used reference box. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) stroke-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-012.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-012.html new file mode 100644 index 0000000000..9a24abfd10 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-012.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with view-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box. 'view-box' was specified but is not supported for HTML + elements. The used value should be 'border-box' for the polygon() function + instead. By mixing percentage and absolute values as coordinates we check + the correct used reference box. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) view-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-013.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-013.html new file mode 100644 index 0000000000..23c93f347d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-013.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon different units</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="reference/clip-path-stripes-003-ref.html"> + <meta name="assert" content="Test the support of different units for + polygon coordinates. The test passes if you see a multiple green and blue + stripe pairs. For each pair, the blue and green stripe must be of same + length."> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +body { + margin: 0; +} +div { + width: 100%; + height: 20px; + background-color: green; + padding: 0; + margin: 0; + font: 20px/1 Ahem; +} +div:nth-child(odd) { + margin-bottom: 5px; + background-color: blue; +} +</style> +<body> + <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p> + <div style="clip-path: polygon(0 0, 50% 0, 50% 20px, 0 20px)"></div> + <div style="width: 50%"></div> + + <div style="clip-path: polygon(0 0, 20em 0, 20em 20px, 0 20px)"></div> + <div style="width: 20em"></div> + + <div style="clip-path: polygon(0 0, 50vw 0, 50vw 20px, 0 20px)"></div> + <div style="width: 50vw"></div> + + <div style="clip-path: polygon(0 0, 40vh 0, 40vh 20px, 0 20px)"></div> + <div style="width: 40vh"></div> + + <div style="clip-path: polygon(0 0, calc(30% + 15px) 0, calc(30% + 15px) 20px, 0 20px)"></div> + <div style="width: calc(30% + 15px)"></div> + + <div style="clip-path: polygon(0 0, 30ex 0, 30ex 20px, 0 20px)"></div> + <div style="width: 30ex"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rect-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rect-001.html new file mode 100644 index 0000000000..1645d45829 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rect-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and rect function</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect"> + <link rel="match" href="reference/clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'rect()' for clipping. On pass you should see a green rect."> +</head> +<style> + #rect { + width: 400px; + height: 200px; + background-color: green; + clip-path: rect(50px 200px 150px 50px); + } +</style> +<body> + <p>The test passes if there is a green box.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rect-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rect-002.html new file mode 100644 index 0000000000..c9032e0a5b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rect-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and rect function</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect"> + <link rel="match" href="reference/clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'rect()' for clipping. On pass you should see a green rect."> +</head> +<style> + #rect { + width: 400px; + height: 200px; + background-color: green; + clip-path: rect(25% 50% 75% 12.5%); + } +</style> +<body> + <p>The test passes if there is a green box.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rect-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rect-003.html new file mode 100644 index 0000000000..a2d201c1b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rect-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and rect function</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect"> + <link rel="match" href="reference/clip-path-xywh-003-ref.html"> + <meta name="fuzzy" content="maxDifference=0-50; totalPixels=0-250"> + <meta name="assert" content="The clip-path property takes the basic shape + 'rect()' for clipping. On pass you should see a green rect with round."> +</head> +<style> + #rect { + width: 400px; + height: 200px; + background-color: green; + clip-path: rect(50px 200px 150px 50px round 20px / 20px); + } +</style> +<body> + <p>The test passes if there is a green box with round.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-001.html new file mode 100644 index 0000000000..35b31ebaef --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path reference box with box-shadow</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=418484"> +<link rel="match" href="reference/clip-path-reference-box-001-ref.html"> +<meta name="assert" content="Check that the 'clip-path' property uses the border box as the reference box."> + +<style> +.clipped { + width: 100px; + height: 200px; + background-color: green; + clip-path: polygon(0% 0%,100% 0%,100% 50%,0% 50%); + box-shadow: 100px 0px red; +} +</style> +<div class="clipped"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-002.html new file mode 100644 index 0000000000..a45e4537fc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with floated element</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=418484"> +<link rel="match" href="reference/clip-path-reference-box-002-ref.html"> +<meta name="assert" content="Check that the 'clip-path' property uses the border box as the reference box."> + +<style> +.clipped { + width: 100px; + height: 200px; + background-color: green; + clip-path: polygon(0% 0%,100% 0%,100% 50%,0% 50%); +} +</style> +<div class="clipped"> + <div style="float:left; margin-left:-100px; margin-top:-100px;"> </div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-003.html new file mode 100644 index 0000000000..ac88439d7b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-003.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path reference box with transform</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=418484"> +<link rel="match" href="reference/clip-path-reference-box-003-ref.html"> +<meta name="assert" content="Check that the 'clip-path' property uses the border box as the reference box when using transform."> + +<style> +.clipped { + width: 100px; + height: 200px; + background-color: green; + clip-path: polygon(0% 0%,100% 0%,100% 50%,0% 50%); +} +.abs { + position: absolute; + width: 200px; + height: 200px; +} +</style> +<div class="abs"> + <div class="clipped" style="position: absolute; overflow: hidden"> + <div class="abs" style="transform: translate(0px, 100px); background-color: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-004.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-004.html new file mode 100644 index 0000000000..eb89065364 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-box-004.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path reference box with inline boxes</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.csswg.org/css-box-3/#content-area"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-polygon"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=641907"> +<link rel="match" href="reference/clip-path-reference-box-004-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> +<meta name="assert" content="Check that the 'clip-path' property applied to an inline that spans multiple lines uses the correct reference boxes/reference box for each fragment."> + +<style> +div { + width: 100px; + height: 100px; + overflow: hidden; + line-height: 50px; + font-size: 50px; + font-family: Ahem; +} +span { + background-color: green; + color: green; + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); +} +</style> +<div> +<span>XX XX</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-restore.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-restore.html new file mode 100644 index 0000000000..eccebd8fbc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-reference-restore.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>CSS Masking: Consecutive clip-paths don't affect each other.</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="issue" href="https://crbug.com/391291"> +<link rel="match" href="reference/clip-path-reference-restore-ref.html"> +<meta name="assert" content="Check that consecutive clip-paths don't affect each other"/> +<style> +.error { + width: 100px; + height: 100px; + background-color: red; + position: absolute; +} +.test { + width: 200px; + height: 50px; + background-color: green; + clip-path: url(#c); +} +</style> +<div class="error"></div> +<div class="test"></div> +<div class="test"></div> +<svg> + <defs> + <clipPath id="c" clipPathUnits="objectBoundingBox"> + <rect width="0.5" height="1"/> + </clipPath> + </defs> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rotated-will-change-transform-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rotated-will-change-transform-ref.html new file mode 100644 index 0000000000..ddbf0e9812 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rotated-will-change-transform-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="transform: rotate(45deg); width: 200px; height: 200px; will-change: transform"> + <div style="position: relative; top: 30px; left: 30px; width: 140px; height: 140px; background: green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rotated-will-change-transform.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rotated-will-change-transform.html new file mode 100644 index 0000000000..a609e9cc91 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-rotated-will-change-transform.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>Clip Path: should be correctly rotated by transform with will-change:transform</title> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> +<link rel="match" href="clip-path-rotated-will-change-transform-ref.html"> +<style>div { width: 200px; height: 200px; position: absolute; }</style> +<div style="transform: rotate(45deg); clip-path: inset(31px)"> + <div style="will-change: transform; background: red"></div> +</div> +<div style="transform: rotate(45deg); will-change: transform"> + <div style="top: 30px; left: 30px; width: 140px; height: 140px; background: green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-round-zero-size-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-round-zero-size-ref.html new file mode 100644 index 0000000000..a5e44e7398 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-round-zero-size-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> +#target { + margin: 30px; + height: 40px; + width: 40px; + background-color: lime; + border-radius: 5px; +} +</style> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-round-zero-size.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-round-zero-size.html new file mode 100644 index 0000000000..59404f81c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-round-zero-size.html @@ -0,0 +1,20 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS clip path with zero box size</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://bugzil.la/1785903"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="clip-path-round-zero-size-ref.html"> +<!-- Allow differences of antialised pixels along rounded edges --> +<meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-100"> +<style> +#target { + margin: 50px; + height: 0px; + width: 0px; + outline: 50px solid lime; + clip-path: inset(-20px round 5px); +} +</style> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video-ref.html new file mode 100644 index 0000000000..43ebcc8dc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<p>Expect no hairlines below.</p> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html new file mode 100644 index 0000000000..c92702d8e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta name="assert" content="There should be no hairline along the edges of clip-path bounding box"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#ClipPathElement"> +<link rel="help" href="https://crbug.com/1171601"> +<link rel="match" href="clip-path-scaled-video-ref.html"> +<script src="/common/reftest-wait.js"></script> +<body style="overflow: hidden"> +<p>Expect no hairlines below.</p> +<svg width="700" height="550"> + <!-- Clipping the video--> + <clipPath id="clip"> + <polygon points="100,100 250,250"/> + </clipPath> + <g clip-path="url(#clip)" transform="scale(0.112)"> + <foreignObject width="320" height="240"> + <video src="/media/test.ogv" autoplay loop></video> + </foreignObject> + </g> + <g clip-path="url(#clip)" transform="scale(0.345)"> + <foreignObject width="320" height="240"> + <video src="/media/test.ogv" autoplay loop></video> + </foreignObject> + </g> + <g clip-path="url(#clip)" transform="scale(0.778)"> + <foreignObject width="320" height="240"> + <video src="/media/test.ogv" autoplay loop></video> + </foreignObject> + </g> + <g clip-path="url(#clip)" transform="scale(0.912)"> + <foreignObject width="320" height="240"> + <video src="/media/test.ogv" autoplay loop></video> + </foreignObject> + </g> + <g clip-path="url(#clip)" transform="scale(1.678)"> + <foreignObject width="320" height="240"> + <video src="/media/test.ogv" autoplay loop></video> + </foreignObject> + </g> + <g clip-path="url(#clip)" transform="scale(3.333)"> + <foreignObject width="320" height="240"> + <video src="/media/test.ogv" oncanplaythrough="takeScreenshot()" autoplay loop></video> + </foreignObject> + </g> +</svg> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scroll.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scroll.html new file mode 100644 index 0000000000..880fd8b77a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scroll.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Masking: Test clip-path property with overflow:scroll</title> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-path-property"> +<link rel="match" href="reference/clip-path-scroll-ref.html"> +<html class="reftest-wait"> +<p>The test passes if there is a green square containing text (which can be scrolled +with mouse wheel or touch). No scrollbars should be seen.</p> +<div id="target" style="clip-path: polygon(10px 10px, 10px 100px, 100px 100px, 100px 10px); + width: 200px; height: 200px; overflow: scroll; background: red"> + <div style="position: relative; top: 100px; + width: 100px; height: 100px; background: green"> + </div> + <div style="height: 1000px"></div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.scrollTop = 100; + document.documentElement.classList.remove("reftest-wait"); + }); +}); +</script> +</html> + diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-001.html new file mode 100644 index 0000000000..6033e9743e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and shape function with nonzero fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="reference/clip-path-path-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test nonzero path function. On pass you should + see a green square."> +</head> +<style> + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: shape(nonzero from 10px 10px, + hline by 80px, vline by 80%, hline by -80%, close, + move to 25px 25px, hline by 50px, vline by 50px, hline by -50%, close); + } +</style> +<body> + <p>The test passes if there are a green filled rect.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-002-units.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-002-units.html new file mode 100644 index 0000000000..b928876a0a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-002-units.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and shape function with evenodd fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="reference/clip-path-path-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test evenodd path function. On pass you should + see a green hollow square."> +</head> +<style> + * { + font-size: 16px; + } + + html { + font-size: 10px; + --v50: 50px; + } + + #rect { + width: 100px; + height: 100px; + font-size: 5px; + font-family: Ahem; + background-color: green; + clip-path: shape(evenodd from 10px 2ch, + hline by 80px, vline by 80%, hline by -8rem, close, + move to 25% 25px, hline by 10em, vline by var(--v50), hline by -50%); + } +</style> +<body> + <p>The test passes if there are a green hollow rect.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-002.html new file mode 100644 index 0000000000..3cb39f8d44 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and shape function with evenodd fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="reference/clip-path-path-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test evenodd path function. On pass you should + see a green hollow square."> +</head> +<style> + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: shape(evenodd from 10px 10px, + hline by 80px, vline by 80%, hline by -80px, close, + move to 25% 25px, hline by 50px, vline by 50px, hline by -50%); + } +</style> +<body> + <p>The test passes if there are a green hollow rect.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html new file mode 100644 index 0000000000..22e7d9aaf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and shape function with nonzero fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="reference/clip-path-shape-003-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test curves."> +</head> +<style> + div { + width: 100px; + height: 100px; + } + #ref { + clip-path: path(nonzero, "M 10 10, Q 40 0 60 20, T 90 0, c 10 40 20 20 -20 60, s -10 70 -40 -10"); + background-color: red; + position: absolute; + } + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: shape(nonzero from 10px 10px, + curve to 60px 20% via 40px 0, + smooth to 90px 0, + curve by -20px 60% via 10% 40px 20% 20px, + smooth by -40% -10px via -10px 70px); + } +</style> +<body> + <p>You should see no red.</p> + <div id="ref"></div> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html new file mode 100644 index 0000000000..14e3ba6329 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and shape function with nonzero fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="reference/clip-path-shape-004-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test arcs."> +</head> +<style> + div { + width: 100px; + height: 100px; + } + #ref { + clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20, a 33 33 120 1 1 -40 50, A 20 25 0 0 0 20 20"); + background-color: red; + position: absolute; + } + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: shape(nonzero from 20px 20px, + arc to 80px 20px of 25px 12px cw, + arc by -40px 50px of 33px cw large rotate 120deg, + arc to 20% 20% of 20px 25px ccw); + } +</style> +<body> + <p>You should see no red.</p> + <div id="ref"></div> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-foreignobject-non-zero-xy.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-foreignobject-non-zero-xy.html new file mode 100644 index 0000000000..4e221f36e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-foreignobject-non-zero-xy.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>CSS Masking: clip-path on a foreignObject with non-zero 'x' and 'y' render correctly</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1218383"> +<link rel="match" href="reference/green-100x100.html"> +<svg viewBox="25 50 200 100" width="200"> + <rect x="25" y="50" width="100" height="100" fill="red"/> + <foreignObject x="25" y="50" width="150" height="100" clip-path="inset(0 50 0 0)"> + <div style="width: 100px; height: 100px; background-color: green; border-right: 50px solid red"></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-strokeBox-1a.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-strokeBox-1a.html new file mode 100644 index 0000000000..487f5363b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-strokeBox-1a.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path stroke-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-65; totalPixels=0-368"> + <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not. This test is for clip-path applied to an SVG SVG element."> + <style> + svg { + position: absolute; + left: 40px; + top: 40px; + background-color: blue; + width: 30px; + height: 30px; + margin: 10px; + padding: 10px; + border: solid blue 25px; + clip-path: circle(farthest-side) stroke-box; + } + </style> + </head> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-strokeBox-1b.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-strokeBox-1b.html new file mode 100644 index 0000000000..33956e3d47 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-strokeBox-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path stroke-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-260"> + <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not."> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <rect x="60" y="60" width="80" height="80" fill="blue" stroke="blue" stroke-width="20" clip-path="circle(50%) stroke-box"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-strokeBox-1c.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-strokeBox-1c.html new file mode 100644 index 0000000000..577e6d0a4e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-strokeBox-1c.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path stroke-box with transform</title> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-260"> + <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not."> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <g clip-path="circle(50%) stroke-box"> + <rect x="0" y="60" width="80" height="80" fill="blue" stroke="blue" stroke-width="20" transform="translate(60,0)"/> + </g> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-invalidate-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-invalidate-ref.html new file mode 100644 index 0000000000..20c8085b94 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-invalidate-ref.html @@ -0,0 +1,28 @@ +<!doctype html> +<html> +<title>Clip Path: invalidate composited clip-path via SVG</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> + +<style> + body { + margin: 0; + } + div { + height: 500px; + background: black; + clip-path: url(#clip); + will-change: transform; + } + svg { + width: 0; + height: 0; + } +</style> + +<div></div> + +<svg viewBox="0 0 1 1"> + <clipPath id="clip" clipPathUnits="objectBoundingBox"> + <polygon points="0,0 0.5,1 1,0" /> + </clipPath> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-invalidate.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-invalidate.html new file mode 100644 index 0000000000..0bf921c7cf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-invalidate.html @@ -0,0 +1,41 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Clip Path: invalidate composited clip-path via SVG</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> +<link rel="match" href="clip-path-svg-invalidate-ref.html"> +<script src="/common/reftest-wait.js"></script> + +<style> + body { + margin: 0; + } + div { + height: 500px; + background: black; + clip-path: url(#clip); + will-change: transform; + } + svg { + width: 0; + height: 0; + } +</style> + +<div></div> + +<svg viewBox="0 0 1 1"> + <clipPath id="clip" clipPathUnits="objectBoundingBox"> + <polygon points="0,0 0.5,0.5 1,0" /> + </clipPath> +</svg> + +<script> + const polygon = document.querySelector("polygon"); + const points = "0,0 0.5,1 1,0"; + requestAnimationFrame(() => requestAnimationFrame(() => { + polygon.setAttribute("points", points); + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter-ref.html new file mode 100644 index 0000000000..194c473482 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/fonts/ahem.css" /> +<style> +#svgText { + font: 100px/1 Ahem; +} +</style> +<svg width="500" height="300"> + <text id="svgText" x="10" y="100">Text</text> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter.html new file mode 100644 index 0000000000..68d462ab80 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter.html @@ -0,0 +1,25 @@ +<!doctype html> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> +<link rel="match" href="clip-path-svg-text-backdrop-filter-ref.html"> +<meta name="fuzzy" content="0-1;0-200"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/fonts/ahem.css" /> +<style> +.masked { + width: 500px; + height: 300px; + clip-path: url(#svgPath); + backdrop-filter: invert(100%); + background: transparent; +} +#svgText { + font: 100px/1 Ahem; +} +</style> +<div class="masked"></div> +<svg> + <clipPath id="svgPath"> + <text id="svgText" x="10" y="100">Text</text> + </clipPath> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-css.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-css.html new file mode 100644 index 0000000000..8a0d7111b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-css.html @@ -0,0 +1,24 @@ +<!doctype html> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#ClipPathElement"> +<link rel="match" href="reference/clip-path-svg-text-css-ref.html"> +<meta name="fuzzy" content="0-1;0-200"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/fonts/ahem.css" /> +<style> +text { + font: 50px/1 Ahem; + text-shadow: grey 10px 10px; + fill: none; + stroke: red; + stroke-width: 10px; +} +</style> +<svg> + <defs> + <!-- clipPath works on raw geometry regardless of fill/stroke/shadow etc --> + <clipPath id="c"> + <text x="30" y="50">Hello</text> + </clipPath> + </defs> + <rect width="200" height="100" fill="green" clip-path="url(#c)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-font-loading.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-font-loading.html new file mode 100644 index 0000000000..230c36ce6e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-font-loading.html @@ -0,0 +1,30 @@ +<!doctype html> +<html class="reftest-wait"> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.csswg.org/css-font-loading/#font-face-load"> +<link rel="help" href="https://crbug.com/1222734"> +<link rel="match" href="reference/green-100x100.html"> +<script src="/common/rendering-utils.js"></script> +<script src="/common/reftest-wait.js"></script> +<style> + #target { + width: 100px; + height: 100px; + border-right: 100px solid red; + clip-path: url(#clip); + background: green; + } +</style> +<div id="target"></div> +<svg height="0"> + <clipPath id="clip"> + <text y="80" font-size="100" font-family="DelayedAhem, serif">X</text> + </clipPath> +</svg> +<script> + waitForAtLeastOneFrame().then(() => { + let font = new FontFace('DelayedAhem', 'url("/fonts/Ahem.ttf")'); + document.fonts.add(font); + font.load().then(takeScreenshot); + }); +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-transform-mutated-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-transform-mutated-001.html new file mode 100644 index 0000000000..01f11a34a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-transform-mutated-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Masking: Test clip-path after updating its transform</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=881700"> +<link rel="match" href="reference/clip-path-transform-mutated-001-ref.html"> +<meta name="assert" content="This test ensures that updating clipPath transform works properly."> +<script> +setup({ explicit_done: true }); +</script> +<style> +#target { + width: 100px; + height: 100px; + background-color: green; + clip-path: url(#clip); +} +</style> +<div id="target"></div> +<svg> + <clipPath id="clip"> + <rect width="1" height="1"/> + </clipPath> +</svg> +<script> +clip.style.transform = 'scale(100, 100)'; +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-transform-mutated-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-transform-mutated-002.html new file mode 100644 index 0000000000..de00a013ad --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-transform-mutated-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS Masking: Mutating a <clipPath>s 'transform' updates the clip path</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path""> +<link rel="help" href="https://crbug.com/881700"> +<link rel="match" href="reference/clip-path-transform-mutated-002-ref.html"> +<meta name="assert" content="Check that clipPath's clients should be notified when the 'transform' presentation attribute (or CSS property) was mutated on a <clipPath>."/> + +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> + +<style> +#target { + width: 100px; + height: 100px; + background-color: green; + clip-path: url(#clip); +} +</style> +<div id="target"></div> +<svg> + <clipPath id="clip"> + <rect width="1" height="1"/> + </clipPath> +</svg> +<script> + waitForAtLeastOneFrame().then(function() { + clip.setAttribute('transform', 'scale(100 100)'); + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-url-reference-change-from-empty.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-url-reference-change-from-empty.html new file mode 100644 index 0000000000..2de0bb866f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-url-reference-change-from-empty.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Switch from an empty to a non-empty clip-path url()</title> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> +<link rel="match" href="reference/green-100x100.html"> +<script src="/common/reftest-wait.js"></script> +<svg> + <clipPath id="empty"/> + <clipPath id="rect"> + <rect width="100" height="100"/> + </clipPath> + <rect width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="green" id="target" clip-path="url(#empty)"/> +</svg> +<script> + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.getElementById('target').setAttribute('clip-path', 'url(#rect)'); + takeScreenshot(); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-url-reference-change.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-url-reference-change.html new file mode 100644 index 0000000000..4a6266aabd --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-url-reference-change.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Switch from one clip-path url() to another with the same bounds</title> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> +<link rel="match" href="reference/green-100x100.html"> +<script src="/common/reftest-wait.js"></script> +<svg> + <clipPath id="circle"> + <circle cx="50" cy="50" r="50"/> + </clipPath> + <clipPath id="rect"> + <rect width="100" height="100"/> + </clipPath> + <rect width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="green" id="target" clip-path="url(#circle)"/> +</svg> +<script> + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.getElementById('target').setAttribute('clip-path', 'url(#rect)'); + takeScreenshot(); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-url-reference-svg-foreignobject-zoomed.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-url-reference-svg-foreignobject-zoomed.html new file mode 100644 index 0000000000..df8d0cc89c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-url-reference-svg-foreignobject-zoomed.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>CSS Masking: clip-path, <clipPath> with objectBoundingBox units on a foreignObject</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1512077"> +<link rel="match" href="reference/green-100x100.html"> +<style> + #clipped { + background: green; + width: 50px; + height: 50px; + border-bottom: 50px solid red; + border-right: 50px solid red; + } +</style> +<svg style="zoom: 2"> + <rect width="50" height="50" fill="red"/> + <clipPath id="c" clipPathUnits="objectBoundingBox"> + <rect width=".5" height=".5"/> + </clipPath> + <foreignObject clip-path="url(#c)" width="100" height="100"> + <div id="clipped"></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1a.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1a.html new file mode 100644 index 0000000000..5b029e1ef7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1a.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path view-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path view-box works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-420"> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 10px; top: 10px;"> + <rect x="20" y="20" width="135" height="135" fill="blue" + clip-path="circle(25% at calc(50% - 10px) calc(50% - 10px)) view-box"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1b.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1b.html new file mode 100644 index 0000000000..7d44efb81e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1b.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path view-box with viewbox</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-36; totalPixels=0-376"> + <meta name="assert" content="Test checks whether clip-path view-box with viewbox works correctly or not."> + </head> + <body> + <svg width="200" height="200" viewBox="50 50 100 100" preserveAspectRatio="none" style="position: absolute; left: 10px; top: 10px;"> + <rect x="0" y="0" width="200" height="200" fill="blue" + clip-path="circle(25% at calc(100% - 5px) calc(100% - 5px)) view-box"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1c.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1c.html new file mode 100644 index 0000000000..d46c6d2f03 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1c.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path view-box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-65; totalPixels=0-368"> + <meta name="assert" content="Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG SVG element."> + <style> + svg { + position: absolute; + left: 40px; + top: 40px; + background-color: blue; + width: 30px; + height: 30px; + margin: 10px; + padding: 10px; + border: solid blue 25px; + clip-path: circle(farthest-side) view-box; + } + </style> + </head> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1d.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1d.html new file mode 100644 index 0000000000..0d58e4f331 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-viewBox-1d.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path view-box</title> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-376"> + <meta name="assert" content="Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG foreign object element."> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 50px; top: 50px;"> + <foreignObject x="0" y="0" width="100" height="100" fill="blue" clip-path="circle(25% at 50 50) view-box"> + <div style="width: 100px; height: 100px; background: blue"></div> + </foreignObject> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-xywh-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-xywh-001.html new file mode 100644 index 0000000000..a3d55c277c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-xywh-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and xywh function</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-xywh"> + <link rel="match" href="reference/clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'xywh()' for clipping. On pass you should see a green rect."> +</head> +<style> + #rect { + width: 400px; + height: 200px; + background-color: green; + clip-path: xywh(50px 50px 150px 100px); + } +</style> +<body> + <p>The test passes if there is a green box.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-xywh-002.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-xywh-002.html new file mode 100644 index 0000000000..be317ec0d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-xywh-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and xywh function</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-xywh"> + <link rel="match" href="reference/clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'xywh()' for clipping. On pass you should see a green rect."> +</head> +<style> + #rect { + width: 400px; + height: 200px; + background-color: green; + clip-path: xywh(12.5% 25% 37.5% 50%); + } +</style> +<body> + <p>The test passes if there is a green box.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-xywh-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-xywh-003.html new file mode 100644 index 0000000000..370e1af975 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-xywh-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and xywh function</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-xywh"> + <link rel="match" href="reference/clip-path-xywh-003-ref.html"> + <meta name=fuzzy content="maxDifference=0-2;totalPixels=0-32"> + <meta name="assert" content="The clip-path property takes the basic shape + 'xywh()' for clipping. On pass you should see a green rect with round."> +</head> +<style> + #rect { + width: 400px; + height: 200px; + background-color: green; + clip-path: xywh(50px 50px 150px 100px round 20px / 20px); + } +</style> +<body> + <p>The test passes if there is a green box with round.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/interpolation.html b/testing/web-platform/tests/css/css-masking/clip-path/interpolation.html new file mode 100644 index 0000000000..f580de9c76 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/interpolation.html @@ -0,0 +1,60 @@ +<!doctype html> +<meta charset=utf-8> +<meta name="assert" + content="This test checks if the inerpolation on clip-path is correct" /> +<title>Tests for the output of the interpolation of clip-path</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<div id='log'></div> +<script type='text/javascript'> +'use strict'; + +function createDiv(test) { + var element = document.createElement('div'); + document.body.appendChild(element); + test.add_cleanup(function() { + element.remove(); + }); + return element; +} + +test(function(t) { + var div = createDiv(t); + div.style.clipPath = 'circle(25px)'; + // The radius becomes negative between 60%~61%, so we set the delay to -61s. + div.style.transition = 'all 100s cubic-bezier(0, 0, 1, -60) -61s'; + getComputedStyle(div).clipPath; + + div.style.clipPath = 'circle(26px)'; + assert_equals(getComputedStyle(div).clipPath, 'circle(0px)', + 'The radius of circle is clamped to zero at 61%'); +}, 'Test circle with negative easing on clip-path'); + +test(function(t) { + var div = createDiv(t); + div.style.clipPath = 'ellipse(25px 25px)'; + // The radius becomes negative between 60%~61%, so we set the delay to -61s. + div.style.transition = 'all 100s cubic-bezier(0, 0, 1, -60) -61s'; + getComputedStyle(div).clipPath; + + div.style.clipPath = 'ellipse(26px 26px)'; + assert_equals(getComputedStyle(div).clipPath, 'ellipse(0px 0px)', + 'The radius of ellipse is clamped to zero at 61%'); +}, 'Test ellipse with negative easing on clip-path'); + +test(function(t) { + var div = createDiv(t); + div.style.clipPath = 'inset(10% round 25px)'; + // The radius becomes negative between 60%~61%, so we set the delay to -61s. + div.style.transition = 'all 100s cubic-bezier(0, 0, 1, -60) -61s'; + getComputedStyle(div).clipPath; + + div.style.clipPath = 'inset(10% round 26px)'; + assert_equals(getComputedStyle(div).clipPath, 'inset(10%)', + 'The radius of inset is clamped to zero at 61%'); +}, 'Test inset with negative easing on clip-path'); + +</script> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference-local-url-with-base-001.html b/testing/web-platform/tests/css/css-masking/clip-path/reference-local-url-with-base-001.html new file mode 100644 index 0000000000..c65761bddf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference-local-url-with-base-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Masking: clip path with local URL using a base element</title> +<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="help" href="https://drafts.csswg.org/css-values/#local-urls"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=470608"> +<link rel="match" href="reference/reference-local-url-with-base-001-ref.html"> +<meta name="assert" content="Check that fragment-only URLs are always document-local references."> + +<base href="http://www.example.com/"> +<style> +#target { + width: 100px; + height: 100px; + border-right: 100px solid red; + background-color: green; + clip-path: url(#clip); +} +</style> +<div id="target"></div> +<svg> + <clipPath id="clip"> + <rect width="100" height="100"/> + </clipPath> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference-mutated.html b/testing/web-platform/tests/css/css-masking/clip-path/reference-mutated.html new file mode 100644 index 0000000000..09642853c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference-mutated.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS Masking: SVG clipPath dynamically updated.</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="match" href="reference/reference-mutated-ref.html"> +<meta name="assert" content="Test ensures that SVG clipPath updates properly when dynamically changed."/> + +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> + +<style> +#target { + width: 100px; + height: 100px; + background-color: green; + clip-path: url(#clip); +} +</style> +<div id="target"></div> +<svg height="0" width="0"> + <defs> + <clipPath id="clip" clipPathUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.25"></circle> + </clipPath> + </defs> +</svg> +<script> +waitForAtLeastOneFrame().then(function() { + document.querySelector('circle').setAttribute('r', 1); + takeScreenshot(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference-nonexisting-existing-local.html b/testing/web-platform/tests/css/css-masking/clip-path/reference-nonexisting-existing-local.html new file mode 100644 index 0000000000..d02e1439e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference-nonexisting-existing-local.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Masking: fragment of non valid URL as clip.</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<link rel="match" href="reference/reference-nonexisting-existing-local-ref.html"> +<meta name="assert" content="Test ensures that only local URLs with a valid fragment result in a valid clip."/> +<style> +#target { + width: 100px; + height: 100px; + background-color: green; + clip-path: url(notexisting.svg#c); +} +</style> +<div style="background-color: red; width: 100px"> + <div id="target"></div> +</div> +<svg> + <clipPath id="c" clipPathUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.5"/> + </clipPath> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-2-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-2-ref.html new file mode 100644 index 0000000000..7794d32b3f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style type="text/css"> + body, div { + padding: 0; + margin: 0; + } + </style> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; border-radius: 100px; background-color: green; position: absolute; left: 100px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-3-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-3-ref.html new file mode 100644 index 0000000000..4cffe8837d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-3-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style type="text/css"> + body, div { + padding: 0; + margin: 0; + } + </style> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; border-radius: 100px; background-color: green; position: relative; top: 100px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-ref.html new file mode 100644 index 0000000000..c427e696bf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-circle-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a full green circle.</p> + <div style="width: 200px; height: 200px; border-radius: 100px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-001-ref.html new file mode 100644 index 0000000000..4337cdf637 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-001-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<body style="margin: 0"> + <div style="width: 90px; height: 90px; margin-left: 105px; margin-top: 5px; background-color: green"></div> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-002-ref.html new file mode 100644 index 0000000000..4337cdf637 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-columns-shape-002-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<body style="margin: 0"> + <div style="width: 90px; height: 90px; margin-left: 105px; margin-top: 5px; background-color: green"></div> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-descendant-text-mutated-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-descendant-text-mutated-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-descendant-text-mutated-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-document-element-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-document-element-ref.html new file mode 100644 index 0000000000..4608e54b20 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-document-element-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + position: absolute; + width: 50px; + height: 50px; + background: green; +} +</style> +<div style="top: 50px; left: 50px"></div> +<div style="top: 100px; left: 50px"></div> +<div style="top: 100px; left: 100px"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ellipse-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ellipse-ref.html new file mode 100644 index 0000000000..5adc91a5c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ellipse-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a full green ellipse.</p> + <div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; border-top-right-radius: 75px 50px; border-bottom-right-radius: 75px 50px; border-top-left-radius: 75px 50px; border-bottom-left-radius: 75px 50px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-filter-radius-clips-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-filter-radius-clips-ref.html new file mode 100644 index 0000000000..72bdf2202d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-filter-radius-clips-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="padding: 10px"> + <div id="blur" style="will-change: filter; width: 100px; height: 100px; background: lime"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-001-ref.html new file mode 100644 index 0000000000..afc1d18f20 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-001-ref.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's path function with nonzero</title> + <style type="text/css"> + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: url("#clip"); + } + </style> +</head> +<body> + <p>The test passes if there are a green filled rect.</p> + <div id="rect"></div> + <svg height="0" width="0"> + <defs> + <clipPath id="clip"> + <path clip-rule="nonzero" d="M10,10h80v80h-80zM25,25h50v50h-50z"/> + </clipPath> + </defs> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-002-ref.html new file mode 100644 index 0000000000..d9ea5183fb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-002-ref.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's path function with evenodd</title> + <style type="text/css"> + #rect { + width: 100px; + height: 100px; + background-color: green; + clip-path: url("#clip"); + } + </style> +</head> +<body> + <p>The test passes if there are a green hollow rect.</p> + <div id="rect"></div> + <svg height="0" width="0"> + <defs> + <clipPath id="clip"> + <path clip-rule="evenodd" d="M10,10h80v80h-80zM25,25h50v50h-50z"/> + </clipPath> + </defs> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html new file mode 100644 index 0000000000..ef91c619c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <title>CSS Masking: Test clip-path property when the page is zoomed</title> + <style> + #rect { + width: 200px; + height: 200px; + background: green; + clip-path: path(nonzero, 'M0 0, L200 0, L0 200'); + } + </style> + <div id="rect"></div> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-border-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-border-ref.html new file mode 100644 index 0000000000..9a61c76902 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-border-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green box with a blue border.</p> + <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-ref.html new file mode 100644 index 0000000000..1d3810a778 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-rectangle-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green box.</p> + <div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-bottom-green-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-bottom-green-ref.html new file mode 100644 index 0000000000..ad6abc4f91 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-bottom-green-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style> + html, body { + width: 100%; + height: 100%; + margin: 0; + } + </style> +</head> +<body> + <div style="width: 100%; height: 50%; margin-top: 50%; background-color: green; position: absolute;"></div> + <p style="position: absolute;">The test passes if the top half of the site is white and the bottom half of the site is green.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-right-green-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-right-green-ref.html new file mode 100644 index 0000000000..a19be598ca --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-ref-right-green-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style> + html, body { + width: 100%; + height: 100%; + margin: 0; + } + </style> +</head> +<body> + <div style="width: 50%; height: 100%; margin-left: 50%; background-color: green; position: absolute;"></div> + <p style="position: absolute;">The test passes if the left half of the site is white and the right half of the site is green.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-002-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-002-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-003-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-003-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-003-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-004-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-004-ref.html new file mode 100644 index 0000000000..3464a4712a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-box-004-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 50px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-restore-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-restore-ref.html new file mode 100644 index 0000000000..683511fd80 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-reference-restore-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green;"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-scroll-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-scroll-ref.html new file mode 100644 index 0000000000..a647e8a0c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-scroll-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<p>The test passes if there is a green square containing text (which can be scrolled +with mouse wheel or touch). No scrollbars should be seen.</p> +<div style="position: relative; top: 10px; left: 10px; width: 90px; height: 90px; background: green"> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html new file mode 100644 index 0000000000..46e098c4eb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference of CSS Masking: Test clip-path property and shape function with nonzero fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> +</head> +<style> + div { + width: 100px; + height: 100px; + } + #ref { + background-color: green; + clip-path: path(nonzero, "M 10 10, Q 40 0 60 20, T 90 0, c 10 40 20 20 -20 60, s -10 70 -40 -10"); + position: absolute; + } +</style> +<body> + <p>You should see no red.</p> + <div id="ref"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html new file mode 100644 index 0000000000..ec8f941079 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference of CSS Masking: Test clip-path property and shape function with nonzero fill</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> +</head> +<style> + div { + width: 100px; + height: 100px; + } + #ref { + background-color: green; + clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20, a 33 33 120 1 1 -40 50, A 20 25 0 0 0 20 20"); + position: absolute; + } +</style> +<body> + <p>You should see no red.</p> + <div id="ref"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-001-ref.html new file mode 100644 index 0000000000..6bc5a16754 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-001-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 100px; height: 100px; background-color: green; margin: 75px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-002-ref.html new file mode 100644 index 0000000000..5230b0f2ff --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-square-002-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 50px; height: 50px; background-color: green; margin: 75px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-001-ref.html new file mode 100644 index 0000000000..75d08dc59e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="width: 100px; height: 100px; margin: 75px 0 0 25px; background-color: green;"> + <div style="width: 50px; height: 100px; background-color: lime;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-002-ref.html new file mode 100644 index 0000000000..8dd1c926cb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-002-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="width: 50px; height: 50px; margin: 50px 0 0 25px; background-color: green;"> + <div style="width: 25px; height: 50px; background-color: lime;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-003-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-003-ref.html new file mode 100644 index 0000000000..f4b7fa10f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-stripes-003-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +body { + margin: 0; +} +div { + height: 20px; + background-color: green; + padding: 0; + margin: 0; + font: 20px/1 Ahem; +} +div:nth-child(odd) { + margin-bottom: 5px; + background-color: blue; +} +</style> +<body> + <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p> + <div style="width: 50%"></div> + <div style="width: 50%"></div> + + <div style="width: 20em"></div> + <div style="width: 20em"></div> + + <div style="width: 50vw"></div> + <div style="width: 50vw"></div> + + <div style="width: 40vh"></div> + <div style="width: 40vh"></div> + + <div style="width: calc(30% + 15px)"></div> + <div style="width: calc(30% + 15px)"></div> + + <div style="width: 30ex"></div> + <div style="width: 30ex"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-svg-text-css-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-svg-text-css-ref.html new file mode 100644 index 0000000000..8cf2cd253a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-svg-text-css-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/fonts/ahem.css" /> +<style> +text { + font: 50px/1 Ahem; +} +</style> +<svg> + <defs> + <clipPath id="c"> + <text x="30" y="50">Hello</text> + </clipPath> + </defs> + <rect width="200" height="100" fill="green" clip-path="url(#c)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-002-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-002-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-transform-mutated-002-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-xywh-003-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-xywh-003-ref.html new file mode 100644 index 0000000000..12f219eca6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-xywh-003-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Reftest Reference for xywh()</title> +<style> +#box { + margin-left: 50px; + margin-top: 50px; + position: absolute; + width: 150px; + height: 100px; + background-color: green; + border-radius: 20px / 20px; +} +</style> +<body> + <p>The test passes if there is a green box with round.</p> + <div id="box"></div> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/green-100x100.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/green-100x100.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/green-100x100.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/green-circle-100x100.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/green-circle-100x100.html new file mode 100644 index 0000000000..e1bd7e5f2f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/green-circle-100x100.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green; border-radius: 50px;"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-local-url-with-base-001-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-local-url-with-base-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-local-url-with-base-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-mutated-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-mutated-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-mutated-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-nonexisting-existing-local-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-nonexisting-existing-local-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/reference-nonexisting-existing-local-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-circle-offset-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-circle-offset-ref.html new file mode 100644 index 0000000000..5ba54fa8a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-circle-offset-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<svg> + <circle cx="80" cy="80" r="50" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-circle-offset.html b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-circle-offset.html new file mode 100644 index 0000000000..ec4cbaeb25 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-circle-offset.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS Test: circle clip-path on svg graphics element with offset</title> +<link rel="help" href="https://crbug.com/1286412"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> +<link rel="match" href="svg-clip-path-circle-offset-ref.html"> +<!-- Allow antialised pixel differences along the edge of the circle --> +<meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-420"> +<svg> + <rect x="30" y="30" width="100" height="100" fill="green" style="clip-path: circle(50%)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-ellipse-offset-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-ellipse-offset-ref.html new file mode 100644 index 0000000000..75b867ff19 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-ellipse-offset-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<svg> + <ellipse cx="80" cy="80" rx="40" ry="50" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-ellipse-offset.html b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-ellipse-offset.html new file mode 100644 index 0000000000..2b0876eb58 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-ellipse-offset.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS Test: ellipse clip-path on svg graphics element with offset</title> +<link rel="help" href="https://crbug.com/1286412"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> +<link rel="match" href="svg-clip-path-ellipse-offset-ref.html"> +<!-- Allow antialised pixel differences along the edge of the ellipse --> +<meta name="fuzzy" content="maxDifference=0-69; totalPixels=0-394"> +<svg> + <rect x="30" y="30" width="100" height="100" fill="green" style="clip-path: ellipse(40% 50%)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-fixed-values-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-fixed-values-ref.html new file mode 100644 index 0000000000..537b77d30a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-fixed-values-ref.html @@ -0,0 +1,49 @@ +<!doctype html> +<style> +svg { + width: 300px; + height: 300px; +} +.container { + width: 300px; + height: 300px; + position: relative; +} +.bg1 { + background: green; + position: absolute; + width: 100px; + height: 100px; +} +.noclip { + top: 100px; + left: 100px; +} +.cp1 { + clip-path: polygon(0px 0px, 100px 0px, 0px 100px); + top: 0; + left: 0; +} +.cp2 { + clip-path: circle(50px); + top: 200px; + left: 0; +} +.cp3 { + clip-path: ellipse(50px 30px); + top: 200px; + left: 200px; +} +.cp4 { + clip-path: inset(10px 20px 30px 40px); + top: 0; + left: 200px; +} +</style> +<div class=container> + <div class="bg1 noclip"></div> + <div class="bg1 cp1"></div> + <div class="bg1 cp2"></div> + <div class="bg1 cp3"></div> + <div class="bg1 cp4"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-fixed-values.html b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-fixed-values.html new file mode 100644 index 0000000000..eb2c44fbb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/svg-clip-path-fixed-values.html @@ -0,0 +1,24 @@ +<!doctype html> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#supported-basic-shapes"> +<link rel="match" href="svg-clip-path-fixed-values-ref.html"> +<meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-608"> +<meta name="assert" content="clip-path clips correctly"> +<style> +svg { + width: 300px; + height: 300px; +} +.bg1 { fill: green; } +.cp1 { clip-path: polygon(0px 0px, 100px 0px, 0px 100px); } +.cp2 { clip-path: circle(50px); } +.cp3 { clip-path: ellipse(50px 30px); } +.cp4 { clip-path: inset(10px 20px 30px 40px); } +</style> +<svg> + <rect class="bg1" x="100" y="100" width="100" height="100"/> + <rect class="bg1 cp1" x="0" y="0" width="100" height="100"/> + <rect class="bg1 cp2" x="0" y="200" width="100" height="100" /> + <rect class="bg1 cp3" x="200" y="200" width="100" height="100" /> + <rect class="bg1 cp4" x="200" y="0" width="100" height="100" /> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/svg-clipPath.svg b/testing/web-platform/tests/css/css-masking/clip-path/svg-clipPath.svg new file mode 100644 index 0000000000..d31a1df42e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/svg-clipPath.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<defs> + <clipPath id="clip-path-ref-userSpaceOnUse-001"> + <rect x="50" y="50" width="150px" height="100" /> + </clipPath> +</defs> +</svg>
\ No newline at end of file |
