Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 00:45:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

170
tests/wpt/web-platform-tests/css/css-masking/animations/clip-path-interpolation-shape.html Normal file
View file

@ -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>

1
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-filter.html
View file

@ -2,6 +2,7 @@
<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-150">
<style>
.container {
width: 100px;

28
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-ref.html Normal file
View file

@ -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>

17
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error-ref.html Normal file
View file

@ -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>

48
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error.html Normal file
View file

@ -0,0 +1,48 @@
<!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;
/* 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;
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>
<body>
<div class="container"></div>
<script>
document.getAnimations()[0].ready.then(takeScreenshot);
</script>
</body>
</html>

59
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position.html Normal file
View file

@ -0,0 +1,59 @@
<!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;
/* 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;
}
.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>
<body>
<div class="container">
<div class="big"></div>
</div>
<script>
document.getAnimations()[0].ready.then(takeScreenshot);
</script>
</body>
</html>

4
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-fragmented-ref.html Normal file
View file

@ -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>

42
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-fragmented.html Normal file
View file

@ -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 1000000s cubic-bezier(0, 1, 1, 0) -500000s;
height: 100px;
}
</style>
<script src="/common/reftest-wait.js"></script>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
<script>
takeScreenshot();
</script>
</body>
</html>

14
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-missing-0-percent-ref.html Normal file
View file

@ -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>

44
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-missing-0-percent.html Normal file
View file

@ -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>

21
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-none-ref.html Normal file
View file

@ -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>

54
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-none.html Normal file
View file

@ -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-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 100000s infinite -50000s;
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>
<body>
<div class="target">
<div class="outofbounds"></div>
</div>
<script>
document.getAnimations()[0].ready.then(() => {
takeScreenshot();
});
</script>
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-svg-ref.html Normal file
View file

@ -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>

27
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-svg-zoom-ref.html Normal file
View file

@ -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>

50
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-svg-zoom.html Normal file
View file

@ -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="clip-path-animation-svg-zoom-ref.html">
<style>
.clipped {
background-color: green;
stroke: black;
stroke-width: 3;
fill: red;
/* 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;
}
.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>
<body>
<svg class="svg">
<circle class="clipped" cx="40" cy="40" r="40" />
</svg>
<script>
document.getAnimations()[0].ready.then(takeScreenshot);
</script>
</body>
</html>

49
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-svg.html Normal file
View file

@ -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-svg-ref.html">
<style>
.clipped {
background-color: green;
stroke: black;
stroke-width: 3;
fill: red;
/* 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;
}
.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>
<body>
<svg class="svg">
<circle class="clipped" cx="50" cy="50" r="40" />
</svg>
<script>
document.getAnimations()[0].ready.then(takeScreenshot());
</script>
</body>
</html>

17
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-zoom-ref.html Normal file
View file

@ -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>

42
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/clip-path-animation-zoom.html Normal file
View file

@ -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-zoom-ref.html">
<style>
.container {
width: 80px;
height: 80px;
background-color: green;
zoom: 1.25;
/* 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 10000000s cubic-bezier(0, 1, 1, 0) -5000000s;
}
@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>
<body>
<div class="container"></div>
<script>
document.getAnimations()[0].ready.then(takeScreenshot);
</script>
</body>
</html>

14
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1-ref.html Normal file
View file

@ -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>

50
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html Normal file
View file

@ -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, 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>

14
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length2-ref.html Normal file
View file

@ -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>

50
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length2.html Normal file
View file

@ -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 10s, clippath1 2s 1s;
}
@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>

14
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length3-ref.html Normal file
View file

@ -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>

53
tests/wpt/web-platform-tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length3.html Normal file
View file

@ -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, clippath1 2s 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>

1
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-borderBox-1b.html
View file

@ -8,6 +8,7 @@
<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;">

1
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-contentBox-1a.html
View file

@ -8,6 +8,7 @@
<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-60; totalPixels=0-394">
<style>
div {
background-color: blue;

1
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-contentBox-1b.html
View file

@ -8,6 +8,7 @@
<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-60; totalPixels=0-394">
</head>
<body>
<svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">

1
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-geometryBox-2.html
View file

@ -8,6 +8,7 @@
<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;

1
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-marginBox-1a.html
View file

@ -8,6 +8,7 @@
<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-60; totalPixels=0-394">
</head>
<body>
<svg width="200" height="200" style="position: absolute; left: 10px; top: 15px;">

1
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-paddingBox-1a.html
View file

@ -8,6 +8,7 @@
<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-60; totalPixels=0-394">
<style>
div {
position: absolute;

1
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-paddingBox-1b.html
View file

@ -8,6 +8,7 @@
<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-60; totalPixels=0-394">
</head>
<body>
<svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">

13
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-round-zero-size-ref.html Normal file
View file

@ -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>

18
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-round-zero-size.html Normal file
View file

@ -0,0 +1,18 @@
<!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">
<style>
#target {
margin: 50px;
height: 0px;
width: 0px;
outline: 50px solid lime;
clip-path: inset(-20px round 5px);
}
</style>
<div id="target"></div>

2
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-scaled-video-ref.html Normal file
View file

@ -0,0 +1,2 @@
<!DOCTYPE html>
<p>Expect no hairlines below.</p>

46
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-scaled-video.html Normal file
View file

@ -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>

25
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-shape-001.html Normal file
View file

@ -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>

37
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-shape-002-units.html Normal file
View file

@ -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>

25
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-shape-002.html Normal file
View file

@ -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>

36
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-shape-003.html Normal file
View file

@ -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>

35
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-shape-004.html Normal file
View file

@ -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>

39
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-shape-interpolation-001.html Normal file
View file

@ -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="reference/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>

39
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-shape-interpolation-002.html Normal file
View file

@ -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="reference/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>

1
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter.html
View file

@ -2,6 +2,7 @@
<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>

1
tests/wpt/web-platform-tests/css/css-masking/clip-path/clip-path-viewBox-1a.html
View file

@ -8,6 +8,7 @@
<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-60; totalPixels=0-394">
</head>
<body>
<svg width="200" height="200" style="position: absolute; left: 10px; top: 10px;">

22
tests/wpt/web-platform-tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html Normal file
View file

@ -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>

22
tests/wpt/web-platform-tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html Normal file
View file

@ -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>

2
tests/wpt/web-platform-tests/css/css-masking/clip-path/svg-clip-path-circle-offset.html
View file

@ -4,7 +4,7 @@
<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="0-10;0-200">
<meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-394">
<svg>
<rect x="30" y="30" width="100" height="100" fill="green" style="clip-path: circle(50%)"/>
</svg>

2
tests/wpt/web-platform-tests/css/css-masking/clip-path/svg-clip-path-ellipse-offset.html
View file

@ -4,7 +4,7 @@
<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="0-10;0-200">
<meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-394">
<svg>
<rect x="30" y="30" width="100" height="100" fill="green" style="clip-path: ellipse(40% 50%)"/>
</svg>

49
tests/wpt/web-platform-tests/css/css-masking/clip-path/svg-clip-path-fixed-values-ref.html Normal file
View file

@ -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>

23
tests/wpt/web-platform-tests/css/css-masking/clip-path/svg-clip-path-fixed-values.html Normal file
View file

@ -0,0 +1,23 @@
<!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="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>

1
tests/wpt/web-platform-tests/css/css-masking/mask-image/mask-image-clip-exclude.html
View file

@ -4,6 +4,7 @@
<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-1764">
<title>mask-image + mask-clip + mask-composite: exclude on different background boxes</title>
<style>
div {

3
tests/wpt/web-platform-tests/css/css-masking/mask-image/mask-mode-c.html
View file

@ -8,6 +8,7 @@
<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-2; totalPixels=0-11800">
<style type="text/css">
div {
background-color: blue;
@ -57,4 +58,4 @@
<div class="luminance2"></div>
<div class="luminance3"></div>
</body>
</html>
</html>

1
tests/wpt/web-platform-tests/css/css-masking/mask-image/mask-opacity-1a.html
View file

@ -8,6 +8,7 @@
<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;

1
tests/wpt/web-platform-tests/css/css-masking/mask-image/mask-opacity-1b.html
View file

@ -8,6 +8,7 @@
<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"/>

1
tests/wpt/web-platform-tests/css/css-masking/mask-image/mask-opacity-1c.html
View file

@ -8,6 +8,7 @@
<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;

57
tests/wpt/web-platform-tests/css/css-masking/parsing/clip-path-shape-parsing.html Normal file
View file

@ -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>