- Revision
- 261767
- Author
- [email protected]
- Date
- 2020-05-15 16:26:01 -0700 (Fri, 15 May 2020)
Log Message
[css-grid] Treat percentages as auto for the minimum contribution
https://bugs.webkit.org/show_bug.cgi?id=195967
Reviewed by Manuel Rego Casasnovas.
LayoutTests/imported/w3c:
Import WPT test.
* web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages-expected.txt: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html: Added.
* web-platform-tests/css/css-grid/grid-definition/w3c-import.log:
Source/WebCore:
The minimum contribution of a grid item is the outer size resulting from
the minimum size if the computed preferred size behaves as auto, or the
min-content contribution otherwise.
If the preferred size is a percentage, it should be resolved with
respect to the grid area, which depends on the minimum contribution
of the item. Thus the percentage is cyclic and behaves as auto.
Before this change, WebKit only checked whether the preferred size is
auto, not whether it behaves as auto. In fact this was according to
an older version of the spec, but it was changed in
https://github.com/w3c/csswg-drafts/issues/2367
Test: imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html
Some cases in the test still fail due to bug 209461.
* rendering/GridTrackSizingAlgorithm.cpp:
(WebCore::GridTrackSizingAlgorithmStrategy::minSizeForChild const):
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (261766 => 261767)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2020-05-15 22:39:41 UTC (rev 261766)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2020-05-15 23:26:01 UTC (rev 261767)
@@ -1,3 +1,16 @@
+2020-05-15 Oriol Brufau <[email protected]>
+
+ [css-grid] Treat percentages as auto for the minimum contribution
+ https://bugs.webkit.org/show_bug.cgi?id=195967
+
+ Reviewed by Manuel Rego Casasnovas.
+
+ Import WPT test.
+
+ * web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages-expected.txt: Added.
+ * web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html: Added.
+ * web-platform-tests/css/css-grid/grid-definition/w3c-import.log:
+
2020-05-15 Alex Christensen <[email protected]>
Make host parser fail on ^
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages-expected.txt (0 => 261767)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages-expected.txt 2020-05-15 23:26:01 UTC (rev 261767)
@@ -0,0 +1,18 @@
+
+PASS auto - columns
+PASS auto - rows
+PASS min - columns
+FAIL min - rows assert_equals: grid-template-rows expected "50px" but got "150px"
+PASS max - columns
+PASS max - rows
+PASS size - columns
+PASS size - rows
+PASS min max - columns
+FAIL min max - rows assert_equals: grid-template-rows expected "50px" but got "150px"
+PASS min size - columns
+FAIL min size - rows assert_equals: grid-template-rows expected "50px" but got "200px"
+PASS max size - columns
+PASS max size - rows
+PASS min max size - columns
+FAIL min max size - rows assert_equals: grid-template-rows expected "50px" but got "150px"
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html (0 => 261767)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html 2020-05-15 23:26:01 UTC (rev 261767)
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: minimum contribution with percentages</title>
+<link rel="author" title="Oriol Brufau" href="" />
+<link rel="help" href=""
+<meta name="assert" content="Checks that the minimum contribution is the minimum size when the preferred size is 'auto' or contains a percentage.">
+<style>
+#grid {
+ display: grid;
+ height: 50px;
+ width: 50px;
+ grid: auto / auto;
+}
+#item {
+ background: cyan;
+}
+#content {
+ height: 100px;
+ width: 100px;
+}
+.min {
+ min-height: calc(100% + 50px);
+ min-width: calc(100% + 50px);
+}
+.max {
+ max-height: calc(100% - 50px);
+ max-width: calc(100% - 50px);
+}
+.size {
+ height: calc(100% + 10px);
+ width: calc(100% + 10px);
+}
+</style>
+<div id="log"></div>
+<div id="grid">
+ <div id="item">
+ <div id="content"></div>
+ </div>
+</div>
+<script src=""
+<script src=""
+<script>
+"use strict";
+const cs = getComputedStyle(document.getElementById("grid"));
+const item = document.getElementById("item");
+function check(name, size) {
+ item.className = name;
+ test(function() {
+ assert_equals(cs.gridTemplateColumns, size + "px", "grid-template-columns");
+ }, name + " - columns");
+ test(function() {
+ assert_equals(cs.gridTemplateRows, size + "px", "grid-template-rows");
+ }, name + " - rows");
+}
+
+// The minimum contribution is the automatic minimum size (100px)
+// because the preferred size is 'auto'.
+check("auto", 100);
+
+// The minimum contribution is the minimum size (50px)
+// because the preferred size is 'auto'.
+check("min", 50);
+
+// The minimum contribution is the automatic minimum size (100px)
+// because the preferred size is 'auto'.
+check("max", 100);
+
+// The minimum contribution is the automatic minimum size (100px)
+// because the preferred size depends on the containing block.
+check("size", 100);
+
+// The minimum contribution is the minimum size (50px)
+// because the preferred size is 'auto'.
+check("min max", 50);
+
+// The minimum contribution is the minimum size (50px)
+// because the preferred size depends on the containing block.
+check("min size", 50);
+
+// The minimum contribution is the automatic minimum size (100px)
+// because the preferred size depends on the containing block.
+check("max size", 100);
+
+// The minimum contribution is the minimum size (50px)
+// because the preferred size depends on the containing block.
+check("min max size", 50);
+</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log (261766 => 261767)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log 2020-05-15 22:39:41 UTC (rev 261766)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log 2020-05-15 23:26:01 UTC (rev 261767)
@@ -38,6 +38,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-layout-basic.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-layout-repeat-notation-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-layout-repeat-notation.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-shorthand-001.html
Modified: trunk/Source/WebCore/ChangeLog (261766 => 261767)
--- trunk/Source/WebCore/ChangeLog 2020-05-15 22:39:41 UTC (rev 261766)
+++ trunk/Source/WebCore/ChangeLog 2020-05-15 23:26:01 UTC (rev 261767)
@@ -1,3 +1,30 @@
+2020-05-15 Oriol Brufau <[email protected]>
+
+ [css-grid] Treat percentages as auto for the minimum contribution
+ https://bugs.webkit.org/show_bug.cgi?id=195967
+
+ Reviewed by Manuel Rego Casasnovas.
+
+ The minimum contribution of a grid item is the outer size resulting from
+ the minimum size if the computed preferred size behaves as auto, or the
+ min-content contribution otherwise.
+
+ If the preferred size is a percentage, it should be resolved with
+ respect to the grid area, which depends on the minimum contribution
+ of the item. Thus the percentage is cyclic and behaves as auto.
+
+ Before this change, WebKit only checked whether the preferred size is
+ auto, not whether it behaves as auto. In fact this was according to
+ an older version of the spec, but it was changed in
+ https://github.com/w3c/csswg-drafts/issues/2367
+
+ Test: imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html
+
+ Some cases in the test still fail due to bug 209461.
+
+ * rendering/GridTrackSizingAlgorithm.cpp:
+ (WebCore::GridTrackSizingAlgorithmStrategy::minSizeForChild const):
+
2020-05-15 Antoine Quint <[email protected]>
[Web Animations] Animation with a single keyframe is not accelerated
Modified: trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp (261766 => 261767)
--- trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp 2020-05-15 22:39:41 UTC (rev 261766)
+++ trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp 2020-05-15 23:26:01 UTC (rev 261767)
@@ -806,7 +806,7 @@
GridTrackSizingDirection childInlineDirection = GridLayoutFunctions::flowAwareDirectionForChild(*renderGrid(), child, ForColumns);
bool isRowAxis = direction() == childInlineDirection;
const Length& childSize = isRowAxis ? child.style().logicalWidth() : child.style().logicalHeight();
- if (!childSize.isAuto())
+ if (!childSize.isAuto() && !childSize.isPercentOrCalculated())
return minContentForChild(child);
const Length& childMinSize = isRowAxis ? child.style().logicalMinWidth() : child.style().logicalMinHeight();
@@ -813,7 +813,7 @@
bool overflowIsVisible = isRowAxis ? child.style().overflowInlineDirection() == Overflow::Visible : child.style().overflowBlockDirection() == Overflow::Visible;
LayoutUnit baselineShim = m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
- if (childSize.isAuto() && childMinSize.isAuto() && overflowIsVisible) {
+ if (childMinSize.isAuto() && overflowIsVisible) {
auto minSize = minContentForChild(child);
LayoutUnit maxBreadth;
auto allTracks = m_algorithm.tracks(direction());
