Bug 1647520 Part 1 - Adjust reftests so that the optimal column balancing height is on whole CSS pixels. r=heycam

* floats-clear-multicol-balancing-*:

Change border-width from "normal" to "5px" so that the optimal column
height is 85px. This also makes those reftests renders the same across
all browsers since each browser renders "normal" differently.

* column-balancing-overflow-005:

This test is already wrong as its height is 13px/3 = 4.3333px, so it can
pass with some fuzzy. This patch makes the target column height
4px (including the children's overflow). This is the same as the `<p>`'s
height 4px in reference file.

* box-decoration-break-border-image:

Add 1px to .vbreak so that the optimal column balancing height is a
integer. Also, remove a whitespace between two `<span>` in `<pos2>` to make the
test more robust because the width of the whitespace is not an integer.

Differential Revision: https://phabricator.services.mozilla.com/D83729
This commit is contained in:
Ting-Yu Lin 2020-07-20 22:27:35 +00:00
parent 906483c74e
commit 8d402003a7
10 changed files with 23 additions and 25 deletions

View File

@ -5,9 +5,9 @@
column-gap: 4px;
padding: 4px;
outline: 1px orange solid; }
#b { height: 12px;
#b { height: 10px;
outline: 1px green dotted;}
#c { height: 13px;
#c { height: 12px; /* Create overflow for #b */
background: yellow;}
</style></head><body><div id="colset"><div id="b"><div id="c"></div></div></div>
</body></html>
</body></html>

View File

@ -11,7 +11,7 @@
== column-balancing-overflow-002.html column-balancing-overflow-002.ref.html
== column-balancing-overflow-003.html column-balancing-overflow-003.ref.html
== column-balancing-overflow-004.html column-balancing-overflow-004.ref.html
fuzzy-if(webrender,0-126,0-364) == column-balancing-overflow-005.html column-balancing-overflow-005.ref.html
== column-balancing-overflow-005.html column-balancing-overflow-005.ref.html
== column-balancing-000.html column-balancing-000.ref.html
== column-balancing-001.html column-balancing-000.ref.html
== column-balancing-002.html column-balancing-002.ref.html

View File

