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 | |
| 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')
665 files changed, 17731 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-masking/META.yml b/testing/web-platform/tests/css/css-masking/META.yml new file mode 100644 index 0000000000..7f92755b09 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/META.yml @@ -0,0 +1,5 @@ +spec: https://drafts.fxtf.org/css-masking/ +suggested_reviewers: + - dirkschulze + - birtles + - tabatkins diff --git a/testing/web-platform/tests/css/css-masking/animations/clip-interpolation.html b/testing/web-platform/tests/css/css-masking/animations/clip-interpolation.html new file mode 100644 index 0000000000..322ebd724e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/animations/clip-interpolation.html @@ -0,0 +1,117 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>clip interpolation</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#clip-property"> +<meta name="assert" content="clip supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.container { + width: 80px; + height: 80px; + background: black; + display: inline-block; + padding: 5px; +} + +.container:nth-child(2n) { + background: green; +} + +.parent { + clip: rect(100px, 0px, 100px, 0px); +} + +.target { + width: 80px; + height: 80px; + display: inline-block; + position: absolute; + background: white; + clip: rect(0px, 100px, 0px, 100px); +} +</style> + +<body> +<template id="target-template"> +<div class="container"><div class="target"></div></div> +</template> +<script> +test_interpolation({ + property: 'clip', + from: neutralKeyframe, + to: 'rect(20px, 20px, 20px, 20px)', +}, [ + {at: -1, expect: 'rect(-20px 180px -20px 180px)'}, + {at: 0, expect: 'rect(0px 100px 0px 100px)'}, + {at: 0.25, expect: 'rect(5px 80px 5px 80px)'}, + {at: 0.75, expect: 'rect(15px 40px 15px 40px)'}, + {at: 1, expect: 'rect(20px 20px 20px 20px)'}, + {at: 2, expect: 'rect(40px -60px 40px -60px)'}, +]); + +test_no_interpolation({ + property: 'clip', + from: 'initial', + to: 'rect(20px, 20px, 20px, 20px)', +}); + +test_interpolation({ + property: 'clip', + from: 'inherit', + to: 'rect(20px, 20px, 20px, 20px)', +}, [ + {at: -1, expect: 'rect(180px -20px 180px -20px)'}, + {at: 0, expect: 'rect(100px 0px 100px 0px)'}, + {at: 0.25, expect: 'rect(80px 5px 80px 5px)'}, + {at: 0.75, expect: 'rect(40px 15px 40px 15px)'}, + {at: 1, expect: 'rect(20px 20px 20px 20px)'}, + {at: 2, expect: 'rect(-60px 40px -60px 40px)'}, +]); + +test_no_interpolation({ + property: 'clip', + from: 'unset', + to: 'rect(20px, 20px, 20px, 20px)', +}); + +test_interpolation({ + property: 'clip', + from: 'rect(0px, 75px, 80px, 10px)', + to: 'rect(0px, 100px, 90px, 5px)' +}, [ + {at: -1, expect: 'rect(0px, 50px, 70px, 15px)'}, + {at: 0, expect: 'rect(0px, 75px, 80px, 10px)'}, + {at: 0.25, expect: 'rect(0px, 81.25px, 82.5px, 8.75px)'}, + {at: 0.75, expect: 'rect(0px, 93.75px, 87.5px, 6.25px)'}, + {at: 1, expect: 'rect(0px, 100px, 90px, 5px)'}, + {at: 2, expect: 'rect(0px, 125px, 100px, 0px)'}, +]); + +test_no_interpolation({ + property: 'clip', + from: 'rect(auto, auto, auto, 10px)', + to: 'rect(20px, 50px, 50px, auto)' +}); + +test_no_interpolation({ + property: 'clip', + from: 'rect(auto, 0px, auto, 10px)', + to: 'rect(auto, 50px, 50px, auto)' +}); + +test_no_interpolation({ + property: 'clip', + from: 'auto', + to: 'rect(0px, 50px, 50px, 0px)' +}); + +test_no_interpolation({ + property: 'clip', + from: 'rect(0px, 50px, 50px, 0px)', + to: 'auto' +}); +</script> diff --git a/testing/web-platform/tests/css/css-masking/animations/clip-path-composition.html b/testing/web-platform/tests/css/css-masking/animations/clip-path-composition.html new file mode 100644 index 0000000000..42c5988e04 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/animations/clip-path-composition.html @@ -0,0 +1,189 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>clip-path composition</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<meta name="assert" content="clip-path supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'clip-path', + underlying: 'circle(100px at 25px 25%)', + addFrom: 'circle(10px at 25px 75%)', + addTo: 'circle(50px at 50px center)', +}, [ + {at: -0.3, expect: 'circle(98px at 42.5px 107.5%)'}, + {at: 0, expect: 'circle(110px at 50px 100%)'}, + {at: 0.3, expect: 'circle(122px at 57.5px 92.5%)'}, + {at: 0.6, expect: 'circle(134px at 65px 85%)'}, + {at: 1, expect: 'circle(150px at 75px 75%)'}, + {at: 1.5, expect: 'circle(170px at 87.5px 62.5%)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'circle(100px at 20px 20%)', + addFrom: 'circle(50px at 50px 50%)', + replaceTo: 'circle(50% at 150px 150%)', +}, [ + {at: -0.3, expect: 'circle(calc(195px + -15%) at 46px 46%)'}, + {at: 0, expect: 'circle(calc(150px + 0%) at 70px 70%)'}, + {at: 0.3, expect: 'circle(calc(105px + 15%) at 94px 94%)'}, + {at: 0.6, expect: 'circle(calc(60px + 30%) at 118px 118%)'}, + {at: 1, expect: 'circle(50% at 150px 150%)'}, + {at: 1.5, expect: 'circle(calc(-75px + 75%) at 190px 190%)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'circle(farthest-side at 25px 75%)', + addFrom: 'circle(farthest-side at 25px 75%)', + addTo: 'circle(farthest-side at 50px center)', +}, [ + {at: 0.25, expect: 'circle(farthest-side at 25px 75%)'}, + {at: 0.75, expect: 'circle(farthest-side at 50px 50%)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'circle(50px at 10px 20px)', + addFrom: 'circle(50px at 10px 20px)', + addTo: 'circle(farthest-side at 30px 40px)', +}, [ + {at: 0.25, expect: 'circle(100px at 20px 40px)'}, + {at: 0.75, expect: 'circle(farthest-side at 30px 40px)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'ellipse(10px 20px at 30px 40px)', + addFrom: 'ellipse(40px 30px at 20px 10px)', + addTo: 'ellipse(140px 130px at 120px 110px)', +}, [ + {at: -0.3, expect: 'ellipse(20px 20px at 20px 20px)'}, + {at: 0, expect: 'ellipse(50px 50px at 50px 50px)'}, + {at: 0.3, expect: 'ellipse(80px 80px at 80px 80px)'}, + {at: 0.6, expect: 'ellipse(110px 110px at 110px 110px)'}, + {at: 1, expect: 'ellipse(150px 150px at 150px 150px)'}, + {at: 1.5, expect: 'ellipse(200px 200px at 200px 200px)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'ellipse(10px 20px at 30px 40px)', + replaceFrom: 'ellipse(40px 30px at 20px 10px)', + addTo: 'ellipse(40px 30px at 20px 10px)', +}, [ + {at: -0.3, expect: 'ellipse(37px 24px at 11px -2px)'}, + {at: 0, expect: 'ellipse(40px 30px at 20px 10px)'}, + {at: 0.3, expect: 'ellipse(43px 36px at 29px 22px)'}, + {at: 0.6, expect: 'ellipse(46px 42px at 38px 34px)'}, + {at: 1, expect: 'ellipse(50px 50px at 50px 50px)'}, + {at: 1.5, expect: 'ellipse(55px 60px at 65px 70px)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'ellipse(25px 75%)', + addFrom: 'ellipse()', + addTo: 'ellipse(closest-side farthest-side)', +}, [ + {at: 0.25, expect: 'ellipse()'}, + {at: 0.75, expect: 'ellipse(closest-side farthest-side)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'inset(20px)', + addFrom: 'inset(20px)', + addTo: 'inset(40%)', +}, [ + {at: -0.3, expect: 'inset(calc(46px + -12%))'}, + {at: 0, expect: 'inset(calc(40px + 0%))'}, + {at: 0.3, expect: 'inset(calc(34px + 12%))'}, + {at: 0.6, expect: 'inset(calc(28px + 24%))'}, + {at: 1, expect: 'inset(calc(20px + 40%))'}, + {at: 1.5, expect: 'inset(calc(10px + 60%))'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)', + addFrom: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)', + replaceTo: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)', +}, [ + {at: -0.3, expect: 'inset(-28px -26px -24px -22px round 0px 10px 30px 50px / 70px 90px 110px 130px)'}, + {at: 0, expect: 'inset(2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px)'}, + {at: 0.25, expect: 'inset(27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px)'}, + {at: 0.75, expect: 'inset(77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px)'}, + {at: 1, expect: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)'}, + {at: 1.5, expect: 'inset(152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'inset(1px 2px round 100px 200px)', + addFrom: 'inset(1px 2px round 100px 200px)', + addTo: 'inset(101px 102px 101px 102px)', +}, [ + {at: -0.3, expect: 'inset(-28px -26px round 230px 460px)'}, + {at: 0, expect: 'inset(2px 4px round 200px 400px)'}, + {at: 0.3, expect: 'inset(32px 34px round 170px 340px)'}, + {at: 0.6, expect: 'inset(62px 64px round 140px 280px)'}, + {at: 1, expect: 'inset(102px 104px round 100px 200px)'}, + {at: 1.5, expect: 'inset(152px 154px round 50px 100px)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'polygon(10px 20%, 30px 40%)', + addFrom: 'polygon(10px 20%, 30px 40%)', + addTo: 'polygon(110px 120%, 130px 140%)', +}, [ + {at: -0.3, expect: 'polygon(-10px 10%, 30px 50%)'}, + {at: 0, expect: 'polygon(20px 40%, 60px 80%)'}, + {at: 0.3, expect: 'polygon(50px 70%, 90px 110%)'}, + {at: 0.6, expect: 'polygon(80px 100%, 120px 140%)'}, + {at: 1, expect: 'polygon(120px 140%, 160px 180%)'}, + {at: 1.5, expect: 'polygon(170px 190%, 210px 230%)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'polygon(evenodd, 10px 20px)', + addFrom: 'polygon(evenodd, 10px 20px)', + addTo: 'polygon(evenodd, 110px 120px)', +}, [ + {at: -0.3, expect: 'polygon(evenodd, -10px 10px)'}, + {at: 0, expect: 'polygon(evenodd, 20px 40px)'}, + {at: 0.3, expect: 'polygon(evenodd, 50px 70px)'}, + {at: 0.6, expect: 'polygon(evenodd, 80px 100px)'}, + {at: 1, expect: 'polygon(evenodd, 120px 140px)'}, + {at: 1.5, expect: 'polygon(evenodd, 170px 190px)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'polygon(evenodd, 10px 20px)', + addFrom: 'polygon(evenodd, 10px 20px)', + addTo: 'polygon(nonzero, 30px 40px)', +}, [ + {at: 0.25, expect: 'polygon(evenodd, 20px 40px)'}, + {at: 0.75, expect: 'polygon(30px 40px)'}, +]); + +test_composition({ + property: 'clip-path', + underlying: 'polygon(10px 20px, 30px 40px)', + addFrom: 'polygon(10px 20px, 30px 40px)', + addTo: 'polygon(30px 40px)', +}, [ + {at: 0.25, expect: 'polygon(20px 40px, 60px 80px)'}, + {at: 0.75, expect: 'polygon(30px 40px)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-001.html b/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-001.html new file mode 100644 index 0000000000..21c34f1f2b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-001.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>clip-path interpolation</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<meta name="assert" content="clip-path supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + clip-path: circle(80% at 30% 10%); +} + +.target { + clip-path: circle(60% at 10% 30%); +} +</style> +<body> +<script> +test_interpolation({ + property: 'clip-path', + from: neutralKeyframe, + to: 'circle(40% at 20% 20%)', +}, [ + {at: -0.3, expect: 'circle(66% at 7% 33%)'}, + {at: 0, expect: 'circle(60% at 10% 30%)'}, + {at: 0.3, expect: 'circle(54% at 13% 27%)'}, + {at: 0.6, expect: 'circle(48% at 16% 24%)'}, + {at: 1, expect: 'circle(40% at 20% 20%)'}, + {at: 1.5, expect: 'circle(30% at 25% 15%)'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'initial', + to: 'circle(40% at 20% 20%)', +}); + +test_interpolation({ + property: 'clip-path', + from: 'inherit', + to: 'circle(40% at 20% 20%)', +}, [ + {at: -0.3, expect: 'circle(92% at 33% 7%)'}, + {at: 0, expect: 'circle(80% at 30% 10%)'}, + {at: 0.3, expect: 'circle(68% at 27% 13%)'}, + {at: 0.6, expect: 'circle(56% at 24% 16%)'}, + {at: 1, expect: 'circle(40% at 20% 20%)'}, + {at: 1.5, expect: 'circle(20% at 15% 25%)'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'unset', + to: 'circle(40% at 20% 20%)', +}); + +test_interpolation({ + property: 'clip-path', + from: 'circle(100% at 0% 0%)', + to: 'circle(50% at 25% 25%)', +}, [ + {at: -0.3, expect: 'circle(115% at -7.5% -7.5%)'}, + {at: 0, expect: 'circle(100% at 0% 0%)'}, + {at: 0.3, expect: 'circle(85% at 7.5% 7.5%)'}, + {at: 0.6, expect: 'circle(70% at 15% 15%)'}, + {at: 1, expect: 'circle(50% at 25% 25%)'}, + {at: 1.5, expect: 'circle(25% at 37.5% 37.5%)'} +]); + +test_interpolation({ + property: 'clip-path', + from: 'ellipse(100% 100% at 0% 0%)', + to: 'ellipse(50% 50% at 25% 25%)', +}, [ + {at: -0.3, expect: 'ellipse(115% 115% at -7.5% -7.5%)'}, + {at: 0, expect: 'ellipse(100% 100% at 0% 0%)'}, + {at: 0.3, expect: 'ellipse(85% 85% at 7.5% 7.5%)'}, + {at: 0.6, expect: 'ellipse(70% 70% at 15% 15%)'}, + {at: 1, expect: 'ellipse(50% 50% at 25% 25%)'}, + {at: 1.5, expect: 'ellipse(25% 25% at 37.5% 37.5%)'} +]); + +test_interpolation({ + property: 'clip-path', + from: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)', + to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)', +}, [ + {at: -0.3, expect: 'polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)'}, + {at: 0, expect: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)'}, + {at: 0.3, expect: 'polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)'}, + {at: 0.6, expect: 'polygon(nonzero, 15px 15px, 40px 40px, 65px 65px)'}, + {at: 1, expect: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'}, + {at: 1.5, expect: 'polygon(nonzero, 37.5px 37.5px, 62.5px 62.5px, 87.5px 87.5px)'} +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)', + to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)', +}); + +test_interpolation({ + property: 'clip-path', + from: 'inset(100%)', + to: 'inset(120%)', +}, [ + {at: -0.3, expect: 'inset(94%)'}, + {at: 0, expect: 'inset(100%)'}, + {at: 0.3, expect: 'inset(106%)'}, + {at: 0.6, expect: 'inset(112%)'}, + {at: 1, expect: 'inset(120%)'}, + {at: 1.5, expect: 'inset(130%)'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'none', + to: 'ellipse(100% 100% at 0% 0%)', +}); + +test_interpolation({ + property: 'clip-path', + from: 'circle(25% at right 5% bottom 15px)', + to: 'circle(45% at right 25% bottom 35px)', +}, [ + {at: 0.25, expect: 'circle(30% at 90% calc(-20px + 100%))'}, + {at: 0.5, expect: 'circle(35% at 85% calc(-25px + 100%))'}, + {at: 0.75, expect: 'circle(40% at 80% calc(-30px + 100%))'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'url("/clip-source")', + to: 'ellipse(100% 100% at 0% 0%)', +}); + +</script> +</body> diff --git a/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-002.html b/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-002.html new file mode 100644 index 0000000000..88e34b3864 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-002.html @@ -0,0 +1,221 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<meta charset="UTF-8"> +<title>clip-path-interpolation</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<meta name="assert" content="clip-path supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + clip-path: inset(10px); + padding: 10px; +} + +.target { + display: inline-block; + width: 100px; + height: 100px; + background-color: black; + clip-path: inset(10px); +} + +.expected { + background-color: green; +} +</style> +<body> +<script> +test_interpolation({ + property: 'clip-path', + from: neutralKeyframe, + to: 'inset(20px)', +}, [ + {at: -0.3, expect: 'inset(7px)'}, + {at: 0, expect: 'inset(10px)'}, + {at: 0.3, expect: 'inset(13px)'}, + {at: 0.6, expect: 'inset(16px)'}, + {at: 1, expect: 'inset(20px)'}, + {at: 1.5, expect: 'inset(25px)'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'initial', + to: 'inset(20px)', +}); + +test_interpolation({ + property: 'clip-path', + from: 'inherit', + to: 'inset(20px)', +}, [ + {at: -0.3, expect: 'inset(7px)'}, + {at: 0, expect: 'inset(10px)'}, + {at: 0.3, expect: 'inset(13px)'}, + {at: 0.6, expect: 'inset(16px)'}, + {at: 1, expect: 'inset(20px)'}, + {at: 1.5, expect: 'inset(25px)'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'unset', + to: 'inset(20px)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'none', + to: 'circle(3px at 1px 2px)', +}); + +test_interpolation({ + property: 'clip-path', + from: 'circle(10px at 25px 75%)', + to: 'circle(50px at 50px center)' +}, [ + {at: -0.3, expect: 'circle(0px at 17.5px 82.5%)'}, // radius can't be negative + {at: 0, expect: 'circle(10px at 25px 75%)'}, + {at: 0.3, expect: 'circle(22px at 32.5px 67.5%)'}, + {at: 0.6, expect: 'circle(34px at 40px 60%)'}, + {at: 1, expect: 'circle(50px at 50px 50%)'}, + {at: 1.5, expect: 'circle(70px at 62.5px 37.5%)'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'circle(farthest-side at 25px 75%)', + to: 'circle(farthest-side at 50px center)' +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'circle(closest-side at 10px 20px)', + to: 'circle(farthest-side at 30px 40px)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'circle(50px at 10px 20px)', + to: 'circle(farthest-side at 30px 40px)', +}); + +test_interpolation({ + property: 'clip-path', + from: 'ellipse(10px 20px at 25px 75px)', + to: 'ellipse(50px 100px at 50px 50px)', +}, [ + {at: -0.3, expect: 'ellipse(0px 0px at 17.5px 82.5px)'}, // radius can't be negative + {at: 0, expect: 'ellipse(10px 20px at 25px 75px)'}, + {at: 0.3, expect: 'ellipse(22px 44px at 32.5px 67.5px)'}, + {at: 0.6, expect: 'ellipse(34px 68px at 40px 60px)'}, + {at: 1, expect: 'ellipse(50px 100px at 50px 50px)'}, + {at: 1.5, expect: 'ellipse(70px 140px at 62.5px 37.5px)'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'ellipse(closest-side farthest-side at 25px 75%)', + to: 'ellipse(closest-side farthest-side at 50px center)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'ellipse(closest-side farthest-side at 10px 20px)', + to: 'ellipse(farthest-side closest-side at 30px 40px)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'ellipse(50px closest-side at 10px 20px)', + to: 'ellipse(150px farthest-side at 30px 40px)', +}); + +test_interpolation({ + property: 'clip-path', + from: 'inset(20px)', + to: 'inset(40%)', +}, [ + {at: -0.3, expect: 'inset(calc(26px + -12%))'}, + {at: 0, expect: 'inset(calc(20px + 0%))'}, + {at: 0.3, expect: 'inset(calc(14px + 12%))'}, + {at: 0.6, expect: 'inset(calc(8px + 24%))'}, + {at: 1, expect: 'inset(40%)'}, + {at: 1.5, expect: 'inset(calc(-10px + 60%))'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)', + to: 'inset(101px 102px 103px 104px round 110px 120px 130px 140px / 150px 160px 170px 180px)', +}, [ + {at: -0.3, expect: 'inset(-29px -28px -27px -26px round 0px 0px 0px 10px / 20px 30px 40px 50px)'}, + {at: 0, expect: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)'}, + {at: 0.3, expect: 'inset(31px 32px 33px 34px round 40px 50px 60px 70px / 80px 90px 100px 110px)'}, + {at: 0.6, expect: 'inset(61px 62px 63px 64px round 70px 80px 90px 100px / 110px 120px 130px 140px)'}, + {at: 1, expect: 'inset(101px 102px 103px 104px round 110px 120px 130px 140px / 150px 160px 170px 180px)'}, + {at: 1.5, expect: 'inset(151px 152px 153px 154px round 160px 170px 180px 190px / 200px 210px 220px 230px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'inset(1px 2px round 100px 200px)', + to: 'inset(101px 102px 101px 102px)', +}, [ + {at: -0.3, expect: 'inset(-29px -28px round 130px 260px)'}, + {at: 0, expect: 'inset(1px 2px round 100px 200px)'}, + {at: 0.3, expect: 'inset(31px 32px round 70px 140px)'}, + {at: 0.6, expect: 'inset(61px 62px round 40px 80px)'}, + {at: 1, expect: 'inset(101px 102px)'}, + {at: 1.5, expect: 'inset(151px 152px)'}, // border radius can't be negative +]); + +test_interpolation({ + property: 'clip-path', + from: 'polygon(10px 20%, 30px 40%)', + to: 'polygon(110px 120%, 130px 140%)', +}, [ + {at: -0.3, expect: 'polygon(-20px -10%, 0px 10%)'}, + {at: 0, expect: 'polygon(10px 20%, 30px 40%)'}, + {at: 0.3, expect: 'polygon(40px 50%, 60px 70%)'}, + {at: 0.6, expect: 'polygon(70px 80%, 90px 100%)'}, + {at: 1, expect: 'polygon(110px 120%, 130px 140%)'}, + {at: 1.5, expect: 'polygon(160px 170%, 180px 190%)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'polygon(evenodd, 10px 20px)', + to: 'polygon(evenodd, 110px 120px)', +}, [ + {at: -0.3, expect: 'polygon(evenodd, -20px -10px)'}, + {at: 0, expect: 'polygon(evenodd, 10px 20px)'}, + {at: 0.3, expect: 'polygon(evenodd, 40px 50px)'}, + {at: 0.6, expect: 'polygon(evenodd, 70px 80px)'}, + {at: 1, expect: 'polygon(evenodd, 110px 120px)'}, + {at: 1.5, expect: 'polygon(evenodd, 160px 170px)'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'polygon(evenodd, 10px 20px)', + to: 'polygon(nonzero, 110px 120px)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'polygon(evenodd, 10px 20px)', + to: 'polygon(110px 120px)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'polygon(10px 20px, 30px 40px)', + to: 'polygon(110px 120px)', +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-shape.html b/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-shape.html new file mode 100644 index 0000000000..ad3e2a0bdb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-shape.html @@ -0,0 +1,170 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<meta charset="UTF-8"> +<title>clip-path-interpolation</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<meta name="assert" content="clip-path supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +html { + font-size: 16px; + font-family: Ahem; +} + +.parent { + clip-path: shape(from -5px 5px, move to 5% 1px); + padding: 10px; +} + +.target { + display: inline-block; + width: 100px; + height: 100px; + background-color: black; + clip-path: shape(from 5px 5px, line to 10px 10%); +} + +.expected { + background-color: green; +} +</style> +<body> +<script> +test_interpolation({ + property: 'clip-path', + from: neutralKeyframe, + to: 'shape(from -5px 5px, line to 20px 20%)', +}, [ + {at: -0.3, expect: 'shape(from 8px 5px, line to 7px 7%)'}, + {at: 0, expect: 'shape(from 5px 5px, line to 10px 10%)'}, + {at: 0.6, expect: 'shape(from -1px 5px, line to 16px 16%)'}, + {at: 1, expect: 'shape(from -5px 5px, line to 20px 20%)'}, + {at: 1.5, expect: 'shape(from -10px 5px, line to 25px 25%)'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'initial', + to: 'shape(from 8px 5px, line to 7px 7%)', +}); + +test_interpolation({ + property: 'clip-path', + from: 'inherit', + to: 'shape(from 15% 15px, move to 20% -10px)', +}, [ + {at: -0.3, expect: 'shape(from calc(-4.5% - 6.5px) 2px, move to 0.5% 4.3px)'}, + {at: 0, expect: 'shape(from calc(0% - 5px) 5px, move to 5% 1px)'}, + {at: 0.5, expect: 'shape(from calc(7.5% - 2.5px) 10px, move to 12.5% -4.5px)'}, + {at: 1, expect: 'shape(from 15% 15px, move to 20% -10px'}, + {at: 1.5, expect: 'shape(from calc(22.5% + 2.5px) 20px, move to 27.5% -15.5px)'}, +]); + +test_no_interpolation({ + property: 'clip-path', + from: 'unset', + to: 'shape(from 10px 10px, close)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'none', + to: 'shape(from 10px 10px, close)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'shape(from 10px 10px, move to 10% 10%)', + to: 'shape(from 10px 10px, close)', +}); + + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)', + to: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)', +}, [ + {at: -0.3, expect: 'shape(from 2% 2px, hline to -1%, vline to -2px, close)'}, + {at: 0, expect: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)'}, + {at: 0.5, expect: 'shape(from 10% 10px, hline to 15% , vline to -10px, close)'}, + {at: 1, expect: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)'}, + {at: 1.5, expect: 'shape(from 20% 20px, hline to 35%, vline to -20px, close)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)', + to: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)', +}, [ + {at: -0.3, expect: 'shape(from 2% 2px, curve to 7% 13px via -3% 86px, curve to 33% 17px via 17% 53px 34% 61px)'}, + {at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, curve to 15% 5px via 5% 70px, curve to 25% 25px via 25% 45px 10% 85px)'}, + {at: 1, expect: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, curve to 25% -5px via 15% 50px, curve to 15% 35px via 35% 35px -20% 115px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)', + to: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)', +}, [ + {at: -0.3, expect: 'shape(from 2% 2px, curve by 7% 13px via -3% 86px, curve by 33% 17px via 17% 53px 34% 61px)'}, + {at: 0, expect: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, curve by 15% 5px via 5% 70px, curve by 25% 25px via 25% 45px 10% 85px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, curve by 25% -5px via 15% 50px, curve by 15% 35px via 35% 35px -20% 115px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)', + to: 'shape(from 15% 15px, smooth to 20% 0px via 10% 60px, smooth to 20% 30px)', +}, [ + {at: -0.3, expect: 'shape(from 2% 2px, smooth to 7% 13px via -3% 86px, smooth to 33% 17px)'}, + {at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, smooth to 15% 5px via 5% 70px, smooth to 25% 25px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, smooth to 25% -5px via 15% 50px, smooth to 15% 35px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)', + to: 'shape(from 15% 15px, smooth by 20% 0px via 10% 60px, smooth by 20% 30px)', +}, [ + {at: -0.3, expect: 'shape(from 2% 2px, smooth by 7% 13px via -3% 86px, smooth by 33% 17px)'}, + {at: 0, expect: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, smooth by 15% 5px via 5% 70px, smooth by 25% 25px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, smooth by 25% -5px via 15% 50px, smooth by 15% 35px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)', + to: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px cw rotate 270deg small, arc to 25% 20px of 10px 5px small cw)' +}, [ + {at: -0.3, expect: 'shape(from 2% 2px, arc to 18% -12px of 7px 17px ccw small, arc by 12% -2px of 33px 33px rotate -42deg cw large , arc to 25% 20px of 10px 5px ccw small)'}, + {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'}, + {at: 0.3, expect: 'shape(from 8% 8px, arc to 12% -18px of 13px 23px ccw small, arc by 18% -8px of 27px 27px rotate 102deg cw large, arc to 25% 20px of 10px 5px ccw small )'}, + {at: 0.5, expect: 'shape(from 10% 10px, arc to 10% -20px of 15px 25px ccw small, arc by 20% -10px of 25px rotate 150deg cw small, arc to 25% 20px of 10px 5px cw small)'}, + {at: 1, expect: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px rotate 270deg cw small, arc to 25% 20px of 10px 5px cw small)'}, + {at: 1.5, expect: 'shape(from 20% 20px, arc to 0% -30px of 25px 35px ccw small, arc by 30% -20px of 15px rotate 390deg cw small, arc to 25% 20px of 10px 5px cw small)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5px -5%, hline to 10px, vline by 10rem, hline by 1vh, close, vline by 3pt)', + to: 'shape(from -5px 5px, hline to 20px, vline by 10%, hline by 1em, close, vline by 6pt)', +}, [ + {at: -0.3, expect: 'shape(from 8px calc(-6.5% - 1.5px), hline to 7px, vline by calc(-3% + 208px), hline by 5.92px, close, vline by 2.8px)'}, + {at: 0, expect: 'shape(from 5px -5%, hline to 10px, vline by calc(0% + 160px), hline by 8.25px, close, vline by 4px)'}, + {at: 0.6, expect: 'shape(from -1px calc(-2% + 3px), hline to 16px, vline by calc(6% + 64px), hline by 12.9px, close ,vline by 6.4px)'}, + {at: 1, expect: 'shape(from -5px calc(0% + 5px), hline to 20px, vline by 10%, hline by 16px, close, vline by 8px)'}, + {at: 1.5, expect: 'shape(from -10px calc(2.5% + 7.5px), hline to 25px, vline by calc(15% - 80px), hline by 19.88px, close, vline by 10px)'}, +]); + +</script> +</body> diff --git a/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-xywh-rect.html b/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-xywh-rect.html new file mode 100644 index 0000000000..8d35c2e9b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-xywh-rect.html @@ -0,0 +1,169 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>clip-path-interpolation for basic-shape-rect, xywh and rect</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/#funcdef-basic-shape-xywh"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect"> +<meta name="assert" content="clip-path supports animation for xywh() and rect()"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + clip-path: inset(10px); + padding: 10px; +} + +.target { + display: inline-block; + width: 100px; + height: 100px; + background-color: black; + clip-path: inset(10px); +} + +.expected { + background-color: green; +} +</style> +<body> +<script> +test_no_interpolation({ + property: 'clip-path', + from: 'initial', + to: 'xywh(10px 10px 100px 100px)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'unset', + to: 'xywh(10px 10px 100px 100px)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'initial', + to: 'rect(10px 100px 100px 10px)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'unset', + to: 'rect(10px 100px 100px 10px)', +}); + +// Note: it's fine to use "rect()"/"xywh()" in "expect" because we always +// convert it into `inset()` when we compare it with the actual animation value. +test_interpolation({ + property: 'clip-path', + from: 'xywh(5px 5px 150% 150%)', + to: 'xywh(10px 10px 100% 100%)' +}, [ + {at: -1, expect: 'xywh(0px 0px 200% 200%)'}, + {at: 0, expect: 'xywh(5px 5px 150% 150%)'}, + {at: 0.125, expect: 'xywh(5.63px 5.63px 143.75% 143.75%)'}, + {at: 0.875, expect: 'xywh(9.38px 9.38px 106.25% 106.25%)'}, + {at: 1, expect: 'xywh(10px 10px 100% 100%)'}, + {at: 2, expect: 'xywh(15px 15px 50% 50%)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'rect(10px 100px 50% 10%)', + to: 'rect(50px 200px 90% 50%)' +}, [ + {at: -1, expect: 'rect(-30px 0px 10% -30%)'}, + {at: 0, expect: 'rect(10px 100px 50% 10%)'}, + {at: 0.125, expect: 'rect(15px 112.5px 55% 15%)'}, + {at: 0.875, expect: 'rect(45px 187.5px 85% 45%)'}, + {at: 1, expect: 'rect(50px 200px 90% 50%)'}, + {at: 2, expect: 'rect(90px 300px 130% 90%)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'rect(auto auto auto auto)', + to: 'rect(80% 20% 20% 80%)' +}, [ + {at: -1, expect: 'inset(-80%)'}, + {at: 0, expect: 'inset(0%)'}, + {at: 0.125, expect: 'inset(10%)'}, + {at: 0.875, expect: 'inset(70%)'}, + {at: 1, expect: 'inset(80%)'}, + {at: 2, expect: 'inset(160%)'}, +]); + +// All <basic-shape-rect>s compute to the equivalent inset() function, so they +// interpolatable. +// https://drafts.csswg.org/css-shapes-1/#basic-shape-computed-values +test_interpolation({ + property: 'clip-path', + from: neutralKeyframe, + // inset(50px calc(80% - 70px) calc(0% - 50px) 20%). + to: 'xywh(20% 50px 70px 100%)', +}, [ + {at: -1, expect: 'inset(-30px calc(-80% + 90px) calc(0% + 70px) calc(-20% + 20px)'}, + {at: 0, expect: 'inset(10px calc(0% + 10px) calc(0% + 10px))'}, + {at: 0.125, expect: 'inset(15px 10% calc(0% + 2.5px) calc(2.5% + 8.75px))'}, + {at: 0.875, expect: 'inset(45px calc(70% - 60px) calc(0% - 42.5px) calc(17.5% + 1.25px))'}, + {at: 1, expect: 'inset(50px calc(80% - 70px) calc(0% - 50px) 20%)'}, + {at: 2, expect: 'inset(90px calc(160% - 150px) calc(0% - 110px) calc(40% - 10px))'}, +]); + +test_interpolation({ + property: 'clip-path', + from: neutralKeyframe, + // inset(50px calc(100% - 70px) 20% 20%). + to: 'rect(50px 70px 80% 20%)', +}, [ + {at: -1, expect: 'inset(-30px calc(-100% + 90px) calc(-20% + 20px) calc(-20% + 20px)'}, + {at: 0, expect: 'inset(10px calc(0% + 10px) calc(0% + 10px))'}, + {at: 0.125, expect: 'inset(15px 12.5% calc(2.5% + 8.75px) calc(2.5% + 8.75px))'}, + {at: 0.875, expect: 'inset(45px calc(87.5% - 60px) calc(17.5% + 1.25px) calc(17.5% + 1.25px))'}, + {at: 1, expect: 'inset(50px calc(100% - 70px) 20% 20%)'}, + {at: 2, expect: 'inset(90px calc(200% - 150px) calc(40% - 10px) calc(40% - 10px))'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'inherit', + to: 'xywh(20% 50px 70px 100%)', +}, [ + {at: -1, expect: 'inset(-30px calc(-80% + 90px) calc(0% + 70px) calc(-20% + 20px)'}, + {at: 0, expect: 'inset(10px calc(0% + 10px) calc(0% + 10px))'}, + {at: 0.125, expect: 'inset(15px 10% calc(0% + 2.5px) calc(2.5% + 8.75px))'}, + {at: 0.875, expect: 'inset(45px calc(70% - 60px) calc(0% - 42.5px) calc(17.5% + 1.25px))'}, + {at: 1, expect: 'inset(50px calc(80% - 70px) calc(0% - 50px) 20%)'}, + {at: 2, expect: 'inset(90px calc(160% - 150px) calc(0% - 110px) calc(40% - 10px))'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'inherit', + to: 'rect(50px 70px 80% 20%)', +}, [ + {at: -1, expect: 'inset(-30px calc(-100% + 90px) calc(-20% + 20px) calc(-20% + 20px)'}, + {at: 0, expect: 'inset(10px calc(0% + 10px) calc(0% + 10px))'}, + {at: 0.125, expect: 'inset(15px 12.5% calc(2.5% + 8.75px) calc(2.5% + 8.75px))'}, + {at: 0.875, expect: 'inset(45px calc(87.5% - 60px) calc(17.5% + 1.25px) calc(17.5% + 1.25px))'}, + {at: 1, expect: 'inset(50px calc(100% - 70px) 20% 20%)'}, + {at: 2, expect: 'inset(90px calc(200% - 150px) calc(40% - 10px) calc(40% - 10px))'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'xywh(0px 10% 100px 40% round 20px)', + to: 'rect(20% 50% 200px 20px)', +}, [ + {at: -1, expect: 'inset(0% calc(150% - 200px) calc(0% + 200px) -20px round 40px'}, + {at: 0, expect: 'inset(10% calc(100% - 100px) 50% 0px round 20px)'}, + {at: 0.125, expect: 'inset(11.25% calc(93.75% - 87.5px) calc(56.25% - 25px) 2.5px round 17.5px)'}, + {at: 0.875, expect: 'inset(18.75% calc(56.25% - 12.5px) calc(93.75% - 175px) 17.5px round 2.5px)'}, + {at: 1, expect: 'inset(20% 50% calc(100% - 200px) 20px)'}, + {at: 2, expect: 'inset(30% calc(0% + 100px) calc(150% - 400px) 40px)'}, +]); + +</script> +</body> diff --git a/testing/web-platform/tests/css/css-masking/animations/mask-image-interpolation.html b/testing/web-platform/tests/css/css-masking/animations/mask-image-interpolation.html new file mode 100644 index 0000000000..ac6b266992 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/animations/mask-image-interpolation.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>mask-image-interpolation</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-image"> +<meta name="assert" content="mask-image supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + mask-image: url(../resources/blue-20.png); +} +.target { + width: 20px; + height: 20px; + display: inline-block; + background-color: black; + mask-image: url(../resources/stripes-20.png); +} +.expected { + background-color: green; + margin-right: 10px; +} +</style> + +<body> +<script> +// neutral +test_no_interpolation({ + property: 'mask-image', + from: neutralKeyframe, + to: 'url(../resources/green-20.png)', +}); + +// initial +test_no_interpolation({ + property: 'mask-image', + from: 'initial', + to: 'url(../resources/green-20.png)', +}); + +// inherit +test_no_interpolation({ + property: 'mask-image', + from: 'inherit', + to: 'url(../resources/green-20.png)', +}); + +// unset +test_no_interpolation({ + property: 'mask-image', + from: 'unset', + to: 'url(../resources/stripes-20.png)', +}); + +// Image to image +test_no_interpolation({ + property: 'mask-image', + from: 'url(../resources/stripes-20.png)', + to: 'url(../resources/blue-20.png)', +}); + +//Image to gradient +test_no_interpolation({ + property: 'mask-image', + from: 'url(../resources/stripes-20.png)', + to: 'linear-gradient(45deg, blue, transparent)' +}); + +// Keyword to image +test_no_interpolation({ + property: 'mask-image', + from: 'none', + to: 'url(../resources/green-20.png)', +}); + +// Multiple to multiple +var fromA = 'url(../resources/stripes-20.png)'; +var fromB = 'linear-gradient(-45deg, blue, transparent)'; +var toA = 'url(../resources/blue-20.png)'; +var toB = 'url(../resources/stripes-20.png)'; +var from = fromA + ', ' + fromB; +var to = toA + ', ' + toB; +test_no_interpolation({ + property: 'mask-image', + from: from, + to: to, +}); + +// Single to multiple +from = 'url(../resources/blue-20.png)'; +toA = 'url(../resources/stripes-20.png)'; +toB = 'url(../resources/blue-20.png)'; +to = toA + ', ' + toB; +test_no_interpolation({ + property: 'mask-image', + from: from, + to: to, +}); + +// Multiple mismatched types +test_no_interpolation({ + property: 'mask-image', + from: 'url(../resources/blue-20.png), none', + to: 'url(../resources/stripes-20.png), url(../resources/blue-20.png)', +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-masking/animations/mask-no-interpolation.html b/testing/web-platform/tests/css/css-masking/animations/mask-no-interpolation.html new file mode 100644 index 0000000000..1275340ea8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/animations/mask-no-interpolation.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://drafts.fxtf.org/css-masking/#the-mask"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'mask', + from: 'none', + to: 'url(mask.png)' +}); +</script> diff --git a/testing/web-platform/tests/css/css-masking/animations/mask-position-interpolation.html b/testing/web-platform/tests/css/css-masking/animations/mask-position-interpolation.html new file mode 100644 index 0000000000..d832048ca3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/animations/mask-position-interpolation.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<meta charset="UTF-8"> +<title>mask-position-interpolation</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-position"> +<meta name="assert" content="mask-position supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.container { + display: inline-block; + border: 2px solid black; +} +.parent { + mask-position: 30px 10px; +} +.target { + width: 120px; + height: 120px; + mask-position: 10px 30px; +} +</style> + +<body> +<template id="target-template"> + <div class="container"> + <div class="target"></div> + </div> +</template> +<script> +// neutral +test_interpolation({ + property: 'mask-position', + from: neutralKeyframe, + to: '20px 20px', +}, [ + {at: -0.25, expect: '7.5px 32.5px'}, + {at: 0, expect: '10px 30px'}, + {at: 0.25, expect: '12.5px 27.5px'}, + {at: 0.5, expect: '15px 25px'}, + {at: 0.75, expect: '17.5px 22.5px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.25, expect: '22.5px 17.5px'}, +]); + +// initial +test_interpolation({ + property: 'mask-position', + from: 'initial', + to: '20px 20px', +}, [ + {at: -0.25, expect: 'calc(0% - 5px) calc(0% - 5px)'}, + {at: 0, expect: '0% 0%'}, + {at: 0.25, expect: 'calc(0% + 5px) calc(0% + 5px)'}, + {at: 0.5, expect: 'calc(0% + 10px) calc(0% + 10px)'}, + {at: 0.75, expect: 'calc(0% + 15px) calc(0% + 15px)'}, + {at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'}, + {at: 1.25, expect:'calc(0% + 25px) calc(0% + 25px)'}, +]); + +// inherit +test_interpolation({ + property: 'mask-position', + from: 'inherit', + to: '20px 20px', +}, [ + {at: -0.25, expect: '32.5px 7.5px'}, + {at: 0, expect: '30px 10px'}, + {at: 0.25, expect: '27.5px 12.5px'}, + {at: 0.5, expect: '25px 15px'}, + {at: 0.75, expect: '22.5px 17.5px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.25, expect: '17.5px 22.5px'}, +]); + +// unset +test_interpolation({ + property: 'mask-position', + from: 'unset', + to: '20px 20px', +}, [ + {at: -0.25, expect: 'calc(0% - 5px) calc(0% - 5px)'}, + {at: 0, expect: '0% 0%'}, + {at: 0.25, expect: 'calc(0% + 5px) calc(0% + 5px)'}, + {at: 0.5, expect: 'calc(0% + 10px) calc(0% + 10px)'}, + {at: 0.75, expect: 'calc(0% + 15px) calc(0% + 15px)'}, + {at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'}, + {at: 1.25, expect:'calc(0% + 25px) calc(0% + 25px)'}, +]); + +// Test equal number of position values as background images. +test_interpolation({ + property: 'mask-position', + from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, + {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, + {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, +]); + +// Test single position value repeated over background images. +test_interpolation({ + property: 'mask-position', + from: 'top 0px left 0px', + to: 'left 80px top 80px', +}, [ + {at: -0.25, expect: '-20px -20px'}, + {at: 0, expect: ' 0px 0px'}, + {at: 0.25, expect: ' 20px 20px'}, + {at: 0.5, expect: ' 40px 40px'}, + {at: 0.75, expect: ' 60px 60px'}, + {at: 1, expect: ' 80px 80px'}, + {at: 1.25, expect: '100px 100px'}, +]); + +// Test mismatched numbers of position values. +test_interpolation({ + property: 'mask-position', + from: '0px 0px, 80px 0px', + to: '40px 40px, 80px 80px, 0px 80px', +}, [ + {at: -0.25, expect: + '-10px -10px, 80px -20px, 0px -20px, 90px -10px, -20px -20px, 100px -20px'}, + {at: 0, expect: + ' 0px 0px, 80px 0px, 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, + {at: 0.25, expect: + ' 10px 10px, 80px 20px, 0px 20px, 70px 10px, 20px 20px, 60px 20px'}, + {at: 0.5, expect: + ' 20px 20px, 80px 40px, 0px 40px, 60px 20px, 40px 40px, 40px 40px'}, + {at: 0.75, expect: + ' 30px 30px, 80px 60px, 0px 60px, 50px 30px, 60px 60px, 20px 60px'}, + {at: 1, expect: + ' 40px 40px, 80px 80px, 0px 80px, 40px 40px, 80px 80px, 0px 80px'}, + {at: 1.25, expect: + ' 50px 50px, 80px 100px, 0px 100px, 30px 50px, 100px 100px, -20px 100px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-nested-twice.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-nested-twice.svg new file mode 100644 index 0000000000..269e8feed2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-nested-twice.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath element nested twice</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Check deep referencing of content of one clipPath + element to another clipPath element. A green square should be visible. + </desc> +</g> +<clipPath id="clip3"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<clipPath id="clip2" clip-path="url(#clip3)"> + <circle cx="100" cy="100" r="75"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <circle cx="100" cy="100" r="100"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-001.svg new file mode 100644 index 0000000000..e5b972ff0b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-001.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clip-rule property - evenodd</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/> + <html:link rel="match" href="reference/clip-path-square-hole-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Check if the clip-rule 'evenodd' applies to a content + polygon element of clipPath element. A green square with a + rectangular hole should be visible.</desc> +</g> +<clipPath id="clip1"> + <polygon points="25 25, 175 25, 175 175, 25 175, 25 50, 150 50, 150 150, 50 150, 50 50, 25 50" clip-rule="evenodd" /> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-002.svg new file mode 100644 index 0000000000..7729f79731 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-002.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clip-rule property - nonzero</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/> + <html:link rel="match" href="reference/clip-path-square-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Check if the clip-rule 'nonzero' applies to a content + polygon element of clipPath element. A green square should be + visible.</desc> +</g> +<clipPath id="clip1"> + <polygon points="25 25, 175 25, 175 175, 25 175, 25 50, 150 50, 150 150, 50 150, 50 50, 25 50" clip-rule="nonzero" /> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-003.svg new file mode 100644 index 0000000000..c4f2bf42b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-003.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clip-rule property - evenodd nested clip</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/> + <html:link rel="match" href="reference/clip-path-square-hole-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Check if the clip-rule 'evenodd' applies to a content + polygon element of clipPath element. A green square with a + rectangular hole should be visible.</desc> +</g> +<clipPath id="clip2"> + <rect x="25" y="25" width="150" height="150"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <polygon points="0 0, 200 0, 200 200, 0 200, 0 50, 150 50, 150 150, 50 150, 50 50, 0 50" clip-rule="evenodd" /> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-004.svg new file mode 100644 index 0000000000..2ea618602a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-004.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clip-rule property - nonzero nested clip</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/> + <html:link rel="match" href="reference/clip-path-square-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Check that clip-rule 'nonzero' applies to + clipPath element and a second clipPath element can be applied to + the first one. A green square should be visible.</desc> +</g> +<clipPath id="clip2"> + <rect x="25" y="25" width="150" height="150"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <polygon points="0 0, 200 0, 200 200, 0 200, 0 50, 150 50, 150 150, 50 150, 50 50, 0 50" clip-rule="nonzero" /> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-005.svg new file mode 100644 index 0000000000..ca492583cd --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-005.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath clip-rule evenodd nonzero</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/> + <html:link rel="match" href="reference/clip-path-clip-rule-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Test two different clip-rules on two different content + elements. You should see two green rectangles. The one on the top left + should have a hole, the shifted one shouldn't.</desc> +</g> +<clipPath id="clip1"> + <polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" clip-rule="evenodd"/> + <polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" clip-rule="nonzero"/> +</clipPath> +<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-006.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-006.svg new file mode 100644 index 0000000000..da9d1010d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-006.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath clip-rule nonzero nonzero</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/> + <html:link rel="match" href="reference/clip-path-clip-rule-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Test two equal clip-rules 'nonzero' on two different + content elements. You should see two solid green rectangles. The first one + on the top left, the second one slightly shifted to the bottom right. + </desc> +</g> +<clipPath id="clip1"> + <polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" clip-rule="nonzero"/> + <polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" clip-rule="nonzero"/> +</clipPath> +<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-007.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-007.svg new file mode 100644 index 0000000000..d1edb6cd9a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-007.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath clip-rule nonzero evenodd</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/> + <html:link rel="match" href="reference/clip-path-clip-rule-003-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Test two different clip-rules on two different content + elements. You should see two green rectangles. The one on the top left + shouldn't have a hole, the shifted one should have.</desc> +</g> +<clipPath id="clip1"> + <polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" clip-rule="nonzero"/> + <polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" clip-rule="evenodd"/> +</clipPath> +<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-008.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-008.svg new file mode 100644 index 0000000000..66ad9b5cb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-008.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath clip-rule evenodd evenodd</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/> + <html:link rel="match" href="reference/clip-path-clip-rule-004-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Test two equal clip-rules 'evenodd' on two different + content elements. You should see two green rectangles with a hole. The + first one on the top left, the second one slightly shifted to the bottom + right.</desc> +</g> +<clipPath id="clip1"> + <polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" clip-rule="evenodd"/> + <polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" clip-rule="evenodd"/> +</clipPath> +<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-009.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-009.svg new file mode 100644 index 0000000000..69d70b4e3e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-009.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath fill-rule</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/> + <html:link rel="match" href="reference/clip-path-square-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The fill-rule must not affect the winding rule for + clipping. A green square should be visible.</desc> +</g> +<clipPath id="clip1"> + <!-- fill-rule must not affect the winding rule for clipping --> + <polygon points="25 25, 175 25, 175 175, 25 175, 25 50, 150 50, 150 150, 50 150, 50 50, 25 50" fill-rule="evenodd"/> +</clipPath> +<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-010.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-010.svg new file mode 100644 index 0000000000..594e3097c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-010.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath clip-rule inheritance</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/> + <html:link rel="match" href="reference/clip-path-clip-rule-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">inheritance and overriding of inheritance. The one on + the top left should have a hole, the shifted one shouldn't.</desc> +</g> +<clipPath id="clip1" clip-rule="evenodd"> + <polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25"/> + <polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" clip-rule="nonzero"/> +</clipPath> +<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip.svg new file mode 100644 index 0000000000..530fd014d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath references clipPath</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element references another + clipPath element. A green square should be visible.</desc> +</g> +<clipPath id="clip2"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <circle cx="100" cy="100" r="100"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-001.svg new file mode 100644 index 0000000000..9991f16476 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-001.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: content of clipPath clipped 1</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Content element of clipPath references second + clipPath element and should be clipped by it. A green square should + be visible. + </desc> +</g> +<clipPath id="clip2"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<clipPath id="clip1"> + <circle cx="100" cy="100" r="100" clip-path="url(#clip2)"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-002.svg new file mode 100644 index 0000000000..7677e3f19a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-002.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: content of clipPath clipped 2</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">One content element of clipPath references second + clipPath element and should be clipped by it. Second content element + isn't clipped. A green square should be visible.</desc> +</g> +<clipPath id="clip2"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<clipPath id="clip1"> + <circle cx="100" cy="100" r="50"/> + <circle cx="100" cy="100" r="75" clip-path="url(#clip2)"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-003.svg new file mode 100644 index 0000000000..fd1b291625 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-003.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: content of clipPath clipped 3</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Both content elements of clipPath reference + different other clipPath elements and should be clipped by them. A + green square should be visible.</desc> +</g> +<clipPath id="clip2"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<clipPath id="clip3"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<clipPath id="clip1"> + <circle cx="100" cy="100" r="75" clip-path="url(#clip2)"/> + <circle cx="100" cy="100" r="75" clip-path="url(#clip3)"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-004.svg new file mode 100644 index 0000000000..2317842e5f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-004.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>CSS Masking: clip-path applied to an element in a clipPath with objectBoundingBox units</title> + <html:link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-content-clip-004-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert"> + When a clipPath establishes a coordinate system using objectBoundingBox + units, any other clipPath referenced through the clip-path property on + the first clipPath's children must use that same coordinate system if + it is using userSpaceOnUse units. + </desc> + </g> + <defs> + <clipPath id="inner"> + <rect width="0.25" height="0.25"/> + </clipPath> + <clipPath id="outer" clipPathUnits="objectBoundingBox"> + <rect width="0.5" height="0.5" clip-path="url(#inner)"/> + </clipPath> + </defs> + <rect width="100" height="100" fill="red"/> + <g clip-path="url(#outer)"> + <rect width="400" height="400" fill="red"/> + <rect width="100" height="100" fill="green"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-invisible.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-invisible.svg new file mode 100644 index 0000000000..0696d4b09f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-invisible.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Content of clipPath with visibility: hidden</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-invisible-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">From the spec: "If a child element is made invisible + by display or visibility it does not contribute to the clipping path." + clipPath without content hides the clipped element. Nothing should be + visible. + </desc> +</g> +<clipPath id="clip1"> + <rect width="100" height="100" style="visibility: hidden;"/> +</clipPath> +<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-syling.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-syling.svg new file mode 100644 index 0000000000..5fb527d1e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-syling.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath content styling</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Style properties on content elements of clipPath + must be ignored. A green square should be visible.</desc> +</g> +<clipPath id="clip1"> + <rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="10" stroke-dasharray="10 10" fill="none"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-001.svg new file mode 100644 index 0000000000..b70cdde683 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-001.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath reference content with use 1</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Reference content clip shape with use element from + defs section. A green square should be visible.</desc> +</g> +<defs> + <rect id="circle" x="50" y="50" width="100" height="100"/> +</defs> +<clipPath id="clip1"> + <use xlink:href="#circle"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-002.svg new file mode 100644 index 0000000000..0596d21cfe --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-002.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath reference content with use 2</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Reference content clip shape with use element from + defs section. Afterwards, the clipPath element gets clipped. + A green square should be visible.</desc> +</g> +<defs> + <rect id="rect" x="50" y="50" width="150" height="150"/> +</defs> +<clipPath id="clip2"> + <rect width="150" height="150"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <use xlink:href="#rect"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-003.svg new file mode 100644 index 0000000000..79354679cf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-003.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath reference content with use 3</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Reference content clip shape with use element from + defs section. Afterwards, the clipPath element gets clipped. + The second clipPath element references the content element with + use as well. A green square should be visible.</desc> +</g> +<defs> + <rect id="rect1" x="50" y="50" width="150" height="150"/> + <rect id="rect2" width="150" height="150"/> +</defs> +<clipPath id="clip2"> + <use xlink:href="#rect2"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <use xlink:href="#rect1"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-004.svg new file mode 100644 index 0000000000..8e2e7a67ae --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-004.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath reference content with use 4</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Reference content clip shape with use element from + defs section. Furthermore, the referenced shape gets transformed. A + green square should be visible.</desc> +</g> +<defs> + <rect id="rect" width="100" height="100"/> +</defs> +<clipPath id="clip1"> + <use xlink:href="#rect" transform="translate(50, 50)"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-005.svg new file mode 100644 index 0000000000..c7d5ec8390 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-005.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath reference content with use 5</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The clipPath elements reference the same content + clip shape with use. One use reference gets transformed. The one + clipPath element gets clipped by the other one. A green square should + be visible.</desc> +</g> +<defs> + <rect id="rect" width="150" height="150"/> +</defs> +<clipPath id="clip2"> + <use xlink:href="#rect"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <use xlink:href="#rect" transform="translate(50, 50)"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-006.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-006.svg new file mode 100644 index 0000000000..6f9d7e0673 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-006.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath reference content with use 6</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The clipPath elements reference two different + content clip shapes with use. One use reference gets transformed. + The one clipPath element gets clipped by the other one. A green square + should be visible.</desc> +</g> +<defs> + <rect id="rect1" width="150" height="150"/> + <rect id="rect2" width="150" height="150"/> +</defs> +<clipPath id="clip2"> + <use xlink:href="#rect1"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <use xlink:href="#rect2" transform="translate(50, 50)"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-007.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-007.svg new file mode 100644 index 0000000000..7cf0fa08e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-007.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath reference content with use 7</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-003-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The clipPath element has a content use + element which references another use element which references a shape. + A green square should be visible.</desc> +</g> +<defs> + <rect width="200" height="200" id="rect"/> + <use id="use" xlink:href="#rect"/> +</defs> +<clipPath id="clip1"> + <use xlink:href="#use" /> +</clipPath> + +<rect width="400" height="400" fill="red" clip-path="url(#clip1)"/> +<rect width="200" height="200" fill="green" /> +</svg> + diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-001.svg new file mode 100644 index 0000000000..35b21f5f1e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-001.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with CSS Transforms</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">CSS Transforms must apply on the clipPath + element. A green square should be visible.</desc> +</g> +<clipPath id="clip1" style="transform: scale(10) translate(5px, 5px);"> + <rect width="10" height="10"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-002.svg new file mode 100644 index 0000000000..78b57628ff --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-002.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with CSS Transforms and 2nd content element</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">CSS Transforms must apply on the clipPath + element. This example adds a second content element since that may + cause masking in some implementations. A green square should be + visible.</desc> +</g> +<clipPath id="clip1" style="transform: scale(10) translate(5px, 5px);"> + <rect width="10" height="10"/> + <!-- Second rect may cause masking --> + <rect width="5" height="4"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-003.svg new file mode 100644 index 0000000000..8f2713d276 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-003.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with CSS Transforms on content element</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-003-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">CSS Transforms must apply on content element of the + clipPath element. A green square should be visible.</desc> +</g> +<clipPath id="clip1"> + <rect width="400" height="400" style="transform: scale(.5);"/> +</clipPath> +<rect width="400" height="400" fill="red" clip-path="url(#clip1)"/> +<rect width="200" height="200" fill="green"/> +</svg> + diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-004.svg new file mode 100644 index 0000000000..d290fe13a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-004.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with CSS Transforms on both content elements</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-003-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">CSS Transforms must apply on both content elements of + the clipPath element. A green square should be visible.</desc> +</g> +<clipPath id="clip1"> + <rect width="400" height="400" style="transform: scale(.5)"/> + <!-- Second rect may cause masking. --> + <rect width="400" height="400" style="transform: scale(.5)"/> +</clipPath> +<rect width="400" height="400" fill="red" clip-path="url(#clip1)"/> +<rect width="200" height="200" fill="green"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-child-changes.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-child-changes.svg new file mode 100644 index 0000000000..611fb3fcf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-child-changes.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Dynamic transform on clipPath content element</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-003-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A transformation is applied on the content element of + clipPath. A green square should be visible.</desc> +</g> +<clipPath id="clip1"> + <rect width="400" height="400"/> +</clipPath> + +<g clip-path="url(#clip1)"> + <rect width="400" height="400" fill="red"/> + <rect width="200" height="200" fill="green"/> +</g> + +<script> +var clip = document.getElementById("clip1"); +var rect = clip.firstChild.nextSibling; +rect.setAttribute("transform", "scale(0.5)"); +</script> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-clippathunits.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-clippathunits.svg new file mode 100644 index 0000000000..edfccbd83f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-clippathunits.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Dynamic change of clipPathUnits on clipPath</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-003-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The clipPathUnits attribute on the clipPath + element gets changed dynamically from objectBoundingBox to userSpaceOnUse. + This reduces the clipping area from a size much bigger than the document to + the size of the green rectangle. A green square should be visible.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect width="200" height="200"/> +</clipPath> + +<rect width="400" height="400" fill="red" clip-path="url(#clip1)"/> +<rect width="200" height="200" fill="green"/> + +<script> +var clip = document.getElementById("clip1"); +var enumeration = clip.clipPathUnits; +enumeration.baseVal = 1; // Switch to userSpaceOnUse! +</script> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-href.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-href.svg new file mode 100644 index 0000000000..748ff2cc5c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-href.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Dynamic reference of clipPath element</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-003-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The clip-path property gets applied to the later + clipped rectangle dynamically. A green square should be visible.</desc> +</g> + +<clipPath id="clip1"> + <rect width="200" height="200"/> +</clipPath> + +<g clip-path="url(#noclip)" id="target"> + <rect width="400" height="400" fill="red"/> + <rect width="200" height="200" fill="green"/> +</g> + +<script> +document.getElementById("target").setAttribute("clip-path", "url(#clip1)"); +</script> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-id.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-id.svg new file mode 100644 index 0000000000..e8ad7daecc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-id.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Dynamic change of clipPath id</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-003-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The id of a clipPath element is changed + dynamically. This makes the previous invalid clip path reference + of the group valid. A green square should be visible.</desc> +</g> +<clipPath id="oldclip" clipPathUnits="userSpaceOnUse"> + <rect width="200" height="200"/> +</clipPath> +<g clip-path="url(#newclip)"> + <rect width="400" height="400" fill="red"/> + <rect width="200" height="200" fill="green"/> +</g> +<script> +document.getElementsByTagName("clipPath")[0].setAttribute("id", "newclip"); +</script> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-001.svg new file mode 100644 index 0000000000..06c810cd11 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-001.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape without a geometry-box should default to stroke-box</title> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <desc class="assert">The spec states: "If no reference box is specified, the + border-box will be used as reference box", and "For SVG elements without + an associated CSS layout box, the used value for ... border-box and margin-box + is stroke-box." In this testcase, no reference box is specified, so the + clip-path of "inset(0)" should be equivalent to "inset(0) stroke-box", and + should not clip out the stroke. You should see a 100x100 green square formed + by a stroked rect.</desc> +</g> +<rect x="75" y="75" width="50" height="50" stroke-width="50" stroke="green" style="clip-path: inset(0)"></rect> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-002.svg new file mode 100644 index 0000000000..bfc60355ba --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-002.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape using border-box should use stroke-box</title> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <desc class="assert">The spec states: "For SVG elements without an associated + CSS layout box, the used value for ... border-box and margin-box is + stroke-box." In this testcase, border-box is specified, so the + clip-path of "inset(0) border-box" should be equivalent to + "inset(0) stroke-box", and should not clip out the stroke. You should see a + 100x100 green square formed by a stroked rect.</desc> +</g> +<rect x="75" y="75" width="50" height="50" stroke-width="50" stroke="green" style="clip-path: inset(0) border-box"></rect> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid-reference.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid-reference.svg new file mode 100644 index 0000000000..714d90ee76 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid-reference.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with invalid reference</title> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-green-square-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">clip-paths are ignored if their + reference doesn't point to a clipPath.</desc> +</g> + <linearGradient id="a" /> + <rect x="50" y="50" width="100" height="100" fill="green" clip-path="url(#a)"/> +</svg> + diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid.svg new file mode 100644 index 0000000000..85aa3a825b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath invalid content element</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-invisible-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">clipPath elements get invalid if the content + element is not a basic shape or a reference to a basic shape. + Invalid clipPath elements let the clipped element disappear. + Nothing should be visible.</desc> +</g> +<clipPath id="clip1"> + <!-- nothing should be visible, containers are not allowed in clipPath --> + <g> + <rect width="100" height="100"/> + </g> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-negative-scale.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-negative-scale.svg new file mode 100644 index 0000000000..33d6a78c7d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-negative-scale.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath negative scale</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-negative-scale-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Negative scale factors on clipped elements should + be handled correctly by clipPath elements. First clipped, then + scaled.</desc> +</g> +<defs> +<g id="img" transform="translate(10,10)"> + <rect width="200" height="200" fill="red"/> + <rect width="100" height="100" fill="green"/> + <rect width="50" height="50" fill="blue"/> +</g> +</defs> + +<clipPath id="clip"> + <rect x="10" y="10" height="90" width="90"/> +</clipPath> + +<g transform="translate(200, 200)"> +<g transform="matrix(1 0 0 1 -100 -100)" clip-path="url(#clip)"> + <use xlink:href="#img"/> +</g> +<g transform="matrix(-1 0 0 -1 -100 -100)" clip-path="url(#clip)"> + <use xlink:href="#img"/> +</g> +<g transform="matrix(-1 0 0 1 -100 -100)" clip-path="url(#clip)"> + <use xlink:href="#img"/> +</g> +<g transform="matrix(1 0 0 -1 -100 -100)" clip-path="url(#clip)"> + <use xlink:href="#img"/> +</g> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-001.svg new file mode 100644 index 0000000000..f7943c615d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-001.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath without content</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-invisible-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">clipPath element without content make the clipped + element disappear. Nothing should be visible.</desc> +</g> +<clipPath id="clip1"> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-002.svg new file mode 100644 index 0000000000..65df6176ac --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-002.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath without content 2</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-invisible-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">clipPath element where the clip shape does not + intersect with the clipped element make the clipped element disappear. + Nothing should be visible.</desc> +</g> +<clipPath id="clip1"> + <circle cx="400" cy="400" r="100"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-003.svg new file mode 100644 index 0000000000..afd8f702ed --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-003.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and clipPath without intersection</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-invisible-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">If a clipPath element get clipped and there is no + intersection with the second clipPath element, the originally clipped + element disappears. Nothing should be visible.</desc> +</g> +<clipPath id="clip2"> + <circle cx="400" cy="400" r="100"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <rect width="200" height="200"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-004.svg new file mode 100644 index 0000000000..92b27af017 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-004.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with invalid/empty content</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-invisible-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">If a clipPath element has an invalid or empty + basic shape the clipped element disappears. Nothing should be visible. + </desc> +</g> +<!--It tests that an empty clip path clips the referencing graphic. Bug 15289.--> +<clipPath id="nothing"> +</clipPath> +<clipPath id="emptyrect"> + <rect width="0" height="0"/> +</clipPath> + +<rect width="200" height="200" fill="red" clip-path="url(#nothing)"/> +<rect width="200" height="200" fill="red" clip-path="url(#emptyrect)"/> +</svg> + diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-005.svg new file mode 100644 index 0000000000..e0c03d28cb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-005.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <title>Removing a clip-path attribute pointing to an empty <clipPath></title> + <h:link rel="help" href="https://drafts.fxtf.org/css-masking-1/#ClipPathElement"/> + <h:link rel="match" href="reference/clip-path-square-003-ref.svg"/> + <h:script src="/common/reftest-wait.js"/> + <h:script src="/common/rendering-utils.js"/> + + <clipPath id="empty"/> + <g clip-path='url("#empty")'> + <rect width="200" height="200" fill="green"/> + </g> + <script> + waitForAtLeastOneFrame().then(() => { + document.querySelector('svg > g').removeAttribute('clip-path'); + takeScreenshot(); + }); + </script> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-001.svg new file mode 100644 index 0000000000..d5ef03ac01 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-001.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with objectBoundingBox</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">clipPathUnits="objectBoundingBox" changes the + behavior of non-percentage values. The dimension of the clipped + element is equal to one unit for the content of clipPath. + You should see a green square.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.25" y="0.25" width="0.5" height="0.5"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-002.svg new file mode 100644 index 0000000000..8180ddf9f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-002.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="400" height="400"> +<g id="testmeta"> + <title>CSS Masking: clipPath with objectBoundingBox and percentage</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">clipPathUnits="objectBoundingBox" changes the + behavior of percentage values. The behavior is specified by SVG. + You should see a green square.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.0625%" y="0.0625%" width="0.125%" height="0.125%"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-003.svg new file mode 100644 index 0000000000..8a7aa0ff5c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-003.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with objectBoundingBox and scaled clipped element</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-circle-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The clipped element has a transform. The transform + should apply "after" the clipping. You should see a full green circle. + </desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <circle cx="0.25" cy="0.25" r="0.25"/> +</clipPath> +<rect width="10" height="10" fill="green" transform="scale(20 20)" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-004.svg new file mode 100644 index 0000000000..215d253618 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-004.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Nested clipPath with different clipPathUnits</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The first clipPath element has + clipPathUnits="objectBoundingBox", the second userSpaceOnUse (default). + Both should be handled accordingly. You should see a green square.</desc> +</g> +<clipPath id="clip2"> + <rect x="50" y="50" width="150" height="150"/> +</clipPath> +<clipPath id="clip1" clipPathUnits="objectBoundingBox" clip-path="url(#clip2)"> + <rect width="0.75" height="0.75"/> +</clipPath> +<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-001.svg new file mode 100644 index 0000000000..6d837af68b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-001.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath on g element</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element on a g element should clip the + group with it's content. You should see a green square.</desc> +</g> +<clipPath id="clip1"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<g clip-path="url(#clip1)"> + <rect width="200" height="200" fill="green"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-002.svg new file mode 100644 index 0000000000..a14287cbc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-002.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath on g element and child</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element on a g element and it's child + element should clip the child first, then the group with it's content. + You should see a green square.</desc> +</g> +<clipPath id="clip1"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<g clip-path="url(#clip1)"> + <rect width="200" height="200" fill="green" clip-path="url(clip1)"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-003.svg new file mode 100644 index 0000000000..b3eead8ac2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-003.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath on child of g element</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element on a child of g element should + just clip the child and not the group. You should see a green square. + </desc> +</g> +<clipPath id="clip1"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<g> + <rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-004.svg new file mode 100644 index 0000000000..32eaf00369 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-004.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Two different clipPaths on g element and child</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element on a child and a differnt + clipPath element on g element should clip their targets independent of + each other but the child first. You should see a green square.</desc> +</g> +<clipPath id="clip2"> + <rect width="150" height="150"/> +</clipPath> +<clipPath id="clip1"> + <rect x="50" y="50" width="150" height="150"/> +</clipPath> +<g clip-path="url(#clip1)"> + <rect width="200" height="200" fill="green" clip-path="url(#clip2)"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-005.svg new file mode 100644 index 0000000000..c621d91c3e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-005.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Two different clipPaths with objectBoundingBox on g element and child</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element on a child and a differnt + clipPath element on g element should clip their targets independent of + each other but the child first. When both have + clipPathUnits="objectBoundingBox", then the bounding box of each element is + taken. Note that clipping on the child influences the bounding box of the + group. You should see a green square.</desc> +</g> +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect width="0.75" height="0.75"/> +</clipPath> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.25" y="0.25" width="0.75" height="0.75"/> +</clipPath> +<g clip-path="url(#clip1)"> + <rect width="200" height="200" fill="green" clip-path="url(#clip2)"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-001.svg new file mode 100644 index 0000000000..ae5df003fa --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-001.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath on element with marker</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-on-marker-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element with marker is clipped as a + whole. Note that a marker does not influence the bounding box of an + element. You should see a green square with a blur square in it on the top + left.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect width="1" height="1"/> +</clipPath> +<marker id="marker1" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="100" markerHeight="100"> + <rect width="10" height="10" fill="blue"/> +</marker> +<path d="M50,50 L150,50 L150,150 L50,150 z" marker-start="url(#marker1)" clip-path="url(#clip1)" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-002.svg new file mode 100644 index 0000000000..4f2ffa4c7a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-002.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath on element with marker</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-on-marker-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element with marker is clipped as a + whole. Note that a marker does not influence the bounding box of an + element. The clipping region includes the whole canvas. Nothing gets + clipped. You should see a green square with a blur square on top of it, + slightly shifted to the top left.</desc> +</g> +<clipPath id="clip1" clipPathUnits="userSpaceOnUse"> + <rect width="100%" height="100%"/> +</clipPath> +<marker id="marker1" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="100" markerHeight="100"> + <rect width="10" height="10" fill="blue"/> +</marker> +<path d="M50,50 L150,50 L150,150 L50,150 z" marker-start="url(#marker1)" clip-path="url(#clip1)" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-003.svg new file mode 100644 index 0000000000..45fc0fbd37 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-003.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with objectBoundingBox on element with marker</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-on-marker-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element with marker is clipped as a + whole. Note that a marker does not influence the bounding box of an + element. You should see a green square with a blur square in it on the top + left.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect width="1" height="1"/> +</clipPath> +<marker id="marker1" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="100" markerHeight="100"> + <rect width="10" height="10" fill="blue"/> +</marker> +<path d="M50,50 L150,50 L150,150 L50,150 z" marker-end="url(#marker1)" clip-path="url(#clip1)" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-001.svg new file mode 100644 index 0000000000..e92ce1d10f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-001.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" clip-path="url(#clip1)"> +<g id="testmeta"> + <title>CSS Masking: clipPath on root <svg></title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element can be applied to a root + <svg> element. You should see a green square.</desc> +</g> +<clipPath id="clip1"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<rect width="200" height="200" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-002.svg new file mode 100644 index 0000000000..94067d4ba3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-002.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" clip-path="url(#clip1)"> +<g id="testmeta"> + <title>CSS Masking: Clipped clipPath on root <svg></title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element can be applied to a root + <svg> element. This clipPath element can be clipped itself. You + should see a green square.</desc> +</g> +<clipPath id="clip2"> + <rect x="25" y="25" width="150" height="150"/> +</clipPath> +<clipPath id="clip1"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip2)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-003.svg new file mode 100644 index 0000000000..01c4a2610e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-003.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" clip-path="url(#clip1)"> +<g id="testmeta"> + <title>CSS Masking: Clipped clipPath on root <svg></title> + <html:link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element can be applied to a root + <svg> element. This clipPath element can be clipped itself. You + should see a green square.</desc> +</g> +<clipPath id="clip2"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<clipPath id="clip1"> + <rect x="25" y="25" width="150" height="150"/> +</clipPath> +<rect width="200" height="200" fill="green"/> +<script> + var svg = document.documentElement; + svg.setAttribute('clip-path','url(#clip2)'); +</script> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-004.svg new file mode 100644 index 0000000000..62a020e558 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-004.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" clip-path="url(#clip1)"> +<g id="testmeta"> + <title>CSS Masking: Clipped clipPath on root <svg></title> + <html:link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element can be applied to a root + <svg> element. This clipPath element can be clipped itself. You + should see a green square.</desc> +</g> +<clipPath id="clip2"> + <rect width="150" height="150"/> +</clipPath> +<clipPath id="clip1"> + <rect x="50" y="50" width="175" height="175"/> +</clipPath> +<svg clip-path="url(#clip2)"> + <rect width="200" height="200" fill="green"/> +</svg> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-005.svg new file mode 100644 index 0000000000..c39d266028 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-005.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" style="-webkit-clip-path: url(#clip1)"> +<g id="testmeta"> + <title>CSS Masking: clipPath on root <svg></title> + <html:link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element can be applied to a root + <svg> element. You should see a green square.</desc> +</g> +<clipPath id="clip1"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<rect width="200" height="200" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-001.svg new file mode 100644 index 0000000000..8a2cf81c51 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-001.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath on use</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A use element can be clipped by an clipPath + element as well. You should see a green square.</desc> +</g> +<defs> + <rect id="rect" width="200" height="200" fill="green"/> +</defs> +<clipPath id="clip1"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<use xlink:href="#rect" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-002.svg new file mode 100644 index 0000000000..22e5ab7151 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-002.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: Clipped clipPath on use</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A use element can be clipped by an clipPath + element. The clipPath element can be clipped as well. You should see a + green square.</desc> +</g> +<defs> + <rect id="rect" width="200" height="200" fill="green" clip-path="url(#clip2)"/> +</defs> +<clipPath id="clip2"> + <rect width="150" height="150"/> +</clipPath> +<clipPath id="clip1"> + <rect x="50" y="50" width="150" height="150"/> +</clipPath> +<use xlink:href="#rect" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-precision-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-precision-001.svg new file mode 100644 index 0000000000..aa8e5ba7e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-precision-001.svg @@ -0,0 +1,44 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath precision</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/clip-path-precision-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Various comma values should no influence the precision + of the clipPath element. The test should not show any red outlines + around the boxes.</desc> +</g> +<defs> + <g id="paths"> + <path d="M10 10 h20 v20 h-20 v-20 m1 1 v18 h18 v-18 h-18"/> + <rect x="19" y="19" width="2" height="2" /> + <rect x="5.51" y="0.51" width="2" height="32.3" fill="white"/> + <rect x="35.4" y="0.51" width="2" height="32.3" fill="white"/> + </g> +</defs> +<mask id="mask"> +<use xlink:href="#paths" fill="white" x="60" /> +</mask> + +<clipPath id="clipper"> + <path d="M40 10 h20 v20 h-20 v-20 m1 1 v18 h18 v-18 h-18"/> + <rect x="49" y="19" width="2" height="2" /> + <rect x="35.51" y="0.51" width="2" height="32.3" /> + <rect x="65.4" y="0.51" width="2" height="32.3" /> +</clipPath> + +<use xlink:href="#paths" fill="green" /> +<g clip-path="url(#clipper)"> + <rect fill="red" x="38" y="8" width="24" height="24" /> + <use xlink:href="#paths" fill="green" x="30" /> +</g> +<g mask="url(#mask)"> + <rect fill="red" x="68" y="8" width="24" height="24" /> + <use xlink:href="#paths" fill="green" x="60" /> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-001.svg new file mode 100644 index 0000000000..5d4b7c2710 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-001.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath recursion 1</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/clip-path-invisible-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath recursion counts as invalid clipping + path and makes the element disappear. You should see nothing.</desc> +</g> +<defs> +<clipPath id="clip0"> + <rect width="1" height="1" clip-path="url(#clip)" /> +</clipPath> + +<clipPath id="clip2"> + <rect width="100" height="100" clip-path="url(#clip0)"/> +</clipPath> + +<clipPath id="clip"> + <rect width="1" height="1" clip-path="url(#clip2)"/> +</clipPath> + +<mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect width="1" height="1" clip-path="url(#clip)" /> +</mask> +</defs> +<circle r="500" mask="url(#mask1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-002.svg new file mode 100644 index 0000000000..7d921ee67d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-002.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: clipPath recursion 2</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-recursion-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert"> + A clipPath recursion counts as invalid clipping path. + </desc> +</g> +<defs> + <rect x="50" y="150" width="50" height="50" id="rect" fill="none" clip-path="url(#clipPath_1)"/> +</defs> +<clipPath id="clipPath_0"> + <rect x="50" width="50" height="50" clip-path="url(#clipPath_0)"/> +</clipPath> +<clipPath id="clipPath_1"> + <use xlink:href="#rect"/> +</clipPath> +<rect x="50" width="100" height="100" fill="red" clip-path="url(#clipPath_0)"/> +<rect x="50" y="150" width="100" height="100" fill="red" clip-path="url(#clipPath_1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-001.svg new file mode 100644 index 0000000000..873947943c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-001.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape circle() on SVG rectangle</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-circle-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function circle() applied to an SVG + rectangle. You should see a full green circle.</desc> +</g> +<rect width="100" height="100" fill="green" style="clip-path: circle()"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-002.svg new file mode 100644 index 0000000000..dca307dd91 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-002.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape circle() on SVG rectangle with absolute values</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-circle-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function circle() with absolute values + applied to an SVG rectangle. You should see a full green circle.</desc> +</g> +<rect width="400" height="400" fill="green" style="clip-path: circle(50px at 50px 50px)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-003.svg new file mode 100644 index 0000000000..804e1e920a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-003.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape circle() on SVG rectangle with fill-box</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-circle-001-ref.svg" /> + <html:meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-210"/> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function circle() applied to an SVG + rectangle. The specified keyword fill-box defines the reference box + (here objectBoundingBox). You should see a full green circle.</desc> +</g> +<rect width="100" height="100" fill="green" stroke="green" stroke-width="10" style="clip-path: circle() fill-box;"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-004.svg new file mode 100644 index 0000000000..83f7eec4fe --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-004.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape circle() on SVG rectangle with stroke-box</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-circle-001-ref.svg" /> + <html:meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-376"/> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function circle() applied to an SVG + rectangle. The specified keyword stroke-box defines the reference box + stroking bounding box. You should see a full green circle.</desc> +</g> +<rect x="10" y="10" width="80" height="80" fill="green" stroke="green" stroke-width="20" style="clip-path: circle() stroke-box;"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-005.svg new file mode 100644 index 0000000000..90a57e7c15 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-005.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="100" height="100"> +<g id="testmeta"> + <title>CSS Masking: Basic shape circle() on SVG rectangle with view-box</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-circle-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function circle() applied to an SVG + rectangle. The specified keyword view-box defines the viewport as reference + box. You should see a full green circle.</desc> +</g> +<rect width="200" height="200" fill="green" style="clip-path: circle() view-box;"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-001.svg new file mode 100644 index 0000000000..511a197644 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-001.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape ellipse() on SVG rectangle</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-ellipse-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function ellipse() applied to an SVG + rectangle. You should see a full green ellipse.</desc> +</g> +<rect width="200" height="150" fill="green" style="clip-path: ellipse()"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-002.svg new file mode 100644 index 0000000000..08bdc3e19e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-002.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape ellipse() on SVG rectangle with absolute values</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-ellipse-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function ellipse() with absolute values + applied to an SVG rectangle. You should see a full green ellipse.</desc> +</g> +<rect width="200" height="200" fill="green" style="clip-path: ellipse(100px 75px at 100px 75px)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-001.svg new file mode 100644 index 0000000000..bc8a4d810e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-001.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape inset() on SVG rectangle with percentag values</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-shape-inset-001-ref.svg" /> + <html:meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-200"/> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function inset() applied to an SVG + rectangle. Percentage values are relative to a reference box. If not + reference box was specified the objectBoundingBox is used. The inset used + per side is specified by the first 10% argument. The second 10% specify the + border radius. You should see a green square with rounded corners.</desc> +</g> +<rect width="200" height="200" fill="green" style="clip-path: inset(10% round 10%)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-002.svg new file mode 100644 index 0000000000..5e5b189905 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-002.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape inset() on SVG rectangle with absolute values</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-shape-inset-001-ref.svg"/> + <html:meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-200"/> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function inset() applied to an SVG + rectangle. The inset used per side is specified by the first 20px argument. + The second 20px specify the border radius. You should see a green square + with rounded corners.</desc> +</g> +<rect width="200" height="200" fill="green" style="clip-path: inset(20px round 20px)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-001.svg new file mode 100644 index 0000000000..f474b1264d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-001.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape polygon() on SVG rectangle with nonzero</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-square-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function polygon() with absolute values + applied to an SVG rectangle. The clip-rule is specified with nonzero. You + should see a green square.</desc> +</g> +<rect width="200" height="200" fill="green" style="clip-path: polygon(nonzero, 25px 25px, 175px 25px, 175px 175px, 25px 175px, 25px 50px, 150px 50px, 150px 150px, 50px 150px, 50px 50px, 25px 50px)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-002.svg new file mode 100644 index 0000000000..0fd8b1bec1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-002.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape polygon() on SVG rectangle with evenodd</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-square-hole-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function polygon() with absolute values + applied to an SVG rectangle. The clip-rule is specified with evenodd. You + should see a green square with an rectangular hole.</desc> +</g> +<rect width="200" height="200" fill="green" style="clip-path: polygon(evenodd, 25px 25px, 175px 25px, 175px 175px, 25px 175px, 25px 50px, 150px 50px, 150px 150px, 50px 150px, 50px 50px, 25px 50px)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-003.svg new file mode 100644 index 0000000000..91ee3d0576 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-003.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Basic shape polygon() on SVG rectangle with no clip rule</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-square-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A basic shape function polygon() with absolute values + applied to an SVG rectangle. The clip-rule is not specified and defaults to + nonzero. You should see a green square.</desc> +</g> +<rect width="200" height="200" fill="green" style="clip-path: polygon(25px 25px, 175px 25px, 175px 175px, 25px 175px, 25px 50px, 150px 50px, 150px 150px, 50px 150px, 50px 50px, 25px 50px)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-001.svg new file mode 100644 index 0000000000..6d850b993a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-001.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with text</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-text-001-ref.svg" /> + <html:link rel="stylesheet" href="/fonts/ahem.css"/> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element can contain text. You should + see four adjacent 40x40 green squares and nothing else.</desc> +</g> +<clipPath id="clip1"> + <text x="20" y="150" style="font: 40px/1 Ahem">XXXX</text> +</clipPath> +<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-002.svg new file mode 100644 index 0000000000..f40d13c40d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-002.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and text with styling</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-text-001-ref.svg" /> + <html:link rel="stylesheet" href="/fonts/ahem.css"/> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element can contain text. Text styling + (e.g. stroke/stroke-width) should not influence the clipping path. + You should see four adjacent 40x40 green squares and nothing else. + </desc> +</g> +<clipPath id="clip1"> + <text x="20" y="150" style="font: 40px/1 Ahem" stroke="red" stroke-width="10">XXXX</text> +</clipPath> +<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-003.svg new file mode 100644 index 0000000000..7a5e9e7d82 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-003.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with text and a polygon</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-text-002-ref.svg" /> + <html:link rel="stylesheet" href="/fonts/ahem.css"/> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element can contain text. Text can be + combined with other clipping shapes like polygons. You should see a green + stripe through the hole of a green rectangle.</desc> +</g> +<clipPath id="clip1"> + <text x="20" y="120" style="font: 40px/1 Ahem" stroke="red" stroke-width="10">XXXX</text> + <polygon points="0 0, 200 0, 200 200, 0 200, 0 50, 150 50, 150 150, 50 150, 50 50, 0 50" clip-rule="evenodd" /> +</clipPath> +<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-004.svg new file mode 100644 index 0000000000..2389320677 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-004.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and tspan element with styling</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-text-001-ref.svg" /> + <html:link rel="stylesheet" href="/fonts/ahem.css"/> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element can contain text in a + tspan element. Text styling on text element or tspan element should + not influence the clipping path. You should see four adjacent 40x40 + green squares and nothing else.</desc> +</g> +<clipPath id="clip1"> + <text x="20" y="150" style="font: 40px/1 Ahem"><tspan stroke="red" fill="none">XXXX</tspan></text> +</clipPath> +<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-005.svg new file mode 100644 index 0000000000..487e2fead8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-005.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Clipped clipPath with text</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-text-003-ref.svg" /> + <metadata class="flags">svg</metadata> + <html:link rel="stylesheet" href="/fonts/ahem.css"/> + <desc class="assert">A clipPath element can contain text. The + clipPath element can be clipped itself with the text. You should see + fragments of four adjacent 40x40 green squares and nothing else. + </desc> +</g> +<clipPath id="clip2"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <text x="20" y="150" style="font: 40px/1 Ahem">XXXX</text> +</clipPath> +<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-userspaceonuse-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-userspaceonuse-001.svg new file mode 100644 index 0000000000..1a3d769089 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-userspaceonuse-001.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Two clipPath elements with different clipPathUnits</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">A clipPath element with clipPathUnits + userSpaceOnUse gets clipped by a clipPath element with cliPathUnits + objectBoundingBox. You should see a green square.</desc> +</g> +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect width="0.75" height="0.75"/> +</clipPath> +<clipPath id="clip1" clip-path="url(#clip2)"> + <rect x="50" y="50" width="150" height="150"/> +</clipPath> +<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-opacity.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-opacity.svg new file mode 100644 index 0000000000..ac944beaff --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-opacity.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath child with opacity style</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The opacit on the child of the clipPath should + not influence the clipping path. You should see a green square.</desc> +</g> +<clipPath id="clip"> + <rect x="50" y="50" width="100" height="100" opacity=".4"/> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-transform.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-transform.svg new file mode 100644 index 0000000000..b3c3b25d50 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-transform.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath with transformed child</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="match" href="reference/clip-path-square-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The child of the clipPath element has a transform + that influences the size of the clipping path. You should see a green + square.</desc> +</g> +<clipPath id="clip1"> + <rect width="10" height="10" transform="scale(10) translate(5, 5)"/> +</clipPath> +<rect width="400" height="400" fill="green" clip-path="url(#clip1)"/> +</svg> + diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-and-nested-clip-path.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-and-nested-clip-path.svg new file mode 100644 index 0000000000..725f955752 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-and-nested-clip-path.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <html:link rel="help" href="https://www.w3.org/TR/css-masking-1/"/> + <html:link rel="help" href="https://crbug.com/1155384"/> + <html:link rel="match" href="reference/mask-and-nested-clip-path-ref.svg"/> + <mask id="mask"> + <rect x="0" y="0" width="200" height="200" fill="white" /> + </mask> + <clipPath id="nested-clip-path"> + <rect x="100" y="0" width="300" height="300" /> + </clipPath> + <clipPath id="clip-path" clip-path="url(#nested-clip-path)"> + <rect x="0" y="100" width="300" height="300" /> + </clipPath> + <rect x="0" y="0" width="300" height="300" fill="red" mask="url(#mask)" clip-path="url(#clip-path)"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-001.svg new file mode 100644 index 0000000000..0dc0f7c0f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-001.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and mask nesting 1</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. You should see a green square with 4 equally + sized and positioned white squares in it.</desc> +</g> +<clipPath id="clip0" clipPathUnits="userSpaceOnUse"> + <rect x="60" y="60" width="30" height="30"/> +</clipPath> + +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="userSpaceOnUse"> + <rect x="60" y="10" width="30" height="30" transform="scale(0.01 0.01)"/> + <rect x="0" y="0" width="100" height="100" transform="scale(0.01 0.01)" clip-path="url(#clip0)"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> +</clipPath> + +<mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip)" /> +</mask> + +<rect width="200" height="200" fill="green" mask="url(#mask1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-002.svg new file mode 100644 index 0000000000..2e611feb8b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-002.svg @@ -0,0 +1,43 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and mask nesting 2</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. You should see a green square with 4 equally + sized and positioned white squares in it.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.1" width="0.3" height="0.3"/> + <rect x="0.6" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> +</clipPath> + +<mask id="mask1a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip1)" /> +</mask> + +<mask id="mask1b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip2)" /> +</mask> + +<g mask="url(#mask1a)"> + <rect width="200" height="200" fill="green" mask="url(#mask1b)"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-003.svg new file mode 100644 index 0000000000..622125318c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-003.svg @@ -0,0 +1,51 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and mask nesting 3</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. You should see a green square with 4 equally + sized and positioned white squares in it.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.1" width="0.3" height="0.3"/> + <rect x="0.6" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> +</clipPath> + +<mask id="mask1a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip1)" /> +</mask> + +<mask id="mask1b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip2)" /> +</mask> + +<mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white" mask="url(#mask1a)"/> +</mask> + +<mask id="mask3" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white" mask="url(#mask1b)"/> +</mask> + +<g mask="url(#mask3)"> + <rect width="200" height="200" fill="green" mask="url(#mask2)"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-004.svg new file mode 100644 index 0000000000..66bb3b7ea4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-004.svg @@ -0,0 +1,36 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and mask nesting 4</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. You should see a green square with 4 equally + sized and positioned white squares in it.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.1" width="0.3" height="0.3"/> + <rect x="0.6" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> +</clipPath> + +<mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip)" /> +</mask> + +<rect width="200" height="200" fill="green" mask="url(#mask1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-005.svg new file mode 100644 index 0000000000..9317ce4ed0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-005.svg @@ -0,0 +1,35 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and mask nesting 5</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. You should see 4 equally sized and positioned green + squares.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.1" width="0.3" height="0.3"/> + <rect x="0.6" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> +</clipPath> + +<mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white" clip-path="url(#clip)" /> +</mask> + +<rect width="200" height="200" fill="green" mask="url(#mask2)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-006.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-006.svg new file mode 100644 index 0000000000..6ab2a20f4b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-006.svg @@ -0,0 +1,35 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and mask nesting 6</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. You should see 4 equally sized and positioned green + squares.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> + <rect x="0.6" y="0.1" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> +</clipPath> + +<mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white" clip-path="url(#clip)" /> +</mask> + +<rect width="200" height="200" fill="green" mask="url(#mask2)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-007.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-007.svg new file mode 100644 index 0000000000..27f372494f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-007.svg @@ -0,0 +1,36 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and mask nesting 7</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. You should see a green square with 4 equally + sized and positioned white squares in it.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> + <rect x="0.6" y="0.1" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> +</clipPath> + +<mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip)" /> +</mask> + +<rect width="200" height="200" fill="green" mask="url(#mask1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-008.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-008.svg new file mode 100644 index 0000000000..b3f33e1999 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-008.svg @@ -0,0 +1,44 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and mask nesting 8</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. You should see a green square with 4 equally + sized and positioned white squares in it.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip3" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.1" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip4" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip3)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip4)"/> +</clipPath> + +<mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip)" /> +</mask> + +<rect width="200" height="200" fill="green" mask="url(#mask1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-009.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-009.svg new file mode 100644 index 0000000000..955edd3389 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-009.svg @@ -0,0 +1,43 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: clipPath and mask nesting 9</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-002-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. You should see 4 equally sized and positioned green + squares.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip3" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.1" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip4" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip3)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip4)"/> +</clipPath> + +<mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white" clip-path="url(#clip)" /> +</mask> + +<rect width="200" height="200" fill="green" mask="url(#mask2)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-010.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-010.svg new file mode 100644 index 0000000000..dc1040e51d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-010.svg @@ -0,0 +1,45 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="10000" height="400"> +<g id="testmeta"> + <title>CSS Masking: clipPath and mask nesting 10</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-003-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. You should see 2 equally sized and positioned green + squares next to each other.</desc> +</g> +<defs> +<mask id="mask"> + <!-- forcing a repaintRect offset --> + <rect x="100" width="1" height="1" fill="black"/> + <rect x="200" width="8092" height="100" fill="white"/> +</mask> + +<clipPath id="clip1"> + <!-- forcing clipping via masking --> + <path d="M 0 0 V 100 H 10000 V 0 Z"/> +</clipPath> + +<clipPath id="clip2" clip-path="url(#clip1)"> + <path d="M 100 0 H 200 V 200 H 8292 V 0 Z"/> +</clipPath> + +<mask id="crop"> + <rect width="300" height="100" fill="white"/> +</mask> +</defs> + +<g mask="url(#crop)" transform="translate(-100, 0)"> + <rect width="10000" height="400" fill="red" mask="url(#mask)"/> + <rect x="199" width="101" height="100" fill="green"/> +</g> + +<g mask="url(#crop)" transform="translate(100, 0)"> + <rect width="10000" height="400" fill="red" clip-path="url(#clip2)"/> + <rect x="199" width="101" height="100" fill="green"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-001.svg new file mode 100644 index 0000000000..16890a5859 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-001.svg @@ -0,0 +1,48 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Panning with clipPath and mask nesting 1</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. The current viewport gets translated by panning. You + should see a green square with 4 equally sized and positioned white squares + in it.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.1" width="0.3" height="0.3"/> + <rect x="0.6" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> +</clipPath> + +<mask id="mask1a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip1)" /> +</mask> + +<mask id="mask1b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip2)" /> +</mask> + +<g mask="url(#mask1a)" transform="translate(75, 0)"> + <rect width="200" height="200" fill="green" mask="url(#mask1b)"/> +</g> +<script> +var translate = document.getElementsByTagName('svg')[0].currentTranslate; +translate.x = -75; +</script> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-002.svg new file mode 100644 index 0000000000..e5e426789f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-002.svg @@ -0,0 +1,56 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Panning with clipPath and mask nesting 2</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">Multiple references between clipPath and + mask elements. The current viewport gets translated by panning. You + should see a green square with 4 equally sized and positioned white squares + in it.</desc> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect x="0.1" y="0.1" width="0.3" height="0.3"/> + <rect x="0.1" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip2" clipPathUnits="objectBoundingBox"> + <rect x="0.6" y="0.1" width="0.3" height="0.3"/> + <rect x="0.6" y="0.6" width="0.3" height="0.3"/> +</clipPath> + +<clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/> + <rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/> +</clipPath> + +<mask id="mask1a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip1)" /> +</mask> + +<mask id="mask1b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip2)" /> +</mask> + +<mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white" mask="url(#mask1a)"/> +</mask> + +<mask id="mask3" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white" mask="url(#mask1b)"/> +</mask> + +<g mask="url(#mask3)" transform="translate(75, 0)"> + <rect width="200" height="200" fill="green" mask="url(#mask2)"/> +</g> +<script> +var translate = document.getElementsByTagName('svg')[0].currentTranslate; +translate.x = -75; +</script> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip-transform.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip-transform.svg new file mode 100644 index 0000000000..397f56d190 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip-transform.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: mask with objectBoundingBox gets clipped 1</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-content-clip-002-ref.svg" /> + <html:meta name="fuzzy" content="0-38; 0-268"/> + <metadata class="flags">svg</metadata> + <desc class="assert">The mask element with + maskContentUnits="objectBoundingBox" gets clipped. The clipping path has a + transform that scales the content down. You should see a full green circle. + </desc> +</g> +<clipPath id="clip"> + <circle cx="50" cy="50" r="25" transform="scale(0.01 0.01)"/> +</clipPath> +<mask id="mask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0.25" y="0.25" width="0.5" height="0.5" fill="white" clip-path="url(#clip)"/> +</mask> +<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip.svg new file mode 100644 index 0000000000..c87fedec4f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: mask with objectBoundingBox gets clipped 2</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-content-clip-001-ref.svg" /> + <html:meta name="fuzzy" content="0-38; 0-376"/> + <metadata class="flags">svg</metadata> + <desc class="assert">The mask element with + maskContentUnits="objectBoundingBox" gets clipped. The clipping path has a + coordinates in the mask's user space. You should see a full green circle. + </desc> +</g> +<clipPath id="clip"> + <circle cx="0.5" cy="0.5" r="0.25"/> +</clipPath> +<mask id="mask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0.25" y="0.25" width="0.5" height="0.5" fill="white" clip-path="url(#clip)"/> +</mask> +<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip-transform.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip-transform.svg new file mode 100644 index 0000000000..624084a07b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip-transform.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: mask with userSpaceOnUse gets clipped 1</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-content-clip-002-ref.svg" /> + <html:meta name="fuzzy" content="0-38; 0-268"/> + <metadata class="flags">svg</metadata> + <desc class="assert">The mask element with + maskContentUnits="userSpaceOnUse" gets clipped. The clipping path has a + transform that scales the content down. You should see a full green circle. + </desc> +</g> +<clipPath id="clip" clipPathUnits="userSpaceOnUse"> + <circle cx="50" cy="50" r="25" transform="scale(0.01 0.01)"/> +</clipPath> +<mask id="mask" x="0" y="0" width="200" height="200" maskUnits="userSpaceOnUse" maskContentUnits="objectBoundingBox"> + <rect x="0.25" y="0.25" width="0.5" height="0.5" fill="white" clip-path="url(#clip)"/> +</mask> +<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip.svg new file mode 100644 index 0000000000..f1bfbdda58 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: mask with userSpaceOnUse gets clipped 2</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-content-clip-001-ref.svg" /> + <html:meta name="fuzzy" content="0-38; 0-376"/> + <metadata class="flags">svg</metadata> + <desc class="assert">The mask element with + maskContentUnits="userSpaceOnUse" gets clipped. The clipping path has a + coordinates in the mask's user space. You should see a full green circle. + </desc> +</g> +<clipPath id="clip" clipPathUnits="userSpaceOnUse"> + <circle cx="0.5" cy="0.5" r="0.25"/> +</clipPath> +<mask id="mask" x="0" y="0" width="200" height="200" maskUnits="userSpaceOnUse" maskContentUnits="objectBoundingBox"> + <rect x="0.25" y="0.25" width="0.5" height="0.5" fill="white" clip-path="url(#clip)"/> +</mask> +<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-circle-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-circle-001-ref.svg new file mode 100644 index 0000000000..56b7fbeef0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-circle-001-ref.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <circle cx="0.25" cy="0.25" r="0.25"/> +</clipPath> +<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-001-ref.svg new file mode 100644 index 0000000000..eaeb6b2b56 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-001-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" fill-rule="evenodd" fill="green"/> +<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" fill-rule="nonzero" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-002-ref.svg new file mode 100644 index 0000000000..d6c87cd139 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-002-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" fill-rule="nonzero" fill="green"/> +<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" fill-rule="nonzero" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-003-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-003-ref.svg new file mode 100644 index 0000000000..3247b87a6b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-003-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" fill-rule="nonzero" fill="green"/> +<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" fill-rule="evenodd" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-004-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-004-ref.svg new file mode 100644 index 0000000000..8a25ffebe6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-004-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" fill-rule="evenodd" fill="green"/> + <polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" fill-rule="evenodd" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-content-clip-004-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-content-clip-004-ref.svg new file mode 100644 index 0000000000..269d289b4a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-content-clip-004-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>CSS Reference</title> + <html:link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"/> + <metadata class="flags">svg</metadata> + </g> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-ellipse-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-ellipse-001-ref.svg new file mode 100644 index 0000000000..2532eb3c1b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-ellipse-001-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<defs> +<clipPath id="clip"> + <ellipse cx="100" cy="75" rx="100" ry="75"/> +</clipPath> +</defs> +<rect width="200" height="150" fill="green" clip-path="url(#clip)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-green-square-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-green-square-001-ref.svg new file mode 100644 index 0000000000..c83ec87e7b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-green-square-001-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <metadata class="flags">svg</metadata> +</g> +<rect x="50" y="50" width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-invisible-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-invisible-ref.svg new file mode 100644 index 0000000000..15cfd5fdca --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-invisible-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-negative-scale-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-negative-scale-ref.svg new file mode 100644 index 0000000000..be24efa8e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-negative-scale-ref.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<rect width="90" height="90" fill="green"/> +<rect x="40" y="40" width="50" height="50" fill="blue"/> +<rect x="110" width="90" height="90" fill="green"/> +<rect x="110" y="40" width="50" height="50" fill="blue"/> +<rect y="110" width="90" height="90" fill="green"/> +<rect x="40" y="110" width="50" height="50" fill="blue"/> +<rect x="110" y="110" width="90" height="90" fill="green"/> +<rect x="110" y="110" width="50" height="50" fill="blue"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-001-ref.svg new file mode 100644 index 0000000000..693c72e429 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-001-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<rect x="50" y="50" width="100" height="100" fill="green"/> +<rect x="50" y="50" width="50" height="50" fill="blue"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-002-ref.svg new file mode 100644 index 0000000000..21cf9cd7cc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-002-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<rect x="50" y="50" width="100" height="100" fill="green"/> +<rect width="100" height="100" fill="blue"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-precision-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-precision-001-ref.svg new file mode 100644 index 0000000000..4c83c9def7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-precision-001-ref.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<defs> + <g id="paths"> + <path d="M10 10 h20 v20 h-20 v-20 m1 1 v18 h18 v-18 h-18"/> + <rect x="19" y="19" width="2" height="2" /> + <rect x="5.51" y="0.51" width="2" height="32.3" fill="white"/> + <rect x="35.4" y="0.51" width="2" height="32.3" fill="white"/> + </g> +</defs> +<use xlink:href="#paths" fill="green"/> +<use xlink:href="#paths" fill="green" x="30"/> +<use xlink:href="#paths" fill="green" x="60"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-recursion-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-recursion-002-ref.svg new file mode 100644 index 0000000000..6eb3cb155c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-recursion-002-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<rect x="50" width="50" height="50" fill="red" /> +<rect x="50" y="150" width="50" height="50" fill="red"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-shape-inset-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-shape-inset-001-ref.svg new file mode 100644 index 0000000000..e458ad994a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-shape-inset-001-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<defs> +<clipPath id="clip"> + <rect x="20" y="20" width="160" height="160" rx="20" ry="20"/> +</clipPath> +</defs> +<rect width="200" height="200" fill="green" clip-path="url(#clip)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-001-ref.svg new file mode 100644 index 0000000000..8ddfdaa723 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-001-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<polygon points="25 25, 175 25, 175 175, 25 175, 25 50, 150 50, 150 150, 50 150, 50 50, 25 50" fill-rule="nonzero" fill="green"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-002-ref.svg new file mode 100644 index 0000000000..e8e03bf051 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-002-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<rect x="50" y="50" width="100" height="100" fill="green"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-003-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-003-ref.svg new file mode 100644 index 0000000000..e7709d44b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-003-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<rect width="200" height="200" fill="green" /> +</svg> + diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-hole-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-hole-001-ref.svg new file mode 100644 index 0000000000..7e1cb1b394 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-hole-001-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<polygon points="25 25, 175 25, 175 175, 25 175, 25 50, 150 50, 150 150, 50 150, 50 50, 25 50" fill-rule="evenodd" fill="green"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-001-ref.svg new file mode 100644 index 0000000000..f13bb8ba44 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-001-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="stylesheet" href="/fonts/ahem.css"/> +</g> +<text x="20" y="150" fill="green" style="font: 40px/1 Ahem">XXXX</text> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-002-ref.svg new file mode 100644 index 0000000000..d51fd55b4b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-002-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="stylesheet" href="/fonts/ahem.css"/> +</g> +<text x="20" y="120" fill="green" style="font: 40px/1 Ahem">XXXX</text> +<polygon points="0 0, 200 0, 200 200, 0 200, 0 50, 150 50, 150 150, 50 150, 50 50, 0 50" fill-rule="evenodd" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-003-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-003-ref.svg new file mode 100644 index 0000000000..254f361d3e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-003-ref.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="stylesheet" href="/fonts/ahem.css"/> +</g> +<clipPath id="clip2"> + <rect x="50" y="50" width="100" height="100"/> +</clipPath> +<text x="20" y="150" style="font: 40px/1 Ahem" clip-path="url(#clip2)" fill="green">XXXX</text> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-and-nested-clip-path-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-and-nested-clip-path-ref.svg new file mode 100644 index 0000000000..8aed79967e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-and-nested-clip-path-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="100" y="100" width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-001-ref.svg new file mode 100644 index 0000000000..0aa5233304 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-001-ref.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<mask id="mask" x="0" y="0" width="1" height="1"> + <circle cx="100" cy="100" r="50" fill="white"/> +</mask> +<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-002-ref.svg new file mode 100644 index 0000000000..4da47823b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-002-ref.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<mask id="mask" x="0" y="0" width="1" height="1"> + <circle cx="10000" cy="10000" r="5000" fill="white" transform="scale(0.01 0.01)"/> +</mask> +<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-001-ref.svg new file mode 100644 index 0000000000..e080c95e18 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-001-ref.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<rect width="200" height="200" fill="green"/> +<rect x="20" y="20" width="60" height="60" fill="white"/> +<rect x="120" y="20" width="60" height="60" fill="white"/> +<rect x="20" y="120" width="60" height="60" fill="white"/> +<rect x="120" y="120" width="60" height="60" fill="white"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-002-ref.svg new file mode 100644 index 0000000000..7b54566651 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-002-ref.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<rect x="20" y="20" width="60" height="60" fill="green"/> +<rect x="120" y="20" width="60" height="60" fill="green"/> +<rect x="20" y="120" width="60" height="60" fill="green"/> +<rect x="120" y="120" width="60" height="60" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-003-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-003-ref.svg new file mode 100644 index 0000000000..01330054c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-003-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="10000" height="400"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> +</g> +<rect x="99" width="101" height="100" fill="green"/> +<rect x="299" width="101" height="100" fill="green"/> +</svg> 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 diff --git a/testing/web-platform/tests/css/css-masking/clip-rule/clip-rule-001.html b/testing/web-platform/tests/css/css-masking/clip-rule/clip-rule-001.html new file mode 100644 index 0000000000..a5a0961d10 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-rule/clip-rule-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-rule property on polygon clip 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="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"> + <link rel="match" href="reference/clip-rule-rectangle-border-ref.html"> + <meta name="assert" content="The clipPath element takes the basic shape 'polygon' for clipping. + The point list for the polygon creates a 'whole' with the dimension of the background. With + the clip 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: url(#clip);"></div> + </div> + + <svg> + <clipPath id="clip"> + <polygon points="0 0, 250 0, 250 200, 0 200, 0 50, 200 50, 200 150, 50 150, 50 50, 0 50" clip-rule="evenodd" /> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-rule/clip-rule-002.html b/testing/web-platform/tests/css/css-masking/clip-rule/clip-rule-002.html new file mode 100644 index 0000000000..5fee625594 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-rule/clip-rule-002.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-rule property on polygon clip 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="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"> + <link rel="match" href="reference/clip-rule-rectangle-border-ref.html"> + <meta name="assert" content="The clipPath element takes the basic shape 'polygon' for clipping. + The point list for the polygon creates a 'whole' with the dimension of the background. With + the clip rule 'nonzero', 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: url(#clip);"></div> + </div> + + <svg> + <clipPath id="clip"> + <polygon points="0 0, 250 0, 250 200, 0 200, 0 50, 50 50, 50 150, 200 150, 200 50, 0 50" clip-rule="nonzero" /> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip-rule/clip-rule-no-interpolation.html b/testing/web-platform/tests/css/css-masking/clip-rule/clip-rule-no-interpolation.html new file mode 100644 index 0000000000..066636c5e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-rule/clip-rule-no-interpolation.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'clip-rule', + from: 'initial', + to: 'evenodd' +}); +</script> diff --git a/testing/web-platform/tests/css/css-masking/clip-rule/reference/clip-rule-rectangle-border-ref.html b/testing/web-platform/tests/css/css-masking/clip-rule/reference/clip-rule-rectangle-border-ref.html new file mode 100644 index 0000000000..9a61c76902 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-rule/reference/clip-rule-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/clip-absolute-positioned-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-001.html new file mode 100644 index 0000000000..c5b0d9001c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on div with position: absolute</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/#clip-property"> + <link rel="match" href="reference/clip-absolute-positioned-ref.html"> + <meta name="assert" content="The clip property should clip elements whose + layout are governed by the CSS box model and that are abolutely positioned + with 'position: absolute;'. On pass you should see a green square and no + red."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 100px; height: 100px; border: solid red 50px; position: absolute; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-002.html new file mode 100644 index 0000000000..53b2517a27 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on div with position: fixed</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/#clip-property"> + <link rel="match" href="reference/clip-absolute-positioned-ref.html"> + <meta name="assert" content="The clip property should clip elements whose + layout are governed by the CSS box model and that are abolutely positioned + with 'position: fixed;'. On pass you should see a green square and no + red."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 100px; height: 100px; border: solid red 50px; position: fixed; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html new file mode 100644 index 0000000000..fe9511a8df --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Clip should be applied after filtering</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> + +<style> + body { margin: 0 } + #testcase { + position: absolute; + left: 10px; + width: 200px; + height: 200px; + background: green; + will-change: transform; + } +</style> + +<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> + +<div id="testcase"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html new file mode 100644 index 0000000000..0570d02b85 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Clip 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-filter-order-ref.html"> + +<style> + body { margin: 0 } + #testcase { + position: absolute; + left: 10px; + width: 400px; + height: 400px; + background: green; + will-change: transform; + filter: drop-shadow(16px 16px 20px red); + clip: rect(0px, 200px, 200px, 0px); + } +</style> + +<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> + +<div id="testcase"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001-ref.html b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001-ref.html new file mode 100644 index 0000000000..ed78cb7338 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + html, body { margin: 0 } + div { + width: 100px; + height: 100px; + background: lime; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001.html new file mode 100644 index 0000000000..395b0bc964 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001.html @@ -0,0 +1,38 @@ +<!doctype html> +<title>CSS Masking: Transformed descendants of a fixed pos element under a clipped element get properly clipped</title> +<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-fixed-pos-transform-descendant-001-ref.html"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#clip-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1495791"> +<style> +html, body { margin: 0; } + +#clip { + height: 100px; + width: 100px; + background: lime; + clip: rect(0, auto, auto, 0); + position: absolute; +} + +#fixed { + position: fixed; + top: 0; + left: 0; + width: 100px; + height: 100px; +} + +#clipped { + height: 100px; + width: 100px; + background: red; + transform: translateY(100px); +} +</style> +<div id="clip"> + <div id="fixed"> + <div id="clipped"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-001.html new file mode 100644 index 0000000000..b295c89ba3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip on with negative values - 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/#clip-property"> + <link rel="match" href="reference/clip-full-ref.html"> + <meta name="assert" content="Negative values are permitted on rect function + for clip. Test that whole element is clipped if bottom edge is before top + edge. On pass you should see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="background-color: green; width: 200px; height: 200px;"> + <div style="width: 200px; height: 200px; background-color: red; position: absolute; clip: rect(0, -50px, 200px, 50px);"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-002.html new file mode 100644 index 0000000000..dd92e5b774 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip on with negative values - 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/#clip-property"> + <link rel="match" href="reference/clip-full-ref.html"> + <meta name="assert" content="Negative values are permitted on rect function + for clip. Test that whole element is clipped if right edge is before left + edge. On pass you should see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="background-color: green; width: 200px; height: 200px;"> + <div style="width: 200px; height: 200px; background-color: red; position: absolute; clip: rect(50px, 200px, -50px, 0);"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-003.html new file mode 100644 index 0000000000..5118135345 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip on with negative values - 3</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/#clip-property"> + <link rel="match" href="reference/clip-vertical-stripe-ref.html"> + <meta name="assert" content="Negative values are permited on rect function + for clip. Test that left edge can be negative. On pass you should see a + vertical blue stripe."> +</head> +<body> + <p>The test passes if there is only a vertical blue stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(0, 50px, 200px, -50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-004.html new file mode 100644 index 0000000000..1fb5add9da --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip on with negative values - 4</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/#clip-property"> + <link rel="match" href="reference/clip-horizontal-stripe-ref.html"> + <meta name="assert" content="Negative values are permited on rect function + for clip. Test that top edge can be negative. On pass you should see a + horizontal blue stripe."> +</head> +<body> + <p>The test passes if there is only a horizontal blue stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(-50px, 200px, 50px, 0);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-001.html new file mode 100644 index 0000000000..3a63c2ca71 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip on 'auto'</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/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="The clip property should on 'auto'. On pass + you should see a green box with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: auto"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-002.html new file mode 100644 index 0000000000..a09e6a0a85 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property does not clip overflowing content on 'auto'.</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/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="The clip property should not clip overflowing + content of elements whose layout are governed by the CSS box model, the + position is absolute and the clip value is 'auto'. On pass you should see a + a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; position: absolute; clip: auto;"> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context-ref.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context-ref.html new file mode 100644 index 0000000000..056af22375 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<p>Expected: A green box with no red visible.</p> +<div style="width: 100px; height: 100px; background: green;"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context.html new file mode 100644 index 0000000000..cbd07ee638 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Clip does not create a stacking context</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip"> +<link rel="match" href="clip-no-stacking-context-ref.html"> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> + +<style> + #bottom { + position: absolute; + width: 100px; + height: 100px; + background: red; + z-index: 1; + } + #clip { + position: absolute; + clip: rect(0px, 100px, 100px, 0px); + } + #top { + position: absolute; + width: 100px; + height: 100px; + background: green; + z-index: 3; + } +</style> + +<p>Expected: A green box with no red visible.</p> +<div id="bottom"></div> +<!-- If #clip creates a stacking context, it will be below #bottom (which has a + higher z-index) which will force #top to be below #bottom as well. This + should not happen because #clip should not create a stacking context. --> +<div id="clip"> + <div id="top"></div> +</div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-001.html new file mode 100644 index 0000000000..613f6afebc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on not absolutely positioned 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/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="The clip property should be ignored on + elements whose layout are governed by the CSS box model and are not + abolutely positioned. On pass you should see a green square with a blue + border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-002.html new file mode 100644 index 0000000000..4d071323f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on not absolutely positioned 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/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="The clip property should be ignored on + elements whose layout are governed by the CSS box model and are not + abolutely positioned. Creating a stacking context with z-index does not + influence clipping behavior. On pass you should see a green box square with + a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; z-index: 10; clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-003.html new file mode 100644 index 0000000000..ee3765db7a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on not absolutely positioned div - 3</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/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="The clip property should be ignored on + elements whose layout are governed by the CSS box model and are not + abolutely positioned. Creating a 3d rednering context does not influence + clipping behavior. On pass you should see a green square with a blue + border."> +</head> +<body style="perspective: 400px;"> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; transform-style: preserve-3d; transform: translate3d(0, 0, 0); clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-004.html new file mode 100644 index 0000000000..56825d10f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property and rect function on not absolutely positioned div - 4</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/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="The clip property should be ignored on + elements whose layout are governed by the CSS box model and are not + abolutely positioned. position: relative does not influence clipping + behavior. On pass you should see a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: relative; clip: rect(50px, 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-001.html new file mode 100644 index 0000000000..6a1a064059 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto values clip to border box - 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/#clip-property"> + <link rel="match" href="reference/clip-overflow-hidden-ref.html"> + <meta name="assert" content="A value of 'auto' in the rect function is + equal to the certain edge of the border box. The content should be clipped + to the border box. On pass you see a blue square and a smaller green square + in the bottom right corner of the blue square."> +</head> +<body> + <p>The test passes if there is a blue square and a smaller green square in the bottom right corner of the blue square.</p> + <div style="position: absolute; clip: rect(auto, auto, auto, auto); width: 100px; height: 100px;"> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-002.html new file mode 100644 index 0000000000..0ee45183b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto values clip to border box - 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/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="A value of 'auto' in the rect function is + equal to the certain edge of the border box. The box shadow should be + clipped, since it is painted outside the border box. On pass you should see + a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(auto, auto, auto, auto); box-shadow: 0 0 10px red;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-003.html new file mode 100644 index 0000000000..5f12ae4863 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto value for top value</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/#clip-property"> + <link rel="match" href="reference/clip-rect-top-ref.html"> + <meta name="assert" content="A value of 'auto' for 'top' in the rect + function is equal to the top edge of the border box. The box shadow should + be clipped, since it is painted outside the border box. On pass you should see a horizontal green stripe under a horizontal blue stripe."> +</head> +<body> + <p>The test passes if there is a horizontal green stripe under a horizontal blue stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(auto, 150px, 100px, 50px); box-shadow: 0 0 10px red;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-004.html new file mode 100644 index 0000000000..d5d5ce9b31 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto value for right value</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/#clip-property"> + <link rel="match" href="reference/clip-rect-right-ref.html"> + <meta name="assert" content="A value of 'auto' for 'right' in the rect + function is equal to the top edge of the border box. The box shadow should + be clipped, since it is painted outside the border box. On pass you should + see a vertical blue stripe on the right side of a vertical green stripe."> +</head> +<body> + <p>The test passes if there is a vertical blue stripe on the right side of a vertical green stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, auto, 150px, 100px); box-shadow: 0 0 10px red;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-005.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-005.html new file mode 100644 index 0000000000..b2b3b13a49 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-005.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto value for bottom value</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/#clip-property"> + <link rel="match" href="reference/clip-rect-bottom-ref.html"> + <meta name="assert" content="A value of 'auto' for 'bottom' in the rect + function is equal to the top edge of the border box. The box shadow should + be clipped, since it is painted outside the border box. On pass you should + see a horizontal blue stripe under a horizontal green stripe."> +</head> +<body> + <p>The test passes if there is a horizontal blue stripe under a horizontal green stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(100px, 150px, auto, 50px); box-shadow: 0 0 10px red;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-006.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-006.html new file mode 100644 index 0000000000..410b93d28b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip property with rect function and auto value for left value</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/#clip-property"> + <link rel="match" href="reference/clip-rect-left-ref.html"> + <meta name="assert" content="A value of 'auto' for 'left' in the rect + function is equal to the top edge of the border box. The box shadow should + be clipped, since it is painted outside the border box. On pass you should + see a vertical green stripe on the right side of a vertical blue stripe."> +</head> +<body> + <p>The test passes if there is a vertical green stripe on the right side of a vertical blue stripe.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 100px, 150px, auto); box-shadow: 0 0 10px red;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-001.html new file mode 100644 index 0000000000..d15b324a4f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test comma separation of rect function on clip - no commas</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property"> + <link rel="match" href="reference/clip-absolute-positioned-ref.html"> + <meta name="assert" content="Values for rect function on clip can be white + space or comma separated, but not both. Otherwise the property setting gets + ignored. Testing rect function with white space separation. On pass you + should see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 100px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip: rect(50px 150px 150px 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-002.html new file mode 100644 index 0000000000..aad2aebe67 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test comma separation of rect function on clip - no comma between 1st and 2nd value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="Values for rect function on clip can be white + space or comma separated, but not both. Otherwise the property setting gets + ignored. Testing rect function without comma separation between 1st and 2nd + value. On pass you should see a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px 150px, 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-003.html new file mode 100644 index 0000000000..875e97173e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test comma separation of rect function on clip - no comma between 2nd and 3rd value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="Values for rect function on clip can be white + space or comma separated, but not both. Otherwise the property setting gets + ignored. Testing rect function without comma separation between 2nd and 3rd + value. On pass you should see a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 150px 150px, 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-004.html new file mode 100644 index 0000000000..2a8b9305df --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test comma separation of rect function on clip - no comma between 3rd and 4th value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property"> + <link rel="match" href="reference/clip-no-clipping-ref.html"> + <meta name="assert" content="Values for rect function on clip can be white + space or comma separated, but not both. Otherwise the property setting gets + ignored. Testing rect function without comma separation between 3rd and 4th + value. On pass you should see a green square with a blue border."> +</head> +<body> + <p>The test passes if there is a green square with a blue border.</p> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 150px, 150px 50px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-scroll.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-scroll.html new file mode 100644 index 0000000000..0c84ee299a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-scroll.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Masking: Test clip property with rect function with overflow:scroll</title> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property"> +<link rel="match" href="reference/clip-rect-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="position: absolute; clip: rect(10px,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/clip-transform-order-2.html b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order-2.html new file mode 100644 index 0000000000..bd8e909d76 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order-2.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>Clips should be applied before transforms (when fixed positioned too)</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1524966"> +<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-filter-order-ref.html"> + +<style> + body { margin: 0; overflow: hidden; } + #testcase { + position: fixed; + left: -100px; + width: 400px; + height: 400px; + background: green; + transform: translateX(110px); + clip: rect(0px, 200px, 200px, 0px); + } +</style> + +<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> + +<div id="testcase"><div></div></div> + +<div id="padding" style="height: 100vh"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-transform-order.html b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order.html new file mode 100644 index 0000000000..1f24864bc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>Clips should be applied before transforms</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1524966"> +<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-filter-order-ref.html"> + +<style> + body { margin: 0 } + #testcase { + position: absolute; + left: -100px; + width: 400px; + height: 400px; + background: green; + transform: translateX(110px); + clip: rect(0px, 200px, 200px, 0px); + } +</style> + +<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> + +<div id="testcase"><div></div></div> diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-absolute-positioned-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-absolute-positioned-ref.html new file mode 100644 index 0000000000..2a9a49fd3a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-absolute-positioned-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 square and no red.</p> + <div style="width: 100px; height: 100px; border: 50px solid white; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-full-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-full-ref.html new file mode 100644 index 0000000000..f556d5f12a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-full-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 square and no red.</p> + <div style="width: 200px; height: 200px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-horizontal-stripe-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-horizontal-stripe-ref.html new file mode 100644 index 0000000000..fccb18318d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-horizontal-stripe-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 only a horizontal blue stripe.</p> + <div style="width: 200px; height: 50px; background-color: blue;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-no-clipping-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-no-clipping-ref.html new file mode 100644 index 0000000000..724f8c5194 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-no-clipping-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 square with a blue border.</p> + <div style="width: 100px; 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/reference/clip-overflow-hidden-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-overflow-hidden-ref.html new file mode 100644 index 0000000000..e6a6e125e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-overflow-hidden-ref.html @@ -0,0 +1,13 @@ +<!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 blue square and a smaller green square in the bottom right corner of the blue square.</p> + <div style="overflow: hidden; width: 100px; height: 100px;"> + <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-bottom-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-bottom-ref.html new file mode 100644 index 0000000000..9642435bf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-bottom-ref.html @@ -0,0 +1,13 @@ +<!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 horizontal blue stripe under a horizontal green stripe.</p> + <div style="background-color: blue; width: 100px; height: 100px; border-left: 50px solid white; border-top: 100px solid white"> + <div style="width: 100px; height: 50px; background-color: green;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-left-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-left-ref.html new file mode 100644 index 0000000000..b6dd6e0a48 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-left-ref.html @@ -0,0 +1,13 @@ +<!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 vertical green stripe on the right side of a vertical blue stripe.</p> + <div style="background-color: green; width: 100px; height: 100px; border-top: 50px solid white;"> + <div style="width: 50px; height: 100px; background-color: blue;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-right-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-right-ref.html new file mode 100644 index 0000000000..09b90e7614 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-right-ref.html @@ -0,0 +1,13 @@ +<!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 vertical blue stripe on the right side of a vertical green stripe.</p> + <div style="background-color: blue; width: 100px; height: 100px; border-left: 100px solid white; border-top: 50px solid white;"> + <div style="width: 50px; height: 100px; background-color: green;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-scroll-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-scroll-ref.html new file mode 100644 index 0000000000..a647e8a0c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-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/reference/clip-rect-top-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-top-ref.html new file mode 100644 index 0000000000..5ec30181f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-top-ref.html @@ -0,0 +1,13 @@ +<!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 horizontal green stripe under a horizontal blue stripe.</p> + <div style="background-color: green; width: 100px; height: 100px; margin-left: 50px;"> + <div style="width: 100px; height: 50px; background-color: blue;"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-vertical-stripe-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-vertical-stripe-ref.html new file mode 100644 index 0000000000..96ccc2c19c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-vertical-stripe-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 only a vertical blue stripe.</p> + <div style="width: 50px; height: 200px; background-color: blue;"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/hit-test/clip-path-element-objectboundingbox-001.html b/testing/web-platform/tests/css/css-masking/hit-test/clip-path-element-objectboundingbox-001.html new file mode 100644 index 0000000000..22d4bc0b0d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/hit-test/clip-path-element-objectboundingbox-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>Hit-test of clip-path objectBoundingBox <clipPath> with additional transform</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { + margin: 0; +} +.box { + width: 100px; + height: 100px; + background-color: blue; + margin: 100px; + clip-path: url(#clip); +} +</style> +<div class="box"></div> +<svg height="0"> + <clipPath id="clip" clipPathUnits="objectBoundingBox" transform="scale(0.01, 0.01)"> + <polygon points="50,0 100,50 50,100 0,50"/> + </clipPath> +</svg> +<script> +function assert_element_at(element, pointlist) { + for (let point of pointlist) { + let result = document.elementFromPoint(point[0], point[1]); + assert_equals(result, element, point.join(',')); + } +} + +test(function() { + let div = document.querySelector('.box'); + + // Points inside clip-path. + assert_element_at(div, [[150, 150], [150, 125], [150, 175], [125, 150], [175, 150]]); + + // Points outside clip-path. + assert_element_at(document.body, [[120, 120], [180, 120], [120, 180], [180, 180]]); +}); +</script> diff --git a/testing/web-platform/tests/css/css-masking/hit-test/clip-path-element-objectboundingbox-002.html b/testing/web-platform/tests/css/css-masking/hit-test/clip-path-element-objectboundingbox-002.html new file mode 100644 index 0000000000..1932848a13 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/hit-test/clip-path-element-objectboundingbox-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title>Hit-test of clip-path nested objectBoundingBox <clipPath></title> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { + margin: 0; +} +.box { + width: 200px; + height: 200px; + background-color: blue; + margin: 100px; + clip-path: url(#clip); +} +</style> +<div class="box"></div> +<svg height="0"> + <clipPath id="nested" clipPathUnits="objectBoundingBox"> + <circle cx="0.25" cy="0.25" r="0.25"/> + </clipPath> + <clipPath id="clip" clipPathUnits="objectBoundingBox" clip-path="url(#nested)"> + <rect width="0.5" height="0.5"/> + </clipPath> +</svg> +<script> +function assert_element_at(element, pointlist) { + for (let point of pointlist) { + let result = document.elementFromPoint(point[0], point[1]); + assert_equals(result, element, point.join(',')); + } +} + +test(function() { + let div = document.querySelector('.box'); + + // Points inside clip-path. + assert_element_at(div, [[150, 150], [150, 125], [150, 175], [125, 150], [175, 150]]); + + // Points outside clip-path. + assert_element_at(document.body, [[110, 110], [190, 110], [110, 190], [190, 190]]); +}); +</script> diff --git a/testing/web-platform/tests/css/css-masking/hit-test/clip-path-element-userspaceonuse-001.html b/testing/web-platform/tests/css/css-masking/hit-test/clip-path-element-userspaceonuse-001.html new file mode 100644 index 0000000000..2b8beab910 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/hit-test/clip-path-element-userspaceonuse-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>Hit-test of clip-path userSpaceOnUse <clipPath></title> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { + margin: 0; +} +.box { + width: 100px; + height: 100px; + background-color: blue; + margin: 100px; + clip-path: url(#clip); +} +</style> +<div class="box"></div> +<svg height="0"> + <clipPath id="clip" clipPathUnits="userSpaceOnUse"> + <polygon points="50,0 100,50 50,100 0,50"/> + </clipPath> +</svg> +<script> +function assert_element_at(element, pointlist) { + for (let point of pointlist) { + let result = document.elementFromPoint(point[0], point[1]); + assert_equals(result, element, point.join(',')); + } +} + +test(function() { + let div = document.querySelector('.box'); + + // Points inside clip-path. + assert_element_at(div, [[150, 150], [150, 125], [150, 175], [125, 150], [175, 150]]); + + // Points outside clip-path. + assert_element_at(document.body, [[120, 120], [180, 120], [120, 180], [180, 180]]); +}); +</script> diff --git a/testing/web-platform/tests/css/css-masking/hit-test/clip-path-shape-polygon-and-box-shadow.html b/testing/web-platform/tests/css/css-masking/hit-test/clip-path-shape-polygon-and-box-shadow.html new file mode 100644 index 0000000000..23009f76e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/hit-test/clip-path-shape-polygon-and-box-shadow.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>Hit-test of clip-path polygon combined with box-shadow</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { + margin: 0; +} +.box { + width: 100px; + height: 100px; + background-color: blue; + box-shadow: -100px 0px red; + clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); +} +</style> +<div class="box"></div> +<script> +function assert_element_at(element, pointlist) { + for (let point of pointlist) { + let result = document.elementFromPoint(point[0], point[1]); + assert_equals(result, element, point.join(',')); + } +} + +test(function() { + let div = document.querySelector('.box'); + + // Points inside clip-path. + assert_element_at(div, [[50, 50], [50, 25], [50, 75], [25, 50], [75, 50]]); + + // Points outside clip-path. + assert_element_at(document.body, [[20, 20], [80, 20], [20, 80], [80, 80]]); +}); +</script> diff --git a/testing/web-platform/tests/css/css-masking/hit-test/clip-path-svg-geometry-box.html b/testing/web-platform/tests/css/css-masking/hit-test/clip-path-svg-geometry-box.html new file mode 100644 index 0000000000..13ad624be2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/hit-test/clip-path-svg-geometry-box.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<title>Hit-tests of clip-path with geometry-box</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { + margin: 0; +} +rect { + width: 100px; + height: 100px; + stroke-width: 50px; + stroke: rgba(0, 0, 255, 0.5); + fill: lightblue; +} +</style> +<svg id="svg" height="400" width="600"> + <rect id="rect_a" x="50" y="50" style="clip-path: inset(0px) fill-box;"></rect> + <rect id="rect_b" x="250" y="50" style="clip-path: inset(10px) stroke-box;"></rect> + <rect id="rect_c" x="450" y="50" style="clip-path: inset(35px 35px 235px 435px) view-box;"></rect> + + <g style="clip-path: inset(0px) fill-box;"> + <rect id="g_rect_a" x="50" y="250"></rect> + </g> + <g style="clip-path: inset(10px) stroke-box;"> + <rect id="g_rect_b" x="250" y="250"></rect> + </g> + <g style="clip-path: inset(235px 35px 35px 435px) view-box;"> + <rect id="g_rect_c" x="450" y="250"></rect> + </g> +</svg> +<script> +function assert_element_at(element, point_list) { + for (let point of point_list) { + let result = document.elementFromPoint(point[0], point[1]); + assert_equals(result, element, point.join(',')); + } +} + +function points_inside_rect(x, y, width, height) { + return [ + [x + 1, y + 1], + [x + width - 1, y + 1], + [x + 1, y + height - 1], + [x + width - 1, y + height - 1] + ]; +} + +function points_outside_rect(x, y, width, height) { + return [ + [x + 1, y - 1], + [x + width - 1, y - 1], + [x + 1, y + height + 1], + [x + width - 1, y - 1], + [x - 1, y + 1], + [x + width + 1, y + 1], + [x - 1, y + height - 1], + [x + width + 1, y + height - 1] + ]; +} + +test(function() { + assert_element_at(rect_a, points_inside_rect(50, 50, 100, 100)); + assert_element_at(svg, points_outside_rect(50, 50, 100, 100)); + + // 225,25 150x150 inset by 10px on all sides is 235,35 130x130 + assert_element_at(rect_b, points_inside_rect(235, 35, 130, 130)); + assert_element_at(svg, points_outside_rect(235, 35, 130, 130)); + + // 425,25 150x150, inset by 10px on all sides is 435,35 130x130 + assert_element_at(rect_c, points_inside_rect(435, 35, 130, 130)); + assert_element_at(svg, points_outside_rect(435, 35, 130, 130)); + + assert_element_at(g_rect_a, points_inside_rect(50, 250, 100, 100)); + assert_element_at(svg, points_outside_rect(50, 250, 100, 100)); + + // 225,225 150x150 inset by 10px on all sides is 235,235 130x130 + assert_element_at(g_rect_b, points_inside_rect(235, 235, 130, 130)); + assert_element_at(svg, points_outside_rect(235, 235, 130, 130)); + + // 425,225 150x150 inset by 10px on all sides is 435,235 130x130 + assert_element_at(g_rect_c, points_inside_rect(435, 235, 130, 130)); + assert_element_at(svg, points_outside_rect(435, 235, 130, 130)); +}); +</script> diff --git a/testing/web-platform/tests/css/css-masking/idlharness.html b/testing/web-platform/tests/css/css-masking/idlharness.html new file mode 100644 index 0000000000..c415eaaa67 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/idlharness.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>css-masking IDL tests</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/WebIDLParser.js"></script> +<script src="/resources/idlharness.js"></script> + +<script> + 'use strict'; + + idl_test( + ['css-masking'], + ['SVG', 'html', 'dom'], + idl_array => { + idl_array.add_objects({ + SVGClipPathElement: [document.querySelector('#clip1')], + SVGMaskElement: [document.querySelector('#mask1')], + }); + } + ); +</script> + +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <clipPath id="clip1"> + <rect x="50" y="50" width="100" height="100" /> + </clipPath> + <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white" /> + </mask> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/inheritance.sub.html b/testing/web-platform/tests/css/css-masking/inheritance.sub.html new file mode 100644 index 0000000000..95424204d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/inheritance.sub.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Masking properties</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<script> +assert_not_inherited('clip', 'auto', 'rect(10px, 20px, 30px, 40px)'); +assert_not_inherited('clip-path', 'none', 'url("http://{{host}}/")'); +assert_inherited('clip-rule', 'nonzero', 'evenodd'); +assert_not_inherited('mask-border-mode', 'alpha', 'luminance'); +assert_not_inherited('mask-border-outset', '0', '10px 20px 30px 40px'); +assert_not_inherited('mask-border-repeat', 'stretch', 'round space'); +assert_not_inherited('mask-border-slice', '0', '1 2 3 4 fill'); +assert_not_inherited('mask-border-source', 'none', 'url("http://{{host}}/")'); +assert_not_inherited('mask-border-width', 'auto', '10px 20px 30px 40px'); +assert_not_inherited('mask-clip', 'border-box', 'no-clip'); +assert_not_inherited('mask-composite', 'add', 'exclude'); +assert_not_inherited('mask-image', 'none', 'url("http://{{host}}/")'); +assert_not_inherited('mask-mode', 'match-source', 'luminance'); +assert_not_inherited('mask-origin', 'border-box', 'padding-box'); +assert_not_inherited('mask-position', '0% 0%', '10px 20px'); +assert_not_inherited('mask-repeat', 'repeat', 'space round'); +assert_not_inherited('mask-size', 'auto', '10px 20px'); +assert_not_inherited('mask-type', 'luminance', 'alpha'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1-ref.html new file mode 100644 index 0000000000..3925bd4f1d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-clip reference</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + position: absolute; + top: 10px; + background-color: purple; + } + + div.border { + left: 10px; + margin: 1px 4px; + width: 60px; + height: 25px; + } + + div.padding { + left: 110px; + margin: 9px 10px; + width: 52px; + height: 17px; + } + + div.content { + left: 210px; + margin: 15px 13px; + width: 40px; + height: 11px; + } + + div.no-clip { + left: 310px; + margin: 1px 4px; + width: 100px; + height: 25px; + } + </style> + </head> + <body> + <div class="color border"></div> + <div class="color padding"></div> + <div class="color content"></div> + <div class="color no-clip"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1.html new file mode 100644 index 0000000000..9c1448439e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-clip: clip mask image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> + <link rel="match" href="mask-clip-1-ref.html"> + <meta name="assert" content="border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes."> + <style type="text/css"> + div.outer { + /* + * content box: 40 x 20 + * padding box: 52 x 38 + * border box: 60 x 50 + * margin box: 66 x 54 + */ + background-color: purple; + position: absolute; + top: 10px; + margin: 1px 2px 3px 4px; + border: solid transparent; + border-width: 8px 2px 4px 6px; + padding: 6px 9px 12px 3px; + width: 40px; + height: 20px; + } + + div.mask { + mask-size: 100% 100%; + mask-origin: border-box; + mask-image: url(support/transparent-100x50-blue-100x50.svg); + } + + div.border { + left: 10px; + mask-clip: border-box; + } + + div.padding { + left: 110px; + mask-clip: padding-box; + } + + div.content { + left: 210px; + mask-clip: content-box; + } + + div.no-clip { + background-color: yellow; + left: 310px; + mask-clip: no-clip; + } + + div.no-clip-inner { + background-color: purple; + position: absolute; + /* allign with border area of the parent*/ + top: -8px; + left: -6px; + width: 100px; + height: 50px; + } + + </style> + </head> + <body> + <div class="outer mask border"></div> + <div class="outer mask padding"></div> + <div class="outer mask content"></div> + <div class="outer mask no-clip"> + <div class="no-clip-inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2-ref.html new file mode 100644 index 0000000000..5b72b6b942 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-clip reference</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + </style> + </head> + <body> + <svg width="200" height="200" style="left: 10px;"> + <rect x="20" y="20" width="100" height="100" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 220px;"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 10px; top: 220px;"> + <rect x="50" y="50" width="50" height="50" fill="green"/> + <rect x="60" y="60" width="40" height="40" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2.html new file mode 100644 index 0000000000..2093b073dc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-clip: clip mask image</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="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> + <link rel="match" href="mask-clip-2-ref.html"> + <meta name="assert" content="fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes."> + <style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + + rect.mask { + fill: blue; + mask-origin: fill-box; + mask-repeat: no-repeat; + mask-image: url(support/50x50-opaque-blue.svg); + } + + rect.view { + mask-clip: view-box; + } + + rect.fill { + mask-clip: fill-box; + } + + rect.stroke { + mask-clip: stroke-box; + } + </style> + </head> + <body> + <svg width="200" height="200" viewBox="0 0 100 100" preserveAspectRatio="none" style="left: 10px;"> + <rect class="view mask" x="10" y="10" width="50" height="100"/> + </svg> + <svg width="200" height="200" style="left: 220px;"> + <rect class="fill mask" x="50" y="50" width="150" height="150"/> + </svg> + <svg width="200" height="200" style="left: 10px; top: 220px;"> + <rect class="stroke mask" x="50" y="50" width="100" height="100" stroke="green" stroke-width="20"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-3-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-3-ref.html new file mode 100644 index 0000000000..08fdf2e992 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-3-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-clip reference</title> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + position: absolute; + top: 10px; + background-color: purple; + } + + div.border { + left: 10px; + margin: 1px 4px; + width: 60px; + height: 25px; + } + + div.border2 { + left: 110px; + margin: 1px 4px; + width: 60px; + height: 25px; + } + + div.content { + left: 210px; + margin: 15px 13px; + width: 40px; + height: 11px; + } + </style> + </head> + <body> + <div class="color border"></div> + <div class="color border2"></div> + <div class="color content"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-3.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-3.html new file mode 100644 index 0000000000..d79baa3b5e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-3.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-clip: clip mask image</title> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-clip"> + <link rel="match" href="mask-clip-3-ref.html"> + <meta name="assert" content="fill-box, stroke-box, view-box of mask-clip should clip to the appropriate boxes."> + <style type="text/css"> + div.outer { + /* + * content box: 40 x 20 + * padding box: 52 x 38 + * border box: 60 x 50 + * margin box: 66 x 54 + */ + background-color: purple; + position: absolute; + top: 10px; + margin: 1px 2px 3px 4px; + border: solid transparent; + border-width: 8px 2px 4px 6px; + padding: 6px 9px 12px 3px; + width: 40px; + height: 20px; + } + + div.mask { + mask-size: 100% 100%; + mask-origin: border-box; + mask-image: url(support/transparent-100x50-blue-100x50.svg); + } + + div.stroke { + left: 10px; + mask-clip: stroke-box; /* should be the same as border-box */ + } + + div.view { + left: 110px; + mask-clip: view-box; /* should be the same as border-box */ + } + + div.fill { + left: 210px; + mask-clip: fill-box; /* should be the same as content-box */ + } + </style> + </head> + <body> + <div class="outer mask stroke"></div> + <div class="outer mask view"></div> + <div class="outer mask fill"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-4-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-4-ref.html new file mode 100644 index 0000000000..a1a2898644 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-4-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-clip reference</title> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + </style> + </head> + <body> + <svg width="200" height="200" style="left: 10px;"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 220px;"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 10px; top: 220px;"> + <rect x="50" y="50" width="50" height="50" fill="green"/> + <rect x="60" y="60" width="40" height="40" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 220px; top: 220px;"> + <rect x="50" y="50" width="50" height="50" fill="green"/> + <rect x="60" y="60" width="40" height="40" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-4.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-4.html new file mode 100644 index 0000000000..133c489041 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-4.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-clip: clip mask image</title> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-clip"> + <link rel="match" href="mask-clip-4-ref.html"> + <meta name="assert" content="content-box, padding-box, border-box, and + magrin-box values of mask-clip should clip to the appropriate boxes."> + <style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + + rect.mask { + fill: blue; + mask-origin: fill-box; + mask-repeat: no-repeat; + mask-image: url(support/50x50-opaque-blue.svg); + } + + rect.content { + mask-clip: content-box; /* should be the same as fill-box */ + } + + rect.padding { + mask-clip: padding-box; /* should be the same as fill-box */ + } + + rect.border { + mask-clip: border-box; /* should be the same as stroke-box */ + } + + rect.margin { + mask-clip: margin-box; /* should be the same as stroke-box */ + } + </style> + </head> + <body> + <svg width="200" height="200" style="left: 10px;"> + <rect class="content mask" x="50" y="50" width="150" height="150"/> + </svg> + <svg width="200" height="200" style="left: 220px;"> + <rect class="padding mask" x="50" y="50" width="150" height="150"/> + </svg> + <svg width="200" height="200" style="left: 10px; top: 220px;"> + <rect class="border mask" x="50" y="50" width="100" height="100" stroke="green" stroke-width="20"/> + </svg> + <svg width="200" height="200" style="left: 220px; top: 220px;"> + <rect class="margin mask" x="50" y="50" width="100" height="100" stroke="green" stroke-width="20"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-5.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-5.html new file mode 100644 index 0000000000..db6a91942b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-5.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Masking: mask-clip: clip mask image, foreignObject</title> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> +<link rel="match" href="mask-clip-2-ref.html"> +<meta name="assert" content="fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes."> +<style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + + foreignObject.mask { + mask-origin: fill-box; + mask-repeat: no-repeat; + mask-image: url(support/50x50-opaque-blue.svg); + } + + foreignObject.mask > div.content { + background-color: blue; + width: 100%; + height: 100%; + } + + div.border { + box-sizing: border-box; + border: 10px solid green; + } + + foreignObject.view { + mask-clip: view-box; + } + + foreignObject.fill { + mask-clip: fill-box; + } + + foreignObject.stroke { + mask-clip: stroke-box; + } +</style> +<svg width="200" height="200" viewBox="0 0 100 100" preserveAspectRatio="none" style="left: 10px;"> + <foreignObject class="view mask" x="10" y="10" width="50" height="100"> + <div class="content"></div> + </foreignObject> +</svg> +<svg width="200" height="200" style="left: 220px;"> + <foreignObject class="fill mask" x="50" y="50" width="150" height="150"> + <div class="content"></div> + </foreignObject> +</svg> +<svg width="200" height="200" style="left: 10px; top: 220px;"> + <foreignObject class="stroke mask" x="50" y="50" width="100" height="100"> + <div class="content border"></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-6.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-6.html new file mode 100644 index 0000000000..43b75df368 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-6.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Masking: mask-clip: clip mask image, foreignObject no-clip</title> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="no-clip should not clip to the viewport on a foreignObject."> +<style type="text/css"> + foreignObject.mask { + mask-origin: view-box; + mask-repeat: no-repeat; + mask-image: url(support/50x50-opaque-blue.svg); + mask-size: 100px 100px; + mask-clip: no-clip; + overflow: visible; + } + + foreignObject.mask > div.content { + background-color: green; + position: absolute; + left: -50px; + top: -20px; + width: 150px; + height: 150px; + } +</style> +<p>Test passes if there is a filled green square.</p> +<svg width="200" height="200"> + <foreignObject class="mask" x="50" y="20" width="50" height="100"> + <div class="content"></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-7-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-7-ref.html new file mode 100644 index 0000000000..f67f74bc8b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-7-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta content="ahem" name="flags"> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + div.mask { + background-color: purple; + width: 40px; + height: 20px; + border-radius: 5px; + position: relative; + } + span.mask { + font: 20px/1 Ahem; + line-height: 20px; + color: purple; + border-radius: 5px; + position: relative; + } + .unclipped-child { + position: absolute; + top: -6px; + left: -6px; + width: 52px; + height: 32px; + background: purple; + } + </style> + </head> + <body> + <div class="mask"><div class="unclipped-child"></div></div> + <br> + <span class="mask">XX<span class="unclipped-child"></span></span> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-7.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-7.html new file mode 100644 index 0000000000..1c0d8e1dc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-7.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-clip: no-clip should not clip in the presence of border-radius</title> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> + <link rel="match" href="mask-clip-7-ref.html"> + <meta name="assert" content="mask-clip: no-clip with border-radius should not clip."> + <meta content="ahem" name="flags"> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + div.mask { + mask-image: linear-gradient(black, black); + mask-clip: no-clip; + background-color: purple; + width: 40px; + height: 20px; + border-radius: 5px; + position: relative; + } + span.mask { + font: 20px/1 Ahem; + line-height: 20px; + mask-image: linear-gradient(black, black); + mask-clip: no-clip; + color: purple; + border-radius: 5px; + position: relative; + } + .unclipped-child { + position: absolute; + top: -6px; + left: -6px; + width: 52px; + height: 32px; + background: purple; + } + </style> + </head> + <body> + <div class="mask"><div class="unclipped-child"></div></div> + <br> + <span class="mask">XX<span class="unclipped-child"></span></span> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-8-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-8-ref.html new file mode 100644 index 0000000000..d7276bd664 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-8-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <style type="text/css"> + div.outer { + /* + * content box: 40 x 20 + * padding box: 52 x 38 + * border box: 60 x 50 + * margin box: 66 x 54 + */ + background-color: purple; + position: absolute; + top: 10px; + margin: 1px 2px 3px 4px; + border: solid transparent; + border-width: 8px 2px 4px 6px; + padding: 6px 9px 12px 3px; + width: 40px; + height: 20px; + mask-size: 100% 100%; + mask-image: url(support/transparent-100x50-blue-100x50.svg); + } + + div.first { + left: 10px; + mask-origin: border-box; + } + + div.second { + left: 110px; + mask-origin: border-box; + } + + div.third { + left: 210px; + mask-origin: content-box; + } + + </style> + </head> + <body> + <div class="outer mask first"></div> + <div class="outer mask second"></div> + <div class="outer mask third"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-8.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-8.html new file mode 100644 index 0000000000..924920ffac --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-8.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-clip: clip mask image</title> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> + <link rel="match" href="mask-clip-8-ref.html"> + <meta name="assert" content="Check fall back values for fill-box (:content-box), stroke-box and view-box (:border-box)."> + <style type="text/css"> + div.outer { + /* + * content box: 40 x 20 + * padding box: 52 x 38 + * border box: 60 x 50 + * margin box: 66 x 54 + */ + background-color: purple; + position: absolute; + top: 10px; + margin: 1px 2px 3px 4px; + border: solid transparent; + border-width: 8px 2px 4px 6px; + padding: 6px 9px 12px 3px; + width: 40px; + height: 20px; + mask-size: 100% 100%; + mask-image: url(support/transparent-100x50-blue-100x50.svg); + } + + div.first { + left: 10px; + mask-origin: stroke-box; + } + + div.second { + left: 110px; + mask-origin: view-box; + } + + div.third { + left: 210px; + mask-origin: fill-box; + } + + </style> + </head> + <body> + <div class="outer mask first"></div> + <div class="outer mask second"></div> + <div class="outer mask third"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1-ref.html new file mode 100644 index 0000000000..9249622cc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-composite reference</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.add { + left: 10px; + background-image: url(support/blue-100x50-transparent-100x50.svg); + } + + div.intersect { + left: 230px; + background-image: url(support/blue-100x50-transparent-100x50.svg); + } + </style> + </head> + <body> + <div class="add"></div> + <div class="intersect"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1a.html new file mode 100644 index 0000000000..795e52b8ae --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1a.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose vector image</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="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-1-ref.html"> + <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/blue-100x50-transparent-100x50.svg); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1b.html new file mode 100644 index 0000000000..be158c923b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1b.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose raster image</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="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-1-ref.html"> + <meta name="assert" content="Test checks that raster-mask-image can be composed correctly by different mask-composite value."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(support/blue-100x50-transparent-100x50.png), + url(support/blue-100x50-transparent-100x50.png); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1c.html new file mode 100644 index 0000000000..0eb098d1b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1c.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose svg mask</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="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-1-ref.html"> + <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value."> + <svg height="0"> + <mask id="rectMask" x="0" y="0" width="100" height="100" > + <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(#rectMask), + url(#rectMask); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1d.html new file mode 100644 index 0000000000..efd26ecb3d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1d.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose vector image</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="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-1-ref.html"> + <meta name="assert" content="Test checks that whether mask-composite is filled automatically according to the number of mask layers."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.add { + left: 10px; + mask-composite: add; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/blue-100x50-transparent-100x50.svg), + url(support/blue-100x50-transparent-100x50.svg); + } + + div.intersect { + left: 120px; + mask-composite: intersect; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/transparent-100x50-blue-100x50.svg), + linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%); + } + + div.subtract { + left: 230px; + mask-composite: subtract; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/blue-100x50-transparent-100x50.svg), + url(support/blue-100x50-transparent-100x50.svg); + } + + div.exclude { + left: 340px; + mask-composite: exclude; + mask-image: url(support/transparent-100x50-blue-100x50.svg), + linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%), + url(support/blue-100x50-transparent-100x50.svg); + } + </style> + </head> + <body> + <div class="add"></div> + <div class="intersect"></div> + <div class="subtract"></div> + <div class="exclude"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2-ref.html new file mode 100644 index 0000000000..cbf91daad9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-composite reference</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.add { + left: 10px; + background-color: blue; + } + + div.subtract { + left: 120px; + background-image: url(support/blue-100x50-transparent-100x50.svg); + } + + div.exclude { + left: 340px; + background-color: blue; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="exclude"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2a.html new file mode 100644 index 0000000000..7db800814c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2a.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose vector image</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="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-2-ref.html"> + <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/transparent-100x50-blue-100x50.svg); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2b.html new file mode 100644 index 0000000000..3fd983fb11 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2b.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose raster image</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="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-2-ref.html"> + <meta name="assert" content="Test checks that raster-mask-image can be composed correctly by different mask-composite value."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(support/blue-100x50-transparent-100x50.png), + url(support/transparent-100x50-blue-100x50.png); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2c.html new file mode 100644 index 0000000000..2b26e9ac66 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2c.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose SVG mask</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="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-2-ref.html"> + <meta name="assert" content="Test checks that svg-mask can be composed correctly by different mask-composite value."> + <svg height="0"> + <mask id="rectMask1" x="0" y="0" width="100" height="100" > + <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="rectMask2" x="0" y="0" width="100" height="100" > + <rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(#rectMask1), + url(#rectMask2); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2d.html new file mode 100644 index 0000000000..feb70df051 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2d.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masking: mask-composite: compose vector image on SVG content</title> +<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> +<link rel="match" href="mask-composite-2-ref.html"> +<meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value."> +<style type="text/css"> + body { + padding: 0; + margin: 0; + } + + rect { + fill: blue; + width: 100px; + height: 100px; + y: 10px; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/transparent-100x50-blue-100x50.svg); + } + + rect.add { + x: 10px; + mask-composite: add; + } + + rect.subtract { + x: 120px; + mask-composite: subtract; + } + + rect.intersect { + x: 230px; + mask-composite: intersect; + } + + rect.exclude { + x: 340px; + mask-composite: exclude; + } +</style> +<svg width="440"> + <rect class="add"/> + <rect class="subtract"/> + <rect class="intersect"/> + <rect class="exclude"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1-ref.html new file mode 100644 index 0000000000..2800844061 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 50px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1a.html new file mode 100644 index 0000000000..62e00660a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1a.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-image"> + <link rel="match" href="mask-image-1-ref.html"> + <meta name="assert" content="Test checks whether image as mask layer works correctly or not."> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-png { + mask-image: url(support/transparent-100x50-blue-100x50.png); + } + </style> + </head> + <body> + <div class="mask-by-png"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1b.html new file mode 100644 index 0000000000..9bf74102f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1b.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-image"> + <link rel="match" href="mask-image-1-ref.html"> + <meta name="assert" content="Test checks whether SVG image as mask layer works correctly or not."> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-svg { + mask-image: url(support/transparent-100x50-blue-100x50.svg); + } + </style> + </head> + <body> + <div class="mask-by-svg"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1c.html new file mode 100644 index 0000000000..1328d06c95 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1c.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-image"> + <link rel="match" href="mask-image-1-ref.html"> + <meta name="assert" content="Test checks whether SVG mask element as mask layer works correctly or not."> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-svg-mask { + mask-image: url(support/mask-half-transparent-100x100.svg#mask); + } + </style> + </head> + <body> + <div class="mask-by-svg-mask"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1d.html new file mode 100644 index 0000000000..11f0ae7d93 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1d.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</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-mask-image"> + <link rel="match" href="mask-image-1-ref.html"> + <meta name="assert" content="Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document."> + </head> + <body> + <svg width="100" height="100"> + <rect x="0" y="0" width="100" height="50" fill="purple" mask="url(#foo)"/> + </svg> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2-ref.html new file mode 100644 index 0000000000..db949934e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + background-image: linear-gradient(rgba(128,0,128,0), rgba(128,0,128,1)); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div></div> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2.html new file mode 100644 index 0000000000..673f55a7e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-image"> + <link rel="match" href="mask-image-2-ref.html"> + <meta name="fuzzy" content="maxDifference=0-3; totalPixels=0-14000"> + <meta name="assert" content="Test checks whether gradient CSS image as mask layer works correctly or not."> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-gradient-1 { + mask-image: linear-gradient(rgba(0,0,255,0), rgba(0,0,255,1)); /* blue gradient mask */ + } + + div.mask-by-gradient-2 { + mask-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); /* red gradient mask */ + } + </style> + </head> + <body> + <div class="mask-by-gradient-1"></div> + <div class="mask-by-gradient-2"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3-ref.html new file mode 100644 index 0000000000..96b111aaea --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: multiple SVG masks</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + </head> + <body> + <br> + <svg width="100" height="100"> + <rect x="0" y="0" width="50" height="50" fill="purple"/> + <circle cx="50" cy="50" r="25" fill="purple"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3a.html new file mode 100644 index 0000000000..3aae3df393 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3a.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: multiple SVG masks</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-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask as mask layer works correctly or not."> + <meta name="fuzzy" content="0-1; 0-100"> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="mask2" x="0" y="0" width="1" height="1" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask-image: url(#mask1), url(#mask2); + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3b.html new file mode 100644 index 0000000000..b6609fde6a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3b.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: interleave SVG mask with image mask</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-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not."> + <meta name="fuzzy" content="0-1; 0-100"> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg), url(#mask1); + mask-repeat: no-repeat, repeat; + mask-position: 0 0, 0 0; + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3c.html new file mode 100644 index 0000000000..91cc9f7bb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3c.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: interleave SVG mask with image mask</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-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not."> + <meta name="fuzzy" content="0-1; 0-100"> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask-image: url(#mask1), url(support/50x50-opaque-blue.svg); + mask-repeat: repeat-x, no-repeat; + mask-position: 0 0, 0 0; + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3d.html new file mode 100644 index 0000000000..468872fecb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3d.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: interleave SVG mask with image mask</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-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="fuzzy" content="0-1; 0-100"> + <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not."> + <svg height="0"> + <mask id="mask1" x="10%" y="10%" width="0.8" height="0.8" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask: url(#mask1), url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat, no-repeat; + mask-position: 0 0, 0 0; + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3e.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3e.html new file mode 100644 index 0000000000..5e53937554 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3e.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: interleave SVG mask with image mask</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-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not."> + <meta name="fuzzy" content="0-1; 0-100"> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div.outter { + margin: 0px; + padding: 0px; + width: 200px; + height: 200px; + transform: translate(-10px, -10px); + } + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg), url(#mask1); + mask-repeat: no-repeat, repeat; + mask-position: 0 0, 0 0; + /*mask: url(#mask1);*/ + width: 100px; + height: 100px; + transform: translate(10px, 10px); + } + </style> + + </head> + <body> + <div class="outter"> + <div class="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3f.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3f.html new file mode 100644 index 0000000000..0ecfd38365 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3f.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: SVG masks apply on border area</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-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not."> + <meta name="fuzzy" content="0-1; 0-100"> + <svg height="0"> + <mask id="mask1" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse"> + <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="mask2" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse"> + <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: red; + mask-image: url(#mask1), url(#mask2); + box-shadow: 0 0 0 100px purple; + width: 100px; + height: 100px; + position: relative; + left: 100px; + top: 100px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3g.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3g.html new file mode 100644 index 0000000000..133a69fa60 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3g.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: SVG masks apply on border area</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-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether apply transfrom to a SVG mask layer works correctly or not."> + <meta name="fuzzy" content="0-1; 0-100"> + <svg height="0"> + <mask id="mask1" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse"> + <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="mask2" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse"> + <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div.outter { + margin: 0px; + padding: 0px; + width: 200px; + height: 200px; + transform: translate(-10px, -20px); + } + div.inner { + background-color: red; + mask-image: url(#mask1), url(#mask2); + mask-repeat: no-repeat, no-repeat; + box-shadow: 0 0 0 100px purple; + position: relative; + width: 100px; + height: 100px; + left: 100px; + top: 100px; + transform: translate(10px, 20px); + } + </style> + </head> + <body> + <div class="outter"> + <div class="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3h.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3h.html new file mode 100644 index 0000000000..29f2c33bdf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3h.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path in SVG mask</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-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="fuzzy" content="maxDifference=0-37; totalPixels=0-146"> + <meta name="assert" content="Test checks whether clip-path in SVG mask works correctly or not."> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="mask2" x="0" y="0" width="1" height="1" > + <rect x="25" y="25" width="50" height="50" style="stroke:none; fill: #ffffff" clip-path="circle(50% at 50% 50%)"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask-image: url(#mask1), url(#mask2); + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3i.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3i.html new file mode 100644 index 0000000000..c0440145e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3i.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: interleave SVG mask with image mask</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-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not."> + <meta name="fuzzy" content="0-1; 0-100"> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + rect { + fill: purple; + mask-image: url(#mask1), url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat, no-repeat; + } + </style> + + </head> + + <body> + <br> + <svg width="100" height="100"> + <rect x="0" y="0" width="100" height="100"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4a.html new file mode 100644 index 0000000000..bffcedae9a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4a.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: unresovlable mask 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-mask-image"> + <link rel="match" href="/css/reference/blank.html"> + <meta name="assert" content="Test checks non-existent url should be counted as an image layer of transparent black."> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-png { + mask-image: url(non-existent.png); + } + </style> + </head> + <body> + <div class="mask-by-png"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4b.html new file mode 100644 index 0000000000..b05232a1e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4b.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: unresovlable mask 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-mask-image"> + <link rel="match" href="/css/reference/blank.html"> + <meta name="assert" content="Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black."> + <svg height="0"> + <clipPath id="clip1"> + <circle cx="50" cy="50" r="25"/> + </clipPath> + </svg> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-reference { + mask-image: url(#clip1); + } + </style> + </head> + <body> + <div class="mask-by-reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5-ref.html new file mode 100644 index 0000000000..a24b349c5e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: data url mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + background-color: purple; + width: 50px; + height: 50px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5.html new file mode 100644 index 0000000000..12f0f60007 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: data url mask</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-mask-image"> + <link rel="match" href="mask-image-5-ref.html"> + <meta name="assert" content="Test checks handling data url mask correctly."> + <style type="text/css"> + div { + background-color: purple; + width: 50px; + height: 50px; + } + div.mask-by-data-url { + /* a 50x50 opaque blue rect */ + mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjAiIHk9IjAiICB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9ImJsdWUiIGZpbGwtb3BhY2l0eT0iMSIvPgo8L3N2Zz4K"); + } + </style> + </head> + <body> + <div class="mask-by-data-url"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6-ref.html new file mode 100644 index 0000000000..d85e075fd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask on inline element</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + width: 100px; + height: 100px; + font-size: 100px; + line-height: 100px; + } + + div.mask-by-png { + mask-image: url(support/transparent-100x50-blue-100x50.png); + } + </style> + </head> + <body> + <div class="mask-by-png">A</div> + <div class="mask-by-png">B</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6.html new file mode 100644 index 0000000000..3132efb047 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask on inline element</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-mask-image"> + <link rel="match" href="mask-image-6-ref.html"> + <meta name="assert" content="Test checks whether mask on inline elemnt works correctly or not."> + <meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-70"> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + span { + font-size: 100px; + line-height: 100px; + mask-image: url(support/transparent-100x50-blue-100x50.png); + mask-position: center; + mask-repeat: repeat; + } + + </style> + </head> + <body> + <div> + <span>A B</span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude-ref.html new file mode 100644 index 0000000000..5d82c5cf27 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>CSS test reference</title> +<style> + div { + width: 100px; + height: 100px; + border: 10px solid green; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude.html new file mode 100644 index 0000000000..21466670b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude.html @@ -0,0 +1,19 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1697311"> +<link rel="author" href="" title="Ana Tudor"> +<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="mask-image-clip-exclude-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-2000"> +<title>mask-image + mask-clip + mask-composite: exclude on different background boxes</title> +<style> +div { + display: inline-block; + width: 100px; + height: 100px; + padding: 10px; + background: linear-gradient(green, green) border-box; + mask: linear-gradient(red, red) content-box exclude, linear-gradient(red, red); +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-data-url-image.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-data-url-image.html new file mode 100644 index 0000000000..aac59f3c4a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-data-url-image.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image: url(data:...)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-data-url-image-ref.html"> +<meta name="assert" content="mask-image can use a data: URL as an image"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: blue; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid blue; + background: green; + mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGDwAQAAUQBNt+pgmgAAAABJRU5ErkJggg==); /* 1x1 black with 30% transparency */ +} +</style> +<p>The test passes if there is a blue-ish square with a 20px green border around it and a 40px blue-green-ish border around that.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split-2.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split-2.html new file mode 100644 index 0000000000..94c653a5c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split-2.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image on a fragmented inline</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ib-split-2-ref.html"> +<meta name="assert" content="mask-image applies to all fragments"> +<style> + columns { + display: block; + columns: 5; + column-fill: auto; + column-gap: 10px; + height: 30px; + background: pink; + } + div { background: grey; height: 50px; } + x { + background: grey; + mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABqklEQVRYhdXZMa6DMAwAUCOxcQAEF0BIzgG6MTEiJcfhItys1yhrl/oP8AvFScP/BJJUYmlR8mo7BgKAgw9JHEiJkRQ+Pw8xksTBxRzHYBJfJPFFStDXYznvGjhJHHbB9sHdg6cI4tMJco2dxnQDJol3OxB7kuJGqi6ozTNq84xUXUzfYb8juveDSPH4imvzjAAS6zgAyYT/gpbi4RiJPTWQ/mtQAKAGUiP4r1gjsqvKPRG0jg+QUFeVh7Ak8e46isa5TNG11ay+/WDvIorGOQEShrW1r/lq8vnvTogkm7eBVJPFp/5kXTS7qjwb+Z5/W7OmqF6dcja/oQS2yMFHyhlWVwLrqJIS4zaaVyMXC+sC4/LjNu1tnnmDtnlmTD+DXlibDAqQaKG8Pv2l/fejWVQDr08pbt6hUtxYnfImXxfeoaouWPNnUI8L6Q3dLqi4oeGmPpbFFEt7Aoik4WuhwV5CI7opieM2b8aGf+M8Q+N4FAGI5OEOIKLH5Rkb/gbEgo1gS8eKDWmTzI6dwSFsOy7YCDZyV9jwt8YZOOSXDVpwyK9vrPATX4j9ALzDM3y+40zWAAAAAElFTkSuQmCC); + } + .end { mask-position:100% 100%; mask-repeat: no-repeat; } +</style> +<body><columns><x><div></div></x></columns><columns><x class="end"><div></div></x></columns></body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split.html new file mode 100644 index 0000000000..dab941b111 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image on an inline with a block inside split by a columnset</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ib-split-ref.html"> +<meta name="assert" content="mask-image applies to the block child"> +<style> + body { column-width: 40px; column-gap: 0; } + div { padding-inline-start: 40px; margin: 1em 0; border-bottom-style: solid; } + span { margin-inline-end: -2px; } + x { mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGDwAQAAUQBNt+pgmgAAAABJRU5ErkJggg==); } +</style> +<body><x><span></span><div></div></x></body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-inline-sliced-1.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-inline-sliced-1.html new file mode 100644 index 0000000000..9d09cc00a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-inline-sliced-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>'box-decoration-break: slice' and 'mask-image'</title> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-mask-image"> +<link rel="match" href="reference/mask-image-inline-sliced-1-ref.html"> +<style> + .mask-image { + font: 100px/1 Ahem; + color: green; + -webkit-mask-image: linear-gradient(to right, white 50%, transparent 50%); + mask-image: linear-gradient(to right, white 50%, transparent 50%); + } +</style> +<p>There should be a green square below.</p> +<div style="width: 100px"> + <span class="mask-image">A A</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-child-will-change.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-child-will-change.html new file mode 100644 index 0000000000..248589d54d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-child-will-change.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image on svg with child with will-change: transform</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-svg-child-will-change-ref.html"> +<style> +svg { + /* The image is 200x200 with 100x100 opaque pixels at the center */ + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAABNklEQVR42u3TyQ0AMAgEMUj/PS895IWQ3QHHVAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/6yiBJ4pyLHqv7xG89pwSBgEBAICAQEAgIBAQCAgGBAAIBgYBAQCAgEBAICAQEAgIBgQACAYGAQEAgIBAQCAgEBAICAQQCAgGBgEBAICAQEAgIBAQCAgEEAgIBgYBAQCAgEBAICAQEAggEBAICAYGAQEAgIBAQCAgEBAIIBAQCAgGBgEBAICAQEAgIBBAICAQEAgIBgYBAQCAgEBAICAQQCAgEBAICAYGAQEAgIBAQCAjECkAgIBAQCAgEBAICAYGAQEAggEBAICAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAthrrbgTIalbwsQAAAABJRU5ErkJggg==); + mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAABNklEQVR42u3TyQ0AMAgEMUj/PS895IWQ3QHHVAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/6yiBJ4pyLHqv7xG89pwSBgEBAICAQEAgIBAQCAgGBAAIBgYBAQCAgEBAICAQEAgIBgQACAYGAQEAgIBAQCAgEBAICAQQCAgGBgEBAICAQEAgIBAQCAgEEAgIBgYBAQCAgEBAICAQEAggEBAICAYGAQEAgIBAQCAgEBAIIBAQCAgGBgEBAICAQEAgIBBAICAQEAgIBgYBAQCAgEBAICAQQCAgEBAICAYGAQEAgIBAQCAjECkAgIBAQCAgEBAICAYGAQEAggEBAICAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAthrrbgTIalbwsQAAAABJRU5ErkJggg==); + width: 100px; + height: 100px; + border: 50px solid red; + background: green; +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<svg> + <rect style="will-change: transform"> +</svg> + diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-foreignobject-zoomed.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-foreignobject-zoomed.html new file mode 100644 index 0000000000..85a8b2dbf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-foreignobject-zoomed.html @@ -0,0 +1,24 @@ +<!doctype html> +<title><mask> on <foreignObject> in zoomed SVG</title> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#svg-masks"> +<style> + svg { + zoom: 2; + } + .inner { + width: 100%; + height: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<svg> + <rect width="50" height="50" fill="red"/> + <mask id="m"> + <rect width="50" height="50" fill="white"/> + </mask> + <foreignObject width="50" height="50" mask="url(#m)"> + <div class="inner"></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-gradient-zoomed.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-gradient-zoomed.html new file mode 100644 index 0000000000..17d2869f6e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-gradient-zoomed.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>linear-gradient() mask-image on <rect> in zoomed SVG</title> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#svg-masks"> +<style> + svg { + zoom: 2; + } +</style> +<p>Test passes if there is a filled green square.</p> +<svg> + <rect width="50" height="100" fill="green" + style="mask-image: linear-gradient(black 50px, transparent 50px)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image-hash.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image-hash.html new file mode 100644 index 0000000000..b1efc90818 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image-hash.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image: url(image.svg#hash)</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ref.html"> +<meta name="assert" content="mask-image can use an SVG file as an image with element reference"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: red; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid red; + background: green; + mask-image: url(support/image-with-ref.svg#ref); +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image.html new file mode 100644 index 0000000000..40a1ff9b28 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image: url(image.svg)</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ref.html"> +<meta name="assert" content="mask-image can use an SVG file as an image"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: red; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid red; + background: green; + mask-image: url(support/image.svg); +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-local-mask.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-local-mask.html new file mode 100644 index 0000000000..18abc54f85 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-local-mask.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image: url(#local-mask)</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ref.html"> +<meta name="assert" content="mask-image can use local reference to a <mask> element"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: red; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid red; + background: green; + mask-image: url(#localmask); +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="back"></div><div id="front"></div> +<svg viewBox="0 0 200 200" style="width: 0; height: 0"> + <mask id="localmask"> + <rect x="50" y="50" width="100" height="100" fill="white"> + </mask> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-remote-mask.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-remote-mask.html new file mode 100644 index 0000000000..f3f2eefaa9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-remote-mask.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image: url(remote.svg#mask)</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ref.html"> +<meta name="assert" content="mask-image can use reference to a <mask> element from a remote SVG document"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: red; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid red; + background: green; + mask-image: url(support/mask.svg#mask); +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-a.html new file mode 100644 index 0000000000..d69ca24ee4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-a.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-mode with vector image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> + <link rel="match" href="mask-mode-ref.html"> + <meta name="assert" content="Test checks that mask an SVG image referenced by mask-image is correct with different mask mode."> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-10000"> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + mask-mode: match-source; + mask-image: url(support/blue-100x100.svg); + } + + div.alpha { + left: 120px; + mask-mode: alpha; + mask-image: url(support/blue-100x100.svg); + } + + div.luminance1 { + left: 230px; + mask-mode: luminance; + mask-image: url(support/blue-100x100.svg); + } + + div.luminance2 { + left: 340px; + mask-mode: luminance; + mask-image: url(support/red-100x100.svg); + } + + div.luminance3 { + left: 450px; + mask-mode: luminance; + mask-image: url(support/green-100x100.svg); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-b.html new file mode 100644 index 0000000000..961411d718 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-b.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-mode with raster image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> + <link rel="match" href="mask-mode-ref.html"> + <meta name="assert" content="Test checks that mask a PNG image referenced by mask-image is correct with different mask mode."> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-10000"> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + mask-mode: match-source; + mask-image: url(support/blue-100x100.png); + } + + div.alpha { + left: 120px; + mask-mode: alpha; + mask-image: url(support/blue-100x100.png); + } + + div.luminance1 { + left: 230px; + mask-mode: luminance; + mask-image: url(support/blue-100x100.png); + } + + div.luminance2 { + left: 340px; + mask-mode: luminance; + mask-image: url(support/red-100x100.png); + } + + div.luminance3 { + left: 450px; + mask-mode: luminance; + mask-image: url(support/green-100x100.png); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-c.html new file mode 100644 index 0000000000..115996db9c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-c.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-mode with gradient image</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/#propdef-mask-mode"> + <link rel="match" href="mask-mode-ref.html"> + <meta name="assert" content="Test checks that a linear-gradient() image referenced by mask-image is correct with different mask mode."> + <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-11800"> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + mask-mode: match-source; + mask-image: linear-gradient(blue 0%, blue 100%); + } + + div.alpha { + left: 120px; + mask-mode: alpha; + mask-image: linear-gradient(blue 0%, blue 100%); + } + + div.luminance1 { + left: 230px; + mask-mode: luminance; + mask-image: linear-gradient(blue 0%, blue 100%); + } + + div.luminance2 { + left: 340px; + mask-mode: luminance; + mask-image: linear-gradient(red 0%, red 100%); + } + + div.luminance3 { + left: 450px; + mask-mode: luminance; + mask-image: linear-gradient(lime 0%, lime 100%); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-d.html new file mode 100644 index 0000000000..c49155e2dc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-d.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-mode with raster image</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/#propdef-mask-mode"> + <link rel="match" href="mask-mode-ref.html"> + <meta name="assert" content="Test checks that whether mask-mode is filled automatically according to the number of mask layers."> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-10000"> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + mask-mode: match-source; + mask-image: linear-gradient(black 0%, black 100%), linear-gradient(blue 0%, blue 100%); + } + + div.alpha { + left: 120px; + mask-mode: alpha alpha; + mask-image: linear-gradient(black 0%, black 100%), linear-gradient(blue 0%, blue 100%); + } + + div.luminance1 { + left: 230px; + mask-mode: luminance; + mask-image: linear-gradient(black 0%, black 100%), linear-gradient(blue 0%, blue 100%); + } + + div.luminance2 { + left: 340px; + mask-mode: luminance; + mask-image: linear-gradient(black 0%, black 100%), linear-gradient(red 0%, red 100%); + } + + div.luminance3 { + left: 450px; + mask-mode: luminance; + mask-image: linear-gradient(black 0%, black 100%), linear-gradient(lime 0%, lime 100%); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-e.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-e.html new file mode 100644 index 0000000000..3ece03c5b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-e.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masking: mask-mode with gradient on SVG content</title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> +<link rel="match" href="mask-mode-ref.html"> +<meta name="assert" content="Test checks that a linear-gradient() image referenced by mask-image is correct with different mask modes."> +<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-11800"> +<style type="text/css"> + body { + padding: 0; + margin: 0; + } + + rect { + fill: blue; + width: 100px; + height: 100px; + y: 10px; + } + + rect.auto { + x: 10px; + mask-mode: match-source; + mask-image: linear-gradient(blue 0%, blue 100%); + } + + rect.alpha { + x: 120px; + mask-mode: alpha; + mask-image: linear-gradient(blue 0%, blue 100%); + } + + rect.luminance1 { + x: 230px; + mask-mode: luminance; + mask-image: linear-gradient(blue 0%, blue 100%); + } + + rect.luminance2 { + x: 340px; + mask-mode: luminance; + mask-image: linear-gradient(red 0%, red 100%); + } + + rect.luminance3 { + x: 450px; + mask-mode: luminance; + mask-image: linear-gradient(lime 0%, lime 100%); + } +</style> +<svg width="600"> + <rect class="auto"/> + <rect class="alpha"/> + <rect class="luminance1"/> + <rect class="luminance2"/> + <rect class="luminance3"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-ref.html new file mode 100644 index 0000000000..0f7dbd571f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-mode reference</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + background-color: white; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + background-image: url(support/blue-100x100.svg); + } + + div.alpha { + left: 120px; + background-image: url(support/blue-100x100.svg); + } + + div.luminance1 { + left: 230px; + background-image: url(support/blue-luminance-100x100.svg); + } + + div.luminance2 { + left: 340px; + background-image: url(support/red-luminance-100x100.svg); + } + + div.luminance3 { + left: 450px; + background-image: url(support/green-luminance-100x100.svg); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type-ref.html new file mode 100644 index 0000000000..2b5e1fd3e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-mode reference</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.match-luminance { + left: 10px; + background-image: url(support/blue-luminance-100x100.svg); + } + + div.match-alpha { + left: 120px; + background-image: url(support/blue-100x100.svg); + } + + div.luminance-luminance { + top: 120px; + left: 10px; + background-image: url(support/blue-luminance-100x100.svg); + } + + div.luminance-alpha { + top: 120px; + left: 120px; + background-image: url(support/blue-luminance-100x100.svg); + } + + div.alpha-luminance { + top: 230px; + left: 10px; + background-image: url(support/blue-100x100.svg); + } + + div.alpha-alpha { + top: 230px; + left: 120px; + background-image: url(support/blue-100x100.svg); + } + </style> + + </head> + <body> + <div class="match-luminance"></div> + <div class="match-alpha"></div> + <div class="luminance-luminance"></div> + <div class="luminance-alpha"></div> + <div class="alpha-luminance"></div> + <div class="alpha-alpha"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type-svg.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type-svg.html new file mode 100644 index 0000000000..f3719c7098 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type-svg.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masking: mask-mode with SVG <mask></title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> +<link rel="match" href="mask-mode-to-mask-type-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-30000"> +<meta name="assert" content="Test checks the fallback logic between mask-mode and mask-type."> +<style type="text/css"> + body { + padding: 0; + margin: 0; + } + + rect { + fill: blue; + width: 100px; + height: 100px; + } + + rect.match-luminance { + x: 10px; + y: 10px; + mask-mode: match-source; + mask-image: url("#svg-luminance"); + } + + rect.match-alpha { + x: 120px; + y: 10px; + mask-mode: match-source; + mask-image: url("#svg-alpha"); + } + + rect.luminance-luminance { + x: 10px; + y: 120px; + mask-mode: luminance; + mask-image: url("#svg-luminance"); + } + + rect.luminance-alpha { + x: 120px; + y: 120px; + mask-mode: luminance; + mask-image: url("#svg-alpha"); + } + + rect.alpha-luminance { + x: 10px; + y: 230px; + mask-mode: alpha; + mask-image: url("#svg-luminance"); + } + + rect.alpha-alpha { + x: 120px; + y: 230px; + mask-mode: alpha; + mask-image: url("#svg-alpha"); + } + + #svg-luminance { + mask-type: luminance; + } + + #svg-alpha { + mask-type: alpha; + } +</style> +<svg width="220" height="330"> + <rect class="match-luminance"/> + <rect class="match-alpha"/> + <rect class="luminance-luminance"/> + <rect class="luminance-alpha"/> + <rect class="alpha-luminance"/> + <rect class="alpha-alpha"/> + + <mask id="svg-luminance" maskContentUnits="objectBoundingBox"> + <rect width="100%" height="100%" fill="blue"/> + </mask> + <mask id="svg-alpha" maskContentUnits="objectBoundingBox"> + <rect width="100%" height="100%" fill="blue"/> + </mask> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type.html new file mode 100644 index 0000000000..1d1a94c585 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-mode with vector image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> + <link rel="match" href="mask-mode-to-mask-type-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-30000"> + <meta name="assert" content="Test checks the fallback logic between mask-mode and mask-type."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.match-luminance { + left: 10px; + mask-mode: match-source; + mask-image: url("#svg-luminance"); + } + + div.match-alpha { + left: 120px; + mask-mode: match-source; + mask-image: url("#svg-alpha"); + } + + div.luminance-luminance { + top: 120px; + left: 10px; + mask-mode: luminance; + mask-image: url("#svg-luminance"); + } + + div.luminance-alpha { + top: 120px; + left: 120px; + mask-mode: luminance; + mask-image: url("#svg-alpha"); + } + + div.alpha-luminance { + top: 230px; + left: 10px; + mask-mode: alpha; + mask-image: url("#svg-luminance"); + } + + div.alpha-alpha { + top: 230px; + left: 120px; + mask-mode: alpha; + mask-image: url("#svg-alpha"); + } + + #svg-luminance { + mask-type: luminance; + } + + #svg-alpha { + mask-type: alpha; + } + </style> + </head> + <body> + <div class="match-luminance"></div> + <div class="match-alpha"></div> + <div class="luminance-luminance"></div> + <div class="luminance-alpha"></div> + <div class="alpha-luminance"></div> + <div class="alpha-alpha"></div> + <svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <mask id="svg-luminance"> + <rect x="0" y="0" width="100%" height="100%" fill="blue"/> + </mask> + <mask id="svg-alpha"> + <rect x="0" y="0" width="100%" height="100%" fill="blue"/> + </mask> + </defs> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1-ref.html new file mode 100644 index 0000000000..5def84f067 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask with opacity</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + position: absolute; + left: 10px; + top: 60px; + background-color: rgba(0,0,255,0.5); + width: 100px; + height: 50px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1a.html new file mode 100644 index 0000000000..9182371794 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1a.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask with filter and opacity</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-mask-image"> + <link rel="match" href="mask-opacity-1-ref.html"> + <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5000"> + <style type="text/css"> + div { + position: absolute; + left: 10px; + top: 10px; + background-color: rgb(255,255,0); + width: 100px; + height: 100px; + filter: invert(100%); + mask-image: url(support/blue-100x50-transparent-100x50.png); + opacity: 0.5; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1b.html new file mode 100644 index 0000000000..681ec360ae --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1b.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask with opacity</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-mask-image"> + <link rel="match" href="mask-opacity-1-ref.html"> + <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5000"> + <svg height="0"> + <mask id="myMask" x="0" y="0" width="100" height="100" > + <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + position: absolute; + left: 10px; + top: 10px; + background-color: rgb(0,0,255); + width: 100px; + height: 100px; + mask-image: url(support/blue-100x50-transparent-100x50.png); + opacity: 0.5; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1c.html new file mode 100644 index 0000000000..271e663e63 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1c.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: filter with opacity</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-mask-image"> + <link rel="match" href="mask-opacity-1-ref.html"> + <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5000"> + <style type="text/css"> + div { + position: absolute; + left: 10px; + top: 60px; + background-color: rgb(255,255,0); + width: 100px; + height: 50px; + filter: invert(100%); + opacity: 0.5; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1d.html new file mode 100644 index 0000000000..77eab966cb --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1d.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask with opacity</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-mask-image"> + <link rel="match" href="mask-opacity-1-ref.html"> + <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> + <meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-5000" /> + <svg height="0"> + <mask id="myMask" x="0" y="0" width="100" height="100" > + <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + position: absolute; + left: 10px; + top: 10px; + background-color: rgb(0,0,255); + width: 100px; + height: 100px; + mask-image: url(#myMask), url(#myMask); + opacity: 0.5; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1e.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1e.html new file mode 100644 index 0000000000..ad7aa8829e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1e.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask with opacity</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-mask-image"> + <link rel="match" href="mask-opacity-1-ref.html"> + <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> + <style type="text/css"> + #outter { + position: absolute; + left: 10px; + top: 10px; + width: 100px; + height: 100px; + mask-image: url(support/blue-100x50-transparent-100x50.png), + url(support/blue-100x50-transparent-100x50.png); + opacity: 0.5; + } + + #inner { + width: 100px; + height: 100px; + box-sizing:border-box; + background-color: blue; + border: 1px solid transparent; + will-change: transform; + } + </style> + </head> + <body> + <div id="outter"><div id="inner"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1-ref.html new file mode 100644 index 0000000000..df7e684d2a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-origin: mask positioning area</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + border: 1px solid black; + width: 100px; + height: 100px; + position: relative; + } + + div.inner { + width: 50px; + height: 50px; + background-color: purple; + position: absolute; + } + + #border { left: 4px; top: 1px; } + #padding { left: 10px; top: 9px; } + #content { left: 13px; top: 15px; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="border"></div></div> + <div class="outer"><div class="inner" id="border"></div></div> + <div class="outer"><div class="inner" id="padding"></div></div> + <div class="outer"><div class="inner" id="content"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1.html new file mode 100644 index 0000000000..3788a5591a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-origin: mask positioning area</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-origin"> + <link rel="match" href="mask-origin-1-ref.html"> + <meta name="assert" content="Test checks whether setting mask position area works correctly or not."> + <style type="text/css"> + div.outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + div.inner { + /* + * content box: 60 x 60 + * padding box: 72 x 78 + * border box: 80 x 90 + * margin box: 86 x 94 + */ + margin: 1px 2px 3px 4px; + border: solid transparent; + border-width: 8px 2px 4px 6px; + padding: 6px 9px 12px 3px; + width: 60px; + height: 60px; + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + } + + #border { mask-origin: border-box; } + #padding { mask-origin: padding-box; } + #content { mask-origin: content-box; } + </style> + </head> + <body> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner" id="border"></div></div> + <div class="outer"><div class="inner" id="padding"></div></div> + <div class="outer"><div class="inner" id="content"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3-ref.html new file mode 100644 index 0000000000..0271998a29 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-origin: mask positioning area</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + </style> + </head> + <body> + <svg width="200" height="200" style="left: 10px;"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 240px;"> + <rect x="50" y="50" width="50" height="50" fill="green"/> + <rect x="60" y="60" width="40" height="40" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 10px; top: 220px;"> + <rect x="60" y="40" width="50" height="50" fill="green"/> + <rect x="80" y="60" width="30" height="30" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3.html new file mode 100644 index 0000000000..9659d09ba3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-origin: mask positioning area</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-mask-origin"> + <link rel="match" href="mask-origin-3-ref.html"> + <meta name="assert" content="Test checks whether setting mask position area works correctly or not."> + <style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + rect.mask { + fill: blue; + mask-origin: fill-box; + mask-clip: fill-box; + mask-repeat: no-repeat; + mask-image: url(support/50x50-opaque-blue.svg); + } + + rect.view { + mask-origin: view-box; + mask-clip: view-box; + } + + rect.fill { + mask-origin: fill-box; + mask-clip: stroke-box; + } + + rect.stroke { + mask-origin: stroke-box; + mask-clip: stroke-box; + } + </style> + </head> + <body> + <svg width="200" height="200" viewBox="0 0 100 100" preserveAspectRatio="none" style="left: 10px;"> + <rect class="view mask" x="25" y="25" width="100" height="100"/> + </svg> + <svg width="200" height="200" style="left: 240px;"> + <rect class="fill mask" x="50" y="50" width="80" height="80" stroke="green" stroke-width="20"/> + </svg> + <svg width="200" height="200" style="left: 10px; top: 220px;"> + <rect class="stroke mask" x="70" y="50" width="80" height="80" stroke="green" stroke-width="20"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1-ref.html new file mode 100644 index 0000000000..e323bd3529 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + position: relative; + width: 100px; + height: 100px; + border: 1px solid black; + } + + div.inner { + position: absolute; + width: 50px; + height: 50px; + background-color: purple; + } + + #inner1 { right: 10px; bottom: 35px; } + #inner2 { right: 30px; bottom: 25px; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="inner1"></div></div> + <div class="outer"><div class="inner" id="inner1"></div></div> + <div class="outer"><div class="inner" id="inner2"></div></div> + <div class="outer"><div class="inner" id="inner2"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a-svg.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a-svg.html new file mode 100644 index 0000000000..aa9a742e99 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a-svg.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<title>CSS Masking: mask-position: mask positioning, SVG content</title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> +<link rel="match" href="mask-position-1-ref.html"> +<meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> +<style type="text/css"> + rect.frame { + x: -0.5px; + y: -0.5px; + width: 101px; + height: 101px; + stroke: black; + fill: none; + } + + rect.masked { + width: 100px; + height: 100px; + fill: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #masked1 { mask-position: right 20% bottom 70%; } + #masked2 { mask-position: bottom 70% right 20%; } + #masked3 { mask-position: right 30px bottom 25px; } + #masked4 { mask-position: bottom 25px right 30px; } +</style> +<svg height="408"> + <g transform="translate(1 1)"> + <rect class="masked" id="masked1"/> + <rect class="frame"/> + </g> + <g transform="translate(1 103)"> + <rect class="masked" id="masked2"/> + <rect class="frame"/> + </g> + <g transform="translate(1 205)"> + <rect class="masked" id="masked3"/> + <rect class="frame"/> + </g> + <g transform="translate(1 307)"> + <rect class="masked" id="masked4"/> + <rect class="frame"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a.html new file mode 100644 index 0000000000..cee15ee713 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-1-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #inner1 { mask-position: right 20% bottom 70%; } + #inner2 { mask-position: bottom 70% right 20%; } + #inner3 { mask-position: right 30px bottom 25px; } + #inner4 { mask-position: bottom 25px right 30px; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="inner1"></div></div> + <div class="outer"><div class="inner" id="inner2"></div></div> + <div class="outer"><div class="inner" id="inner3"></div></div> + <div class="outer"><div class="inner" id="inner4"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1b.html new file mode 100644 index 0000000000..669810e61a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1b.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-1-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #inner1 { mask-position: left 40px top 15px; } + #inner2 { mask-position: top 30% left 80%; } + #inner3 { mask-position: left 20px top 25px } + #inner4 { mask-position: top 25px left 20px; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="inner1"></div></div> + <div class="outer"><div class="inner" id="inner2"></div></div> + <div class="outer"><div class="inner" id="inner3"></div></div> + <div class="outer"><div class="inner" id="inner4"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1c.html new file mode 100644 index 0000000000..9a1671c3d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1c.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-1-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #inner1 { mask-position: left 80% bottom 70%; } + #inner2 { mask-position: right 20% top 30%; } + #inner3 { mask-position: bottom 50% left 40%; } + #inner4 { mask-position: right 60% top 50%; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="inner1"></div></div> + <div class="outer"><div class="inner" id="inner2"></div></div> + <div class="outer"><div class="inner" id="inner3"></div></div> + <div class="outer"><div class="inner" id="inner4"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2-ref.html new file mode 100644 index 0000000000..46be4b8b08 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + #inner { + margin-left: 20px; + margin-top: 20px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2a.html new file mode 100644 index 0000000000..d8427338d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2a.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-2-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: left 40% bottom 60%; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2b.html new file mode 100644 index 0000000000..b5f7b31051 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2b.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-2-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: 40% 40%; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3-ref.html new file mode 100644 index 0000000000..dd2630356e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + #inner { + margin-left: 25px; + margin-top: 10px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3a.html new file mode 100644 index 0000000000..17b1137f62 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3a.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-3-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: left 50% bottom 80%; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3b.html new file mode 100644 index 0000000000..742a65ea15 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3b.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-3-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: center 20%; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4-ref.html new file mode 100644 index 0000000000..7ddf68b28a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + #inner { + margin-left: 0px; + margin-top: 25px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4a.html new file mode 100644 index 0000000000..9d17692e83 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4a.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-4-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: left center; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4b.html new file mode 100644 index 0000000000..9b46546d31 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4b.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-4-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: left; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4c.html new file mode 100644 index 0000000000..7437c0232b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4c.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-4-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: left 0% bottom 50%; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4d.html new file mode 100644 index 0000000000..e5dce03b4a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4d.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-4-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask: url(support/50x50-opaque-blue.svg) left no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5-ref.html new file mode 100644 index 0000000000..dc8c9ecb93 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 120px; + height: 120px; + } + + #inner1 { + margin-left: 35px; + margin-top: 0px; + width: 50px; + height: 50px; + background-color: purple; + } + + #inner2 { + margin-left: 35px; + margin-top: 20px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner1"></div> + <div id="inner2"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5.html new file mode 100644 index 0000000000..295402263d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-5-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 120px; + height: 120px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: top, bottom; + mask-repeat: no-repeat, no-repeat; + mask-image: url(support/50x50-opaque-blue.svg), + url(support/50x50-opaque-blue.svg); + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6-ref.html new file mode 100644 index 0000000000..b94527eb0a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + .inner { + margin-left: 20px; + margin-top: 50px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6.html new file mode 100644 index 0000000000..e4b0715c4d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-6-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + .outer { + border: 1px solid black; + } + + .outer > div { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #inner1 { + mask-position: left 20px bottom 0px; + } + + #inner2 { + mask-position: left 40% bottom 0%; + } + + #inner3 { + mask-position: right 60% bottom 0%; + } + + #inner4 { + mask-position: right 30px bottom 0px; + } + </style> + </head> + <body> + <div class="outer"><div id="inner1"></div></div> + <div class="outer"><div id="inner2"></div></div> + <div class="outer"><div id="inner3"></div></div> + <div class="outer"><div id="inner4"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7-ref.html new file mode 100644 index 0000000000..c3c8d85ebd --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + .inner { + margin-left: 50px; + margin-top: 20px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7.html new file mode 100644 index 0000000000..d24fca5bc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-position"> + <link rel="match" href="mask-position-7-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + .outer { + border: 1px solid black; + } + + .outer > div { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #inner1 { + mask-position: right 0% top 40%; + } + + #inner2 { + mask-position: right 0px top 20px; + } + + #inner3 { + mask-position: right 0% bottom 60%; + } + + #inner4 { + mask-position: right 0px bottom 30px; + } + </style> + </head> + <body> + <div class="outer"><div id="inner1"></div></div> + <div class="outer"><div id="inner2"></div></div> + <div class="outer"><div id="inner3"></div></div> + <div class="outer"><div id="inner4"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-8.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-8.html new file mode 100644 index 0000000000..cb99135fa1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-8.html @@ -0,0 +1,15 @@ +<!doctype html> +<title>CSS Masking: mask-position with overflowing mask-size on SVG content</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-mask-position"> +<link rel="match" href="../clip-path/reference/green-100x100.html"> +<style> + .mask { + mask: linear-gradient(90deg, transparent 25%, black 25%, black 50%, transparent 50%) 50% / 200% 100%; + } +</style> +<svg> + <g class="mask"> + <rect width="100" height="100" fill="green"/> + <rect x="100" width="100" height="100" fill="red"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-ref.html new file mode 100644 index 0000000000..ca1addf562 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + width: 115px; + height: 115px; + position: relative; + border: 1px solid black; + } + + .color { + background-color: purple; + } + + #default { + position: absolute; + width: 50px; height: 50px; + } + + #repeat-x { + position: absolute; + width: 100%; height: 50px; + } + + #repeat-y { + position: absolute; + width: 50px; height: 100%; + } + </style> + </head> + <body> + <div class="outer color"></div> + <div class="outer"> + <div class="color" id="default"></div> + </div> + <div class="outer color"></div> + <div class="outer"> + <div class="color" id="repeat-x"></div> + </div> + <div class="outer"> + <div class="color" id="repeat-y"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-svg.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-svg.html new file mode 100644 index 0000000000..ba96faf18f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-svg.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masking: mask-repeat: repeated mask layer image, SVG content</title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat"> +<link rel="match" href="mask-repeat-1-ref.html"> +<meta name="assert" content="Test checks whether repeated mask layer works correctly or not."> +<style type="text/css"> + svg { + display: block; + } + + rect.frame { + x: -0.5px; + y: -0.5px; + width: 116px; + height: 116px; + stroke: black; + fill: none; + } + + rect.masked { + width: 115px; + height: 115px; + fill: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-position: left top; + } + + #no-repeat { + mask-repeat: no-repeat no-repeat; + } + #repeat { + mask-repeat: repeat repeat; + } + #repeat-x { + mask-repeat: repeat no-repeat; + } + #repeat-y { + mask-repeat: no-repeat repeat; + } +</style> +<svg height="585"> + <g transform="translate(1 1)"> + <rect class="masked"/> + <rect class="frame"/> + </g> + <g transform="translate(1 118)"> + <rect class="masked" id="no-repeat"/> + <rect class="frame"/> + </g> + <g transform="translate(1 235)"> + <rect class="masked" id="repeat"/> + <rect class="frame"/> + </g> + <g transform="translate(1 352)"> + <rect class="masked" id="repeat-x"/> + <rect class="frame"/> + </g> + <g transform="translate(1 469)"> + <rect class="masked" id="repeat-y"/> + <rect class="frame"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1.html new file mode 100644 index 0000000000..6c74f1cb91 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-repeat"> + <link rel="match" href="mask-repeat-1-ref.html"> + <meta name="assert" content="Test checks whether repeated mask layer works correctly or not."> + <style type="text/css"> + div { + width: 115px; + height: 115px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-position: left top; + } + + #no-repeat { + mask-repeat: no-repeat no-repeat; + } + #repeat { + mask-repeat: repeat repeat; + } + #repeat-x { + mask-repeat: repeat no-repeat; + } + #repeat-y { + mask-repeat: no-repeat repeat; + } + </style> + </head> + <body> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner" id="no-repeat"></div></div> + <div class="outer"><div class="inner" id="repeat"></div></div> + <div class="outer"><div class="inner" id="repeat-x"></div></div> + <div class="outer"><div class="inner" id="repeat-y"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-ref.html new file mode 100644 index 0000000000..fa386cdac1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + width: 128px; + height: 128px; + position: relative; + border: 1px solid black; + } + + div.inner { + width: 50px; + height: 50px; + position: absolute; + background-color: purple; + } + + #pos-top-left { left: 0; top: 0; } + #pos-top-right { right: 0; top: 0; } + #pos-bottom-left { left: 0; bottom: 0; } + #pos-bottom-right { right: 0; bottom: 0; } + </style> + </head> + <body> + <div class="outer"> + <div class="inner" id="pos-top-left"></div> + <div class="inner" id="pos-top-right"></div> + <div class="inner" id="pos-bottom-left"></div> + <div class="inner" id="pos-bottom-right"></div> + </div> + <div class="outer"> + <div class="inner" id="pos-top-left"></div> + <div class="inner" id="pos-top-right"></div> + </div> + <div class="outer"> + <div class="inner" id="pos-top-left"></div> + <div class="inner" id="pos-bottom-left"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-svg.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-svg.html new file mode 100644 index 0000000000..740d254473 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-svg.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masking: mask-repeat: repeated mask layer image, SVG content</title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat"> +<link rel="match" href="mask-repeat-2-ref.html"> +<meta name="assert" content="Test checks whether repeated mask layer works correctly or not."> +<style type="text/css"> + rect.frame { + x: -0.5px; + y: -0.5px; + width: 129px; + height: 129px; + stroke: black; + fill: none; + } + + rect.masked { + width: 128px; + height: 128px; + fill: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-position: left top; + } + + #space { + mask-repeat: space; + } + #space-x { + mask-repeat: space no-repeat; + } + #space-y { + mask-repeat: no-repeat space; + } +</style> +<svg height="390"> + <g transform="translate(1 1)"> + <rect class="masked" id="space"/> + <rect class="frame"/> + </g> + <g transform="translate(1 131)"> + <rect class="masked" id="space-x"/> + <rect class="frame"/> + </g> + <g transform="translate(1 261)"> + <rect class="masked" id="space-y"/> + <rect class="frame"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2.html new file mode 100644 index 0000000000..e349239fbf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-repeat"> + <link rel="match" href="mask-repeat-2-ref.html"> + <meta name="assert" content="Test checks whether repeated mask layer works correctly or not."> + <style type="text/css"> + div { + width: 128px; + height: 128px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-position: left top; + } + + #space { + mask-repeat: space; + } + #space-x { + mask-repeat: space no-repeat; + } + #space-y { + mask-repeat: no-repeat space; + } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="space"></div></div> + <div class="outer"><div class="inner" id="space-x"></div></div> + <div class="outer"><div class="inner" id="space-y"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-ref.html new file mode 100644 index 0000000000..4d4b869ce9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + width: 150px; + height: 150px; + border: 1px solid black; + } + + .color { + background-color: purple; + } + + #round { + width: 150px; + height: 150px; + } + + #round-x { + width: 150px; + height: 50px; + } + + #round-y { + width: 50px; + height: 150px; + } + </style> + </head> + <body> + <div class="outer"><div class="color" id="round"></div></div> + <div class="outer"><div class="color" id="round-x"></div></div> + <div class="outer"><div class="color" id="round-y"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-svg.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-svg.html new file mode 100644 index 0000000000..b7d64ac365 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-svg.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Masking: mask-repeat: repeated mask layer image, SVG content</title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat"> +<link rel="match" href="mask-repeat-3-ref.html"> +<meta name="assert" content="Test checks whether repeated mask layer works correctly or not."> +<style type="text/css"> + rect.frame { + x: -0.5px; + y: -0.5px; + width: 151px; + height: 151px; + stroke: black; + fill: none; + } + + rect.masked { + width: 150px; + height: 150px; + fill: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-position: left top; + } + + #round { + mask-repeat: round; + } + #round-x { + mask-repeat: round no-repeat; + } + #round-y { + mask-repeat: no-repeat round; + } +</style> +<svg height="456"> + <g transform="translate(1 1)"> + <rect class="masked" id="round"/> + <rect class="frame"/> + </g> + <g transform="translate(1 153)"> + <rect class="masked" id="round-x"/> + <rect class="frame"/> + </g> + <g transform="translate(1 305)"> + <rect class="masked" id="round-y"/> + <rect class="frame"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3.html new file mode 100644 index 0000000000..cb950d4f2c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-repeat"> + <link rel="match" href="mask-repeat-3-ref.html"> + <meta name="assert" content="Test checks whether repeated mask layer works correctly or not."> + <style type="text/css"> + div { + width: 150px; + height: 150px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-position: left top; + } + + #round { + mask-repeat: round; + } + #round-x { + mask-repeat: round no-repeat; + } + #round-y { + mask-repeat: no-repeat round; + } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="round"></div></div> + <div class="outer"><div class="inner" id="round-x"></div></div> + <div class="outer"><div class="inner" id="round-y"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-auto.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-auto.html new file mode 100644 index 0000000000..01d55f9629 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-auto-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: auto auto; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length-ref.html new file mode 100644 index 0000000000..aa21231924 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 20px; + height: 20px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length.html new file mode 100644 index 0000000000..5ef49cc612 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-auto-length-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 64px; + height: 128px; + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: auto 20px; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-percent.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-percent.html new file mode 100644 index 0000000000..f2644bb1b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-percent.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-auto-length-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 64px; + height: 128px; + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: auto 15.625%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-ref.html new file mode 100644 index 0000000000..73e3df2703 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto.html new file mode 100644 index 0000000000..6560a81ee3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-auto-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: auto; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border-ref.html new file mode 100644 index 0000000000..afbeb72f10 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 64px; + height: 64px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border.html new file mode 100644 index 0000000000..a04557639a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-contain-clip-border-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + border: 20px solid transparent; + width: 24px; + height: 88px; + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-clip: border-box; + mask-origin: border-box; + mask-size: contain; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding-ref.html new file mode 100644 index 0000000000..041e48d03d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + border: 20px solid white; + width: 24px; + height: 88px; + } + + #innermost { + width: 24px; + height: 24px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"> + <div id="innermost"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding.html new file mode 100644 index 0000000000..4f321d9c58 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-contain-clip-padding-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + background-color: purple; + border: 20px solid transparent; + width: 24px; + height: 88px; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-clip: padding-box; + mask-origin: padding-box; + mask-size: contain; + } + </style> + </head> + <body> + <div id="outer"><div id="inner"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty-ref.html new file mode 100644 index 0000000000..50ab373eb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner1 { + width: 64px; + height: 32px; + } + + #inner2 { + width: 64px; + height: 64px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner1"></div> + <div id="inner2"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty.html new file mode 100644 index 0000000000..fcae5ba0ed --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-contain-position-fifty-fifty-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: contain; + mask-position: 50% 50%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-ref.html new file mode 100644 index 0000000000..a7346bfcb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 10px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 64px; + height: 64px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain.html new file mode 100644 index 0000000000..19fc42d6ec --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-contain-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 10px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: contain; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover-ref.html new file mode 100644 index 0000000000..961019bf16 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 10px solid transparent; + width: 64px; + height: 128px; + background-clip: content-box; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover.html new file mode 100644 index 0000000000..171e11805b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-cover-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + #outer { + border: 10px solid black; + width: 64px; + height: 128px; + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-origin: content-box; + mask-clip: content-box; + mask-size: cover; + } + </style> + </head> + <body> + <div id="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-auto.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-auto.html new file mode 100644 index 0000000000..7152f6ff95 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-length-length-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x100-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 32px auto; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length-ref.html new file mode 100644 index 0000000000..5411da9f87 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 32px; + height: 64px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length.html new file mode 100644 index 0000000000..f9cf2cb6bc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-length-length-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x100-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 32px 64px; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent-ref.html new file mode 100644 index 0000000000..26195541d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 16px; + height: 32px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent.html new file mode 100644 index 0000000000..ba5bbbc55c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-length-percent-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x100-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 16px 25%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length.html new file mode 100644 index 0000000000..961357e12f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-length-length-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x100-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 32px; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-auto.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-auto.html new file mode 100644 index 0000000000..603346d6e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-percent-percent-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 50% auto; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-length.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-length.html new file mode 100644 index 0000000000..4ac9c8e81f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-length.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-percent-percent-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 50% 32px; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-ref.html new file mode 100644 index 0000000000..96a3d1bdca --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 32px; + height: 32px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch-ref.html new file mode 100644 index 0000000000..2c023ec13c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + width: 60px; + height: 120px; + } + + #outer { + border: 10px solid black; + } + + #inner { + height: 60px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch.html new file mode 100644 index 0000000000..69f89b8a98 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-percent-percent-stretch-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 60px; + height: 120px; + } + + #outer { + border: 10px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/transparent-100x50-blue-100x50.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 100% 100%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent.html new file mode 100644 index 0000000000..7b04d9b6d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-percent-percent-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 50% 25%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent.html new file mode 100644 index 0000000000..2e056df521 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@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-mask-size"> + <link rel="match" href="mask-size-percent-percent-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 50%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/1x1-black-30-alpha.png b/testing/web-platform/tests/css/css-masking/mask-image/reference/1x1-black-30-alpha.png Binary files differnew file mode 100644 index 0000000000..e334f44a03 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/1x1-black-30-alpha.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-data-url-image-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-data-url-image-ref.html new file mode 100644 index 0000000000..c2e88b3657 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-data-url-image-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>Reference: mask-image: url(data:...)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: blue; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid blue; + background: green; + mask-image: url(1x1-black-30-alpha.png); /* 1x1 black with 30% transparency */ +} +</style> +<p>The test passes if there is a blue-ish square with a 20px green border around it and a 40px blue-green-ish border around that.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-2-ref.html new file mode 100644 index 0000000000..ee28190878 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-2-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image on a fragmented inline</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> + columns { + display: block; + columns: 5; + column-fill: auto; + column-gap: 10px; + height: 30px; + background: pink; + } + div { background: grey; height: 50px; } + x { + background: grey; + mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABqklEQVRYhdXZMa6DMAwAUCOxcQAEF0BIzgG6MTEiJcfhItys1yhrl/oP8AvFScP/BJJUYmlR8mo7BgKAgw9JHEiJkRQ+Pw8xksTBxRzHYBJfJPFFStDXYznvGjhJHHbB9sHdg6cI4tMJco2dxnQDJol3OxB7kuJGqi6ozTNq84xUXUzfYb8juveDSPH4imvzjAAS6zgAyYT/gpbi4RiJPTWQ/mtQAKAGUiP4r1gjsqvKPRG0jg+QUFeVh7Ak8e46isa5TNG11ay+/WDvIorGOQEShrW1r/lq8vnvTogkm7eBVJPFp/5kXTS7qjwb+Z5/W7OmqF6dcja/oQS2yMFHyhlWVwLrqJIS4zaaVyMXC+sC4/LjNu1tnnmDtnlmTD+DXlibDAqQaKG8Pv2l/fejWVQDr08pbt6hUtxYnfImXxfeoaouWPNnUI8L6Q3dLqi4oeGmPpbFFEt7Aoik4WuhwV5CI7opieM2b8aGf+M8Q+N4FAGI5OEOIKLH5Rkb/gbEgo1gS8eKDWmTzI6dwSFsOy7YCDZyV9jwt8YZOOSXDVpwyK9vrPATX4j9ALzDM3y+40zWAAAAAElFTkSuQmCC); + } + .end { mask-position:100% 100%; mask-repeat: no-repeat; } +</style> +<body><columns><x style="display:block"><div></div></x></columns><columns><x style="display:block; background: grey; height: 50px;" class="end"></x></columns></body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-ref.html new file mode 100644 index 0000000000..e5c09f9449 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Reference: mask-image on an inline with a block inside split by a columnset</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> + body { column-width: 40px; column-gap: 0; } + div { padding-inline-start: 40px; margin: 1em 0; border-bottom-style: solid; } + span { margin-inline-end: -2px; } + div { mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGDwAQAAUQBNt+pgmgAAAABJRU5ErkJggg==); } +</style> +<body><x><span></span><div></div></x></body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-inline-sliced-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-inline-sliced-1-ref.html new file mode 100644 index 0000000000..4e540c2011 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-inline-sliced-1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>'box-decoration-break: slice' and 'mask-image' (reference)</title> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + .mask-image { + font: 100px/1 Ahem; + color: green; + } +</style> +<p>There should be a green square below.</p> +<div style="width: 100px"> + <span class="mask-image">A</span> +</div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ref.html new file mode 100644 index 0000000000..4e121163f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS Reference: mask-image</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<style> +#ref { + position: absolute; + width: 200px; + height: 200px; + background: green; +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="ref"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-svg-child-will-change-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-svg-child-will-change-ref.html new file mode 100644 index 0000000000..722879303d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-svg-child-will-change-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<p>The test passes if there is a green square and no red below.</p> +<div style="width: 100px; height: 100px; background: green; position: relative; top: 50px; left: 50px"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/50x100-opaque-blue.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/50x100-opaque-blue.svg new file mode 100644 index 0000000000..c9a82b4939 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/50x100-opaque-blue.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg width="50" height="100" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="50" height="100" fill="blue" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/50x50-opaque-blue.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/50x50-opaque-blue.svg new file mode 100644 index 0000000000..a68a1fa5b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/50x50-opaque-blue.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="50" height="50" fill="blue" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.png b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.png Binary files differnew file mode 100644 index 0000000000..3b72d5ce53 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.svg new file mode 100644 index 0000000000..38cae60fc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.png b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.png Binary files differnew file mode 100644 index 0000000000..65b1e88a56 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.svg new file mode 100644 index 0000000000..459f21d5cf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.svg @@ -0,0 +1,5 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect x="0" y="0" width="100%" height="50%" fill="blue" fill-opacity="0"/> + <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/blue-luminance-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-luminance-100x100.svg new file mode 100644 index 0000000000..5b79155b66 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-luminance-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="RGB(238,238,255)" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.png b/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.png Binary files differnew file mode 100644 index 0000000000..d65838b7f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.svg new file mode 100644 index 0000000000..87fd691a01 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="lime" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/green-luminance-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/green-luminance-100x100.svg new file mode 100644 index 0000000000..795bd7e5c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/green-luminance-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="RGB(73,73,255)" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/image-with-ref.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/image-with-ref.svg new file mode 100644 index 0000000000..fe77fb37ac --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/image-with-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> + <style> + g { display: none; } + g:target { display: inline; } + </style> + <g id="ref"> + <rect x="50" y="50" width="100" height="100" fill="black"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/image.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/image.svg new file mode 100644 index 0000000000..28dbaa0238 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/image.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> + <rect x="50" y="50" width="100" height="100" fill="black"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/mask-half-transparent-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/mask-half-transparent-100x100.svg new file mode 100644 index 0000000000..78f6993552 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/mask-half-transparent-100x100.svg @@ -0,0 +1,9 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <mask id="mask" mask-type="alpha"> + <rect x="0" y="0" width="100" height="50" fill-opacity="1"/> + <rect x="0" y="50" width="100" height="50" fill-opacity="0"/> + </mask> + </defs> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/mask.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/mask.svg new file mode 100644 index 0000000000..cab55923d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/mask.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> + <mask id="mask"> + <rect x="50" y="50" width="100" height="100" fill="white"/> + </mask> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.png b/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.png Binary files differnew file mode 100644 index 0000000000..43b8e542a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.svg new file mode 100644 index 0000000000..0ba285bf00 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="red" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/red-luminance-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/red-luminance-100x100.svg new file mode 100644 index 0000000000..05075f5210 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/red-luminance-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="RGB(201,201,255)" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.png b/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.png Binary files differnew file mode 100644 index 0000000000..f451746654 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.svg new file mode 100644 index 0000000000..658aed9f1e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.svg @@ -0,0 +1,5 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect x="0" y="0" width="100%" height="50%" fill="blue" fill-opacity="1"/> + <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="0"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-shorthand-subproperties-reset.html b/testing/web-platform/tests/css/css-masking/mask-shorthand-subproperties-reset.html new file mode 100644 index 0000000000..9ea20cbb8b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-shorthand-subproperties-reset.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Resetting mask shorthand subproperties</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-mask"> +<meta name="assert" content="All subproperties of the masking property are first reset to their initial values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<div id="test"></div> +<script> + +function set_subproperty(property, value) { + const element = document.getElementById('test') + element.style = '' + element.style[property] = value +} + +function test_shorthand_resetting_subproperty(property, newValue) { + if (!CSS.supports(property, newValue)) + return + test(() => { + let testElem = document.getElementById('test'); + let computed = window.getComputedStyle(testElem); + let initialValue = computed[property]; + set_subproperty(property, newValue); + document.getElementById('test').style.mask = 'url("#mask")'; + assert_equals(computed[property], initialValue); + assert_not_equals(computed.mask, ""); + }, 'Property ' + property + ' should be reset to its initial value.') +} + +test_shorthand_resetting_subproperty('mask-border-mode', 'luminance'); +test_shorthand_resetting_subproperty('mask-border-outset', '10px 20px 30px 40px'); +test_shorthand_resetting_subproperty('mask-border-repeat', 'round space'); +test_shorthand_resetting_subproperty('mask-border-slice', '1 2 3 4 fill'); +test_shorthand_resetting_subproperty('mask-border-source', 'url("#mask-border")'); +test_shorthand_resetting_subproperty('mask-border-width', '10px 20px 30px 40px'); +test_shorthand_resetting_subproperty('mask-clip', 'no-clip') +test_shorthand_resetting_subproperty('mask-composite', 'subtract') +test_shorthand_resetting_subproperty('mask-image', 'url("#mask-image")') +test_shorthand_resetting_subproperty('mask-mode', 'luminance') +test_shorthand_resetting_subproperty('mask-origin', 'content-box') +test_shorthand_resetting_subproperty('mask-position', '10px 10px') +test_shorthand_resetting_subproperty('mask-repeat', 'no-repeat') +test_shorthand_resetting_subproperty('mask-size', '10px') +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-empty-container-with-filter.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-empty-container-with-filter.svg new file mode 100644 index 0000000000..ebe7e7e4d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-empty-container-with-filter.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>mask with only an empty container with a filter</title> + <h:link rel="help" href="https://drafts.fxtf.org/css-masking-1/#svg-masks"/> + <h:link rel="match" href="reference/mask-green-square-001-ref.svg"/> + + <filter id="double" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse"> + <feOffset dy="100"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <filter id="f" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse"> + <feFlood flood-color="#fff"/> + </filter> + <mask id="m" x="50" y="50" width="100" height="100" maskUnits="userSpaceOnUse"> + <g filter="url(#f)"/> + </mask> + + <rect width="100" height="200" fill="green" mask="url(#m)"/> + <rect width="100" height="100" x="100" fill="green" mask="url(#m)" + filter="url(#double)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-invalid-reference.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-invalid-reference.svg new file mode 100644 index 0000000000..3d68fc0d74 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-invalid-reference.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: mask with invalid reference</title> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-image"/> + <html:link rel="match" href="reference/mask-green-square-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">masks are ignored if their + reference doesn't point to a mask element.</desc> +</g> + <linearGradient id="a" /> + <rect x="50" y="50" width="100" height="100" fill="green" mask="url(#a)"/> +</svg> + diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-negative-scale.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-negative-scale.svg new file mode 100644 index 0000000000..36b7abb42e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-negative-scale.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="testmeta"> + <title>CSS Masking: mask with negative scale target</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-negative-scale-001-ref.svg"/> + <metadata class="flags">svg</metadata> + <desc class="assert">The masked target elements get scaled with negative + factors. Check if that influences masking. You should see 4 green + rectangles with smaller blue rectangles in it in various rotations.</desc> +</g> +<defs> +<g id="img" transform="translate(10,10)"> + <rect width="200" height="200" fill="red"/> + <rect width="100" height="100" fill="green"/> + <rect width="50" height="50" fill="blue"/> +</g> +</defs> + +<mask id="mask"> + <rect x="10" y="10" width="90" height="90" fill="white"/> +</mask> + +<g transform="translate(200, 200)"> +<g transform="matrix(1 0 0 1 -100 -100)" mask="url(#mask)"> + <use xlink:href="#img"/> +</g> +<g transform="matrix(-1 0 0 -1 -100 -100)" mask="url(#mask)"> + <use xlink:href="#img"/> +</g> +<g transform="matrix(-1 0 0 1 -100 -100)" mask="url(#mask)"> + <use xlink:href="#img"/> +</g> +<g transform="matrix(1 0 0 -1 -100 -100)" mask="url(#mask)"> + <use xlink:href="#img"/> +</g> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-text-001.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-text-001.svg new file mode 100644 index 0000000000..28515105a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-text-001.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"> +<g id="testmeta"> + <title>CSS Masking: mask with transformed text content</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-text-001-ref.svg"/> + <html:link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <metadata class="flags">svg</metadata> + <desc class="assert">The masked target elements get scaled with negative + factors. Check if that influences masking. You should see 4 green + rectangles with smaller blue rectangles in it in various rotations.</desc> +</g> +<mask id="mask"> + <text fill="#fff" font-family="Ahem" font-size="12px" transform="rotate(90 50 50)" x="50%" y="50%">foobar</text> +</mask> +<rect width="100%" height="100%" x="0" y="0" mask="url(#mask)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-type-001.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-type-001.svg new file mode 100644 index 0000000000..9bcc40d55b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-type-001.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: mask without mask-type alpha</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-type"/> + <html:link rel="match" href="reference/mask-green-square-001-ref.svg"/> + <metadata class="flags">svg</metadata> + <desc class="assert">The mask type "alpha" is applied to the mask element. + The mask should take the alpha channel of the content to mask. You should + see a green square.</desc> +</g> +<mask id="mask" mask-type="alpha"> + <rect width="200" height="200" fill="black" opacity="0"/> + <rect x="50" y="50" width="100" height="100" fill="black"/> +</mask> +<rect width="200" height="200" fill="green" mask="url(#mask)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-type-002.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-type-002.svg new file mode 100644 index 0000000000..c298297329 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-type-002.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: mask without mask-type luminance</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-type"/> + <html:link rel="match" href="reference/mask-green-square-001-ref.svg"/> + <metadata class="flags">svg</metadata> + <desc class="assert">The mask type "alpha" is applied to the mask element. + The mask should take the luminocity of the content to mask. You should + see a green square.</desc> +</g> +<mask id="mask" mask-type="luminance"> + <rect width="200" height="200" fill="black"/> + <rect x="50" y="50" width="100" height="100" fill="white"/> +</mask> +<rect width="200" height="200" fill="green" mask="url(#mask)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-type-003.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-type-003.svg new file mode 100644 index 0000000000..891405dc46 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-type-003.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: mask without specified mask-type</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-type"/> + <html:link rel="match" href="reference/mask-green-square-001-ref.svg"/> + <metadata class="flags">svg</metadata> + <desc class="assert">No mask type was specified the mask element should + take the luminocity of the content to mask. You should see a green square. + </desc> +</g> +<mask id="mask"> + <rect width="200" height="200" fill="black"/> + <rect x="50" y="50" width="100" height="100" fill="white"/> +</mask> +<rect width="200" height="200" fill="green" mask="url(#mask)"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-with-filter-clipped-to-region.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-with-filter-clipped-to-region.svg new file mode 100644 index 0000000000..3307ce5101 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-with-filter-clipped-to-region.svg @@ -0,0 +1,26 @@ +<svg id="svg-root" + width="200" height="200" + xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>filter applied to element in mask, clipped by filter region</title> + <html:link rel="help" href="https://www.w3.org/TR/css-masking-1"/> + <html:link rel="match" href="reference/mask-green-square-001-ref.svg" /> + </g> + <defs> + <filter id="filter" x="0" y="0" width="1" height="1"> + <feGaussianBlur stdDeviation="0.001"/> + </filter> + + <mask id="maskFill" maskContentUnits="userSpaceOnUse"> + <rect x="25" y="25" width="50" height="50" stroke-width="50" fill="none" + stroke="white" filter="url(#filter)"/> + <rect x="25" y="25" width="50" height="50" fill="black"/> + </mask> + </defs> + + <g transform="translate(50, 50)"> + <rect width="100" height="100" fill="green" /> + <rect width="100" height="100" mask="url(#maskFill)" fill="red"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-with-filter.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-with-filter.svg new file mode 100644 index 0000000000..aaa383983f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-with-filter.svg @@ -0,0 +1,25 @@ +<svg id="svg-root" + width="200" height="200" + xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>'filters applied to masked elements</title> + <html:link rel="help" href="https://www.w3.org/TR/css-masking-1"/> + <html:link rel="match" href="reference/mask-green-square-001-ref.svg" /> + </g> + <defs> + <filter id="filter" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="0.001"/> + </filter> + + <mask id="maskFill" maskContentUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="white"/> + <rect x="49" y="49" width="2" height="2" stroke-width="100" fill="none" stroke="black" filter="url(#filter)"/> + </mask> + </defs> + + <g transform="translate(50, 50)"> + <rect width="100" height="100" fill="green" /> + <rect width="100" height="100" mask="url(#maskFill)" fill="red"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-with-rotation.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-with-rotation.svg new file mode 100644 index 0000000000..9964fd524a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/mask-with-rotation.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: mask with rotation transform</title> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/> + <html:link rel="match" href="reference/mask-green-square-001-ref.svg"/> + <metadata class="flags">svg</metadata> +</g> +<mask id="mask"> + <rect x="50" y="50" width="100" height="100" fill="white"/> +</mask> +<g transform="rotate(0.0001)" mask="url(#mask)"> + <rect transform="rotate(0.0001)" style="will-change: transform" + width="200" height="200" fill="green"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/reference/mask-green-square-001-ref.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/reference/mask-green-square-001-ref.svg new file mode 100644 index 0000000000..c83ec87e7b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/reference/mask-green-square-001-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <metadata class="flags">svg</metadata> +</g> +<rect x="50" y="50" width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/reference/mask-negative-scale-001-ref.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/reference/mask-negative-scale-001-ref.svg new file mode 100644 index 0000000000..1ed0513327 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/reference/mask-negative-scale-001-ref.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <metadata class="flags">svg</metadata> +</g> +<rect width="90" height="90" fill="green"/> +<rect x="40" y="40" width="50" height="50" fill="blue"/> +<rect x="110" width="90" height="90" fill="green"/> +<rect x="110" y="40" width="50" height="50" fill="blue"/> +<rect y="110" width="90" height="90" fill="green"/> +<rect x="40" y="110" width="50" height="50" fill="blue"/> +<rect x="110" y="110" width="90" height="90" fill="green"/> +<rect x="110" y="110" width="50" height="50" fill="blue"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-svg-content/reference/mask-text-001-ref.svg b/testing/web-platform/tests/css/css-masking/mask-svg-content/reference/mask-text-001-ref.svg new file mode 100644 index 0000000000..edaed2c200 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-svg-content/reference/mask-text-001-ref.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" + width="100px" height="100px"> +<g id="testmeta"> + <title>CSS Masking: Reftest reference</title> + <html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/> + <html:link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <metadata class="flags">svg</metadata> +</g> +<text fill="#000" font-family="Ahem" font-size="12px" transform="rotate(90 50 50)" x="50" y="50">foobar</text> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-computed.html b/testing/web-platform/tests/css/css-masking/parsing/clip-computed.html new file mode 100644 index 0000000000..a1a8ce1cb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: getComputedStyle().clip</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#clip-property"> +<meta name="assert" content="clip computed value is as specified, with lengths made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("clip", "auto"); +test_computed_value("clip", "rect(10px, 20px, -30px, 40px)"); +test_computed_value("clip", "rect(10px, 20px, calc(-1em + 10px), 1em)", "rect(10px, 20px, -30px, 40px)"); +test_computed_value("clip", "rect(10px, -20px, auto, auto)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/clip-invalid.html new file mode 100644 index 0000000000..d8b3868903 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing clip with invalid values</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#clip-property"> +<meta name="assert" content="clip supports only the grammar 'rect() | auto'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("clip", "none"); +test_invalid_value("clip", "rect(10px, 20px, 30px)"); +test_invalid_value("clip", "rect(10%, -20%, auto, auto)"); +test_invalid_value("clip", "rect(10px 20px, 30px 40px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-path-computed.html b/testing/web-platform/tests/css/css-masking/parsing/clip-path-computed.html new file mode 100644 index 0000000000..481c1140b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-path-computed.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: getComputedStyle().clipPath</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#clip-path-property"> +<meta name="assert" content="clip-path computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<style> + #target { + font-size: 40px; + } +</style> +<div id="target"></div> +<script> +test_computed_value("clip-path", "circle(calc(10px + 0.5em) at -50% 50%)", "circle(30px at -50% 50%)"); +test_computed_value("clip-path", "circle(calc(10px - 0.5em) at 50% -50%)", "circle(0px at 50% -50%)"); +test_computed_value("clip-path", "ellipse(at 50% 50%)"); +test_computed_value("clip-path", "ellipse(60% closest-side at 50% 50%)"); + +// All <basic-shape-rect> functions compute to the equivalent inset() function. +// Given "xywh(x y w h)", the equivalent function is +// "inset(y calc(100% - x - w) calc(100% - y - h) x)". +// https://drafts.csswg.org/css-shapes-1/#basic-shape-computed-values +// https://github.com/w3c/csswg-drafts/issues/9053 +test_computed_value("clip-path", "xywh(0 1% 2px 0.5em)", "inset(1% calc(100% - 2px) calc(99% - 20px) 0px)"); +test_computed_value("clip-path", "xywh(0px 1% 2px 0.5em round 0)", "inset(1% calc(100% - 2px) calc(99% - 20px) 0px)"); +test_computed_value("clip-path", "xywh(0px 1% 2px 3% round 0 1px)", "inset(1% calc(100% - 2px) 96% 0px round 0px 1px)"); +test_computed_value("clip-path", "xywh(0px 1% 2px 3% round 0px 1px 2em)", "inset(1% calc(100% - 2px) 96% 0px round 0px 1px 80px)"); +test_computed_value("clip-path", "xywh(0px 1% 2px 3% round 0px 1px 2% 3px)", "inset(1% calc(100% - 2px) 96% 0px round 0px 1px 2% 3px)"); +test_computed_value("clip-path", "xywh(calc(0px) calc(1px + 1%) calc(2px + 2%) calc(3px + 3%))", "inset(calc(1% + 1px) calc(98% - 2px) calc(96% - 4px) 0px)"); +// Given "rect(t r b l)", the equivalent function is +// "inset(t calc(100% - r) calc(100% - b) l)". +test_computed_value("clip-path", "rect(auto auto auto auto)", "inset(0%)"); +test_computed_value("clip-path", "rect(0 1% 2px 0.5em)", "inset(0px 99% calc(100% - 2px) 20px)"); +test_computed_value("clip-path", "rect(0px 1% auto 0.5em round 0)", "inset(0px 99% 0% 20px)"); +test_computed_value("clip-path", "rect(0px 1% auto 3% round 0 1px)", "inset(0px 99% 0% 3% round 0px 1px)"); +test_computed_value("clip-path", "rect(0px 1% auto 3% round 0px 1px 2em)", "inset(0px 99% 0% 3% round 0px 1px 80px)"); +test_computed_value("clip-path", "rect(0px 1% auto 3% round 0px 1px 2% 3px)", "inset(0px 99% 0% 3% round 0px 1px 2% 3px)"); +test_computed_value("clip-path", "rect(calc(0px) calc(1px + 1%) calc(2px + 2%) calc(3px + 3%))", "inset(0px calc(99% - 1px) calc(98% - 2px) calc(3% + 3px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-path-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/clip-path-invalid.html new file mode 100644 index 0000000000..40020d91d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-path-invalid.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing clip-path with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<meta name="assert" content="clip-path supports only the grammar '<clip-source> | [ <basic-shape> || <geometry-box> ] | none'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("clip-path", "auto"); +test_invalid_value("clip-path", "ray(0deg)"); + +test_invalid_value("clip-path", "inset()"); +test_invalid_value("clip-path", "inset(123)"); +test_invalid_value("clip-path", "inset(1% 2% 3% 4% 5%)"); +test_invalid_value("clip-path", "inset(round 0)"); +test_invalid_value("clip-path", "inset(0px round)"); +test_invalid_value("clip-path", "inset(0px round 123)"); +test_invalid_value("clip-path", "inset(0px round 1% 2% 3% 4% 5%)"); +test_invalid_value("clip-path", "inset(0px round / 1px)"); +test_invalid_value("clip-path", "inset(10px round -20px)"); +test_invalid_value("clip-path", "inset(30% round -40%)"); + +test_invalid_value("clip-path", "circle(123)"); +test_invalid_value("clip-path", "circle(at)"); +test_invalid_value("clip-path", "circle(10% 20%)"); +test_invalid_value("clip-path", "circle(-10px at 20px 30px)"); +test_invalid_value("clip-path", "circle(-10% at 20% 30%)"); +test_invalid_value("clip-path", "circle(1% 2% at 0% 100%)"); + +test_invalid_value("clip-path", "ellipse(farthest-side at)"); +test_invalid_value("clip-path", "ellipse(1% 2% top right)"); +test_invalid_value("clip-path", "ellipse(3%)"); +test_invalid_value("clip-path", "ellipse(3% at 100% 0%)"); +test_invalid_value("clip-path", "ellipse(closest-side)"); +test_invalid_value("clip-path", "ellipse(farthest-side at 100% 0%)"); +test_invalid_value("clip-path", "ellipse(10% -20% at 30% 40%)"); +test_invalid_value("clip-path", "ellipse(-50px 60px at 70% 80%)"); + +test_invalid_value("clip-path", "polygon(1%)"); + +test_invalid_value("clip-path", "unknown-box"); + +test_invalid_value("clip-path", 'path(" ")'); +test_invalid_value("clip-path", 'path(evenodd, "")'); +test_invalid_value("clip-path", 'path(abc, "m 20 0 h -100 z")'); +test_invalid_value("clip-path", 'path(nonzero)'); +test_invalid_value("clip-path", 'path("m 20 0 h -100", nonzero)'); + +test_invalid_value("clip-path", "xywh(0px)"); +test_invalid_value("clip-path", "xywh(0px 1%)"); +test_invalid_value("clip-path", "xywh(0px 1% 2em)"); + +test_invalid_value("clip-path", "rect(0px)"); +test_invalid_value("clip-path", "rect(0px 1%)"); +test_invalid_value("clip-path", "rect(0px 1% auto)"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-path-shape-parsing.html b/testing/web-platform/tests/css/css-masking/parsing/clip-path-shape-parsing.html new file mode 100644 index 0000000000..5e8eb8e117 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-path-shape-parsing.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<meta name="assert" content="clip-path supports the full shape() grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// basic +test_valid_value("clip-path", "shape(from 0px 0px, line to 10px 10px)"); +test_valid_value("clip-path", "shape(evenodd from 0px 0px, line to 10px 10px)"); +test_valid_value("clip-path", "shape(nonzero from 0px 0px, line to 10px 10px)", "shape(from 0px 0px, line to 10px 10px)"); +test_valid_value("clip-path", "shape( from 0px 0px, line to 10px 10px )", "shape(from 0px 0px, line to 10px 10px)"); +test_valid_value("clip-path", "shape(from 1em 50%, line to 10px 10px)"); +test_valid_value("clip-path", "shape(EvenOdd from 0px 0Px, CLOSE)", "shape(evenodd from 0px 0px, close)"); +test_valid_value("clip-path", "shape(from 1ch 50px, line to 10rem 10vh)"); +test_valid_value("clip-path", "shape(from 1ch -50px, line to -10% 12px)"); + +// segment types +test_valid_value("clip-path", "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)"); +test_valid_value("clip-path", "shape(from 10px 10px, hline by 10px, vline to 5rem)"); +test_valid_value("clip-path", "shape(from 10px 10px, vline by 5%, hline to 1vw)"); +test_valid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1%)"); +test_valid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1px 20vh 1ch)"); +test_valid_value("clip-path", "shape(from 10px 10px, curve by 50px 20px via 10rem 1px 20vh 1ch)"); +test_valid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 1%)"); +test_valid_value("clip-path", "shape(from 10px 10px, smooth to 50px 1pt)"); +test_valid_value("clip-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px)", "shape(from 10px 10px, arc to 50px 1pt of 10px)"); +test_valid_value("clip-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px small rotate 0deg)", "shape(from 10px 10px, arc to 50px 1pt of 10px)"); +test_valid_value("clip-path", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)"); +test_valid_value("clip-path", "shape(evenodd from 0px 0px, close)"); + +// nonsense +test_invalid_value("clip-path", "shape(evenodd from 0px 0px, close path)"); +test_invalid_value("clip-path", "shape(nonzero, from 0px 0px, line to 10px 10px)"); +test_invalid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px via 10rem)"); +test_invalid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1% 12px)"); +test_invalid_value("clip-path", "shape(from 10px 10px, hline byy 10px, vline to 5rem)"); +test_invalid_value("clip-path", "shape(from 10px 10px, vline by 5% hline by 1vw"); +test_invalid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem)"); +test_invalid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 2px 2pt)"); +test_invalid_value("clip-path", "shape()"); +test_invalid_value("clip-path", "shape(from)"); +test_invalid_value("clip-path", "shape(from 0px)"); +test_invalid_value("clip-path", "shape(from 0px 20px,)"); +test_invalid_value("clip-path", "shape(close)"); +test_invalid_value("clip-path", "shape(nonzero, close)"); +test_invalid_value("clip-path", "shape(from 0px 10px)"); +test_invalid_value("clip-path", "shape(allkindsofnonsense)"); +test_invalid_value("clip-path", "shape(arc)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-path-valid.html b/testing/web-platform/tests/css/css-masking/parsing/clip-path-valid.html new file mode 100644 index 0000000000..84555fd2d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-path-valid.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing clip-path with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> +<meta name="assert" content="clip-path supports the full grammar '<clip-source> | [ <basic-shape> || <geometry-box> ] | none'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("clip-path", "none"); + +// <basic-shape> +test_valid_value("clip-path", "inset(100%)"); +test_valid_value("clip-path", "inset(0 1px)", "inset(0px 1px)"); +test_valid_value("clip-path", "inset(0px 1px 2%)"); +test_valid_value("clip-path", "inset(0px 1px 2% 3em)"); +test_valid_value("clip-path", "inset(0px round 100%)"); +test_valid_value("clip-path", "inset(0px round 0 1px)", "inset(0px round 0px 1px)"); +test_valid_value("clip-path", "inset(0px round 0px 1px 2%)"); +test_valid_value("clip-path", "inset(0px round 0px 1px 2% 3em)"); +test_valid_value("clip-path", "inset(10px round 20% / 0px 1px 2% 3em)"); + +test_valid_value("clip-path", "circle()"); +test_valid_value("clip-path", "circle(1px)", "circle(1px)"); +test_valid_value("clip-path", "circle(closest-side)", "circle()"); +test_valid_value("clip-path", "circle(at 10% 20%)"); +test_valid_value("clip-path", "circle(farthest-side at center top)", "circle(farthest-side at 50% 0%)"); +test_valid_value("clip-path", "circle(4% at top right)", "circle(4% at 100% 0%)"); + +test_valid_value("clip-path", "ellipse()"); +test_valid_value("clip-path", "ellipse(1px closest-side)"); +test_valid_value("clip-path", "ellipse(at 10% 20%)"); +test_valid_value("clip-path", "ellipse(closest-side closest-side at 10% 20%)", "ellipse(at 10% 20%)"); +test_valid_value("clip-path", "ellipse(farthest-side 4% at bottom left)", "ellipse(farthest-side 4% at 0% 100%)"); + +test_valid_value("clip-path", "polygon(1% 2%)"); +test_valid_value("clip-path", "polygon(nonzero, 1px 2px, 3em 4em)", "polygon(1px 2px, 3em 4em)"); +test_valid_value("clip-path", "polygon(evenodd, 1px 2px, 3em 4em, 5pt 6%)"); + +// New supported shape in [css-shapes-2] +// https://drafts.csswg.org/css-shapes-2/#supported-basic-shapes +test_valid_value("clip-path", 'path("m 20 0 h -100")'); +test_valid_value("clip-path", 'path(evenodd, "M 20 20 h 60 v 60 h -60 Z M 30 30 h 40 v 40 h -40 Z")'); +test_valid_value("clip-path", + 'path(nonzero, "M20,20h60 v60 h-60z M30,30 h40 v40 h-40z")', + 'path("M 20 20 h 60 v 60 h -60 Z M 30 30 h 40 v 40 h -40 Z")'); + +test_valid_value("clip-path", "xywh(0 1% 2px 3em)", "xywh(0px 1% 2px 3em)"); +test_valid_value("clip-path", "xywh(0px 1% 2px 3em round 0)", "xywh(0px 1% 2px 3em)"); +test_valid_value("clip-path", "xywh(0px 1% 2px 3em round 0 1px)", "xywh(0px 1% 2px 3em round 0px 1px)"); +test_valid_value("clip-path", "xywh(0px 1% 2px 3em round 0px 1px 2%)"); +test_valid_value("clip-path", "xywh(0px 1% 2px 3em round 0px 1px 2% 3em)"); + +test_valid_value("clip-path", "rect(0 100% 200px 4em)", "rect(0px 100% 200px 4em)"); +test_valid_value("clip-path", "rect(auto auto auto auto)"); +test_valid_value("clip-path", "rect(0px 100% auto 4em round 0)", "rect(0px 100% auto 4em)"); +test_valid_value("clip-path", "rect(0px 100% auto 4em round 0 1px)", "rect(0px 100% auto 4em round 0px 1px)"); +test_valid_value("clip-path", "rect(0px 100% auto 4em round 0px 1px 2%)"); +test_valid_value("clip-path", "rect(0px 100% auto 4em round 0px 1px 2% 3em)"); + +// <geometry-box> +test_valid_value("clip-path", "border-box"); +test_valid_value("clip-path", "padding-box"); +test_valid_value("clip-path", "content-box"); +test_valid_value("clip-path", "margin-box"); +test_valid_value("clip-path", "fill-box"); +test_valid_value("clip-path", "stroke-box"); +test_valid_value("clip-path", "view-box"); + +// <basic-shape> <geometry-box> +test_valid_value("clip-path", "circle(7% at 8% 9%) border-box", "circle(7% at 8% 9%)"); + +// <geometry-box> <basic-shape> +test_valid_value("clip-path", "border-box circle(7% at 8% 9%)", "circle(7% at 8% 9%)"); + +// <clip-source> +test_valid_value("clip-path", "url(https://example.com/)", ["url(https://example.com/)", "url(\"https://example.com/\")"]); +test_valid_value("clip-path", "url(\"https://example.com/\")", ["url(https://example.com/)", "url(\"https://example.com/\")"]); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-rule-computed.html b/testing/web-platform/tests/css/css-masking/parsing/clip-rule-computed.html new file mode 100644 index 0000000000..533b7dc0f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-rule-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: getComputedStyle().clipRule</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-rule"> +<meta name="assert" content="clip-rule computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("clip-rule", "nonzero"); +test_computed_value("clip-rule", "evenodd"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-rule-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/clip-rule-invalid.html new file mode 100644 index 0000000000..4f4883e8a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-rule-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing clip-rule with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-rule"> +<meta name="assert" content="clip-rule supports only the grammar 'nonzero | evenodd'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("clip-rule", "auto"); +test_invalid_value("clip-rule", "1"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-rule-valid.html b/testing/web-platform/tests/css/css-masking/parsing/clip-rule-valid.html new file mode 100644 index 0000000000..fe94f8f6c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-rule-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing clip-rule with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-rule"> +<meta name="assert" content="clip-rule supports the full grammar 'nonzero | evenodd'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("clip-rule", "nonzero"); +test_valid_value("clip-rule", "evenodd"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-valid.html b/testing/web-platform/tests/css/css-masking/parsing/clip-valid.html new file mode 100644 index 0000000000..d60802b897 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing clip with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#clip-property"> +<meta name="assert" content="clip supports the full grammar 'rect() | auto'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("clip", "auto"); +test_valid_value("clip", "rect(10px, 20px, -30px, 40px)"); +test_valid_value("clip", "rect(10px, -20px, auto, auto)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-composite-computed.html b/testing/web-platform/tests/css/css-masking/parsing/mask-composite-computed.html new file mode 100644 index 0000000000..d2b9a4a606 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-composite-computed.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: getComputedStyle().maskComposite</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-composite"> +<meta name="assert" content="mask-composite computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("mask-composite", "add"); +test_computed_value("mask-composite", "subtract"); +test_computed_value("mask-composite", "intersect"); +test_computed_value("mask-composite", "exclude"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-composite-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/mask-composite-invalid.html new file mode 100644 index 0000000000..9dc4df163c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-composite-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing mask-composite with invalid values</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-composite"> +<meta name="assert" content="mask-composite supports only the grammar '<compositing-operator>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("mask-composite", "auto"); +test_invalid_value("mask-composite", "add subtract"); +test_invalid_value("mask-composite", "clear"); +test_invalid_value("mask-composite", "copy"); +test_invalid_value("mask-composite", "source-over"); +test_invalid_value("mask-composite", "source-in"); +test_invalid_value("mask-composite", "source-out"); +test_invalid_value("mask-composite", "source-atop"); +test_invalid_value("mask-composite", "destination-over"); +test_invalid_value("mask-composite", "destination-in"); +test_invalid_value("mask-composite", "destination-out"); +test_invalid_value("mask-composite", "destination-atop"); +test_invalid_value("mask-composite", "xor"); +test_invalid_value("mask-composite", "plus-lighter"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-composite-valid.html b/testing/web-platform/tests/css/css-masking/parsing/mask-composite-valid.html new file mode 100644 index 0000000000..385726c17a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-composite-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing mask-composite with valid values</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-composite"> +<meta name="assert" content="mask-composite supports the full grammar '<compositing-operator>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("mask-composite", "add"); +test_valid_value("mask-composite", "subtract"); +test_valid_value("mask-composite", "intersect"); +test_valid_value("mask-composite", "exclude"); +test_valid_value("mask-composite", "add, subtract"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-computed.html b/testing/web-platform/tests/css/css-masking/parsing/mask-computed.html new file mode 100644 index 0000000000..28fc38defa --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-computed.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: getComputedStyle().mask</title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask"> +<meta name="assert" content="mask computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +// value: <mask-layer># +// <mask-layer> = +// <mask-reference> || +// <position> [ / <bg-size> ]? || +// <repeat-style> || +// <geometry-box> || +// [ <geometry-box> | no-clip ] || +// <compositing-operator> || +// <masking-mode> + +// <mask-reference> = none | <image> | <mask-source> +test_computed_value('mask', 'none'); +test_computed_value('mask', + 'linear-gradient(to left bottom, red, blue)', + 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255))'); +test_computed_value('mask', + 'linear-gradient(to left bottom, red, blue) luminance', + 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255)) luminance'); +test_computed_value('mask', 'url("https://example.com/")'); + +// <position> [ / <bg-size> ]? +test_computed_value('mask', + 'linear-gradient(to left bottom, red, blue) 1px 2px', + 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255)) 1px 2px'); +test_computed_value('mask', 'url("https://example.com/") 1px 2px / contain'); + +// <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} +test_computed_value('mask', 'repeat-y'); + +// <geometry-box> = <shape-box> | fill-box | stroke-box | view-box +// <shape-box> = <box> +// <box> = border-box | padding-box | content-box +test_computed_value('mask', 'border-box', 'none'); +test_computed_value('mask', + 'linear-gradient(to left bottom, red, blue) padding-box', + 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255)) padding-box'); +test_computed_value('mask', 'content-box'); +test_computed_value('mask', 'url("https://example.com/") fill-box'); +test_computed_value('mask', + 'linear-gradient(to left bottom, red, blue) stroke-box', + 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255)) stroke-box'); +test_computed_value('mask', 'view-box'); + +// [ <geometry-box> | no-clip ] +test_computed_value('mask', 'no-clip'); + +// <compositing-operator> = add | subtract | intersect | exclude +test_computed_value('mask', + 'url("https://example.com/") add', + 'url("https://example.com/")'); +test_computed_value('mask', 'subtract'); +test_computed_value('mask', 'url("https://example.com/") intersect'); +test_computed_value('mask', + 'linear-gradient(to left bottom, red, blue) exclude', + 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255)) exclude'); + +// <masking-mode> = alpha | luminance | auto +test_computed_value('mask', 'alpha'); +test_computed_value('mask', 'url("https://example.com/") alpha'); + +// Test the combination of mask-origin and mask-clip. +test_computed_value('mask', 'border-box border-box', 'none'); +test_computed_value('mask', 'content-box content-box', 'content-box'); +test_computed_value('mask', 'border-box content-box', 'border-box content-box'); +test_computed_value('mask', 'border-box no-clip', 'no-clip'); + +// <mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || +// <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode> +test_computed_value('mask', + 'intersect no-clip space round 1px 2px / contain stroke-box linear-gradient(to left bottom, red, blue) luminance', + 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255)) 1px 2px / contain space round stroke-box no-clip intersect luminance'); +test_computed_value('mask', + 'intersect no-clip space round 1px 2px / contain view-box, stroke-box linear-gradient(to left bottom, red, blue) luminance', + '1px 2px / contain space round view-box no-clip intersect, linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255)) stroke-box luminance'); + +test_computed_value('mask', 'none alpha', 'alpha'); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/mask-invalid.html new file mode 100644 index 0000000000..f9999ca982 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-invalid.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing mask with invalid values</title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask"> +<meta name="assert" content="mask supports only the '<mask-layer>#' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value('mask', 'none linear-gradient(to 0% 0%, rgb(0, 0, 0), rgb(0, 0, 255))'); +test_invalid_value('mask', 'none alpha luminance'); +test_invalid_value('mask', 'linear-gradient(to 0% 0%, rgb(0, 0, 0), rgb(0, 0, 255)) url("https://example.com/")'); + +test_invalid_value('mask', '1px 2px 3px'); +test_invalid_value('mask', '1px 2px 3px 4px'); +test_invalid_value('mask', '1px 2px / contain / cover'); + +test_invalid_value('mask', 'repeat-y repeat-x'); + +test_invalid_value('mask', 'stroke-box no-clip view-box'); + +test_invalid_value('mask', 'border-box view-box padding-box'); + +test_invalid_value('mask', 'no-clip border-box content-box'); + +test_invalid_value('mask', 'content-box stroke-box no-clip'); + +test_invalid_value('mask', 'margin-box'); + +test_invalid_value('mask', 'add intersect'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-position-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/mask-position-invalid.html new file mode 100644 index 0000000000..c246a1e795 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-position-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing mask-position with invalid values</title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> +<meta name="assert" content="mask-position supports only the '<position>#' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("mask-position", "auto"); +test_invalid_value("mask-position", "1px 2px 3px"); +test_invalid_value("mask-position", "left right"); +test_invalid_value("mask-position", "bottom 10%"); +test_invalid_value("mask-position", "bottom 10% top 20%"); + +test_invalid_value("mask-position", "center left 1px"); +test_invalid_value("mask-position", "center top 2px"); +test_invalid_value("mask-position", "right 3% center"); +test_invalid_value("mask-position", "left 4px top"); +test_invalid_value("mask-position", "right top 5px"); +test_invalid_value("mask-position", "bottom 6% center"); +test_invalid_value("mask-position", "bottom 7% left"); +test_invalid_value("mask-position", "bottom right 8%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-position-valid.html b/testing/web-platform/tests/css/css-masking/parsing/mask-position-valid.html new file mode 100644 index 0000000000..32e00c6d6b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-position-valid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing mask-position with valid values</title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> +<meta name="assert" content="mask-position supports the full '<position>#' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("mask-position", "10%", "10% center"); +test_valid_value("mask-position", "right 30% top 60px"); +test_valid_value("mask-position", "-20% -30px"); +test_valid_value("mask-position", "30px center"); +test_valid_value("mask-position", "40px top"); +test_valid_value("mask-position", "bottom 10% right 20%", "right 20% bottom 10%"); +test_valid_value("mask-position", "bottom right", "right bottom"); +test_valid_value("mask-position", "center 50px"); +test_valid_value("mask-position", "center bottom"); +test_valid_value("mask-position", "center left", "left center"); +test_valid_value("mask-position", "left", "left center"); +test_valid_value("mask-position", "left bottom"); +test_valid_value("mask-position", "right 40%"); +test_valid_value("mask-position", "top", "center top"); +test_valid_value("mask-position", "top center", "center top"); +test_valid_value("mask-position", "center", "center center"); +test_valid_value("mask-position", "bottom left, right 20%", "left bottom, right 20%"); +test_valid_value("mask-position", "top, center, left", "center top, center center, left center"); +test_valid_value("mask-position", "20% 0%"); +test_valid_value("mask-position", "0% 0%"); +test_valid_value("mask-position", "0%", "0% center"); +test_valid_value("mask-position", "0% center"); +test_valid_value("mask-position", "center 0%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-repeat-computed.html b/testing/web-platform/tests/css/css-masking/parsing/mask-repeat-computed.html new file mode 100644 index 0000000000..0ecb9aa573 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-repeat-computed.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: getComputedStyle().maskRepeat</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-repeat"> +<meta name="assert" content="mask-repeat computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> + test_computed_value("mask-repeat", "repeat-x"); + test_computed_value("mask-repeat", "repeat-y"); + + test_computed_value("mask-repeat", "repeat"); + test_computed_value("mask-repeat", "space"); + test_computed_value("mask-repeat", "round"); + test_computed_value("mask-repeat", "no-repeat"); + + test_computed_value("mask-repeat", "repeat repeat", "repeat"); + test_computed_value("mask-repeat", "repeat space"); + test_computed_value("mask-repeat", "repeat round"); + test_computed_value("mask-repeat", "repeat no-repeat", "repeat-x"); + + test_computed_value("mask-repeat", "space repeat"); + test_computed_value("mask-repeat", "space space", "space"); + test_computed_value("mask-repeat", "space round"); + test_computed_value("mask-repeat", "space no-repeat"); + + test_computed_value("mask-repeat", "round repeat"); + test_computed_value("mask-repeat", "round space"); + test_computed_value("mask-repeat", "round round", "round"); + test_computed_value("mask-repeat", "round no-repeat"); + + test_computed_value("mask-repeat", "no-repeat repeat", "repeat-y"); + test_computed_value("mask-repeat", "no-repeat space"); + test_computed_value("mask-repeat", "no-repeat round"); + test_computed_value("mask-repeat", "no-repeat no-repeat", "no-repeat"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-repeat-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/mask-repeat-invalid.html new file mode 100644 index 0000000000..8a0f4e892a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-repeat-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing mask-repeat with invalid values</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-repeat"> +<meta name="assert" content="mask-repeat supports only the grammar."> +<!-- +<mask-repeat> = <repeat-style># +<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} + --> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("mask-repeat", "auto"); +test_invalid_value("mask-repeat", "repeat-z"); +test_invalid_value("mask-repeat", "repeat undefined"); +test_invalid_value("mask-repeat", "undefined repeat"); +test_invalid_value("mask-repeat", "repeat; round"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-repeat-valid.html b/testing/web-platform/tests/css/css-masking/parsing/mask-repeat-valid.html new file mode 100644 index 0000000000..1d75a1bcb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-repeat-valid.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing mask-repeat with valid values</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-repeat"> +<meta name="assert" content="mask-repeat supports the full grammar."> +<!-- +<mask-repeat> = <repeat-style># +<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} + --> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("mask-repeat", "repeat-x"); +test_valid_value("mask-repeat", "repeat-y"); + +test_valid_value("mask-repeat", "repeat"); +test_valid_value("mask-repeat", "space"); +test_valid_value("mask-repeat", "round"); +test_valid_value("mask-repeat", "no-repeat"); + +test_valid_value("mask-repeat", "repeat repeat", "repeat"); +test_valid_value("mask-repeat", "repeat space"); +test_valid_value("mask-repeat", "repeat round"); +test_valid_value("mask-repeat", "repeat no-repeat", "repeat-x"); + +test_valid_value("mask-repeat", "space repeat"); +test_valid_value("mask-repeat", "space space", "space"); +test_valid_value("mask-repeat", "space round"); +test_valid_value("mask-repeat", "space no-repeat"); + +test_valid_value("mask-repeat", "round repeat"); +test_valid_value("mask-repeat", "round space"); +test_valid_value("mask-repeat", "round round", "round"); +test_valid_value("mask-repeat", "round no-repeat"); + +test_valid_value("mask-repeat", "no-repeat repeat", "repeat-y"); +test_valid_value("mask-repeat", "no-repeat space"); +test_valid_value("mask-repeat", "no-repeat round"); +test_valid_value("mask-repeat", "no-repeat no-repeat", "no-repeat"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-type-computed.html b/testing/web-platform/tests/css/css-masking/parsing/mask-type-computed.html new file mode 100644 index 0000000000..0fd02c8b4f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-type-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: getComputedStyle().maskType</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-type"> +<meta name="assert" content="mask-type computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("mask-type", "luminance"); +test_computed_value("mask-type", "alpha"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-type-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/mask-type-invalid.html new file mode 100644 index 0000000000..56451d2879 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-type-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing mask-type with invalid values</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-type"> +<meta name="assert" content="mask-type supports only the grammar 'luminance | alpha'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("mask-type", "auto"); +test_invalid_value("mask-type", "luminance alpha"); +test_invalid_value("mask-type", "alpha, luminance"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-type-valid.html b/testing/web-platform/tests/css/css-masking/parsing/mask-type-valid.html new file mode 100644 index 0000000000..31a528381a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-type-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing mask-type with valid values</title> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-type"> +<meta name="assert" content="mask-type supports the full grammar 'luminance | alpha'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("mask-type", "luminance"); +test_valid_value("mask-type", "alpha"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/mask-valid.sub.html b/testing/web-platform/tests/css/css-masking/parsing/mask-valid.sub.html new file mode 100644 index 0000000000..c4d2d4eb2c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-valid.sub.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masking Module Level 1: parsing mask with valid values</title> +<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask"> +<meta name="assert" content="mask supports the full '<mask-layer>#' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +// <mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || +// <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode> + +// <mask-reference> = none | <image> | <mask-source> +test_valid_value('mask', 'none'); +test_valid_value('mask', 'linear-gradient(to left bottom, red, blue)'); +test_valid_value('mask', 'linear-gradient(to left bottom, red, blue) luminance'); +test_valid_value('mask', 'url("https://{{host}}/")'); + +// <position> [ / <bg-size> ]? +test_valid_value('mask', 'linear-gradient(to left bottom, red, blue) 1px 2px'); +test_valid_value('mask', 'url("https://{{host}}/") 1px 2px / contain'); + +// <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} +test_valid_value('mask', 'repeat-y'); + +// <geometry-box> = <shape-box> | fill-box | stroke-box | view-box +// <shape-box> = <box> +// <box> = border-box | padding-box | content-box +test_valid_value('mask', 'border-box', 'none'); +test_valid_value('mask', 'linear-gradient(to left bottom, red, blue) padding-box'); +test_valid_value('mask', 'content-box'); +test_valid_value('mask', 'url("https://{{host}}/") fill-box'); +test_valid_value('mask', 'linear-gradient(to left bottom, red, blue) stroke-box'); +test_valid_value('mask', 'view-box'); + +// [ <geometry-box> | no-clip ] +test_valid_value('mask', 'no-clip'); + +// <compositing-operator> = add | subtract | intersect | exclude +test_valid_value('mask', 'url("https://{{host}}/") add', 'url("https://{{host}}/")'); +test_valid_value('mask', 'subtract'); +test_valid_value('mask', 'url("https://{{host}}/") intersect'); +test_valid_value('mask', 'linear-gradient(to left bottom, red, blue) exclude'); + +// <masking-mode> = alpha | luminance | auto +test_valid_value('mask', 'alpha'); +test_valid_value('mask', 'url("https://{{host}}/") alpha'); + +// Test the combination of mask-origin and mask-clip. +test_valid_value('mask', 'border-box border-box', 'none'); +test_valid_value('mask', 'content-box content-box', 'content-box'); +test_valid_value('mask', 'border-box content-box', 'border-box content-box'); +test_valid_value('mask', 'border-box no-clip', 'no-clip'); + +// <mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || +// <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode> +test_valid_value('mask', + 'intersect no-clip space round 1px 2px / contain stroke-box linear-gradient(to left bottom, red, blue) luminance', + 'linear-gradient(to left bottom, red, blue) 1px 2px / contain space round stroke-box no-clip intersect luminance'); +test_valid_value('mask', + 'intersect no-clip space round 1px 2px / contain view-box, stroke-box linear-gradient(to left bottom, red, blue) luminance', + '1px 2px / contain space round view-box no-clip intersect, linear-gradient(to left bottom, red, blue) stroke-box luminance'); + +// Earlier versions of the mask shorthand always required a <mask-reference>. +// To avoid unnecessarily losing test coverage, keep one of the test cases from back then. +test_valid_value('mask', 'none alpha', 'alpha'); + +test_shorthand_value('mask', 'none', { + 'mask-image': 'none', + 'mask-position': '0% 0%', + 'mask-size': 'auto', + 'mask-repeat': 'repeat', + 'mask-origin': 'border-box', + 'mask-clip': 'border-box', + 'mask-composite': 'add', + 'mask-mode': 'match-source', + 'mask-border-source': 'none', + 'mask-border-outset': '0', + 'mask-border-repeat': 'stretch', + 'mask-border-slice': '0', + 'mask-border-width': 'auto' +}) +test_shorthand_value('mask', 'none, linear-gradient(to left bottom, red, blue) padding-box', { + 'mask-image': 'none, linear-gradient(to left bottom, red, blue)', + 'mask-position': '0% 0%, 0% 0%', + 'mask-size': 'auto, auto', + 'mask-repeat': 'repeat, repeat', + 'mask-origin': 'border-box, padding-box', + 'mask-clip': 'border-box, padding-box', + 'mask-composite': 'add, add', + 'mask-mode': 'match-source, match-source', + 'mask-border-source': 'none', + 'mask-border-outset': '0', + 'mask-border-repeat': 'stretch', + 'mask-border-slice': '0', + 'mask-border-width': 'auto' +}) + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/resources/blue-20.png b/testing/web-platform/tests/css/css-masking/resources/blue-20.png Binary files differnew file mode 100644 index 0000000000..c464c75eec --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/resources/blue-20.png diff --git a/testing/web-platform/tests/css/css-masking/resources/green-20.png b/testing/web-platform/tests/css/css-masking/resources/green-20.png Binary files differnew file mode 100644 index 0000000000..738d1db846 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/resources/green-20.png diff --git a/testing/web-platform/tests/css/css-masking/resources/stripes-20.png b/testing/web-platform/tests/css/css-masking/resources/stripes-20.png Binary files differnew file mode 100644 index 0000000000..de30887ea3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/resources/stripes-20.png |
