commit a7c05007550be830537071422a3a4f1ab0d4d000
parent 83046f098280df2c9cd13377669f3cafd3052f87
Author: Javier Contreras Tenorio (from Dev Box) <javiercon@microsoft.com>
Date: Tue, 21 Oct 2025 10:15:43 +0000
Bug 1994301 [wpt PR 55431] - [gap-decorations] Parsing `rule-break` shorthand, a=testonly
Automatic update from web-platform-tests
[gap-decorations] Parsing `rule-break` shorthand
This CL implements parsing for `rule-break` shorthand, defined in
https://www.w3.org/TR/css-gaps-1/#propdef-rule-break.
This also removes some dead code that was not being called anywhere.
Bug: 357648037, 448027930
Change-Id: Iee8dd8bd06051de0f90292bd2994bbfd55d15f95
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7037021
Commit-Queue: Javier Contreras <javiercon@microsoft.com>
Reviewed-by: Sam Davis Omekara <samomekarajr@microsoft.com>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1529736}
--
wpt-commits: bd8850f371a69d4de90e229b2e0ab9729e954418
wpt-pr: 55431
Diffstat:
5 files changed, 86 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
@@ -21,6 +21,9 @@
column-rule-style: solid;
row-rule-style: solid;
+
+ column-rule-break: intersection;
+ row-rule-break: intersection;
}
#target2 {
@@ -32,6 +35,9 @@
column-rule-style: double;
row-rule-style: dotted;
+
+ column-rule-break: intersection;
+ row-rule-break: spanning-item;
}
</style>
<script>
@@ -47,6 +53,9 @@
test(function() {
assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule'), '10px solid rgb(0, 255, 0)');
}, "rule shorthand computed from longhand values");
+ test(function() {
+ assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-break'), 'intersection');
+ }, "rule-break shorthand computed from longhand values");
@@ -62,6 +71,9 @@
test(function() {
assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule'), '');
}, "rule shorthand cannot be computed from longhand values so expect an empty string");
+ 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");
</script>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-break-computed.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-break-computed.html
@@ -13,12 +13,12 @@
<body>
<div id="target"></div>
<script>
- test_computed_value("column-rule-break", "none");
- test_computed_value("column-rule-break", "spanning-item");
- test_computed_value("column-rule-break", "intersection");
- test_computed_value("row-rule-break", "none");
- test_computed_value("row-rule-break", "spanning-item");
- test_computed_value("row-rule-break", "intersection");
+ const properties = ["column-rule-break", "row-rule-break", "rule-break"];
+ for (const property of properties) {
+ test_computed_value(property, "none");
+ test_computed_value(property, "spanning-item");
+ test_computed_value(property, "intersection");
+ }
</script>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-break-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-break-invalid.html
@@ -12,10 +12,13 @@
<body>
<div id="target"></div>
<script>
- test_invalid_value('column-rule-break', 'auto');
- test_invalid_value('column-rule-break', 'true');
- test_invalid_value('row-rule-break', '10px');
- test_invalid_value('row-rule-break', 'default');
+ const properties = ['column-rule-break', 'row-rule-break', 'rule-break'];
+ for (const property of properties) {
+ test_invalid_value(property, 'auto');
+ test_invalid_value(property, 'true');
+ test_invalid_value(property, '10px');
+ test_invalid_value(property, 'default');
+ }
</script>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-break-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-break-shorthand.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Gap Decorations: rule-break sets longhands</title>
+<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-break">
+<meta name="assert" content="rule-break supports the full grammar '<*-rule-break>'.">
+<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-break': ['column-rule-break',
+ 'row-rule-break'],
+};
+
+const testCases = [
+ {
+ input: 'intersection',
+ expected: {
+ column: 'intersection',
+ row: 'intersection'
+ }
+ },
+ {
+ input: 'none',
+ expected: {
+ column: 'none',
+ row: 'none'
+ }
+ },
+ {
+ input: 'spanning-item',
+ expected: {
+ column: 'spanning-item',
+ row: 'spanning-item'
+ }
+ },
+ ];
+
+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-break-valid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-break-valid.html
@@ -12,12 +12,12 @@
<body>
<div id="target"></div>
<script>
- test_valid_value('column-rule-break', 'none');
- test_valid_value('column-rule-break', 'spanning-item');
- test_valid_value('column-rule-break', 'intersection');
- test_valid_value('row-rule-break', 'none');
- test_valid_value('row-rule-break', 'spanning-item');
- test_valid_value('row-rule-break', 'intersection');
+ const properties = ['column-rule-break', 'row-rule-break', 'rule-break'];
+ for (const property of properties) {
+ test_valid_value(property, 'none');
+ test_valid_value(property, 'spanning-item');
+ test_valid_value(property, 'intersection');
+ }
</script>
</body>
</html>
