Diff
Modified: trunk/LayoutTests/ChangeLog (266674 => 266675)
--- trunk/LayoutTests/ChangeLog 2020-09-06 00:11:40 UTC (rev 266674)
+++ trunk/LayoutTests/ChangeLog 2020-09-06 00:26:23 UTC (rev 266675)
@@ -1,5 +1,16 @@
2020-09-05 Oriol Brufau <[email protected]>
+ [css-grid] Use min-content size for intrinsic maximums resolution
+ https://bugs.webkit.org/show_bug.cgi?id=216142
+
+ Reviewed by Darin Adler.
+
+ Update test expectations. Some are wrong due to bug 216144.
+
+ * fast/css-grid-layout/grid-intrinsic-maximums-expected.html:
+
+2020-09-05 Oriol Brufau <[email protected]>
+
[css-logical] Ship flow-relative shorthand and offset properties
https://bugs.webkit.org/show_bug.cgi?id=216178
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-intrinsic-maximums-expected.html (266674 => 266675)
--- trunk/LayoutTests/fast/css-grid-layout/grid-intrinsic-maximums-expected.html 2020-09-06 00:11:40 UTC (rev 266674)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-intrinsic-maximums-expected.html 2020-09-06 00:26:23 UTC (rev 266675)
@@ -40,7 +40,7 @@
<div class="float">
-<div class="grid" style="grid-template: 20px / 10px 5px;">
+<div class="grid" style="grid-template: 20px / 35px 5px;">
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
@@ -52,7 +52,8 @@
<div class="abs col2"></div>
</div>
-<div class="grid" style="grid-template: 20px / 85px 5px;">
+<!-- 'min-width: max-content' is not respected, http://wkb.ug/216144 -->
+<div class="grid" style="grid-template: 20px / 35px 5px;">
<div class="item min-width-max-content">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
@@ -80,7 +81,7 @@
<div class="float">
-<div class="grid" style="grid-template: 20px / repeat(2, 5px) 80px;">
+<div class="grid" style="grid-template: 20px / 17.5px 5px 67.5px;">
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
@@ -94,7 +95,8 @@
<div class="abs col3"></div>
</div>
-<div class="grid" style="grid-template: 20px / calc(85px / 2) 5px calc(85px / 2);">
+<!-- 'min-width: max-content' is not respected, http://wkb.ug/216144 -->
+<div class="grid" style="grid-template: 20px / 17.5px 5px 67.5px;">
<div class="item min-width-max-content">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
@@ -101,7 +103,7 @@
<div class="abs col3"></div>
</div>
-<div class="grid" style="grid-template: 20px / 90px repeat(2, 5px);">
+<div class="grid" style="grid-template: 20px / 77.5px 5px 17.5px;">
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
@@ -115,7 +117,8 @@
<div class="abs col3"></div>
</div>
-<div class="grid" style="grid-template: 20px / calc(105px/2) 5px calc(85px/2);">
+<!-- 'min-width: max-content' is not respected, http://wkb.ug/216144 -->
+<div class="grid" style="grid-template: 20px / 77.5px 5px 17.5px;">
<div class="item min-width-max-content">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (266674 => 266675)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2020-09-06 00:11:40 UTC (rev 266674)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2020-09-06 00:26:23 UTC (rev 266675)
@@ -1,5 +1,18 @@
2020-09-05 Oriol Brufau <[email protected]>
+ [css-grid] Use min-content size for intrinsic maximums resolution
+ https://bugs.webkit.org/show_bug.cgi?id=216142
+
+ Reviewed by Darin Adler.
+
+ Import WPT test.
+
+ * web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001-expected.txt: Added.
+ * web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html: Added.
+ * web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log:
+
+2020-09-05 Oriol Brufau <[email protected]>
+
[css-logical] Ship flow-relative shorthand and offset properties
https://bugs.webkit.org/show_bug.cgi?id=216178
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001-expected.txt (0 => 266675)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001-expected.txt 2020-09-06 00:26:23 UTC (rev 266675)
@@ -0,0 +1,36 @@
+XXX XX
+XX
+XX
+
+PASS 'grid' with: grid-template-columns: auto; and grid-template-rows: auto;
+PASS 'grid' with: grid-template-columns: min-content; and grid-template-rows: min-content;
+PASS 'grid' with: grid-template-columns: max-content; and grid-template-rows: max-content;
+PASS 'grid' with: grid-template-columns: minmax(0, auto); and grid-template-rows: minmax(0, auto);
+PASS 'grid' with: grid-template-columns: minmax(0, min-content); and grid-template-rows: minmax(0, min-content);
+PASS 'grid' with: grid-template-columns: minmax(0, max-content); and grid-template-rows: minmax(0, max-content);
+PASS 'grid' with: grid-template-columns: minmax(auto, 10px); and grid-template-rows: minmax(auto, 10px);
+PASS 'grid' with: grid-template-columns: minmax(min-content, 10px); and grid-template-rows: minmax(min-content, 10px);
+PASS 'grid' with: grid-template-columns: minmax(max-content, 10px); and grid-template-rows: minmax(max-content, 10px);
+PASS 'grid' with: grid-template-columns: auto auto; and grid-template-rows: auto auto;
+PASS 'grid' with: grid-template-columns: min-content min-content; and grid-template-rows: min-content min-content;
+PASS 'grid' with: grid-template-columns: max-content max-content; and grid-template-rows: max-content max-content;
+PASS 'grid' with: grid-template-columns: minmax(0, auto) minmax(0, auto); and grid-template-rows: minmax(0, auto) minmax(0, auto);
+PASS 'grid' with: grid-template-columns: minmax(0, min-content) minmax(0, min-content); and grid-template-rows: minmax(0, min-content) minmax(0, min-content);
+PASS 'grid' with: grid-template-columns: minmax(0, max-content) minmax(0, max-content); and grid-template-rows: minmax(0, max-content) minmax(0, max-content);
+PASS 'grid' with: grid-template-columns: minmax(auto, 4px) minmax(auto, 4px); and grid-template-rows: minmax(auto, 4px) minmax(auto, 4px);
+PASS 'grid' with: grid-template-columns: minmax(auto, 10px) minmax(auto, 10px); and grid-template-rows: minmax(auto, 10px) minmax(auto, 10px);
+PASS 'grid' with: grid-template-columns: minmax(min-content, 10px) minmax(min-content, 10px); and grid-template-rows: minmax(min-content, 10px) minmax(min-content, 10px);
+PASS 'grid' with: grid-template-columns: minmax(max-content, 10px) minmax(max-content, 10px); and grid-template-rows: minmax(max-content, 10px) minmax(max-content, 10px);
+PASS 'grid' with: grid-template-columns: 20px auto; and grid-template-rows: 20px auto;
+PASS 'grid' with: grid-template-columns: 20px min-content; and grid-template-rows: 20px min-content;
+PASS 'grid' with: grid-template-columns: 20px max-content; and grid-template-rows: 20px max-content;
+PASS 'grid' with: grid-template-columns: 20px minmax(0, auto); and grid-template-rows: 20px minmax(0, auto);
+PASS 'grid' with: grid-template-columns: 20px minmax(0, min-content); and grid-template-rows: 20px minmax(0, min-content);
+PASS 'grid' with: grid-template-columns: 20px minmax(0, max-content); and grid-template-rows: 20px minmax(0, max-content);
+PASS 'grid' with: grid-template-columns: 20px minmax(auto, 30px); and grid-template-rows: 20px minmax(auto, 30px);
+PASS 'grid' with: grid-template-columns: 20px minmax(min-content, 6px); and grid-template-rows: 20px minmax(min-content, 6px);
+PASS 'grid' with: grid-template-columns: 20px minmax(min-content, 40px); and grid-template-rows: 20px minmax(min-content, 40px);
+PASS 'grid' with: grid-template-columns: 20px minmax(max-content, 6px); and grid-template-rows: 20px minmax(max-content, 6px);
+PASS 'grid' with: grid-template-columns: 20px minmax(max-content, 30px); and grid-template-rows: 20px minmax(max-content, 30px);
+PASS 'grid' with: grid-template-columns: max-content min-content; and grid-template-rows: max-content min-content;
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html (0 => 266675)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html 2020-09-06 00:26:23 UTC (rev 266675)
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Intrinsic contribution of a small item to intrinsic tracks</title>
+<link rel="author" title="Elika J. Etemad" href=""
+<link rel="help" href=""
+<meta name="assert" content="This test checks that the intrinsic contribution of a single grid item smaller than its container is distributed correctly among the tracks it spans when intrinsic tracks are involved.">
+<link rel="stylesheet" type="text/css" href="" />
+<style>
+#grid {
+ display: grid;
+ width: 120px;
+ height: 120px;
+ border: solid;
+ font: 10px/1 Ahem;
+}
+#item {
+ background: blue;
+ /* make min-content contribution differ from minimum contribution */
+ min-width: 12px;
+ min-height: 12px;
+}
+</style>
+
+<div id="grid">
+ <div id="item">XXX XX<br>XX<br>XX</div>
+</div>
+
+<div id="log"></div>
+
+<script src=""
+<script src=""
+<script src=""
+<script>
+const item = document.getElementById("item");
+function checkTrackSizes(span, trackList, expectedCols, expectedRows) {
+ item.style.gridColumn = item.style.gridRow = `span ${span}`;
+ if (!expectedRows) {
+ expectedRows = expectedCols;
+ }
+ TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expectedCols, expectedRows);
+}
+
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+ // Item spanning a single track
+ checkTrackSizes(1, "auto", "120px");
+ checkTrackSizes(1, "min-content", "30px", "40px");
+ checkTrackSizes(1, "max-content", "60px", "30px");
+
+ checkTrackSizes(1, "minmax(0, auto)", "120px");
+ checkTrackSizes(1, "minmax(0, min-content)", "30px", "40px");
+ checkTrackSizes(1, "minmax(0, max-content)", "60px", "30px");
+
+ checkTrackSizes(1, "minmax(auto, 10px)", "12px");
+ checkTrackSizes(1, "minmax(min-content, 10px)", "30px", "40px");
+ checkTrackSizes(1, "minmax(max-content, 10px)", "60px", "30px");
+
+ // Item spanning two identical tracks
+
+ checkTrackSizes(2, "auto auto", "60px 60px");
+ checkTrackSizes(2, "min-content min-content", "15px 15px", "20px 20px");
+ checkTrackSizes(2, "max-content max-content", "30px 30px", "15px 15px");
+
+ checkTrackSizes(2, "minmax(0, auto) minmax(0, auto)", "60px 60px");
+ checkTrackSizes(2, "minmax(0, min-content) minmax(0, min-content)", "15px 15px", "20px 20px");
+ checkTrackSizes(2, "minmax(0, max-content) minmax(0, max-content)", "30px 30px", "15px 15px");
+
+ checkTrackSizes(2, "minmax(auto, 4px) minmax(auto, 4px)", "6px 6px");
+ checkTrackSizes(2, "minmax(auto, 10px) minmax(auto, 10px)", "10px 10px");
+ checkTrackSizes(2, "minmax(min-content, 10px) minmax(min-content, 10px)", "15px 15px", "20px 20px");
+ checkTrackSizes(2, "minmax(max-content, 10px) minmax(max-content, 10px)", "30px 30px", "15px 15px");
+
+ // Item spanning a fixed track also
+ checkTrackSizes(2, "20px auto", "20px 100px");
+ checkTrackSizes(2, "20px min-content", "20px 10px", "20px 20px");
+ checkTrackSizes(2, "20px max-content", "20px 40px", "20px 10px");
+
+ checkTrackSizes(2, "20px minmax(0, auto)", "20px 100px");
+ checkTrackSizes(2, "20px minmax(0, min-content)", "20px 10px", "20px 20px");
+ checkTrackSizes(2, "20px minmax(0, max-content)", "20px 40px", "20px 10px");
+
+ checkTrackSizes(2, "20px minmax(auto, 30px)", "20px 30px");
+ checkTrackSizes(2, "20px minmax(min-content, 6px)", "20px 10px", "20px 20px");
+ checkTrackSizes(2, "20px minmax(min-content, 40px)", "20px 40px", "20px 40px");
+ checkTrackSizes(2, "20px minmax(max-content, 6px)", "20px 40px", "20px 10px");
+ checkTrackSizes(2, "20px minmax(max-content, 30px)", "20px 40px", "20px 30px");
+
+ // Item spanning two mismatched intrinsic tracks
+ checkTrackSizes(2, "max-content min-content", "45px 15px", "15px 15px");
+
+ done();
+});
+</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log (266674 => 266675)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log 2020-09-06 00:11:40 UTC (rev 266674)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log 2020-09-06 00:26:23 UTC (rev 266675)
@@ -58,6 +58,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-002.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-003.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-lr-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-rl-001.html
Modified: trunk/Source/WebCore/ChangeLog (266674 => 266675)
--- trunk/Source/WebCore/ChangeLog 2020-09-06 00:11:40 UTC (rev 266674)
+++ trunk/Source/WebCore/ChangeLog 2020-09-06 00:26:23 UTC (rev 266675)
@@ -1,5 +1,39 @@
2020-09-05 Oriol Brufau <[email protected]>
+ [css-grid] Use min-content size for intrinsic maximums resolution
+ https://bugs.webkit.org/show_bug.cgi?id=216142
+
+ Reviewed by Darin Adler.
+
+ By mistake the specification used to say that, for items spanning
+ multiple tracks, the growth limits of the tracks with an intrinsic max
+ track sizing function should grow to accommodate the minimum
+ contribution of the item.
+
+ But this was a mistake, because an intrinsic max track sizing function
+ can only be min-content or max-content. So instead of distributing the
+ minimum contribution, it should be the min-content contribution.
+
+ The spec has been fixed and there is a CSSWG resolution in
+ https://github.com/w3c/csswg-drafts/issues/4790
+
+ This patch fixes the problem by reverting r207290. The change is likely
+ web compatible, since it only affects a rare edge case with 'minmax()'
+ where the min sizing function is 'auto' or a fixed value smaller than
+ the min-content contribution, the max sizing function is 'min-content',
+ and an item whose minimum contribution is forced to be different than
+ the min-content contribution, and spans multiple tracks.
+
+ This is a port of https://crrev.com/803871 from Chromium.
+
+ Tests: fast/css-grid-layout/grid-intrinsic-maximums.html
+ imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html
+
+ * rendering/GridTrackSizingAlgorithm.cpp:
+ (WebCore::GridTrackSizingAlgorithm::itemSizeForTrackSizeComputationPhase const):
+
+2020-09-05 Oriol Brufau <[email protected]>
+
[css-logical] Ship flow-relative shorthand and offset properties
https://bugs.webkit.org/show_bug.cgi?id=216178
Modified: trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp (266674 => 266675)
--- trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp 2020-09-06 00:11:40 UTC (rev 266674)
+++ trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp 2020-09-06 00:26:23 UTC (rev 266675)
@@ -308,9 +308,9 @@
{
switch (phase) {
case ResolveIntrinsicMinimums:
- case ResolveIntrinsicMaximums:
return m_strategy->minSizeForChild(gridItem);
case ResolveContentBasedMinimums:
+ case ResolveIntrinsicMaximums:
return m_strategy->minContentForChild(gridItem);
case ResolveMaxContentMinimums:
case ResolveMaxContentMaximums:
