Skip to content

Commit c928f97

Browse files
Javier Contreras Tenoriochromium-wpt-export-bot
Javier Contreras Tenorio
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Implement *-rule-inset-start/end shorthands
Add six new gap decorations shorthand properties: column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end, rule-inset-start, and rule-inset-end. Each accepts a single <length-percentage> value that sets both the edge and interior inset longhands simultaneously, per the spec https://drafts.csswg.org/css-gaps-1/#propdef-column-rule-inset-start Also increases the inline capacity of the matching-shorthands vector from 4 to 6, since inset longhands now participate in up to 6 shorthands. Adds WPT tests for parsing, computed style, valid values, invalid values, and shorthand expansion. Bug: 357648037, 485672644 Change-Id: I5f7189351e200e34a6fb2ceb3f01f1d76d550509 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7591773 Commit-Queue: Javier Contreras <javiercon@microsoft.com> Reviewed-by: Kevin Babbitt <kbabbitt@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1587952}
1 parent fdc0527 commit c928f97

5 files changed

Lines changed: 200 additions & 0 deletions

‎css/css-gaps/parsing/rule-inset-start-end-bidirectional-shorthand.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Gap Decorations: rule-inset-{start/end} bidirectional shorthands</title>
6+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-inset">
7+
<meta name="assert"
8+
content="rule-inset-start/end supports the full grammar '<length-percentage>'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="/css/support/shorthand-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
const rule_properties = {
16+
'rule-inset-start': ['column-rule-edge-inset-start', 'column-rule-interior-inset-start',
17+
'row-rule-edge-inset-start', 'row-rule-interior-inset-start'],
18+
'rule-inset-end': ['column-rule-edge-inset-end', 'column-rule-interior-inset-end',
19+
'row-rule-edge-inset-end', 'row-rule-interior-inset-end']
20+
};
21+
22+
const testCases = [
23+
{
24+
input: '0px',
25+
expected: '0px',
26+
},
27+
{
28+
input: '10px',
29+
expected: '10px',
30+
},
31+
{
32+
input: '50%',
33+
expected: '50%',
34+
},
35+
{
36+
input: '-20px',
37+
expected: '-20px',
38+
},
39+
];
40+
41+
42+
for (rule_property in rule_properties) {
43+
const test_cases = testCases;
44+
45+
for (const { input, expected } of test_cases) {
46+
const [columnEdgeInset, columnInteriorInset, rowEdgeInset, rowInteriorInset] = rule_properties[rule_property];
47+
48+
test_shorthand_value(rule_property, input, {
49+
[columnEdgeInset]: expected,
50+
[columnInteriorInset]: expected,
51+
[rowEdgeInset]: expected,
52+
[rowInteriorInset]: expected,
53+
});
54+
}
55+
}
56+
</script>
57+
</body>
58+
</html>

‎css/css-gaps/parsing/rule-inset-start-end-computed.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Gaps: rule-inset-start/end shorthands getComputedStyle()</title>
6+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
7+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/css/support/computed-testcommon.js"></script>
11+
<script src="/css/support/inheritance-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<div id="target"></div>
15+
<style>
16+
#target {
17+
font-size: 40px;
18+
}
19+
</style>
20+
<script>
21+
const properties = ["column-rule-inset-start", "column-rule-inset-end",
22+
"row-rule-inset-start", "row-rule-inset-end",
23+
"rule-inset-start", "rule-inset-end"];
24+
for (const property of properties) {
25+
test_computed_value(property, "10px", "10px");
26+
test_computed_value(property, "calc(10px + 0.5em)", "30px");
27+
test_computed_value(property, "calc(10px - 0.5em)", "-10px");
28+
test_computed_value(property, "30%", "30%");
29+
test_computed_value(property, "calc(25% + 10px)", "calc(25% + 10px)");
30+
}
31+
</script>
32+
</body>
33+
</html>

‎css/css-gaps/parsing/rule-inset-start-end-invalid.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Gaps: parsing rule-inset-start/end shorthands with invalid values</title>
6+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
7+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
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+
<div id="target"></div>
14+
<script>
15+
const properties = ['column-rule-inset-start', 'column-rule-inset-end',
16+
'row-rule-inset-start', 'row-rule-inset-end',
17+
'rule-inset-start', 'rule-inset-end'];
18+
for (const property of properties) {
19+
test_invalid_value(property, 'auto');
20+
test_invalid_value(property, 'none');
21+
test_invalid_value(property, '10');
22+
test_invalid_value(property, '10px 20px');
23+
test_invalid_value(property, '10px blue');
24+
test_invalid_value(property, '/ 10px');
25+
}
26+
</script>
27+
</body>
28+
</html>

‎css/css-gaps/parsing/rule-inset-start-end-shorthand.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Gap Decorations: {column/row}-rule-inset-{start/end} shorthands</title>
6+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-inset">
7+
<meta name="assert"
8+
content="rule-inset-start/end supports the full grammar '<length-percentage>'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="/css/support/shorthand-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
const rule_properties = {
16+
'column-rule-inset-start': ['column-rule-edge-inset-start', 'column-rule-interior-inset-start'],
17+
'column-rule-inset-end': ['column-rule-edge-inset-end', 'column-rule-interior-inset-end'],
18+
'row-rule-inset-start': ['row-rule-edge-inset-start', 'row-rule-interior-inset-start'],
19+
'row-rule-inset-end': ['row-rule-edge-inset-end', 'row-rule-interior-inset-end']
20+
};
21+
const testCases = [
22+
{
23+
input: '0px',
24+
expected: '0px',
25+
},
26+
{
27+
input: '10px',
28+
expected: '10px',
29+
},
30+
{
31+
input: '50%',
32+
expected: '50%',
33+
},
34+
{
35+
input: '-20px',
36+
expected: '-20px',
37+
},
38+
];
39+
40+
41+
for (rule_property in rule_properties) {
42+
const test_cases = testCases;
43+
44+
for (const { input, expected } of test_cases) {
45+
const [edgeInset, interiorInset] = rule_properties[rule_property];
46+
test_shorthand_value(rule_property, input, {
47+
[edgeInset]: expected,
48+
[interiorInset]: expected,
49+
});
50+
}
51+
}
52+
</script>
53+
</body>
54+
</html>

‎css/css-gaps/parsing/rule-inset-start-end-valid.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Gaps: parsing rule-inset-start/end shorthands with valid values</title>
6+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
7+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
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+
<div id="target"></div>
14+
<script>
15+
const properties = ['column-rule-inset-start', 'column-rule-inset-end',
16+
'row-rule-inset-start', 'row-rule-inset-end',
17+
'rule-inset-start', 'rule-inset-end'];
18+
for (const property of properties) {
19+
test_valid_value(property, '0', '0px');
20+
test_valid_value(property, '-20px', '-20px');
21+
test_valid_value(property, '5%', '5%');
22+
test_valid_value(property, '10vmin', '10vmin');
23+
test_valid_value(property, 'calc(8em + 4ex)', 'calc(8em + 4ex)');
24+
}
25+
</script>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)