Skip to content
This repository was archived by the owner on Mar 19, 2021. It is now read-only.

Commit 04c6f30

Browse files
ewilligersewilligers
authored
[css-masking] Parse mask shorthand (#19346)
Test parsing of the components of the 'mask' shorthand. https://www.w3.org/TR/css-masking-1/#the-mask Firefox rejects "none margin-box", otherwise tests pass in Firefox.
1 parent 8561e52 commit 04c6f30

File tree

2 files changed

+97
-0
lines changed

2 files changed

+97
-0
lines changed

‎css/css-masking/parsing/mask-invalid.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Masking Module Level 1: parsing mask with invalid values</title>
6+
<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask">
7+
<meta name="assert" content="mask supports only the '<mask-layer>#' grammar.">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/parsing-testcommon.js"></script>
11+
</head>
12+
<body>
13+
<script>
14+
test_invalid_value('mask', 'none linear-gradient(to 0% 0%, rgb(0, 0, 0), rgb(0, 0, 255))');
15+
test_invalid_value('mask', 'none alpha luminance');
16+
test_invalid_value('mask', 'linear-gradient(to 0% 0%, rgb(0, 0, 0), rgb(0, 0, 255)) url("https://example.com/")');
17+
18+
test_invalid_value('mask', '1px 2px 3px');
19+
test_invalid_value('mask', '1px 2px 3px 4px');
20+
test_invalid_value('mask', '1px 2px / contain / cover');
21+
22+
test_invalid_value('mask', 'repeat-y repeat-x');
23+
24+
test_invalid_value('mask', 'stroke-box no-clip view-box');
25+
26+
test_invalid_value('mask', 'border-box view-box padding-box');
27+
28+
test_invalid_value('mask', 'no-clip border-box content-box');
29+
30+
test_invalid_value('mask', 'content-box stroke-box no-clip');
31+
32+
test_invalid_value('mask', 'add intersect');
33+
</script>
34+
</body>
35+
</html>

‎css/css-masking/parsing/mask-valid.sub.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Masking Module Level 1: parsing mask with valid values</title>
6+
<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask">
7+
<meta name="assert" content="mask supports the full '<mask-layer>#' grammar.">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/parsing-testcommon.js"></script>
11+
</head>
12+
<body>
13+
<script>
14+
// <mask-layer> = <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? ||
15+
// <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator>
16+
17+
// <mask-reference> <masking-mode>?
18+
// <mask-reference> = none | <image> | <mask-source>
19+
// <masking-mode> = alpha | luminance | auto
20+
test_valid_value('mask', 'none');
21+
test_valid_value('mask', 'none alpha');
22+
test_valid_value('mask', 'linear-gradient(to left bottom, red, blue)');
23+
test_valid_value('mask', 'linear-gradient(to left bottom, red, blue) luminance');
24+
test_valid_value('mask', 'url("https://{{host}}/")');
25+
test_valid_value('mask', 'url("https://{{host}}/") alpha');
26+
27+
// <position> [ / <bg-size> ]?
28+
test_valid_value('mask', 'linear-gradient(to left bottom, red, blue) 1px 2px');
29+
test_valid_value('mask', 'url("https://{{host}}/") 1px 2px / contain');
30+
31+
// <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
32+
test_valid_value('mask', 'none repeat-y');
33+
34+
// <geometry-box> = <shape-box> | fill-box | stroke-box | view-box
35+
// <shape-box> = <box> | margin-box
36+
// <box> = border-box | padding-box | content-box
37+
test_valid_value('mask', 'none border-box', 'none');
38+
test_valid_value('mask', 'linear-gradient(to left bottom, red, blue) padding-box');
39+
test_valid_value('mask', 'none content-box');
40+
test_valid_value('mask', 'none margin-box');
41+
test_valid_value('mask', 'url("https://{{host}}/") fill-box');
42+
test_valid_value('mask', 'linear-gradient(to left bottom, red, blue) stroke-box');
43+
test_valid_value('mask', 'none view-box');
44+
45+
// [ <geometry-box> | no-clip ]
46+
test_valid_value('mask', 'none no-clip', 'none border-box no-clip');
47+
48+
// <compositing-operator> = add | subtract | intersect | exclude
49+
test_valid_value('mask', 'url("https://{{host}}/") add', 'url("https://{{host}}/")');
50+
test_valid_value('mask', 'none subtract');
51+
test_valid_value('mask', 'url("https://{{host}}/") intersect');
52+
test_valid_value('mask', 'linear-gradient(to left bottom, red, blue) exclude');
53+
54+
55+
// <mask-layer> = <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? ||
56+
// <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator>
57+
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');
58+
59+
test_valid_value('mask', 'intersect no-clip space round 1px 2px / contain view-box, stroke-box linear-gradient(to left bottom, red, blue) luminance', 'none 1px 2px / contain space round view-box no-clip intersect, linear-gradient(to left bottom, red, blue) luminance stroke-box');
60+
</script>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)