@ -49,11 +49,11 @@ b1,b2,b3,b4,b5,b6,b7,b8,b9,b10,.b.clone {
columns: 3;
}
.unbalanced { column-fill:auto; }
.vbreak { height:65px; width:41px; }
.vbreak { height:66px; width:41px; }
.unbalanced .vbreak { height:40px; }
.h { width:30px;height:30px; background:grey; }
.m { margin-left:15px; }
.col3 .vbreak { height:115px; }
.col3 .vbreak { height:116px; }
.unbalanced.col3 .vbreak { height:40px; }
x { display:inline-block; width:31px; height:18px; line-height:1; }
y { display:inline-block; width:47px; height:18px; line-height:1; }
@ -66,16 +66,16 @@ b1,b2,b3,b4,b5,b6,b7,b8,b9,b10,c1,c2,c3,c4,c5,c6,c7,c8,c9,c10,m1,m2,m3,m4,m5,m6,
c1,c2,c3,c4,c5,c6,c7,c8,c9,c10 {position:absolute; overflow:hidden; z-index:1;}
b1 { top:50px; left:20px; height:65px; width:41px; }
b1 { top:50px; left:20px; height:66px; width:41px; }
c1 { top:0; left:0; height:88px; width:200px; }
b2 { top:-38px; left:128px; height:66px; width:41px; }
c2 { top:50px; left:0; height:61px; width:200px; }
b3 { top:50px; left:240px; height:115px; width:41px; }
b3 { top:50px; left:240px; height:116px; width:41px; }
c3 { top:0; left:0; height:92px; width:600px; }
b4 { top:-42px; left:312px; height:115px; width:41px; }
b4 { top:-42px; left:312px; height:116px; width:41px; }
c4 { top:50px; left:0; height:42px; width:600px; }
b5 { top:-84px; left:384px; height:116px; width:41px; }
@ -87,8 +87,8 @@ m6 { top:135px; left:56px; height:55px; width:100px; background:white; z-index:2
b7 { top:30px; left:-36px; width:78px; height:19px; }
c7 { top:170px; left:20px; height:300px; width:200px; }
b8 { top:30px; left:77px; width:125px; height:19px; }
m8 { top:15px; left:113px; width:125px; height:55px; background:white; }
b8 { top:30px; left:67px; width:125px; height:19px; }
m8 { top:15px; left:103px; width:125px; height:55px; background:white; }
c8 { top:170px; left:20px; height:300px; width:600px; }
b9 { top:30px; left:-36px; width:125px; height:19px; }
@ -118,15 +118,14 @@ c10 { top:274px; left:20px; height:300px; width:156px; }
</pos1>
<pos2>
<span class="b slice"><x></x><div class="h"></div><y></y></span>
<span class="b slice m"><x></x><div class="h"></div><y></y><div class="h"></div><y></y></span>
<span class="b slice"><x></x><div class="h"></div><y></y></span><span class="b slice m"><x></x><div class="h"></div><y></y><div class="h"></div><y></y></span>
<pre>box-decoration-break:clone</pre>
</pos2>
<pos3>
<div class="unbalanced columns"><div class="b vbreak clone"></div><div class="b vbreak clone" style="height:25px"></div></div>
<div class="unbalanced columns col3"><div class="b vbreak clone"></div><div class="b vbreak clone"></div><div class="b vbreak clone" style="height:35px"></div></div>
<div class="unbalanced columns"><div class="b vbreak clone"></div><div class="b vbreak clone" style="height:26px"></div></div>
<div class="unbalanced columns col3"><div class="b vbreak clone"></div><div class="b vbreak clone"></div><div class="b vbreak clone" style="height:36px"></div></div>
</pos3>
<pos4>

View File

@ -41,10 +41,10 @@ html,body {
columns: 3;
}
.unbalanced { column-fill:auto; }
.vbreak { height:65px; width:41px; }
.vbreak { height:66px; width:41px; }
.h { width:30px;height:30px; background:grey; }
.m { margin-left:15px; }
.col3 .vbreak { height:115px; }
.col3 .vbreak { height:116px; }
.clone { box-decoration-break:clone; }
.slice { box-decoration-break:slice; }
x { display:inline-block; width:31px; height:18px; line-height:1; }
@ -64,8 +64,7 @@ pos4 { position:absolute; top:510px; width:700px; }
</pos1>
<pos2>
<span class="b slice" style="border-style:dashed;"><x></x><div class="h"></div><y></y></span>
<span class="b slice m" style="border-style:dashed;"><x></x><div class="h"></div><y></y><div class="h"></div><y></y></span>
<span class="b slice" style="border-style:dashed;"><x></x><div class="h"></div><y></y></span><span class="b slice m" style="border-style:dashed;"><x></x><div class="h"></div><y></y><div class="h"></div><y></y></span>
<pre>box-decoration-break:clone</pre>
</pos2>

View File

@ -1,7 +1,7 @@
== box-decoration-break-1.html box-decoration-break-1-ref.html
fuzzy(0-1,0-20) fuzzy-if(skiaContent,0-1,0-700) == box-decoration-break-with-inset-box-shadow-1.html box-decoration-break-with-inset-box-shadow-1-ref.html
skip-if(verify) fuzzy(0-45,0-460) fuzzy-if(skiaContent,0-57,0-439) fuzzy-if(Android,0-70,0-1330) random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == box-decoration-break-with-outset-box-shadow-1.html box-decoration-break-with-outset-box-shadow-1-ref.html # Bug 1386543, bug 1392106
random-if(!gtkWidget||webrender) == box-decoration-break-border-image.html box-decoration-break-border-image-ref.html
== box-decoration-break-border-image.html box-decoration-break-border-image-ref.html
== box-decoration-break-block-border-padding.html box-decoration-break-block-border-padding-ref.html
== box-decoration-break-block-margin.html box-decoration-break-block-margin-ref.html
fuzzy-if(!Android,0-1,0-62) fuzzy-if(Android,0-8,0-6627) random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == box-decoration-break-first-letter.html box-decoration-break-first-letter-ref.html #Bug 1313773 # Bug 1392106

View File

@ -20,7 +20,7 @@
height: 250px;
}
.clear {
border-bottom: solid orange;
border-bottom: 5px solid orange;
background: red;
}
</style>

View File

@ -32,7 +32,7 @@
}
.clear {
border-bottom: solid orange;
border-bottom: 5px solid orange;
}
</style>

View File

@ -31,7 +31,7 @@
}
.clear {
border-bottom: solid orange;
border-bottom: 5px solid orange;
background: red;
}
</style>

View File

@ -33,7 +33,7 @@
.clear {
clear: left;
border-bottom: solid orange;
border-bottom: 5px solid orange;
background: red;
}
</style>

View File

@ -42,7 +42,7 @@
background: red;
}
.bar {
border-bottom: orange solid;
border-bottom: 5px orange solid;
}
</style>