Skip to content

Commit 21ab597

Browse files
Sam Davis Omekara (from Dev Box)lutien
Sam Davis Omekara (from Dev Box)
authored and
lutien
committed
Bug 1966194 [wpt PR 52504] - [Gap Decorations]: Parse column-rule shorthands,
Automatic update from web-platform-tests [Gap Decorations]: Parse column-rule shorthands This CL augments the parsing logic for `column-rule` to support the new grammar [1] for gap decorations. According to the new grammar, `column-rule` can now support list of <gap-rule>s and a <gap-rule> can be a regular or repeated <gap-rule>. For the parsing logic, the `ConsumeGapDecorationsRuleShorthand` is the top-level function responsible for parsing and hydrating the width, style, and color properties associated with gap decorations. It handles both repeated and non-repeated values. To get the computed value as specified, each property is iterated over, and a corresponding <gap-rule> is constructed at each index. Subsequent CLs will see us implement serialization,`row-rule` and `rule` properties. [1]: https://drafts.csswg.org/css-gaps-1/#propdef-column-rule Bug: 357648037 Change-Id: Ifd73efe7b3f604e2e53cabb68550cf7241c26e44 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6423813 Commit-Queue: Sam Davis Omekara <[email protected]> Reviewed-by: Kevin Babbitt <[email protected]> Reviewed-by: Alison Maher <[email protected]> Cr-Commit-Position: refs/heads/main@{#1459604} -- wpt-commits: 5ed8f71616fdfae97e71012198898851c6cf5c88 wpt-pr: 52504 Differential Revision: https://phabricator.services.mozilla.com/D250152
1 parent 1cea82b commit 21ab597

File tree

4 files changed

+296
-0
lines changed

4 files changed

+296
-0
lines changed

‎testing/web-platform/tests/css/css-gaps/parsing/gap-decorations-rule-shorthand-computed-from-longhands.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<meta charset="utf-8">
4+
<title>CSS Gap Decorations: individual separate longhands form shorthand</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
6+
<meta name="assert" content="Setting *-rule-width, *-rule-style, and *-rule-color results in the misaligned column-rule shorthand.">
7+
<script src="/resources/testharness.js"></script>
8+
<script src="/resources/testharnessreport.js"></script>
9+
</head>
10+
<div id="target"></div>
11+
<script>
12+
const testCases = [
13+
{
14+
width: '5px',
15+
style: 'solid',
16+
color: 'rgb(0, 128, 0)',
17+
expected: '5px solid rgb(0, 128, 0)'
18+
},
19+
{
20+
width: 'repeat(auto, 5px)',
21+
style: 'repeat(auto, solid)',
22+
color: 'repeat(auto, rgb(255, 0, 0))',
23+
expected: 'repeat(auto, 5px solid rgb(255, 0, 0))'
24+
},
25+
26+
// The following test cases return an empty string because the longhands do not
27+
// line up.
28+
{
29+
width: 'repeat(auto, thin medium)',
30+
style: 'solid',
31+
color: 'repeat(8, red blue)',
32+
expected: ''
33+
},
34+
{
35+
width: 'repeat(6, 15px thick)',
36+
style: 'repeat(auto, solid)',
37+
color: 'repeat(auto, red)',
38+
expected: ''
39+
},
40+
{
41+
width: '15px 25px 35px',
42+
style: 'solid dotted',
43+
color: 'green',
44+
expected: ''
45+
},
46+
{
47+
width: 'repeat(auto, 5px)',
48+
style: 'solid double',
49+
color: 'repeat(7, red)',
50+
expected: ''
51+
},
52+
{
53+
width: 'repeat(auto, 5px 8px 10px)',
54+
style: 'repeat(auto, solid double)',
55+
color: 'repeat(auto, red green blue)',
56+
expected: ''
57+
},
58+
{
59+
width: 'repeat(2, 1px 3px 5px)',
60+
style: 'repeat(2, solid double)',
61+
color: 'repeat(2, red)',
62+
expected: ''
63+
},
64+
];
65+
66+
for (const {width, style, color, expected} of testCases) {
67+
let div = document.querySelector('#target');
68+
69+
div.style.columnRuleWidth = width;
70+
div.style.columnRuleStyle = style;
71+
div.style.columnRuleColor = color;
72+
test(() => {
73+
assert_equals(window.getComputedStyle(div).columnRule, expected);
74+
}, `column-rule computed from width: ${width}, style: ${style}, color: ${color}`);
75+
}
76+
</script>

