Skip to content

Commit c35a70f

Browse files
author
[email protected]
committed
[css-grid] Always consider baseline shim for the minimum contribution
https://bugs.webkit.org/show_bug.cgi?id=195964 Patch by Oriol Brufau <[email protected]> on 2019-03-20 Reviewed by Javier Fernandez. LayoutTests/imported/w3c: Import WPT tests. * web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-expected.txt: Added. * web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr-expected.txt: Added. * web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html: Added. * web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl-expected.txt: Added. * web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html: Added. * web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html: Added. * web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log: Source/WebCore: Tests: imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html Before this patch, the shim used for baseline alignment is not taken into consideration when calculating the minimum contribution of a grid item if its preferred size is auto, its minimum size is auto, and the max track sizing function is a fixed small value. In this case, the auto minimum size can produce a smaller track than if it was 0. The specification needs to clarify how baseline shims interact with minimum contributions (w3c/csswg-drafts#3660), but the above doesn't make sense. * rendering/GridTrackSizingAlgorithm.cpp: (WebCore::GridTrackSizingAlgorithmStrategy::minSizeForChild const): git-svn-id: http://svn.webkit.org/repository/webkit/trunk@243218 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent 3cfe36b commit c35a70f

10 files changed

+359
-6
lines changed

‎LayoutTests/imported/w3c/ChangeLog

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
2019-03-20 Oriol Brufau <[email protected]>
2+
3+
[css-grid] Always consider baseline shim for the minimum contribution
4+
https://bugs.webkit.org/show_bug.cgi?id=195964
5+
6+
Reviewed by Javier Fernandez.
7+
8+
Import WPT tests.
9+
10+
* web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-expected.txt: Added.
11+
* web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr-expected.txt: Added.
12+
* web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html: Added.
13+
* web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl-expected.txt: Added.
14+
* web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html: Added.
15+
* web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html: Added.
16+
* web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log:
17+
118
2019-03-16 Youenn Fablet <[email protected]>
219

320
Update WPT WebRTC tests up to a22a149

‎LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-expected.txt

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
PASS .grid 1
3+
PASS .grid 2
4+
PASS .grid 3
5+
PASS .grid 4
6+
PASS .grid 5
7+
PASS .grid 6
8+

‎LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr-expected.txt

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
PASS .grid 1
3+
PASS .grid 2
4+
PASS .grid 3
5+
PASS .grid 4
6+
PASS .grid 5
7+
PASS .grid 6
8+

‎LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title>
4+
<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes">
6+
<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area.">
7+
<style>
8+
.grid {
9+
display: grid;
10+
position: relative;
11+
font-size: 0;
12+
height: 0;
13+
width: 0;
14+
margin-bottom: 125px;
15+
grid-template-rows: 50px 50px;
16+
justify-items: baseline;
17+
}
18+
.item1, .item2 {
19+
writing-mode: vertical-lr;
20+
}
21+
.item1 {
22+
padding-left: 25px;
23+
background: yellow;
24+
}
25+
.item2 {
26+
padding-right: 25px;
27+
background: magenta;
28+
}
29+
.item1::before, .item2::before {
30+
content: '';
31+
display: inline-block;
32+
width: 25px;
33+
height: 25px;
34+
vertical-align: top;
35+
}
36+
.item2::before {
37+
vertical-align: bottom;
38+
}
39+
.area {
40+
position: absolute;
41+
z-index: -1;
42+
left: 0;
43+
right: 0;
44+
top: 0;
45+
bottom: 0;
46+
grid-column: 1 / 2;
47+
grid-row: 1 / 3;
48+
background: cyan;
49+
}
50+
</style>
51+
52+
<script src="/resources/testharness.js"></script>
53+
<script src="/resources/testharnessreport.js"></script>
54+
<script src="/resources/check-layout-th.js"></script>
55+
56+
<div id="log"></div>
57+
58+
<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
59+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
60+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
61+
<div class="area" data-expected-width="75" data-expected-height="100"></div>
62+
</div>
63+
64+
<div class="grid" style="grid-template-columns: minmax(auto, 75px);">
65+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
66+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
67+
<div class="area" data-expected-width="75" data-expected-height="100"></div>
68+
</div>
69+
70+
<div class="grid" style="grid-template-columns: minmax(auto, 88px);">
71+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
72+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
73+
<div class="area" data-expected-width="88" data-expected-height="100"></div>
74+
</div>
75+
76+
<div class="grid" style="grid-template-columns: minmax(auto, 100px);">
77+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
78+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
79+
<div class="area" data-expected-width="100" data-expected-height="100"></div>
80+
</div>
81+
82+
<div class="grid" style="grid-template-columns: minmax(auto, 150px);">
83+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
84+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
85+
<div class="area" data-expected-width="100" data-expected-height="100"></div>
86+
</div>
87+
88+
<div class="grid" style="grid-template-columns: minmax(auto, auto);">
89+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
90+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
91+
<div class="area" data-expected-width="100" data-expected-height="100"></div>
92+
</div>
93+
94+
<script>
95+
checkLayout(".grid");
96+
</script>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl-expected.txt

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
PASS .grid 1
3+
PASS .grid 2
4+
PASS .grid 3
5+
PASS .grid 4
6+
PASS .grid 5
7+
PASS .grid 6
8+

