Skip to content

Commit 8ea6070

Browse files
committed
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 <almahermicrosoft.com> Reviewed-by: Ian Kilpatrick <ikilpatrickchromium.org> Commit-Queue: Javier Contreras <javierconmicrosoft.com> Cr-Commit-Position: refs/heads/main{#1460754} -- wpt-commits: 12048307995281f5e6cc9f3bcfb20d7b2877bd48 wpt-pr: 52569 Differential Revision: https://phabricator.services.mozilla.com/D250631 UltraBlame original commit: 112bba61ff7c12edcdc3b89949f77745ed98edb6
1 parent d0c79a5 commit 8ea6070

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)