diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-masking/clip-path')
12 files changed, 145 insertions, 43 deletions
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> |