- Revision
- 272711
- Author
- [email protected]
- Date
- 2021-02-11 00:44:54 -0800 (Thu, 11 Feb 2021)
Log Message
the nested grid container which has replaced item with 'max-height' has wrong width(0px).
https://bugs.webkit.org/show_bug.cgi?id=219194
Patch by Ziran Sun <[email protected]> on 2021-02-11
Reviewed by Javier Fernandez.
LayoutTests/imported/w3c:
The test is imported from WPT.
* web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-expected.html: Added.
* web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html: Added.
* web-platform-tests/css/css-sizing/percentage-height-in-flexbox-expected.txt: Added.
Source/WebCore:
Width of a nested grid container with margin:auto returns 0 when their item has "max-height".
This causes the grid item's position wrong due to the wrongly comuputed auto-margin value.
This change is to check whether the preferred logical width is dirty when the grid area changes.
It's a reland of r272338, which got reverted because it broken
imported/w3c/web-platform-tests/css/css-sizing/percentage-height-in-flexbox.html on ios. This change
actually fixes the test failure in the flexbox test. Hence, updating test expectation file of
the flexbox test seems working.
This is an import of Chromium change at
https://chromium-review.googlesource.com/c/chromium/src/+/2503910
This change also imported needsPreferredWidthsRecalculation() from Chromium to RenderReplaced to
address the test case specified here.
Test: imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html
* rendering/GridTrackSizingAlgorithm.cpp:
(WebCore::GridTrackSizingAlgorithmStrategy::minContentForChild const):
(WebCore::GridTrackSizingAlgorithmStrategy::maxContentForChild const):
* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::needsPreferredWidthsRecalculation const):
* rendering/RenderReplaced.h:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (272710 => 272711)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-02-11 07:25:58 UTC (rev 272710)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-02-11 08:44:54 UTC (rev 272711)
@@ -1,3 +1,17 @@
+2021-02-11 Ziran Sun <[email protected]>
+
+ the nested grid container which has replaced item with 'max-height' has wrong width(0px).
+ https://bugs.webkit.org/show_bug.cgi?id=219194
+
+ Reviewed by Javier Fernandez.
+
+ The test is imported from WPT.
+
+ * web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-expected.html: Added.
+ * web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html: Added.
+ * web-platform-tests/css/css-sizing/percentage-height-in-flexbox-expected.txt: Added.
+
+
2021-02-10 Manuel Rego Casasnovas <[email protected]>
Add support for modifier keys in test_driver.send_keys()
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-expected.html (0 => 272711)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-expected.html 2021-02-11 08:44:54 UTC (rev 272711)
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference: 100x100 green square image in the middle</title>
+<link rel="author" title="Hyunjune Kim" href=""
+<style>
+ img {
+ display: block;
+ margin: auto;
+ }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div>
+ <img src=""
+</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html (0 => 272711)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html 2021-02-11 08:44:54 UTC (rev 272711)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Margin auto and replaced grid item</title>
+<link rel="author" title="Hyunjune Kim" href=""
+<link rel="help" href=""
+<meta name="assert" content="Checks width of the nested grid container applied 'margin:auto' with a replaced item which has a property called max-height.">
+<link rel="match" href=""
+<style>
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ left:0;
+ right:0;
+ margin: auto;
+ z-index: -1;
+ }
+ .grid {
+ display: grid;
+ }
+ .nested-grid {
+ display: grid;
+ margin: auto;
+ }
+ img {
+ max-height: 100%;
+ }
+</style>
+
+<body _onload_="loadImage()">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="grid">
+ <div id="reference-overlapped-red"></div>
+ <div class="nested-grid">
+ <img id="replaced">
+ </div>
+</div>
+
+<script>
+function loadImage() {
+ var replaced = document.getElementById("replaced");
+ replaced.src = ""
+}
+</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/w3c-import.log (272710 => 272711)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/w3c-import.log 2021-02-11 07:25:58 UTC (rev 272710)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/w3c-import.log 2021-02-11 08:44:54 UTC (rev 272711)
@@ -18,6 +18,8 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/anonymous-grid-item-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-automatic-minimum-intrinsic-aspect-ratio-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-img-item-percent-max-height-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-inline-items-001-expected.xht
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/percentage-height-in-flexbox-expected.txt (272710 => 272711)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/percentage-height-in-flexbox-expected.txt 2021-02-11 07:25:58 UTC (rev 272710)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/percentage-height-in-flexbox-expected.txt 2021-02-11 08:44:54 UTC (rev 272711)
@@ -1,5 +1,5 @@
PASS #target offsetSize matches #container offsetSize
-FAIL #target offsetSize matches #container offsetSize after resize assert_equals: expected 50 but got 100
+PASS #target offsetSize matches #container offsetSize after resize
Modified: trunk/Source/WebCore/ChangeLog (272710 => 272711)
--- trunk/Source/WebCore/ChangeLog 2021-02-11 07:25:58 UTC (rev 272710)
+++ trunk/Source/WebCore/ChangeLog 2021-02-11 08:44:54 UTC (rev 272711)
@@ -1,3 +1,33 @@
+2021-02-11 Ziran Sun <[email protected]>
+
+ the nested grid container which has replaced item with 'max-height' has wrong width(0px).
+ https://bugs.webkit.org/show_bug.cgi?id=219194
+
+ Reviewed by Javier Fernandez.
+
+ Width of a nested grid container with margin:auto returns 0 when their item has "max-height".
+ This causes the grid item's position wrong due to the wrongly comuputed auto-margin value.
+ This change is to check whether the preferred logical width is dirty when the grid area changes.
+
+ It's a reland of r272338, which got reverted because it broken
+ imported/w3c/web-platform-tests/css/css-sizing/percentage-height-in-flexbox.html on ios. This change
+ actually fixes the test failure in the flexbox test. Hence, updating test expectation file of
+ the flexbox test seems working.
+
+ This is an import of Chromium change at
+ https://chromium-review.googlesource.com/c/chromium/src/+/2503910
+ This change also imported needsPreferredWidthsRecalculation() from Chromium to RenderReplaced to
+ address the test case specified here.
+
+ Test: imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html
+
+ * rendering/GridTrackSizingAlgorithm.cpp:
+ (WebCore::GridTrackSizingAlgorithmStrategy::minContentForChild const):
+ (WebCore::GridTrackSizingAlgorithmStrategy::maxContentForChild const):
+ * rendering/RenderReplaced.cpp:
+ (WebCore::RenderReplaced::needsPreferredWidthsRecalculation const):
+ * rendering/RenderReplaced.h:
+
2021-02-10 Jer Noble <[email protected]>
Move AudioHardwareListener into the GPU Process
Modified: trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp (272710 => 272711)
--- trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp 2021-02-11 07:25:58 UTC (rev 272710)
+++ trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp 2021-02-11 08:44:54 UTC (rev 272711)
@@ -775,6 +775,8 @@
if (direction() == childInlineDirection) {
// FIXME: It's unclear if we should return the intrinsic width or the preferred width.
// See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
+ if (child.needsPreferredWidthsRecalculation())
+ child.setPreferredLogicalWidthsDirty(true);
return child.minPreferredLogicalWidth() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childInlineDirection, child) + m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
}
@@ -789,6 +791,8 @@
if (direction() == childInlineDirection) {
// FIXME: It's unclear if we should return the intrinsic width or the preferred width.
// See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
+ if (child.needsPreferredWidthsRecalculation())
+ child.setPreferredLogicalWidthsDirty(true);
return child.maxPreferredLogicalWidth() + GridLayoutFunctions::marginLogicalSizeForChild(*renderGrid(), childInlineDirection, child) + m_algorithm.baselineOffsetForChild(child, gridAxisForDirection(direction()));
}
Modified: trunk/Source/WebCore/rendering/RenderReplaced.cpp (272710 => 272711)
--- trunk/Source/WebCore/rendering/RenderReplaced.cpp 2021-02-11 07:25:58 UTC (rev 272710)
+++ trunk/Source/WebCore/rendering/RenderReplaced.cpp 2021-02-11 08:44:54 UTC (rev 272711)
@@ -792,4 +792,10 @@
return visibleRect.intersects(contentRect);
}
+bool RenderReplaced::needsPreferredWidthsRecalculation() const
+{
+ // If the height is a percentage and the width is auto, then the containingBlocks's height changing can cause this node to change it's preferred width because it maintains aspect ratio.
+ return hasRelativeLogicalHeight() && style().logicalWidth().isAuto();
}
+
+}
Modified: trunk/Source/WebCore/rendering/RenderReplaced.h (272710 => 272711)
--- trunk/Source/WebCore/rendering/RenderReplaced.h 2021-02-11 07:25:58 UTC (rev 272710)
+++ trunk/Source/WebCore/rendering/RenderReplaced.h 2021-02-11 08:44:54 UTC (rev 272711)
@@ -45,6 +45,7 @@
RoundedRect roundedContentBoxRect() const;
bool isContentLikelyVisibleInViewport();
+ bool needsPreferredWidthsRecalculation() const override;
protected:
RenderReplaced(Element&, RenderStyle&&);
