Skip to content

Commit c2609ae

Browse files
mstenshoChromium LUCI CQ
mstensho
authored and
Chromium LUCI CQ
committed
Tweak multicol opacity tests to avoid minor color differences.
There is something somewhere inside Skia / Viz causing this. Restore layers-split-across-columns.html as a reftest. It got turned into a PNG test in 2017 - https://codereview.chromium.org/2768143002 Tweak mixed-opacity-fixed-test.html a little, to make both legacy and NG multicol happy. This is achieved by wrapping everything inside a absolutely positioned strict containment will-change:transform container. Also need to give said container some height, or legacy multicol will fail to paint the fixed positioned element. Tweak layers-split-across-columns.html in a similar manner, by adding will-change:transform to each container. Bug: 1066626 Change-Id: I922899637756a6223d3b9fb4ccf3f20672b8fda9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3179047 Reviewed-by: Xianzhu Wang <[email protected]> Commit-Queue: Morten Stenshorne <[email protected]> Cr-Commit-Position: refs/heads/main@{#925289}
1 parent be7504b commit c2609ae

File tree

10 files changed

+177
-77
lines changed

10 files changed

+177
-77
lines changed

‎third_party/blink/web_tests/TestExpectations

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1380,8 +1380,6 @@ crbug.com/1066629 virtual/layout_ng_block_frag/fast/multicol/hit-test-translate-
13801380
crbug.com/1225630 virtual/layout_ng_block_frag/fast/multicol/infinite-height-causing-fractional-row-height-crash.html [ Skip ]
13811381
crbug.com/1225630 virtual/layout_ng_block_frag/fast/multicol/infinitely-tall-content-in-outer-crash.html [ Skip ]
13821382
crbug.com/1225630 virtual/layout_ng_block_frag/fast/multicol/insane-column-count-and-padding-nested-crash.html [ Skip ]
1383-
crbug.com/1066626 virtual/layout_ng_block_frag/fast/multicol/layers-split-across-columns.html [ Failure ]
1384-
crbug.com/1066626 virtual/layout_ng_block_frag/fast/multicol/mixed-opacity-fixed-test.html [ Failure ]
13851383
crbug.com/1079031 virtual/layout_ng_block_frag/fast/multicol/mixed-opacity-test.html [ Crash Failure ]
13861384
crbug.com/1225630 virtual/layout_ng_block_frag/fast/multicol/nested-very-tall-inside-short-crash.html [ Skip ]
13871385
crbug.com/1242348 virtual/layout_ng_block_frag/fast/multicol/tall-line-in-short-block.html [ Failure ]

