diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-masking/parsing')
17 files changed, 560 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..00a75cdefa --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-path-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: getComputedStyle().shapeOutside</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%)"); +</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..6b91f74ad4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-path-invalid.html @@ -0,0 +1,56 @@ +<!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(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)'); + + +</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..ec6ac5ae9b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-path-valid.html @@ -0,0 +1,77 @@ +<!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()", "circle(at 50% 50%)"); +test_valid_value("clip-path", "circle(1px)", "circle(1px at 50% 50%)"); +test_valid_value("clip-path", "circle(closest-side)", "circle(at 50% 50%)"); +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()", "ellipse(at 50% 50%)"); +test_valid_value("clip-path", "ellipse(1px closest-side)", "ellipse(1px closest-side at 50% 50%)"); +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")'); +// See https://github.com/w3c/fxtf-drafts/issues/392. If empty path string, +// Blink serializes it as none, but Gecko serializes as path(""). +test_valid_value("clip-path", 'path(" ")', ["none", 'path("")']); +test_valid_value("clip-path", 'path(evenodd, "")', ["none", 'path(evenodd, "")']); + +// <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"); + +// <geometry-box> basic-shape> +test_valid_value("clip-path", "border-box 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-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/mask-invalid.html new file mode 100644 index 0000000000..367049cf19 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-invalid.html @@ -0,0 +1,35 @@ +<!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', '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..f2d2c4a8d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-position-valid.html @@ -0,0 +1,35 @@ +<!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%"); +test_valid_value("mask-position", "right 30% top 60px"); +test_valid_value("mask-position", "-20% -30px"); +test_valid_value("mask-position", "30px center", "30px"); +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", "bottom"); +test_valid_value("mask-position", "center left", "left"); +test_valid_value("mask-position", "left"); +test_valid_value("mask-position", "left bottom"); +test_valid_value("mask-position", "right 40%"); +test_valid_value("mask-position", "top"); +test_valid_value("mask-position", "top center", "top"); +test_valid_value("mask-position", "center", "center"); + +test_valid_value("mask-position", "bottom left, right 20%", "left bottom, right 20%"); +test_valid_value("mask-position", "top, center, left"); +</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..c6e2c28af5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/parsing/mask-valid.sub.html @@ -0,0 +1,65 @@ +<!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> +</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> | margin-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', 'margin-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'); + +// <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) luminance 1px 2px / contain space round stroke-box no-clip intersect'); +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) luminance stroke-box'); + +// 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'); + +</script> +</body> +</html> |