Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Commit 0f3b24c

Browse files
Javier Contreras Tenorio (from Dev Box)lutien
authored andcommitted
Bug 1966725 [wpt PR 52569] - [gap-decorations] Avoid invalidating col rules when GapDecorations is on,
Automatic update from web-platform-tests [gap-decorations] Avoid invalidating col rules when GapDecorations is on 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 <[email protected]> Reviewed-by: Ian Kilpatrick <[email protected]> Commit-Queue: Javier Contreras <[email protected]> Cr-Commit-Position: refs/heads/main@{#1460754} -- wpt-commits: 12048307995281f5e6cc9f3bcfb20d7b2877bd48 wpt-pr: 52569 Differential Revision: https://phabricator.services.mozilla.com/D250631
1 parent 05824e4 commit 0f3b24c

File tree

2 files changed

+83
-0
lines changed

2 files changed

+83
-0
lines changed
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<style>
3+
body {
4+
margin: 0px;
5+
}
6+
#current {
7+
columns: 6;
8+
column-gap: 2px;
9+
column-rule-style: solid;
10+
column-rule-width: 2px;
11+
column-fill: auto;
12+
height: 20px;
13+
column-rule-color: hotpink;
14+
width: 72px;
15+
height: 20px;
16+
}
17+
.items {
18+
background-color: lightgreen;
19+
height: 20px
20+
}
21+
</style>
22+
<body>
23+
<div id="current">
24+
<div class="items"></div>
25+
<div class="items"></div>
26+
<div class="items"></div>
27+
<div class="items"></div>
28+
<div class="items"></div>
29+
<div class="items"></div>
30+
</div>
31+
</body>
32+
</html>
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<head>
4+
<title>column-rule-color invalidates and paints correctly on multi-col</title>
5+
<link rel="match" href="gap-decorations-003-ref.html">
6+
<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-other-colors">
7+
<link rel="author" href="mailto:[email protected]">
8+
</head>
9+
<style>
10+
body {
11+
margin: 0px;
12+
}
13+
#current {
14+
color: firebrick;
15+
columns: 6;
16+
column-gap: 2px;
17+
column-rule-style: solid;
18+
column-rule-width: 2px;
19+
column-fill: auto;
20+
height: 20px;
21+
column-rule-color: gold;
22+
width: 72px;
23+
height: 20px;
24+
}
25+
.items {
26+
background-color: lightgreen;
27+
height: 20px
28+
}
29+
</style>
30+
<body>
31+
<div id="current">
32+
<div class="items"></div>
33+
<div class="items"></div>
34+
<div class="items"></div>
35+
<div class="items"></div>
36+
<div class="items"></div>
37+
<div class="items"></div>
38+
</div>
39+
</body>
40+
<script>
41+
// Use double requestAnimationFrame to remove need of setTimeout.
42+
// Wait for the first frame to ensure that the style is computed.
43+
requestAnimationFrame(() => {
44+
// Wait for the second frame to ensure that the style is painted.
45+
requestAnimationFrame(() => {
46+
document.getElementById("current").style.columnRuleColor = "hotpink";
47+
document.documentElement.classList.remove("reftest-wait");
48+
});
49+
});
50+
</script>
51+
</html>

0 commit comments

Comments
 (0)