‎LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title>
4+
<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes">
6+
<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area.">
7+
<style>
8+
.grid {
9+
display: grid;
10+
position: relative;
11+
font-size: 0;
12+
height: 0;
13+
width: 0;
14+
margin-bottom: 125px;
15+
grid-template-rows: 50px 50px;
16+
justify-items: baseline;
17+
}
18+
.item1, .item2 {
19+
writing-mode: vertical-rl;
20+
}
21+
.item1 {
22+
padding-left: 25px;
23+
background: yellow;
24+
}
25+
.item2 {
26+
padding-right: 25px;
27+
background: magenta;
28+
}
29+
.item1::before, .item2::before {
30+
content: '';
31+
display: inline-block;
32+
width: 25px;
33+
height: 25px;
34+
vertical-align: top;
35+
}
36+
.item2::before {
37+
vertical-align: bottom;
38+
}
39+
.area {
40+
position: absolute;
41+
z-index: -1;
42+
left: 0;
43+
right: 0;
44+
top: 0;
45+
bottom: 0;
46+
grid-column: 1 / 2;
47+
grid-row: 1 / 3;
48+
background: cyan;
49+
}
50+
</style>
51+
52+
<script src="/resources/testharness.js"></script>
53+
<script src="/resources/testharnessreport.js"></script>
54+
<script src="/resources/check-layout-th.js"></script>
55+
56+
<div id="log"></div>
57+
58+
<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
59+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
60+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
61+
<div class="area" data-expected-width="75" data-expected-height="100"></div>
62+
</div>
63+
64+
<div class="grid" style="grid-template-columns: minmax(auto, 75px);">
65+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
66+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
67+
<div class="area" data-expected-width="75" data-expected-height="100"></div>
68+
</div>
69+
70+
<div class="grid" style="grid-template-columns: minmax(auto, 88px);">
71+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
72+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
73+
<div class="area" data-expected-width="88" data-expected-height="100"></div>
74+
</div>
75+
76+
<div class="grid" style="grid-template-columns: minmax(auto, 100px);">
77+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
78+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
79+
<div class="area" data-expected-width="100" data-expected-height="100"></div>
80+
</div>
81+
82+
<div class="grid" style="grid-template-columns: minmax(auto, 150px);">
83+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
84+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
85+
<div class="area" data-expected-width="100" data-expected-height="100"></div>
86+
</div>
87+
88+
<div class="grid" style="grid-template-columns: minmax(auto, auto);">
89+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
90+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
91+
<div class="area" data-expected-width="100" data-expected-height="100"></div>
92+
</div>
93+
94+
<script>
95+
checkLayout(".grid");
96+
</script>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title>
4+
<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes">
6+
<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area.">
7+
<style>
8+
.grid {
9+
display: grid;
10+
position: relative;
11+
font-size: 0;
12+
height: 0;
13+
width: 0;
14+
margin-bottom: 125px;
15+
grid-template-columns: 50px 50px;
16+
align-items: baseline;
17+
}
18+
.item1 {
19+
padding-top: 25px;
20+
background: yellow;
21+
}
22+
.item2 {
23+
padding-bottom: 25px;
24+
background: magenta;
25+
}
26+
.item1::before, .item2::before {
27+
content: '';
28+
display: inline-block;
29+
width: 25px;
30+
height: 25px;
31+
vertical-align: bottom;
32+
}
33+
.item2::before {
34+
vertical-align: top;
35+
}
36+
.area {
37+
position: absolute;
38+
z-index: -1;
39+
left: 0;
40+
right: 0;
41+
top: 0;
42+
bottom: 0;
43+
grid-column: 1 / 3;
44+
grid-row: 1 / 2;
45+
background: cyan;
46+
}
47+
</style>
48+
49+
<script src="/resources/testharness.js"></script>
50+
<script src="/resources/testharnessreport.js"></script>
51+
<script src="/resources/check-layout-th.js"></script>
52+
53+
<div id="log"></div>
54+
55+
<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
56+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
57+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
58+
<div class="area" data-expected-width="100" data-expected-height="75"></div>
59+
</div>
60+
61+
<div class="grid" style="grid-template-rows: minmax(auto, 75px);">
62+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
63+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
64+
<div class="area" data-expected-width="100" data-expected-height="75"></div>
65+
</div>
66+
67+
<div class="grid" style="grid-template-rows: minmax(auto, 88px);">
68+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
69+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
70+
<div class="area" data-expected-width="100" data-expected-height="88"></div>
71+
</div>
72+
73+
<div class="grid" style="grid-template-rows: minmax(auto, 100px);">
74+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
75+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
76+
<div class="area" data-expected-width="100" data-expected-height="100"></div>
77+
</div>
78+
79+
<div class="grid" style="grid-template-rows: minmax(auto, 150px);">
80+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
81+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
82+
<div class="area" data-expected-width="100" data-expected-height="100"></div>
83+
</div>
84+
85+
<div class="grid" style="grid-template-rows: minmax(auto, auto);">
86+
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
87+
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
88+
<div class="area" data-expected-width="100" data-expected-height="100"></div>
89+
</div>
90+
91+
<script>
92+
checkLayout(".grid");
93+
</script>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ List of files:
2424
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html
2525
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-layout-free-space-unit-expected.html
2626
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-layout-free-space-unit.html
27+
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html
28+
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html
29+
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html
2730
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-percent-cols-filled-shrinkwrap-001-expected.html
2831
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-percent-cols-filled-shrinkwrap-001.html
2932
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-percent-cols-spanned-shrinkwrap-001-expected.html

‎Source/WebCore/ChangeLog

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,27 @@
1+
2019-03-20 Oriol Brufau <[email protected]>
2+
3+
[css-grid] Always consider baseline shim for the minimum contribution
4+
https://bugs.webkit.org/show_bug.cgi?id=195964
5+
6+
Reviewed by Javier Fernandez.
7+
8+
Tests: imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html
9+
imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html
10+
imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html
11+
12+
Before this patch, the shim used for baseline alignment is not taken
13+
into consideration when calculating the minimum contribution of a grid
14+
item if its preferred size is auto, its minimum size is auto, and the
15+
max track sizing function is a fixed small value. In this case, the
16+
auto minimum size can produce a smaller track than if it was 0.
17+
18+
The specification needs to clarify how baseline shims interact with
19+
minimum contributions (https://github.com/w3c/csswg-drafts/issues/3660),
20+
but the above doesn't make sense.
21+
22+
* rendering/GridTrackSizingAlgorithm.cpp:
23+
(WebCore::GridTrackSizingAlgorithmStrategy::minSizeForChild const):
24+
125
2019-03-20 Simon Fraser <[email protected]>
226

327
Some elements lag behind async overflow scrolling on palace-games.com

0 commit comments

Comments
 (0)