‎testing/web-platform/tests/css/css-gaps/parsing/gap-decorations-rule-shorthand-computed.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 Gap Decoration: *rule getComputedStyle()</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#propdef-column-rule">
7+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:[email protected]">
8+
<meta name="assert" content="*rule computed value is as specified.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="/css/support/computed-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<div id="reference"></div>
15+
<div id="target"></div>
16+
<style>
17+
#reference {
18+
column-rule-style: dotted;
19+
column-rule-width: medium;
20+
}
21+
#target {
22+
color: lime;
23+
}
24+
</style>
25+
<script>
26+
// TODO(samomekarajr): Add `row-rule` to this test when implemented.
27+
const properties = ["column-rule",];
28+
for (let property of properties) {
29+
const currentcolor = "rgb(0, 255, 0)";
30+
const mediumWidth = getComputedStyle(document.getElementById('reference')).columnRuleWidth; // e.g. 3px.
31+
32+
// <gap-rule> = [<line-width> || <line-style> || <line-color>]
33+
test_computed_value(property, "5px solid currentcolor", "5px solid " + currentcolor);
34+
test_computed_value(property, "rgb(0, 0, 255) 10px solid", "10px solid rgb(0, 0, 255)");
35+
test_computed_value(property, "dotted", mediumWidth + " dotted " + currentcolor);
36+
37+
// <gap-auto-repeat-rule> = repeat( auto , <gap-rule># )
38+
test_computed_value(property, "repeat(auto, 5px solid rgb(0, 0, 255))");
39+
test_computed_value(property, "repeat(auto, 5px solid rgb(255, 255, 0), 10px dotted rgb(0, 128, 0))");
40+
41+
42+
// <gap-repeat-rule> = repeat( <integer [1,∞]> , <gap-rule># )
43+
test_computed_value(property, "repeat(4, 15px dotted rgb(0, 255, 255))");
44+
test_computed_value(property, "repeat(1, 15px ridge rgb(255, 0, 0), 10px dotted rgb(0, 255, 0), 15px double rgb(0, 0, 255))");
45+
46+
47+
// <gap-rule-list> = <gap-rule-or-repeat>#
48+
// <gap-rule-or-repeat> = <gap-rule> | <gap-repeat-rule>
49+
test_computed_value(property, "5px double rgb(58, 58, 16), repeat(4, 5px ridge rgb(18, 18, 18))");
50+
test_computed_value(property, "15px dashed rgb(0, 255, 0), repeat(3, 3px double rgb(255, 0, 0), 10px dotted rgb(0, 0, 255))");
51+
test_computed_value(property, "repeat(4, 5px solid rgb(255, 0, 255)), repeat(3, 5px solid rgb(0, 0, 255), 10px dotted rgb(0, 128, 128))");
52+
53+
// <gap-auto-rule-list> = <gap-rule-or-repeat>#? ,
54+
// <gap-auto-repeat-rule> ,
55+
// <gap-rule-or-repeat>#?
56+
test_computed_value(property, "repeat(auto, 5px solid rgb(255, 0, 255)), 13px dotted rgb(0, 0, 128), 10px dotted rgb(0, 128, 128), 15px double rgb(0, 0, 128)");
57+
test_computed_value(property, "5px solid rgb(255, 0, 255), repeat(auto, 5px solid rgb(255, 0, 255)), 10px dotted rgb(0, 128, 128)");
58+
test_computed_value(property, "10px dotted rgb(0, 128, 128), repeat(4, 20px hidden rgb(0, 128, 128), 30px ridge rgb(255, 0, 255)), repeat(auto, 5px solid rgb(255, 0, 255))");
59+
}
60+
</script>
61+
</body>
62+
</html>

