[css-grid] Relayout grid items when definiteness changes.

https://bugs.webkit.org/show_bug.cgi?id=220657 LayoutTests/imported/w3c: Tests percentage-size-subitems-002.html and relative-grandchild.html are imported from WPT. Patch by Ziran Sun <[email protected]> on 2021-01-22 Reviewed by Manuel Rego Casasnovas. * web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002-expected.html: Added. * web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-grid/relative-grandchild.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-grid/relative-grandchild-expected.xht: Added. * web-platform-tests/css/css-grid/grid-items/w3c-import.log: Source/WebCore: Patch by Ziran Sun <[email protected]> on 2021-01-22 Reviewed by Manuel Rego Casasnovas. When setting an override logical-height the definiteness can change causing %-height children to resolve differently. This change adds this check to determine if a grid-item needs relayout. It is an import of Chromium changes at https://chromium-review.googlesource.com/c/chromium/src/+/2474917 Instead of adding maybeHasPercentHeightDescendant() in WebKit, this change calls hasPercentHeightDescendants(). In Chromium it wasn't possible to use hasPercentHeightDescendants() because of this quirk: https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk WebKit doesn't seem to use the quirk for grid according to the image in w3c/csswg-drafts#5545 This also fixes issues in test: grid-child-percent-basis-resize-1.html Tests have been ported in WPT at web-platform-tests/wpt#26136 Tests: imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002.html imported/w3c/web-platform-tests/css/css-grid/relative-grandchild.html * rendering/RenderGrid.cpp: (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded): LayoutTests: Patch by Ziran Sun <[email protected]> on 2021-01-22 Reviewed by Manuel Rego Casasnovas. * TestExpectations: git-svn-id: http://svn.webkit.org/repository/webkit/trunk@271745 268f45cc-cd09-0410-ab3c-d52691b4dbfc
yury-s · Jan 22, 2021 · 02a180f · 02a180f
1 parent 509e8fc
commit 02a180f
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 3 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,12 @@
+2021-01-22  Ziran Sun  <[email protected]>
+
+        [css-grid] Relayout grid items when definiteness changes.
+        https://bugs.webkit.org/show_bug.cgi?id=220657
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        * TestExpectations:
+
 2021-01-21  Rob Buis  <[email protected]>
 
         Handle shapeMargin becoming NaN

diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
@@ -3970,7 +3970,6 @@ webkit.org/b/212246 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-
 webkit.org/b/212246 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.html [ ImageOnlyFailure ]
 webkit.org/b/212246 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.html [ ImageOnlyFailure ]
 webkit.org/b/212246 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-004.html [ ImageOnlyFailure ]
-webkit.org/b/212246 imported/w3c/web-platform-tests/css/css-grid/grid-child-percent-basis-resize-1.html [ ImageOnlyFailure ]
 webkit.org/b/212246 imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html [ ImageOnlyFailure ]
 webkit.org/b/212246 imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html [ ImageOnlyFailure ]
 webkit.org/b/212246 imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html [ ImageOnlyFailure ]

diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
@@ -1,3 +1,19 @@
+2021-01-22  Ziran Sun  <[email protected]>
+
+        [css-grid] Relayout grid items when definiteness changes.
+        https://bugs.webkit.org/show_bug.cgi?id=220657
+
+        Tests percentage-size-subitems-002.html and relative-grandchild.html are
+        imported from WPT.
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        * web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002-expected.html: Added.
+        * web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002.html: Added.
+        * LayoutTests/imported/w3c/web-platform-tests/css/css-grid/relative-grandchild.html: Added.
+        * LayoutTests/imported/w3c/web-platform-tests/css/css-grid/relative-grandchild-expected.xht: Added.
+        * web-platform-tests/css/css-grid/grid-items/w3c-import.log:
+
 2021-01-21  Devin Rousso  <[email protected]>
 
         [Apple Pay] use the first item in `shippingOptions` even when it's not `selected`

diff --git a/...w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002-expected.html b/...w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002-expected.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="[email protected]">
+<p>Test passes if there is a filled green square.</p>
+<div style="width:100px; height:100px; background:green;"></div>
diff --git a/...imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002.html b/...imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1138504">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; grid-template-columns: 100px 100px;">
+  <div style="min-height: 100px;">
+    <div style="height: 100%; background: green;"></div>
+  </div>
+  <div style="height: 100px;"></div>
+</div>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/w3c-import.log
@@ -276,6 +276,7 @@ List of files:
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-001-expected.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-001.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/ref-filled-green-100px-square-image.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/remove-svg-grid-item-001-expected.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/remove-svg-grid-item-001.html

diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/relative-grandchild-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/relative-grandchild-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: green;
+  height: 100px;
+  width: 100px;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <div></div>
+ </body>
+</html>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/relative-grandchild.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/relative-grandchild.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1138504">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; background: red;"></div>
+<div style="display: grid; width: 100px; height: 100px;">
+  <div>
+    <div style="position: relative; height: 100px; background: green; top: -100%;"></div>
+  </div>
+</div>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/w3c-import.log
@@ -34,5 +34,6 @@ List of files:
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-layout-properties.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-tracks-stretched-with-different-flex-factors-sum.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/inheritance.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/relative-grandchild.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/table-grid-item-dynamic-001-expected.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/table-grid-item-dynamic-001.html
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,33 @@
+2021-01-22  Ziran Sun  <[email protected]>
+
+        [css-grid] Relayout grid items when definiteness changes.
+        https://bugs.webkit.org/show_bug.cgi?id=220657
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        When setting an override logical-height the definiteness can change causing %-height
+        children to resolve differently. This change adds this check to determine if a grid-item
+        needs relayout. It is an import of Chromium changes at
+        https://chromium-review.googlesource.com/c/chromium/src/+/2474917
+        Instead of adding maybeHasPercentHeightDescendant() in WebKit, this change calls
+        hasPercentHeightDescendants(). In Chromium it wasn't possible to use
+        hasPercentHeightDescendants() because of this quirk:
+        https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk
+        WebKit doesn't seem to use the quirk for grid according to the image in
+        https://github.com/w3c/csswg-drafts/issues/5545
+
+        This also fixes issues in test:
+        grid-child-percent-basis-resize-1.html
+
+        Tests have been ported in WPT at
+        https://github.com/web-platform-tests/wpt/pull/26136
+
+        Tests: imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-002.html
+               imported/w3c/web-platform-tests/css/css-grid/relative-grandchild.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
+
 2021-01-22  Kate Cheney  <[email protected]>
 
         Denying storage access on playstation.com then clicking sign-in fails to show the prompt again

diff --git a/Source/WebCore/rendering/RenderGrid.cpp b/Source/WebCore/rendering/RenderGrid.cpp
@@ -1138,8 +1138,12 @@ void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child)
         LayoutUnit stretchedLogicalHeight = availableAlignmentSpaceForChildBeforeStretching(GridLayoutFunctions::overridingContainingBlockContentSizeForChild(child, childBlockDirection).value(), child);
         LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight, -1_lu);
         child.setOverridingLogicalHeight(desiredLogicalHeight);
-        if (desiredLogicalHeight != child.logicalHeight()) {
-            // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
+
+        // Checking the logical-height of a child isn't enough. Setting an override logical-height
+        // changes the definiteness, resulting in percentages to resolve differently.
+        //
+        // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
+        if (desiredLogicalHeight != child.logicalHeight() || (is<RenderBlock>(child) && downcast<RenderBlock>(child).hasPercentHeightDescendants())) {
             child.setLogicalHeight(0_lu);
             child.setNeedsLayout(MarkOnlyThis);
         }