[gap-decorations] Avoid invalidating col rules when GapDecorations is on

Javier Contreras Tenorio (from Dev Box) · chromium-wpt-export-bot · commit 120483079952 · 2025-05-15T09:29:48.000-07:00
This CL makes it so we avoid making a call to `ColumnRuleStyleDidChange()` in `LayoutBlockFlow::StyleDidChange()` so that we do not invalidate column rules when GapDecorations is enabled, since with GapDecorations we already invalidate via the `invalidate: paint` pipeline in `css_properties.json`. The test added in this CL makes sure we are still invalidating correctly after this change. Bug: 357648037 Change-Id: I93f1a453133e658bca88277d8e253075ce2e2cd7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6532734 Reviewed-by: Alison Maher <almaher@microsoft.com> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Javier Contreras <javiercon@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1460754}
diff --git a/css/css-gaps/agnostic/gap-decorations-003-ref.html b/css/css-gaps/agnostic/gap-decorations-003-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<style>
+    body {
+        margin: 0px;
+    }
+    #current {
+        columns: 6;
+        column-gap: 2px;
+        column-rule-style: solid;
+        column-rule-width: 2px;
+        column-fill: auto;
+        height: 20px;
+        column-rule-color: hotpink;
+        width: 72px;
+        height: 20px;
+    }
+    .items {
+        background-color: lightgreen;
+        height: 20px
+    }
+</style>
+<body>
+    <div id="current">
+        <div class="items"></div>
+        <div class="items"></div>
+        <div class="items"></div>
+        <div class="items"></div>
+        <div class="items"></div>
+        <div class="items"></div>
+    </div>
+</body>
+</html>
diff --git a/css/css-gaps/agnostic/gap-decorations-003.html b/css/css-gaps/agnostic/gap-decorations-003.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+    <title>column-rule-color invalidates and paints correctly on multi-col</title>
+    <link rel="match" href="gap-decorations-003-ref.html">
+    <link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-other-colors">
+    <link rel="author" href="mailto:javiercon@microsoft.com">
+</head>
+<style>
+    body {
+        margin: 0px;
+    }
+    #current {
+        color: firebrick;
+        columns: 6;
+        column-gap: 2px;
+        column-rule-style: solid;
+        column-rule-width: 2px;
+        column-fill: auto;
+        height: 20px;
+        column-rule-color: gold;
+        width: 72px;
+        height: 20px;
+    }
+    .items {
+        background-color: lightgreen;
+        height: 20px
+    }
+</style>
+<body>
+    <div id="current">
+        <div class="items"></div>
+        <div class="items"></div>
+        <div class="items"></div>
+        <div class="items"></div>
+        <div class="items"></div>
+        <div class="items"></div>
+    </div>
+</body>
+<script>
+    // Use double requestAnimationFrame to remove need of setTimeout.
+    // Wait for the first frame to ensure that the style is computed.
+    requestAnimationFrame(() => {
+        // Wait for the second frame to ensure that the style is painted.
+        requestAnimationFrame(() => {
+            document.getElementById("current").style.columnRuleColor = "hotpink";
+            document.documentElement.classList.remove("reftest-wait");
+        });
+    });
+</script>
+</html>
