diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-masking')
14 files changed, 263 insertions, 48 deletions
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 index ad3e2a0bdb..638e133c26 100644 --- 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 @@ -1,10 +1,10 @@ <!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"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#interpolating-shape"> +<meta name="assert" content="clip-path supports animation for shape()"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> @@ -83,7 +83,6 @@ test_no_interpolation({ to: 'shape(from 10px 10px, close)', }); - test_interpolation({ property: 'clip-path', from: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)', @@ -116,6 +115,7 @@ test_interpolation({ {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, expect: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)'}, {at: 1.5, expect: 'shape(from 20% 20px, curve by 25% -5px via 15% 50px, curve by 15% 35px via 35% 35px -20% 115px)'}, ]); @@ -127,6 +127,7 @@ test_interpolation({ {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, expect: 'shape(from 15% 15px, smooth to 20% 0px via 10% 60px, smooth to 20% 30px)'}, {at: 1.5, expect: 'shape(from 20% 20px, smooth to 25% -5px via 15% 50px, smooth to 15% 35px)'}, ]); @@ -138,6 +139,7 @@ test_interpolation({ {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, expect: 'shape(from 15% 15px, smooth by 20% 0px via 10% 60px, smooth by 20% 30px)'}, {at: 1.5, expect: 'shape(from 20% 20px, smooth by 25% -5px via 15% 50px, smooth by 15% 35px)'}, ]); @@ -149,14 +151,14 @@ test_interpolation({ {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: 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 large, 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)', + from: 'shape(from 5px -5%, hline to 10px, vline by 10rem, hline by 8.25px, 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)'}, @@ -166,5 +168,115 @@ test_interpolation({ {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)'}, ]); +test_no_interpolation({ + property: 'clip-path', + from: 'shape(from 10px 10px, move to 10% 10%)', + to: 'path("M10 10 z")', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'path("M10 10 M10 10")', + to: 'shape(from 10px 10px, close)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'path("M10 10 h 5")', + to: 'shape(from 10px 10px, hline to 5px)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'shape(nonzero from 10px 10px, move to 10% 10%)', + to: 'path(evenodd, "M0 0 M20 20")', +}); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)', + to: 'path("M 15 15 H 25 V -15 Z")', +}, [ + {at: -0.3, expect: 'shape(from 2px 2px, hline to -1px, vline to -2px, close)'}, + {at: 0, expect: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)'}, + {at: 0.5, expect: 'shape(from 10px 10px, hline to 15px, vline to -10px, close)'}, + {at: 1, expect: 'shape(from 15px 15px, hline to 25px, vline to -15px, close)'}, + {at: 1.5, expect: 'shape(from 20px 20px, hline to 35px, 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: 'path("M 15 15 Q 10 60 20 0 C 30 40 -5 100 20 30")', +}, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, curve to calc(13% - 6px) 13px via calc(0% - 3px) 86px, curve to calc(39% - 6px) 17px via calc(26% - 9px) 53px calc(32.5% + 1.5px) 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 calc(2.5% + 7.5px) 10px, curve to calc(5% + 10px) 5px via calc(0% + 5px) 70px, curve to calc(15% + 10px) 25px via calc(10% + 15px) 45px calc(12.5% - 2.5px) 85px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, curve to calc(0% + 20px) 0px via calc(0% + 10px) 60px, curve to calc(0% + 20px) 30px via calc(0% + 30px) 40px calc(0% - 5px) 100px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, curve to calc(-5% + 30px) -5px via calc(0% + 15px) 50px, curve to calc(-15% + 30px) 35px via calc(-10% + 45px) 35px calc(-12.5% - 7.5px) 115px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'path("M 5 5 q 0 80 10 10 c 20 50 25 70 30 20")', + 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 calc(-4.5% + 6.5px) 2px, curve by calc(-6% + 13px) 13px via -3% 86px, curve by calc(-6% + 39px) 17px via calc(-9% + 26px) 53px calc(1.5% + 32.5px) 61px)'}, + {at: 0, expect: 'shape(from calc(0% + 5px) 5px, curve by calc(0% + 10px) 10px via 0% 80px, curve by calc(0% + 30px) 20px via calc(0% + 20px) 50px calc(0% + 25px) 70px)'}, + {at: 0.5, expect: 'shape(from calc(7.5% + 2.5px) 10px, curve by calc(10% + 5px) 5px via 5% 70px, curve by calc(10% + 15px) 25px via calc(15% + 10px) 45px calc(-2.5% + 12.5px) 85px)'}, + {at: 1, expect: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)'}, + {at: 1.5, expect: 'shape(from calc(22.5% - 2.5px) 20px, curve by calc(30% - 5px) -5px via 15% 50px, curve by calc(30% - 15px) 35px via calc(45% - 10px) 35px calc(-7.5% - 12.5px) 115px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)', + to: 'path("M 15 15 S 10 60 20 0 T 20 30")', +}, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, smooth to calc(13% - 6px) 13px via calc(0% - 3px) 86px, smooth to calc(39% - 6px) 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 calc(2.5% + 7.5px) 10px, smooth to calc(5% + 10px) 5px via calc(0% + 5px) 70px, smooth to calc(15% + 10px) 25px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, smooth to calc(0% + 20px) 0px via calc(0% + 10px) 60px, smooth to calc(0% + 20px) 30px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, smooth to calc(-5% + 30px) -5px via calc(0% + 15px) 50px, smooth to calc(-15% + 30px) 35px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'path("M 5 5 s 0 80 10 10 t 30 20")', + to: 'shape(from 15px 15px, smooth by 20px 0px via 10px 60px, smooth by 20px 30px)', +}, [ + {at: -0.3, expect: 'shape(from 2px 2px, smooth by 7px 13px via -3px 86px, smooth by 33px 17px)'}, + {at: 0, expect: 'shape(from 5px 5px, smooth by 10px 10px via 0px 80px, smooth by 30px 20px)'}, + {at: 0.5, expect: 'shape(from 10px 10px, smooth by 15px 5px via 5px 70px, smooth by 25px 25px)'}, + {at: 1, expect: 'shape(from 15px 15px, smooth by 20px 0px via 10px 60px, smooth by 20px 30px)'}, + {at: 1.5, expect: 'shape(from 20px 20px, smooth by 25px -5px via 15px 50px, smooth by 15px 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: 'path("M 15 15 A 20,30 0 0,0 5,-25 a 20,20 270 0,1 25,-15 A 10,5 0 0,0 25 20")', +}, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, arc to calc(19.5% - 1.5px) -12px of 7px 17px, arc by calc(19.5% - 7.5px) -2px of 33px cw large rotate -42deg, arc to calc(32.5% - 7.5px) 20px of 10px 5px)'}, + {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 calc(3.5% + 4.5px) 8px, arc to calc(10.5% + 1.5px) -18px of 13px 23px, arc by calc(10.5% + 7.5px) -8px of 27px cw large rotate 102deg, arc to calc(17.5% + 7.5px) 20px of 10px 5px)'}, + {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, arc to calc(7.5% + 2.5px) -20px of 15px 25px, arc by calc(7.5% + 12.5px) -10px of 25px cw large rotate 150deg, arc to calc(12.5% + 12.5px) 20px of 10px 5px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, arc to calc(0% + 5px) -25px of 20px 30px, arc by calc(0% + 25px) -15px of 20px cw rotate 270deg, arc to calc(0% + 25px) 20px of 10px 5px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, arc to calc(-7.5% + 7.5px) -30px of 25px 35px, arc by calc(-7.5% + 37.5px) -20px of 15px cw rotate 390deg, arc to calc(-12.5% + 37.5px) 20px of 10px 5px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'path("M 5 5 A 10,20 0 0,0 15,-15 a 30,30 30 1,1 15,-5 A 10,5 0 0,0 25 20")', + to: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px cw rotate 270deg small, arc to 25px 20px of 10px 5px small cw)' +}, [ + {at: -0.3, expect: 'shape(from 2px 2px, arc to 18px -12px of 7px 17px ccw small, arc by 12px -2px of 33px 33px rotate -42deg cw large , arc to 25px 20px of 10px 5px ccw small)'}, + {at: 0, expect: 'shape(from 5px 5px, arc to 15px -15px of 10px 20px, arc by 15px -5px of 30px cw rotate 30deg large, arc to 25px 20px of 10px 5px small)'}, + {at: 0.3, expect: 'shape(from 8px 8px, arc to 12px -18px of 13px 23px ccw small, arc by 18px -8px of 27px 27px rotate 102deg cw large, arc to 25px 20px of 10px 5px ccw small )'}, + {at: 0.5, expect: 'shape(from 10px 10px, arc to 10px -20px of 15px 25px ccw small, arc by 20px -10px of 25px rotate 150deg cw large, arc to 25px 20px of 10px 5px cw small)'}, + {at: 1, expect: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px rotate 270deg cw small, arc to 25px 20px of 10px 5px cw small)'}, + {at: 1.5, expect: 'shape(from 20px 20px, arc to 0px -30px of 25px 35px ccw small, arc by 30px -20px of 15px rotate 390deg cw small, arc to 25px 20px of 10px 5px cw small)'}, +]); + </script> </body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-003.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-003.html new file mode 100644 index 0000000000..1324aad97f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Masking: Test clip-path interpolation from shape() to path()</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 + shape and 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: path(nonzero, "M50 50 h50 v50 h-50 z M20 20 h50 v50 h-50 z"); + } + } + #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-004.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-004.html new file mode 100644 index 0000000000..69bec3c097 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Masking: Test clip-path interpolation from path() to shape()</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 and shape function."> + <style> + @keyframes anim { + from { + clip-path: path(evenodd, "M20 20 h60 v60 h-60 z M30 30 h40 v40 h-40 z"); + } + 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/clip-path-path-with-zoom-hittest.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html index 30ceefcbc0..ff85e8ff80 100644 --- 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 @@ -10,7 +10,7 @@ width: 100px; height: 100px; background-color: green; - clip-path: path(nonzero, 'M0 0, L100 0, L0 100, L 0 0'); + clip-path: path(nonzero, 'M0,0 L100,0 L0,100 L0,0'); zoom: 2; } </style> 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 index 5879917f36..981519d22b 100644 --- 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 @@ -15,7 +15,7 @@ width: 100px; height: 100px; background-color: green; - clip-path: path(nonzero, 'M0 0, L100 0, L0 100, L 0 0'); + clip-path: path(nonzero, 'M0,0 L100,0 L0,100 L0,0'); zoom: 2; } </style> 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 index c92702d8e7..03e1b21d17 100644 --- 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 @@ -14,32 +14,32 @@ </clipPath> <g clip-path="url(#clip)" transform="scale(0.112)"> <foreignObject width="320" height="240"> - <video src="/media/test.ogv" autoplay loop></video> + <video src="/media/test.webm" 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> + <video src="/media/test.webm" 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> + <video src="/media/test.webm" 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> + <video src="/media/test.webm" 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> + <video src="/media/test.webm" 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> + <video src="/media/test.webm" oncanplaythrough="takeScreenshot()" autoplay loop></video> </foreignObject> </g> </svg> 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 index 22e7d9aaf5..ef03f85b28 100644 --- 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 @@ -8,15 +8,6 @@ '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; @@ -29,8 +20,6 @@ } </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 index 14e3ba6329..1da9177de5 100644 --- 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 @@ -8,15 +8,6 @@ '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; @@ -28,8 +19,6 @@ } </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-005.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-005.html new file mode 100644 index 0000000000..44e358bb59 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-005.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and shape function with padding-box</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 the usage of the reference box. On pass you + should see a green square."> +</head> +<style> + #rect { + /* The size of the padding-box is 100x100. */ + width: 120px; + height: 120px; + padding: 10px; + border: 10px solid red; + box-sizing: border-box; + background-color: green; + clip-path: shape(from 0px 0px, + hline by 80px, vline by 80%, hline by -80%, close) + padding-box; + } +</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-006.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-006.html new file mode 100644 index 0000000000..7f6db73ebd --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-006.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and shape function with content-box</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 the usage of the reference box. On pass you + should see a green square."> +</head> +<style> + #rect { + width: 140px; + height: 140px; + padding: 10px; + border: 10px solid red; + box-sizing: border-box; + background-color: green; + /* The size of the content-box is 100x100. */ + clip-path: shape(from -10px -10%, + hline by 80px, vline by 80%, hline by -80%, close) + content-box; + } +</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/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 index ef91c619c4..76b6e473f0 100644 --- 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 @@ -6,7 +6,7 @@ width: 200px; height: 200px; background: green; - clip-path: path(nonzero, 'M0 0, L200 0, L0 200'); + clip-path: path(nonzero, 'M0,0 L200,0 L0,200'); } </style> <div id="rect"></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 index 46e098c4eb..8d6173464c 100644 --- 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 @@ -5,18 +5,14 @@ <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> </head> <style> - div { + #ref { 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; + 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"); } </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 index ec8f941079..b74e6abdd9 100644 --- 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 @@ -5,18 +5,14 @@ <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> </head> <style> - div { + #ref { 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; + 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"); } </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/parsing/clip-path-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/clip-path-invalid.html index 40020d91d4..e9a84e8e9c 100644 --- 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 @@ -51,6 +51,7 @@ 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", "path(nonzero, 'M0 0, L100 0, L0 100, L 0 0');"); test_invalid_value("clip-path", "xywh(0px)"); test_invalid_value("clip-path", "xywh(0px 1%)"); |