commit 0028c0ae5f0e980e2ff713c4886c038a29648537
parent 1865bb70c4f4a47e8cb807308fe193317678bcec
Author: Javier Contreras Tenorio (from Dev Box) <javiercon@microsoft.com>
Date: Tue, 21 Oct 2025 10:23:37 +0000
Bug 1994313 [wpt PR 55434] - [gap-decorations] Parsing `rule-outset` shorthand, a=testonly
Automatic update from web-platform-tests
[gap-decorations] Parsing `rule-outset` shorthand
This CL implements parsing for `rule-outset` shorthand, defined in
https://www.w3.org/TR/css-gaps-1/#propdef-rule-outset.
Bug: 357648037
Fixed: 448027930
Change-Id: I4ffe3850dbf5bf805aab3bc1c05e53928f60ae91
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7037438
Commit-Queue: Javier Contreras <javiercon@microsoft.com>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Reviewed-by: Sam Davis Omekara <samomekarajr@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1530239}
--
wpt-commits: 4bd6f380323b2ed932e12fde8f3eb5ee6541c922
wpt-pr: 55434
Diffstat:
5 files changed, 92 insertions(+), 16 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
@@ -24,6 +24,9 @@
column-rule-break: intersection;
row-rule-break: intersection;
+
+ column-rule-outset: 10px;
+ row-rule-outset: 10px;
}
#target2 {
@@ -38,6 +41,9 @@
column-rule-break: intersection;
row-rule-break: spanning-item;
+
+ column-rule-outset: 5px;
+ row-rule-outset: 10px;
}
</style>
<script>
@@ -56,6 +62,9 @@
test(function() {
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');
+ }, "rule-outset shorthand computed from longhand values");
@@ -74,6 +83,9 @@
test(function() {
assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-break'), '');
}, "rule-break shorthand cannot be computed from longhand values so expect an empty string");
+ test(function() {
+ assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-outset'), '');
+ }, "rule-outset shorthand cannot be computed from longhand values so expect an empty string");
</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,13 +18,16 @@
}
</style>
<script>
- test_computed_value("column-rule-outset", "10px");
- test_computed_value("column-rule-outset", "-20px");
- test_computed_value("column-rule-outset", "0.5em", "20px");
- test_computed_value("column-rule-outset", "calc(10px + 0.5em)", "30px");
- test_computed_value("row-rule-outset", "calc(10px - 0.5em)", "-10px");
- test_computed_value("row-rule-outset", "30%");
- test_computed_value("row-rule-outset", "calc(25% + 10px)");
+ const properties = ["column-rule-outset", "row-rule-outset", "rule-outset"];
+ for (const property of properties) {
+ test_computed_value(property, "10px");
+ test_computed_value(property, "-20px");
+ test_computed_value(property, "0.5em", "20px");
+ test_computed_value(property, "calc(10px + 0.5em)", "30px");
+ test_computed_value(property, "calc(10px - 0.5em)", "-10px");
+ test_computed_value(property, "30%");
+ test_computed_value(property, "calc(25% + 10px)");
+ }
</script>
</body>
</html>
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,10 +12,13 @@
<body>
<div id="target"></div>
<script>
- test_invalid_value('column-rule-outset', 'auto');
- test_invalid_value('column-rule-outset', 'none');
- test_invalid_value('row-rule-outset', '10');
- test_invalid_value('row-rule-outset', '10px 20px');
+ 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');
+ test_invalid_value(property, '10');
+ test_invalid_value(property, '10px 20px');
+ }
</script>
</body>
</html>
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
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Gap Decorations: rule-outset sets longhands</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>'.">
+<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-outset',
+ 'row-rule-outset'],
+};
+
+const testCases = [
+ {
+ input: '0px',
+ expected: {
+ column: '0px',
+ row: '0px'
+ }
+ },
+ {
+ input: '10px',
+ expected: {
+ column: '10px',
+ row: '10px'
+ }
+ },
+ {
+ input: '50%',
+ expected: {
+ column: '50%',
+ row: '50%'
+ }
+ },
+ ];
+
+for(rule_property in rule_properties) {
+ const [column, row] = rule_properties[rule_property];
+
+ for (const { input, expected } of testCases) {
+ test_shorthand_value(rule_property, input, {
+ [column]: expected.column,
+ [row]: expected.row
+ });
+ }
+}
+</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,11 +12,14 @@
<body>
<div id="target"></div>
<script>
- test_valid_value('column-rule-outset', '0', '0px');
- test_valid_value('column-rule-outset', '-20px');
- test_valid_value('column-rule-outset', '5%');
- test_valid_value('row-rule-outset', '10vmin');
- test_valid_value('row-rule-outset', 'calc(8em + 4ex)');
+ const properties = ['column-rule-outset', 'row-rule-outset', 'rule-outset'];
+ for (const property of properties) {
+ test_valid_value(property, '0', '0px');
+ test_valid_value(property, '-20px');
+ test_valid_value(property, '5%');
+ test_valid_value(property, '10vmin');
+ test_valid_value(property, 'calc(8em + 4ex)');
+ }
</script>
</body>
</html>
