commit fc8ca52953f36347bba2d6c9e726a621ead2648c
parent 61ca779ecea00576d000e1d08960600fcddff3cd
Author: Javier Contreras Tenorio <javiercon@microsoft.com>
Date: Fri, 7 Nov 2025 08:57:26 +0000
Bug 1998545 [wpt PR 55878] - [gap-decorations] Reintroduce `rule-outset` with new longhands, a=testonly
Automatic update from web-platform-tests
[gap-decorations] Reintroduce `rule-outset` with new longhands
This CL makes `rule-outset` into a shorthand using the new longhands
https://github.com/w3c/csswg-drafts/issues/12603.
We also update some existing parsing tests, and uncomment parts of tests
that now work since we introduced the shorthand again.
Recently it was resolved that the `outset` properties will be renamed to
`inset` https://github.com/w3c/csswg-drafts/issues/12848, so they will
need to be renamed in follow up CLs, but since the asymmetric behavior
resolved first, we are implementing that first. It will also allow us to
move to the new inset behavior incrementally.
Bug: 357648037, 440054556
Change-Id: Id8d00f707f3e1402aba1768175966bc6337bb79b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7108238
Reviewed-by: Alison Maher <almaher@microsoft.com>
Commit-Queue: Javier Contreras <javiercon@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1540732}
--
wpt-commits: 5eb02a45f3479739714faa929ab0009725435e28
wpt-pr: 55878
Diffstat:
6 files changed, 171 insertions(+), 18 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/gap-decorations-bidirectional-shorthands.html b/testing/web-platform/tests/css/css-gaps/parsing/gap-decorations-bidirectional-shorthands.html
@@ -25,8 +25,14 @@
column-rule-break: intersection;
row-rule-break: intersection;
- column-rule-outset: 10px;
- row-rule-outset: 10px;
+ column-rule-edge-start-outset: 10px;
+ row-rule-edge-start-outset: 10px;
+ column-rule-edge-end-outset: 5px;
+ row-rule-edge-end-outset: 5px;
+ column-rule-interior-start-outset: 10px;
+ row-rule-interior-start-outset: 10px;
+ column-rule-interior-end-outset: 5px;
+ row-rule-interior-end-outset: 5px;
}
#target2 {
@@ -42,8 +48,14 @@
column-rule-break: intersection;
row-rule-break: spanning-item;
- column-rule-outset: 5px;
- row-rule-outset: 10px;
+ column-rule-edge-start-outset: 5px;
+ row-rule-edge-start-outset: 10px;
+ column-rule-edge-end-outset: 15px;
+ row-rule-edge-end-outset: 20px;
+ column-rule-interior-start-outset: 25px;
+ row-rule-interior-start-outset: 30px;
+ column-rule-interior-end-outset: 35px;
+ row-rule-interior-end-outset: 40px;
}
</style>
<script>
@@ -63,7 +75,7 @@
assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-break'), 'intersection');
}, "rule-break shorthand computed from longhand values");
test(function() {
- assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-outset'), '10px');
+ assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-outset'), '10px 5px / 10px 5px');
}, "rule-outset shorthand computed from longhand values");
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-bidirectional-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-bidirectional-shorthand.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Gap Decorations: rule-outset shorthands</title>
+<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-outset">
+<meta name="assert"
+ content="rule-outset supports the full grammar '<length-percentage> <length-percentage>? /[<length-percentage> <length-percentage>?]?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+ <script>
+ const rule_properties = {
+ 'rule-outset': ['column-rule-edge-start-outset', 'column-rule-edge-end-outset',
+ 'column-rule-interior-start-outset', 'column-rule-interior-end-outset',
+ 'row-rule-edge-start-outset', 'row-rule-edge-end-outset',
+ 'row-rule-interior-start-outset', 'row-rule-interior-end-outset']
+ };
+
+ const bidirectionalTestCases = [
+ {
+ input: '0px',
+ expected: {
+ columnRuleEdgeStartOutset: '0px',
+ columnRuleEdgeEndOutset: '0px',
+ columnRuleInteriorStartOutset: '0px',
+ columnRuleInteriorEndOutset: '0px',
+ rowRuleEdgeStartOutset: '0px',
+ rowRuleEdgeEndOutset: '0px',
+ rowRuleInteriorStartOutset: '0px',
+ rowRuleInteriorEndOutset: '0px'
+ }
+ },
+ {
+ input: '10px',
+ expected: {
+ columnRuleEdgeStartOutset: '10px',
+ columnRuleEdgeEndOutset: '10px',
+ columnRuleInteriorStartOutset: '10px',
+ columnRuleInteriorEndOutset: '10px',
+ rowRuleEdgeStartOutset: '10px',
+ rowRuleEdgeEndOutset: '10px',
+ rowRuleInteriorStartOutset: '10px',
+ rowRuleInteriorEndOutset: '10px'
+ }
+ },
+ {
+ input: '50%',
+ expected: {
+ columnRuleEdgeStartOutset: '50%',
+ columnRuleEdgeEndOutset: '50%',
+ columnRuleInteriorStartOutset: '50%',
+ columnRuleInteriorEndOutset: '50%',
+ rowRuleEdgeStartOutset: '50%',
+ rowRuleEdgeEndOutset: '50%',
+ rowRuleInteriorStartOutset: '50%',
+ rowRuleInteriorEndOutset: '50%',
+ }
+ },
+ {
+ input: '10px 20px',
+ expected: {
+ columnRuleEdgeStartOutset: '10px',
+ columnRuleEdgeEndOutset: '20px',
+ columnRuleInteriorStartOutset: '10px',
+ columnRuleInteriorEndOutset: '20px',
+ rowRuleEdgeStartOutset: '10px',
+ rowRuleEdgeEndOutset: '20px',
+ rowRuleInteriorStartOutset: '10px',
+ rowRuleInteriorEndOutset: '20px',
+ }
+ },
+ {
+ input: '10px 20px / 30px',
+ expected: {
+ columnRuleEdgeStartOutset: '10px',
+ columnRuleEdgeEndOutset: '20px',
+ columnRuleInteriorStartOutset: '30px',
+ columnRuleInteriorEndOutset: '30px',
+ rowRuleEdgeStartOutset: '10px',
+ rowRuleEdgeEndOutset: '20px',
+ rowRuleInteriorStartOutset: '30px',
+ rowRuleInteriorEndOutset: '30px',
+ }
+ },
+ {
+ input: '10px / 20px 30px',
+ expected: {
+ columnRuleEdgeStartOutset: '10px',
+ columnRuleEdgeEndOutset: '10px',
+ columnRuleInteriorStartOutset: '20px',
+ columnRuleInteriorEndOutset: '30px',
+ rowRuleEdgeStartOutset: '10px',
+ rowRuleEdgeEndOutset: '10px',
+ rowRuleInteriorStartOutset: '20px',
+ rowRuleInteriorEndOutset: '30px',
+ }
+ },
+ {
+ input: '10px 20px / 30px 40px',
+ expected: {
+ columnRuleEdgeStartOutset: '10px',
+ columnRuleEdgeEndOutset: '20px',
+ columnRuleInteriorStartOutset: '30px',
+ columnRuleInteriorEndOutset: '40px',
+ rowRuleEdgeStartOutset: '10px',
+ rowRuleEdgeEndOutset: '20px',
+ rowRuleInteriorStartOutset: '30px',
+ rowRuleInteriorEndOutset: '40px',
+ }
+ },
+
+ ];
+
+
+ for (rule_property in rule_properties) {
+ const test_cases = bidirectionalTestCases;
+
+ for (const { input, expected } of test_cases) {
+ const [columnRuleEdgeStartOutset, columnRuleEdgeEndOutset, columnRuleInteriorStartOutset, columnRuleInteriorEndOutset, rowRuleEdgeStartOutset, rowRuleEdgeEndOutset, rowRuleInteriorStartOutset, rowRuleInteriorEndOutset] = rule_properties[rule_property];
+
+ test_shorthand_value(rule_property, input, {
+ [columnRuleEdgeStartOutset]: expected.columnRuleEdgeStartOutset,
+ [columnRuleEdgeEndOutset]: expected.columnRuleEdgeEndOutset,
+ [columnRuleInteriorStartOutset]: expected.columnRuleInteriorStartOutset,
+ [columnRuleInteriorEndOutset]: expected.columnRuleInteriorEndOutset,
+ [rowRuleEdgeStartOutset]: expected.rowRuleEdgeStartOutset,
+ [rowRuleEdgeEndOutset]: expected.rowRuleEdgeEndOutset,
+ [rowRuleInteriorStartOutset]: expected.rowRuleInteriorStartOutset,
+ [rowRuleInteriorEndOutset]: expected.rowRuleInteriorEndOutset,
+ });
+ }
+ }
+ </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-computed.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-computed.html
@@ -18,7 +18,7 @@
}
</style>
<script>
- const properties = ["column-rule-outset", "row-rule-outset"/*, "rule-outset"*/];
+ const properties = ["column-rule-outset", "row-rule-outset", "rule-outset"];
for (const property of properties) {
test_computed_value(property, "10px", "10px 10px / 10px 10px");
test_computed_value(property, "-20px", "-20px -20px / -20px -20px");
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-invalid.html
@@ -12,7 +12,7 @@
<body>
<div id="target"></div>
<script>
- const properties = ['column-rule-outset', 'row-rule-outset'/*, 'rule-outset'*/];
+ const properties = ['column-rule-outset', 'row-rule-outset', 'rule-outset'];
for (const property of properties) {
test_invalid_value(property, 'auto');
test_invalid_value(property, 'none');
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-shorthand.html
@@ -83,18 +83,21 @@
}
},
];
+
+
for (rule_property in rule_properties) {
- let test_cases = testCases;
- for (const { input, expected } of test_cases) {
- const [ruleEdgeStartOutset, ruleEdgeEndOutset, ruleInteriorStartOutset, ruleInteriorEndOutset] = rule_properties[rule_property];
- test_shorthand_value(rule_property, input, {
- [ruleEdgeStartOutset]: expected.ruleEdgeStartOutset,
- [ruleEdgeEndOutset]: expected.ruleEdgeEndOutset,
- [ruleInteriorStartOutset]: expected.ruleInteriorStartOutset,
- [ruleInteriorEndOutset]: expected.ruleInteriorEndOutset,
- });
- }
+ const test_cases = testCases;
+
+ for (const { input, expected } of test_cases) {
+ const [ruleEdgeStartOutset, ruleEdgeEndOutset, ruleInteriorStartOutset, ruleInteriorEndOutset] = rule_properties[rule_property];
+ test_shorthand_value(rule_property, input, {
+ [ruleEdgeStartOutset]: expected.ruleEdgeStartOutset,
+ [ruleEdgeEndOutset]: expected.ruleEdgeEndOutset,
+ [ruleInteriorStartOutset]: expected.ruleInteriorStartOutset,
+ [ruleInteriorEndOutset]: expected.ruleInteriorEndOutset,
+ });
}
+ }
</script>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-valid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-valid.html
@@ -12,7 +12,7 @@
<body>
<div id="target"></div>
<script>
- const properties = ['column-rule-outset', 'row-rule-outset'/*, 'rule-outset'*/];
+ const properties = ['column-rule-outset', 'row-rule-outset', 'rule-outset'];
for (const property of properties) {
test_valid_value(property, '0', '0px 0px / 0px 0px');
test_valid_value(property, '-20px', '-20px -20px / -20px -20px');
