[Gap Decorations]: Avoid 0px behavior for list of column-rule-widths

Sam Davis Omekara (from Dev Box) · chromium-wpt-export-bot · commit 71cfdb5b75d3 · 2025-05-09T22:08:53.000-07:00
This CL avoids the "return 0px if style is none/hidden" behavior for column-rule-width when multiple values are involved. While ongoing work aims to decouple *-width and *-style values entirely, we want to ensure that gap decorations are not blocked by that effort due to potential compatibility concerns. To maintain backward compatibility, we preserve the current behavior for single values. However, for lists of values, we now avoid returning 0px, allowing us to move forward without inheriting that complexity. Bug: 357648037 Change-Id: I4986a7564b0a13c02195636020df1c42f309cada Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6533577 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Sam Davis Omekara <samomekarajr@microsoft.com> Reviewed-by: Kevin Babbitt <kbabbitt@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1458455}
diff --git a/css/css-gaps/parsing/gap-decorations-col-rule-width.html b/css/css-gaps/parsing/gap-decorations-col-rule-width.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Gap Decorations: Ensure getComputedStyle for column-rule-width is as specified with multiple values</title>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-width">
+<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
+<script src="/resources/testharness.js" type="text/javascript"></script>
+<script src="/resources/testharnessreport.js" type="text/javascript"></script>
+</head>
+<body>
+<div id="target1"></div>
+<div id="target2"></div>
+<div id="target3"></div>
+<style>
+  #target1 {
+    column-rule-width: thin;
+  }
+
+  #target2 {
+    column-rule-width: 5px 10px 15px;
+  }
+
+  #target3 {
+    column-rule-width: repeat(auto, 5px);
+  }
+</style>
+<script>
+  test(function() {
+    const containerStyle = window.getComputedStyle(document.querySelector('#target1'));
+    const columnRuleWidth = containerStyle.getPropertyValue('column-rule-width');
+    assert_equals(columnRuleWidth, '0px');
+
+  }, "`column-rule-width` should be `0px` when `column-rule-style` is `none` with single value");
+
+  test(function() {
+    const containerStyle = window.getComputedStyle(document.querySelector('#target2'));
+    const columnRuleWidth = containerStyle.getPropertyValue('column-rule-width');
+    assert_equals(columnRuleWidth, '5px 10px 15px');
+
+  }, "`column-rule-width` should be as specified regardless of `column-rule-style` with multiple values");
+
+  test(function() {
+    const containerStyle = window.getComputedStyle(document.querySelector('#target3'));
+    const columnRuleWidth = containerStyle.getPropertyValue('column-rule-width');
+    assert_equals(columnRuleWidth, 'repeat(auto, 5px)');
+
+  }, "`column-rule-width` should be as specified regardless of `column-rule-style` with multiple (repeat) values");
+</script>
+</body>
+</html>