‎testing/web-platform/tests/css/css-gaps/parsing/gap-decorations-rule-shorthand-invalid.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Gap Decorations: *-rule parsing</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#propdef-column-rule">
7+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:[email protected]">
8+
<meta name="assert" content="*-rule supports the full grammar '[ <gap-rule-list> | <gap-auto-rule-list> ]'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="/css/support/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
// TODO(samomekarajr): Add `row-rule` and `rule` to this test.
16+
const properties = ["column-rule",];
17+
for (let property of properties) {
18+
test_invalid_value(property, "auto");
19+
20+
test_invalid_value(property, "red 5px solid red");
21+
test_invalid_value(property, "repeat(auto, red 5px green ridge)");
22+
test_invalid_value(property, "repeat(auto, 5px solid red), 5px solid red, repeat(auto, 5px solid red)");
23+
test_invalid_value(property, "repeat(0, 5px red)");
24+
test_invalid_value(property, "repeat(-1, thin green red)");
25+
test_invalid_value(property, "repeat(auto, )");
26+
test_invalid_value(property, "repeat()");
27+
test_invalid_value(property, "");
28+
}
29+
</script>
30+
</body>
31+
</html>

‎testing/web-platform/tests/css/css-gaps/parsing/gap-decorations-rule-shorthand.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Gap Decorations: *-rule sets longhands</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
7+
<meta name="assert" content="column-rule supports the full grammar '<gap-rule-list> | <gap-auto-rule-list>'.">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/shorthand-testcommon.js"></script>
11+
</head>
12+
<body>
13+
<script>
14+
// TODO(samomekarajr): Add `row-rule` to this test.
15+
const rule_properties = {
16+
'column-rule': ['column-rule-width',
17+
'column-rule-style',
18+
'column-rule-color'],
19+
};
20+
21+
for(rule_property in rule_properties) {
22+
const [width, style, color] = rule_properties[rule_property];
23+
// <gap-rule> = [<line-width> || <line-style> || <line-color>].
24+
test_shorthand_value(rule_property, '5px solid red', {
25+
[width]: '5px',
26+
[style]: 'solid',
27+
[color]: 'red'
28+
});
29+
30+
test_shorthand_value(rule_property, 'double', {
31+
[width]: 'medium',
32+
[style]: 'double',
33+
[color]: 'currentcolor'
34+
});
35+
36+
test_shorthand_value(rule_property, 'blue 10px', {
37+
[width]: '10px',
38+
[style]: 'none',
39+
[color]: 'blue'
40+
});
41+
42+
// <gap-auto-repeat-rule> = repeat( auto , <gap-rule># ).
43+
test_shorthand_value(rule_property, 'repeat(auto, 5px solid green)', {
44+
[width]: 'repeat(auto, 5px)',
45+
[style]: 'repeat(auto, solid)',
46+
[color]: 'repeat(auto, green)'
47+
});
48+
49+
test_shorthand_value(rule_property, 'repeat(auto, 5px solid yellow, 10px dotted blue)', {
50+
[width]: 'repeat(auto, 5px 10px)',
51+
[style]: 'repeat(auto, solid dotted)',
52+
[color]: 'repeat(auto, yellow blue)'
53+
});
54+
55+
test_shorthand_value(rule_property, 'repeat(auto, blue 6px, 5px solid red)', {
56+
[width]: 'repeat(auto, 6px 5px)',
57+
[style]: 'repeat(auto, none solid)',
58+
[color]: 'repeat(auto, blue red)'
59+
});
60+
61+
// <gap-repeat-rule> = repeat( <integer [1,∞]> , <gap-rule># ).
62+
test_shorthand_value(rule_property, 'repeat(4, 15px dotted pink)', {
63+
[width]: 'repeat(4, 15px)',
64+
[style]: 'repeat(4, dotted)',
65+
[color]: 'repeat(4, pink)'
66+
});
67+
test_shorthand_value(rule_property, 'repeat(1, 15px ridge yellow, 10px dotted blue, 15px double green)', {
68+
[width]: 'repeat(1, 15px 10px 15px)',
69+
[style]: 'repeat(1, ridge dotted double)',
70+
[color]: 'repeat(1, yellow blue green)'
71+
});
72+
test_shorthand_value(rule_property, 'repeat(3, lime 16px, dashed purple, 10px dotted)', {
73+
[width]: 'repeat(3, 16px medium 10px)',
74+
[style]: 'repeat(3, none dashed dotted)',
75+
[color]: 'repeat(3, lime purple currentcolor)'
76+
});
77+
78+
// <gap-rule-list> = <gap-rule-or-repeat>#.
79+
// <gap-rule-or-repeat> = <gap-rule> | <gap-repeat-rule>.
80+
test_shorthand_value(rule_property, 'thin, dashed, hotpink', {
81+
[width]: 'thin medium medium',
82+
[style]: 'none dashed none',
83+
[color]: 'currentcolor currentcolor hotpink'
84+
});
85+
test_shorthand_value(rule_property, '5px double salmon, repeat(4, 5px ridge red)', {
86+
[width]: '5px repeat(4, 5px)',
87+
[style]: 'double repeat(4, ridge)',
88+
[color]: 'salmon repeat(4, red)'
89+
});
90+
test_shorthand_value(rule_property,
91+
'repeat(2, dashed gray, 10px blue dotted, 20px double), 5px solid red, repeat(4, blue 6px, 5px solid white)', {
92+
[width]: 'repeat(2, medium 10px 20px) 5px repeat(4, 6px 5px)',
93+
[style]: 'repeat(2, dashed dotted double) solid repeat(4, none solid)',
94+
[color]: 'repeat(2, gray blue currentcolor) red repeat(4, blue white)'
95+
});
96+
test_shorthand_value(rule_property, 'repeat(4, thick hidden skyblue), repeat(3, 5px solid red, 10px dotted)', {
97+
[width]: 'repeat(4, thick) repeat(3, 5px 10px)',
98+
[style]: 'repeat(4, hidden) repeat(3, solid dotted)',
99+
[color]: 'repeat(4, skyblue) repeat(3, red currentcolor)'
100+
});
101+
102+
// <gap-auto-rule-list> = <gap-rule-or-repeat>#? ,
103+
// <gap-auto-repeat-rule> ,
104+
// <gap-rule-or-repeat>#?.
105+
test_shorthand_value(rule_property,
106+
'repeat(auto, 10px solid red), medium dotted green, repeat(3, thick dashed blue, 15px double green)', {
107+
[width]: 'repeat(auto, 10px) medium repeat(3, thick 15px)',
108+
[style]: 'repeat(auto, solid) dotted repeat(3, dashed double)',
109+
[color]: 'repeat(auto, red) green repeat(3, blue green)'
110+
});
111+
112+
test_shorthand_value(rule_property, 'ridge red, repeat(auto, 5px solid green), 10px dotted blue', {
113+
[width]: 'medium repeat(auto, 5px) 10px',
114+
[style]: 'ridge repeat(auto, solid) dotted',
115+
[color]: 'red repeat(auto, green) blue'
116+
});
117+
118+
test_shorthand_value(rule_property,
119+
'10px dotted salmon, repeat(4, thin blue, hidden 5px purple), repeat(auto, 5px solid red, teal)', {
120+
[width]: '10px repeat(4, thin 5px) repeat(auto, 5px medium)',
121+
[style]: 'dotted repeat(4, none hidden) repeat(auto, solid none)',
122+
[color]: 'salmon repeat(4, blue purple) repeat(auto, red teal)'
123+
});
124+
}
125+
</script>
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)