‎third_party/blink/web_tests/fast/multicol/layers-split-across-columns-expected.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<style>
3+
.container {
4+
margin-right: 4px;
5+
position: absolute;
6+
will-change: transform;
7+
}
8+
.multicol {
9+
width: 110px;
10+
height: 150px;
11+
border: 5px solid black;
12+
}
13+
.multicol > div {
14+
float: left;
15+
width: 50px;
16+
height: 50px;
17+
}
18+
19+
.row1_left { background-color: black; }
20+
.row1_right { background-color: #0000b0; }
21+
.row2_left { background-color: #0000f0; }
22+
.row2_right { background-color: #000090; }
23+
.row3_left { background-color: #0000d0; }
24+
.row3_right { background-color: black; }
25+
26+
.row1_right,
27+
.row2_right,
28+
.row3_right {
29+
margin-left: 10px;
30+
}
31+
32+
#opacity .row1_right,
33+
#opacity .row2_left,
34+
#opacity .row2_right,
35+
#opacity .row3_left {
36+
opacity: 0.99;
37+
}
38+
39+
.pos1 { left: 10px; top: 10px; }
40+
.pos2 { left: 150px; top: 10px; }
41+
.pos3 { left: 10px; top: 200px; }
42+
.pos4 { left: 150px; top: 200px; }
43+
</style>
44+
45+
<div class="container pos1">
46+
Overflow:
47+
<div class="multicol">
48+
<div class="row1_left"></div>
49+
<div class="row1_right"></div>
50+
<div class="row2_left"></div>
51+
<div class="row2_right"></div>
52+
<div class="row3_left"></div>
53+
<div class="row3_right"></div>
54+
</div>
55+
</div>
56+
57+
<div class="container pos2">
58+
Transforms:
59+
<div class="multicol">
60+
<div class="row1_left"></div>
61+
<div class="row1_right"></div>
62+
<div class="row2_left"></div>
63+
<div class="row2_right"></div>
64+
<div class="row3_left"></div>
65+
<div class="row3_right"></div>
66+
</div>
67+
</div>
68+
69+
<div class="container pos3">
70+
Relative Pos.:
71+
<div class="multicol">
72+
<div class="row1_left"></div>
73+
<div class="row1_right"></div>
74+
<div class="row2_left"></div>
75+
<div class="row2_right"></div>
76+
<div class="row3_left"></div>
77+
<div class="row3_right"></div>
78+
</div>
79+
</div>
80+
81+
<div class="container pos4" id="opacity">
82+
Opacity:
83+
<div class="multicol">
84+
<div class="row1_left"></div>
85+
<div class="row1_right"></div>
86+
<div class="row2_left"></div>
87+
<div class="row2_right"></div>
88+
<div class="row3_left"></div>
89+
<div class="row3_right"></div>
90+
</div>
91+
</div>

‎third_party/blink/web_tests/fast/multicol/layers-split-across-columns.html

Lines changed: 69 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,83 @@
11
<!DOCTYPE html>
22
<style>
3-
.container { width:120px; position: absolute; }
4-
.multicol { -moz-column-width:50px; -moz-column-gap:10px; -webkit-column-width:50px; -webkit-column-gap:10px; column-width:50px; column-gap:10px; column-fill:auto; height:150px; border:5px solid black; }
5-
.block { width:50px; height:50px }
6-
.block:hover { background-color: maroon !important; }
7-
.layer { height:200px; width:50px }
8-
.line2 { position: absolute; top: 343px; left: 8px; }
9-
.pos1 { left: 10px; top: 10px; }
10-
.pos2 { left: 150px; top: 10px; }
11-
.pos3 { left: 10px; top: 200px; }
12-
.pos4 { left: 150px; top: 200px; }
3+
.container {
4+
width: 120px;
5+
position: absolute;
6+
will-change: transform;
7+
}
8+
.multicol {
9+
columns: 2;
10+
column-gap: 10px;
11+
column-fill: auto;
12+
height: 150px;
13+
border: 5px solid black;
14+
}
15+
.block {
16+
width: 50px;
17+
height: 50px;
18+
}
19+
.layer {
20+
width: 50px;
21+
height: 200px;
22+
}
23+
.pos1 { left: 10px; top: 10px; }
24+
.pos2 { left: 150px; top: 10px; }
25+
.pos3 { left: 10px; top: 200px; }
26+
.pos4 { left: 150px; top: 200px; }
1327
</style>
28+
1429
<div class="container pos1">
15-
Overflow:
16-
<div class="multicol">
17-
<div class="block" style="background-color:black"></div>
18-
<div style="overflow:clip;" class="layer">
19-
<div class="block" style="background-color: #0000f0"></div>
20-
<div class="block" style="background-color: #0000d0"></div>
21-
<div class="block" style="background-color: #0000b0"></div>
22-
<div class="block" style="background-color: #000090"></div>
23-
</div>
24-
<div class="block" style="background-color:black"></div>
25-
</div>
30+
Overflow:
31+
<div class="multicol">
32+
<div class="block" style="background-color:black"></div>
33+
<div style="overflow:clip;" class="layer">
34+
<div class="block" style="background-color: #0000f0"></div>
35+
<div class="block" style="background-color: #0000d0"></div>
36+
<div class="block" style="background-color: #0000b0"></div>
37+
<div class="block" style="background-color: #000090"></div>
38+
</div>
39+
<div class="block" style="background-color:black"></div>
40+
</div>
2641
</div>
2742

2843
<div class="container pos2">
29-
Transforms:
30-
31-
<div class="multicol">
32-
<div class="block" style="background-color:black"></div>
33-
<div style="margin-left: -100px; transform: translate(100px, 0);" class="layer">
34-
<div class="block" style="background-color: #0000f0"></div>
35-
<div class="block" style="background-color: #0000d0"></div>
36-
<div class="block" style="background-color: #0000b0"></div>
37-
<div class="block" style="background-color: #000090"></div>
38-
</div>
39-
<div class="block" style="background-color:black"></div>
40-
</div>
41-
</div>
44+
Transforms:
45+
<div class="multicol">
46+
<div class="block" style="background-color:black"></div>
47+
<div style="margin-left: -100px; transform: translate(100px, 0);" class="layer">
48+
<div class="block" style="background-color: #0000f0"></div>
49+
<div class="block" style="background-color: #0000d0"></div>
50+
<div class="block" style="background-color: #0000b0"></div>
51+
<div class="block" style="background-color: #000090"></div>
52+
</div>
53+
<div class="block" style="background-color:black"></div>
54+
</div>
4255
</div>
4356

4457
<div class="container pos3">
45-
Relative Pos.:
46-
<div class="multicol">
47-
<div class="block" style="background-color:black"></div>
48-
<div style="position:relative; margin-left:-100px; left:100px" class="layer">
49-
<div class="block" style="background-color: #0000f0"></div>
50-
<div class="block" style="background-color: #0000d0"></div>
51-
<div class="block" style="background-color: #0000b0"></div>
52-
<div class="block" style="background-color: #000090"></div>
53-
</div>
54-
<div class="block" style="background-color:black"></div>
55-
</div>
58+
Relative Pos.:
59+
<div class="multicol">
60+
<div class="block" style="background-color:black"></div>
61+
<div style="position:relative; margin-left:-100px; left:100px" class="layer">
62+
<div class="block" style="background-color: #0000f0"></div>
63+
<div class="block" style="background-color: #0000d0"></div>
64+
<div class="block" style="background-color: #0000b0"></div>
65+
<div class="block" style="background-color: #000090"></div>
66+
</div>
67+
<div class="block" style="background-color:black"></div>
68+
</div>
5669
</div>
5770

5871
<div class="container pos4">
59-
Opacity:
60-
61-
<div class="multicol">
62-
<div class="block" style="background-color:black"></div>
63-
<div style="opacity:0.99;" class="layer">
64-
<!-- The extra &nbsp;s below force the creation of transparency layers in Skia to work
65-
around optimizations that would cause blending differences between the test and the
66-
expectation. -->
67-
<div class="block" style="background-color: #0000f0">&nbsp;</div>
68-
<div class="block" style="background-color: #0000d0">&nbsp;</div>
69-
<div class="block" style="background-color: #0000b0">&nbsp;</div>
70-
<div class="block" style="background-color: #000090">&nbsp;</div>
71-
</div>
72-
<div class="block" style="background-color:black"></div>
73-
</div>
72+
Opacity:
73+
<div class="multicol">
74+
<div class="block" style="background-color:black"></div>
75+
<div style="opacity:0.99;" class="layer">
76+
<div class="block" style="background-color: #0000f0"></div>
77+
<div class="block" style="background-color: #0000d0"></div>
78+
<div class="block" style="background-color: #0000b0"></div>
79+
<div class="block" style="background-color: #000090"></div>
80+
</div>
81+
<div class="block" style="background-color:black"></div>
82+
</div>
7483
</div>

‎third_party/blink/web_tests/fast/multicol/mixed-opacity-fixed-test-expected.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
<div style="position:relative; width:420px; border:2px solid black; height:200px">
2-
<div style="opacity:0.5;position:relative">
3-
<div style="height:200px;background-color:green;position:absolute;width:200px;left:0;top:0"></div>
4-
<div style="height:200px;background-color:green;position:absolute;width:200px;right:0;top:0"></div>
5-
<div style="position:fixed;height:98px;width:98px;background-color:lightgray; left:170px; top:220px;background-color:green;border:1px solid lime">
6-
</div>
7-
</div>
8-
</div>
1+
<!DOCTYPE html>
2+
<div style="position:absolute; will-change:transform; contain:strict; height:500px;">
3+
<div style="position:relative; width:420px; border:2px solid black; height:200px;">
4+
<div style="opacity:0.5;">
5+
<div style="height:200px; background:green; position:absolute; width:200px; left:0; top:0;"></div>
6+
<div style="height:200px; background:green; position:absolute; width:200px; right:0; top:0;"></div>
7+
<div style="position:fixed; height:98px; width:98px; left:170px; top:220px; background:green; border:1px solid lime;"></div>
8+
</div>
9+
</div>
910
</div>

‎third_party/blink/web_tests/fast/multicol/mixed-opacity-fixed-test.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
<div style="position:relative; -webkit-column-count:2; -webkit-column-width:200px; -webkit-column-gap:20px; column-count:2; column-width:200px; column-gap:20px; column-fill:auto; width:420px; height:200px; border:2px solid black;">
2-
<div style="opacity:0.5">
3-
<div style="height:400px;background-color:green"></div>
4-
<div style="position:fixed;height:98px;width:98px;background-color:lightgray; left:170px; top:220px;background-color:green;border:1px solid lime">
5-
</div>
6-
</div>
7-
</div>
1+
<!DOCTYPE html>
2+
<div style="position:absolute; will-change:transform; contain:strict; height:500px;">
3+
<div style="columns:2; column-gap:20px; column-fill:auto; width:420px; height:200px; border:2px solid black;">
4+
<div style="opacity:0.5;">
5+
<div style="height:400px; background:green;"></div>
6+
<div style="position:fixed; height:98px; width:98px; left:170px; top:220px; background:green; border:1px solid lime;"></div>
7+
</div>
8+
</div>
89
</div>

‎third_party/blink/web_tests/flag-specific/highdpi/fast/multicol/layers-split-across-columns-expected.png

-13.3 KB
Binary file not shown.

‎third_party/blink/web_tests/platform/linux/fast/multicol/layers-split-across-columns-expected.png

-7.55 KB
Binary file not shown.

‎third_party/blink/web_tests/platform/linux/virtual/layout_ng_block_frag/fast/multicol/layers-split-across-columns-expected.png

-7.55 KB
Binary file not shown.

‎third_party/blink/web_tests/platform/mac/fast/multicol/layers-split-across-columns-expected.png

-3.76 KB
Binary file not shown.

‎third_party/blink/web_tests/platform/win/fast/multicol/layers-split-across-columns-expected.png

-3.76 KB
Binary file not shown.

0 commit comments

Comments
 (0)