Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
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/parsing
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
24 files changed, 928 insertions, 0 deletions
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>
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/parsing
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip