commit 8be504132ca4fce6f37f17eca964f264cd7cfc30
parent 35057f5a449890874b32f302b5bde53aa5b04fa0
Author: Javier Contreras Tenorio <javiercon@microsoft.com>
Date: Wed, 7 Jan 2026 09:48:10 +0000
Bug 2008763 [wpt PR 57012] - [gap-decorations] Implement missing shorthands for inset properties (1), a=testonly
Automatic update from web-platform-tests
[gap-decorations] Implement missing shorthands for inset properties (1)
This CL implements the missing shorthands `*-rule-{edge/interior}-inset`
and `rule-{edge/interior}-inset`. They are specified in the spec
https://drafts.csswg.org/css-gaps-1/#propdef-rule-edge-inset.
Bug: 357648037
Change-Id: Ia57e15d9ca7a933be83b514bafa62d3f2f6eacc1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7311427
Reviewed-by: Alison Maher <almaher@microsoft.com>
Commit-Queue: Javier Contreras <javiercon@microsoft.com>
Reviewed-by: Kevin Babbitt <kbabbitt@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1565160}
--
wpt-commits: b1a45b8026096ab2d032aa9e03336e1d7d6a68e0
wpt-pr: 57012
Diffstat:
6 files changed, 316 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-inset-bidirectional-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-inset-bidirectional-shorthand.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Gap Decorations: rule-edge-inset shorthands</title>
+<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#inset">
+<meta name="assert"
+ content="rule-edge-inset supports the full grammar '<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-edge-inset': ['column-rule-edge-inset-start', 'column-rule-edge-inset-end',
+ 'row-rule-edge-inset-start', 'row-rule-edge-inset-end']
+ };
+
+ const bidirectionalTestCases = [
+ {
+ input: '0px',
+ expected: {
+ columnRuleEdgeInsetStart: '0px',
+ columnRuleEdgeInsetEnd: '0px',
+ rowRuleEdgeInsetStart: '0px',
+ rowRuleEdgeInsetEnd: '0px'
+ }
+ },
+ {
+ input: '10px',
+ expected: {
+ columnRuleEdgeInsetStart: '10px',
+ columnRuleEdgeInsetEnd: '10px',
+ rowRuleEdgeInsetStart: '10px',
+ rowRuleEdgeInsetEnd: '10px'
+ }
+ },
+ {
+ input: '50%',
+ expected: {
+ columnRuleEdgeInsetStart: '50%',
+ columnRuleEdgeInsetEnd: '50%',
+ columnRuleEdgeInsetStart: '50%',
+ columnRuleEdgeInsetEnd: '50%',
+ rowRuleEdgeInsetStart: '50%',
+ rowRuleEdgeInsetEnd: '50%',
+ rowRuleEdgeInsetStart: '50%',
+ rowRuleEdgeInsetEnd: '50%',
+ }
+ },
+ {
+ input: '10px 20px',
+ expected: {
+ columnRuleEdgeInsetStart: '10px',
+ columnRuleEdgeInsetEnd: '20px',
+ rowRuleEdgeInsetStart: '10px',
+ rowRuleEdgeInsetEnd: '20px',
+ }
+ },
+ ];
+
+
+ for (rule_property in rule_properties) {
+ const test_cases = bidirectionalTestCases;
+
+ for (const { input, expected } of test_cases) {
+ const [columnRuleEdgeInsetStart, columnRuleEdgeInsetEnd, rowRuleEdgeInsetStart, rowRuleEdgeInsetEnd] = rule_properties[rule_property];
+
+ test_shorthand_value(rule_property, input, {
+ [columnRuleEdgeInsetStart]: expected.columnRuleEdgeInsetStart,
+ [columnRuleEdgeInsetEnd]: expected.columnRuleEdgeInsetEnd,
+ [rowRuleEdgeInsetStart]: expected.rowRuleEdgeInsetStart,
+ [rowRuleEdgeInsetEnd]: expected.rowRuleEdgeInsetEnd,
+ });
+ }
+ }
+ </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-interior-inset-computed.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-interior-inset-computed.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Gaps: rule-inset shorthands getComputedStyle()</title>
+ <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+ <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/computed-testcommon.js"></script>
+ <script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+ <div id="target"></div>
+ <style>
+ #target {
+ font-size: 40px;
+ }
+ </style>
+ <script>
+ const properties = ["column-rule-edge-inset", "row-rule-edge-inset", "rule-edge-inset",
+ "column-rule-interior-inset", "row-rule-interior-inset", "rule-interior-inset"];
+ for (const property of properties) {
+ test_computed_value(property, "10px", "10px");
+ test_computed_value(property, "-20px 10px", "-20px 10px");
+ test_computed_value(property, "calc(10px + 0.5em)", "30px");
+ test_computed_value(property, "calc(10px - 0.5em)", "-10px");
+ test_computed_value(property, "30%", "30%");
+ test_computed_value(property, "calc(25% + 10px)", "calc(25% + 10px)");
+ test_computed_value(property, "10px 20px");
+ }
+ </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-interior-inset-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-interior-inset-invalid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Gaps: parsing rule-inset shorthands with invalid values</title>
+ <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+ <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+ <div id="target"></div>
+ <script>
+ const properties = ['column-rule-edge-inset', 'row-rule-edge-inset', 'column-rule-interior-inset', 'row-rule-interior-inset', 'rule-edge-inset', 'rule-interior-inset'];
+ 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 10px 20px 20px');
+ test_invalid_value(property, '10px / 20px / 10px');
+ test_invalid_value(property, '/ 10px 20px');
+ test_invalid_value(property, '10px 10px 20px');
+ test_invalid_value(property, '10% / 10px 10px 20px');
+ test_invalid_value(property, '10px blue');
+ }
+ </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-interior-inset-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-interior-inset-shorthand.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Gap Decorations: {column/row}-rule-{edge/interior}-inset shorthands</title>
+<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-inset">
+<meta name="assert"
+ content="rule-inset supports the full grammar '<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 = {
+ 'column-rule-edge-inset': ['column-rule-edge-inset-start', 'column-rule-edge-inset-end'],
+ 'row-rule-edge-inset': ['row-rule-edge-inset-start', 'row-rule-edge-inset-end'],
+ 'column-rule-interior-inset': ['column-rule-interior-inset-start', 'column-rule-interior-inset-end'],
+ 'row-rule-interior-inset': ['row-rule-interior-inset-start', 'row-rule-interior-inset-end']
+ };
+ const testCases = [
+ {
+ input: '0px',
+ expected: {
+ ruleInsetStart: '0px',
+ ruleInsetEnd: '0px',
+ }
+ },
+ {
+ input: '10px',
+ expected: {
+ ruleInsetStart: '10px',
+ ruleInsetEnd: '10px',
+ }
+ },
+ {
+ input: '50%',
+ expected: {
+ ruleInsetStart: '50%',
+ ruleInsetEnd: '50%',
+ }
+ },
+ {
+ input: '10px 20px',
+ expected: {
+ ruleInsetStart: '10px',
+ ruleInsetEnd: '20px',
+ }
+ },
+ ];
+
+
+ for (rule_property in rule_properties) {
+ const test_cases = testCases;
+
+ for (const { input, expected } of test_cases) {
+ const [ruleInsetStart, ruleInsetEnd] = rule_properties[rule_property];
+ test_shorthand_value(rule_property, input, {
+ [ruleInsetStart]: expected.ruleInsetStart,
+ [ruleInsetEnd]: expected.ruleInsetEnd,
+ });
+ }
+ }
+ </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-interior-inset-valid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-interior-inset-valid.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Gaps: parsing rule-inset shorthands with valid values</title>
+ <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+ <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+ <div id="target"></div>
+ <script>
+ const properties = ['column-rule-edge-inset', 'row-rule-edge-inset', 'column-rule-interior-inset', 'row-rule-interior-inset', 'rule-edge-inset', 'rule-interior-inset'];
+ for (const property of properties) {
+ test_valid_value(property, '0', '0px');
+ test_valid_value(property, '-20px', '-20px');
+ test_valid_value(property, '5%', '5%');
+ test_valid_value(property, '10vmin', '10vmin');
+ test_valid_value(property, 'calc(8em + 4ex)', 'calc(8em + 4ex)');
+ test_valid_value(property, '5% 10%', '5% 10%');
+ test_valid_value(property, '-20px 10px', '-20px 10px');
+ }
+ </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-interior-inset-bidirectional-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-interior-inset-bidirectional-shorthand.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Gap Decorations: rule-interior-inset shorthands</title>
+<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#inset">
+<meta name="assert"
+ content="rule-interior-inset supports the full grammar '<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-interior-inset': ['column-rule-interior-inset-start', 'column-rule-interior-inset-end',
+ 'row-rule-interior-inset-start', 'row-rule-interior-inset-end']
+ };
+
+ const bidirectionalTestCases = [
+ {
+ input: '0px',
+ expected: {
+ columnRuleInteriorInsetStart: '0px',
+ columnRuleInteriorInsetEnd: '0px',
+ rowRuleInteriorInsetStart: '0px',
+ rowRuleInteriorInsetEnd: '0px'
+ }
+ },
+ {
+ input: '10px',
+ expected: {
+ columnRuleInteriorInsetStart: '10px',
+ columnRuleInteriorInsetEnd: '10px',
+ rowRuleInteriorInsetStart: '10px',
+ rowRuleInteriorInsetEnd: '10px'
+ }
+ },
+ {
+ input: '50%',
+ expected: {
+ columnRuleInteriorInsetStart: '50%',
+ columnRuleInteriorInsetEnd: '50%',
+ rowRuleInteriorInsetStart: '50%',
+ rowRuleInteriorInsetEnd: '50%',
+ }
+ },
+ {
+ input: '10px 20px',
+ expected: {
+ columnRuleEdgeInsetStart: '10px',
+ columnRuleEdgeInsetEnd: '20px',
+ columnRuleInteriorInsetStart: '10px',
+ columnRuleInteriorInsetEnd: '20px',
+ rowRuleEdgeInsetStart: '10px',
+ rowRuleEdgeInsetEnd: '20px',
+ rowRuleInteriorInsetStart: '10px',
+ rowRuleInteriorInsetEnd: '20px',
+ }
+ },
+ ];
+
+
+ for (rule_property in rule_properties) {
+ const test_cases = bidirectionalTestCases;
+
+ for (const { input, expected } of test_cases) {
+ const [columnRuleInteriorInsetStart, columnRuleInteriorInsetEnd, rowRuleInteriorInsetStart, rowRuleInteriorInsetEnd] = rule_properties[rule_property];
+
+ test_shorthand_value(rule_property, input, {
+ [columnRuleInteriorInsetStart]: expected.columnRuleInteriorInsetStart,
+ [columnRuleInteriorInsetEnd]: expected.columnRuleInteriorInsetEnd,
+ [rowRuleInteriorInsetStart]: expected.rowRuleInteriorInsetStart,
+ [rowRuleInteriorInsetEnd]: expected.rowRuleInteriorInsetEnd,
+ });
+ }
+ }
+ </script>
+</body>
+</html>
