commit dc70ca9336f875cbdfbc546b2e59cd2bba1d2942
parent abd6be800ef191d44c3a46975b9497bb263cb374
Author: Javier Contreras Tenorio <javiercon@microsoft.com>
Date: Thu, 6 Nov 2025 21:34:10 +0000
Bug 1997619 [wpt PR 55790] - [gap-decorations] Parse `*-rule-edge/interior-start/end-outset`, a=testonly
Automatic update from web-platform-tests
[gap-decorations] Parse `*-rule-edge/interior-start/end-outset`
This CL adds parsing support for the new outset properties for the new
outset behavior detailed and resolved in
https://github.com/w3c/csswg-drafts/issues/12603.
Shorthand support, implementation, and deprecation of old `outset`
properties will come in follow up CLs.
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: Ie518271a921e54f503cd1846dc7fc346757442d2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7091234
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@{#1538689}
--
wpt-commits: b6b1a652a5f136a482e2fc61b50eb54edd919b98
wpt-pr: 55790
Diffstat:
4 files changed, 118 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-start-end-outset-computed.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-start-end-outset-computed.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Gaps: *-rule-edge-*-outset getComputedStyle()</title>
+ <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+ <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">
+ <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>
+ // TODO(javiercon): Add shorthand support and test here.
+ const properties = ["column-rule-edge-start-outset", "row-rule-edge-start-outset", "column-rule-edge-end-outset", "row-rule-edge-end-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-egde-start-end-outset-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-egde-start-end-outset-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Gaps: parsing *-rule-edge-*-outset 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/#outset">
+ <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>
+ // TODO(javiercon): Add shorthand support and test here.
+ const properties = ['column-rule-edge-start-outset', 'row-rule-edge-start-outset', 'column-rule-edge-end-outset', 'row-rule-edge-end-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-interior-start-end-outset-computed.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-interior-start-end-outset-computed.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Gaps: *-rule-interior-*-outset getComputedStyle()</title>
+ <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+ <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">
+ <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>
+ // TODO(javiercon): Add shorthand support and test here.
+ const properties = ["column-rule-interior-start-outset", "row-rule-interior-start-outset", "column-rule-interior-end-outset", "row-rule-interior-end-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-interior-start-end-outset-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-interior-start-end-outset-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Gaps: parsing *-rule-interior-*-outset 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/#outset">
+ <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>
+ // TODO(javiercon): Add shorthand support and test here.
+ const properties = ['column-rule-interior-start-outset', 'row-rule-interior-start-outset', 'column-rule-interior-end-outset', 'row-rule-interior-end-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>
