Skip to content

Commit aa3d3d3

Browse files
bfgeekchromium-wpt-export-bot
bfgeek
authored and
chromium-wpt-export-bot
committed
[flex-balance] Add test for non-trival balancing.
See: https://drafts.csswg.org/css-flexbox-2/#algo-balance """ Calling the difference between the line size and the flex container’s inner main size a sequence’s error, the sum of the squared error across all sequences is minimized. """ All implementations should minimize the sum of the squared error from all lines. Due to this any non-trival set of items should result in the exact same rendering between implementations. Bug: 416755656 Change-Id: Ie42baf417157ef98445e74f6d963d409dd32d1ce Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7851357 Reviewed-by: David Grogan <dgrogan@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1630979}
1 parent 678d220 commit aa3d3d3

2 files changed

Lines changed: 93 additions & 0 deletions

File tree

‎css/css-flexbox/balance/balance-complex-ref.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<style>
3+
#flex {
4+
display: flex;
5+
flex-wrap: wrap;
6+
width: 250px;
7+
padding: 10px;
8+
gap: 10px;
9+
}
10+
#flex > div {
11+
height: 20px;
12+
background: green;
13+
}
14+
</style>
15+
<div id="flex">
16+
<div style="width: 100px;"></div>
17+
<div style="width: 20px;"></div>
18+
<div style="background: none; width: 110px;"></div>
19+
<div style="width: 40px;"></div>
20+
<div style="width: 70px;"></div>
21+
<div style="width: 20px;"></div>
22+
<div style="width: 10px;"></div>
23+
<div style="width: 250px;"></div>
24+
<div style="width: 20px;"></div>
25+
<div style="width: 50px;"></div>
26+
<div style="width: 65px;"></div>
27+
<div style="background: none; width: 85px;"></div>
28+
<div style="width: 50px;"></div>
29+
<div style="width: 55px;"></div>
30+
<div style="width: 50px;"></div>
31+
<div style="background: none; width: 65px;"></div>
32+
<div style="width: 50px;"></div>
33+
<div style="width: 90px;"></div>
34+
<div style="width: 50px;"></div>
35+
<div style="background: none; width: 30px;"></div>
36+
<div style="width: 20px;"></div>
37+
<div style="width: 20px;"></div>
38+
<div style="width: 50px;"></div>
39+
<div style="width: 50px;"></div>
40+
<div style="background: none; width: 70px;"></div>
41+
<div style="width: 65px;"></div>
42+
<div style="width: 65px;"></div>
43+
<div style="width: 50px;"></div>
44+
<div style="width: 150px;"></div>
45+
<div style="background: none; width: 90px;"></div>
46+
<div style="width: 50px;"></div>
47+
<div style="width: 50px;"></div>
48+
</div>

‎css/css-flexbox/balance/balance-complex.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-2/#algo-balance">
3+
<link rel="match" href="balance-complex-ref.html">
4+
<meta name="assert" content="Tests balancing a non-trivial amount of items. All implementations should be minimizing the sum of the squared error, and have the same rendering.">
5+
<style>
6+
#flex {
7+
display: flex;
8+
flex-wrap: balance;
9+
width: 250px;
10+
padding: 10px;
11+
gap: 10px;
12+
}
13+
#flex > div {
14+
height: 20px;
15+
background: green;
16+
}
17+
</style>
18+
<div id="flex">
19+
<div style="width: 100px;"></div>
20+
<div style="width: 20px;"></div>
21+
<div style="width: 40px;"></div>
22+
<div style="width: 70px;"></div>
23+
<div style="width: 20px;"></div>
24+
<div style="width: 10px;"></div>
25+
<div style="width: 250px;"></div>
26+
<div style="width: 20px;"></div>
27+
<div style="width: 50px;"></div>
28+
<div style="width: 65px;"></div>
29+
<div style="width: 50px;"></div>
30+
<div style="width: 55px;"></div>
31+
<div style="width: 50px;"></div>
32+
<div style="width: 50px;"></div>
33+
<div style="width: 90px;"></div>
34+
<div style="width: 50px;"></div>
35+
<div style="width: 20px;"></div>
36+
<div style="width: 20px;"></div>
37+
<div style="width: 50px;"></div>
38+
<div style="width: 50px;"></div>
39+
<div style="width: 65px;"></div>
40+
<div style="width: 65px;"></div>
41+
<div style="width: 50px;"></div>
42+
<div style="width: 150px;"></div>
43+
<div style="width: 50px;"></div>
44+
<div style="width: 50px;"></div>
45+
</div>

0 commit comments

Comments
 (0)