Skip to content

Commit c2609ae

Browse files
mstenshoChromium LUCI CQ
authored andcommitted
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 ]
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>
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>
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>
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>

0 commit comments

Comments
 (0)