Diff
Modified: trunk/LayoutTests/ChangeLog (280074 => 280075)
--- trunk/LayoutTests/ChangeLog 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/LayoutTests/ChangeLog 2021-07-20 10:39:00 UTC (rev 280075)
@@ -1,3 +1,14 @@
+2021-07-20 Rob Buis <[email protected]>
+
+ Fix grid aspect-ratio tests
+ https://bugs.webkit.org/show_bug.cgi?id=225860
+
+ Reviewed by Javier Fernandez.
+
+ Unskip tests that now pass.
+
+ * TestExpectations:
+
2021-07-19 Robert Jenner <[email protected]>
[BigSur Release Wk2 Arm64] inspector/css/node-styles-refreshed.html is a flaky failure (224788)
Modified: trunk/LayoutTests/TestExpectations (280074 => 280075)
--- trunk/LayoutTests/TestExpectations 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/LayoutTests/TestExpectations 2021-07-20 10:39:00 UTC (rev 280075)
@@ -4740,17 +4740,6 @@
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-022.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-018.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-019.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-030.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-031.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-032.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-033.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-034.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-035.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-036.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-037.html [ ImageOnlyFailure ]
-webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-038.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-034.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/select-element-001.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001.html [ ImageOnlyFailure ]
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (280074 => 280075)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-07-20 10:39:00 UTC (rev 280075)
@@ -1,3 +1,17 @@
+2021-07-20 Rob Buis <[email protected]>
+
+ Fix grid aspect-ratio tests
+ https://bugs.webkit.org/show_bug.cgi?id=225860
+
+ Reviewed by Javier Fernandez.
+
+ Import aspect-ratio tests based on 56bf98c5c0.
+
+ * web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-013-expected.xht: Removed.
+ * web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-013.html: Removed.
+ * web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-018.html:
+ * web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-019.html:
+
2021-07-19 Sihui Liu <[email protected]>
Implement IDBTransaction.commit()
Deleted: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-013-expected.xht (280074 => 280075)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-013-expected.xht 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-013-expected.xht 2021-07-20 10:39:00 UTC (rev 280075)
@@ -1,19 +0,0 @@
-<!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="" />
- <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>
Deleted: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-013.html (280074 => 280075)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-013.html 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-013.html 2021-07-20 10:39:00 UTC (rev 280075)
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<title>CSS aspect-ratio: items stretched in both axes should ignore aspect ratio</title>
-<link rel="author" title="Mozilla" href=""
-<link rel="help" href=""
-<link rel="help" href=""
-<link rel="match" href="" />
-<style>
- #reference-overlapped-red {
- position: absolute;
- background-color: red;
- width: 100px;
- height: 100px;
- z-index: -1;
- }
-</style>
-
-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
-
-<div id="reference-overlapped-red"></div>
-<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 100px;">
- <div style="background: green; aspect-ratio: 1/1; justify-self: stretch; align-self: stretch;"></div>
-</div>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-018.html (280074 => 280075)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-018.html 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-018.html 2021-07-20 10:39:00 UTC (rev 280075)
@@ -17,6 +17,9 @@
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
-<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 100px;">
- <div style="height: 100px; aspect-ratio: 1/2; justify-self: stretch; background: green;"></div>
+<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 50px;">
+ <div style="height: 50px; aspect-ratio: 1/2; justify-self: stretch; background: green;"></div>
</div>
+<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 50px;justify-items: stretch">
+ <div style="height: 50px; aspect-ratio: 1/2; justify-self: auto; background: green;"></div>
+</div>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-019.html (280074 => 280075)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-019.html 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-019.html 2021-07-20 10:39:00 UTC (rev 280075)
@@ -17,6 +17,9 @@
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
-<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 100px;">
+<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 50px;">
<div style="width: 100px; aspect-ratio: 2/1; align-self: stretch; background: green;"></div>
</div>
+<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 50px; align-items: stretch">
+ <div style="width: 100px; aspect-ratio: 2/1; align-self: auto; background: green;"></div>
+</div>
Modified: trunk/Source/WebCore/ChangeLog (280074 => 280075)
--- trunk/Source/WebCore/ChangeLog 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/Source/WebCore/ChangeLog 2021-07-20 10:39:00 UTC (rev 280075)
@@ -1,3 +1,33 @@
+2021-07-20 Rob Buis <[email protected]>
+
+ Fix grid aspect-ratio tests
+ https://bugs.webkit.org/show_bug.cgi?id=225860
+
+ Reviewed by Javier Fernandez.
+
+ Fix various combinations of implicit/explicit stretching in inline and
+ block directions as tested by grid-aspect-ratio-028.html until
+ grid-aspect-ratio-038.html and as specified [1, 2].
+ Also treat explicit stretching through justify-items/align-items: stretch
+ like justify-self/align-self: stretch.
+
+ [1] https://drafts.csswg.org/css-grid/#grid-item-sizing
+ [2] //drafts.csswg.org/css-sizing-4/#aspect-ratio
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::hasStretchedLogicalWidth const):
+ (WebCore::RenderBox::shouldComputeLogicalWidthFromAspectRatio const):
+ * rendering/RenderBox.h:
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::selfAlignmentForChild const):
+ (WebCore::RenderGrid::alignSelfForChild const):
+ (WebCore::RenderGrid::justifySelfForChild const):
+ (WebCore::RenderGrid::aspectRatioPrefersInline):
+ (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
+ (WebCore::RenderGrid::hasAutoSizeInColumnAxis const):
+ (WebCore::RenderGrid::hasAutoSizeInRowAxis const):
+ * rendering/RenderGrid.h:
+
2021-07-19 Sihui Liu <[email protected]>
Implement IDBTransaction.commit()
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (280074 => 280075)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2021-07-20 10:39:00 UTC (rev 280075)
@@ -2777,7 +2777,7 @@
}
// FIXME: Can/Should we move this inside specific layout classes (flex. grid)? Can we refactor columnFlexItemHasStretchAlignment logic?
-bool RenderBox::hasStretchedLogicalWidth() const
+bool RenderBox::hasStretchedLogicalWidth(StretchingMode stretchingMode) const
{
auto& style = this->style();
if (!style.logicalWidth().isAuto() || style.marginStart().isAuto() || style.marginEnd().isAuto())
@@ -2788,9 +2788,10 @@
// The 'normal' value behaves like 'start' except for Flexbox Items, which obviously should have a container.
return false;
}
+ auto normalItemPosition = stretchingMode == StretchingMode::Any ? containingBlock->selfAlignmentNormalBehavior(this) : ItemPosition::Normal;
if (containingBlock->isHorizontalWritingMode() != isHorizontalWritingMode())
- return style.resolvedAlignSelf(&containingBlock->style(), containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPosition::Stretch;
- return style.resolvedJustifySelf(&containingBlock->style(), containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPosition::Stretch;
+ return style.resolvedAlignSelf(&containingBlock->style(), normalItemPosition).position() == ItemPosition::Stretch;
+ return style.resolvedJustifySelf(&containingBlock->style(), normalItemPosition).position() == ItemPosition::Stretch;
}
bool RenderBox::sizesLogicalWidthToFitContent(SizeType widthType) const
@@ -5268,8 +5269,13 @@
if (shouldIgnoreAspectRatio())
return false;
- if (isGridItem() && shouldComputeSizeAsReplaced() && hasStretchedLogicalWidth() && hasStretchedLogicalHeight())
- return false;
+ if (isGridItem()) {
+ if (shouldComputeSizeAsReplaced()) {
+ if (hasStretchedLogicalWidth() && hasStretchedLogicalHeight())
+ return false;
+ } else if (hasStretchedLogicalWidth(StretchingMode::Explicit))
+ return false;
+ }
auto isResolvablePercentageHeight = [&] {
return style().logicalHeight().isPercentOrCalculated() && (isOutOfFlowPositioned() || percentageLogicalHeightIsResolvable());
Modified: trunk/Source/WebCore/rendering/RenderBox.h (280074 => 280075)
--- trunk/Source/WebCore/rendering/RenderBox.h 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2021-07-20 10:39:00 UTC (rev 280075)
@@ -43,6 +43,8 @@
enum ShouldComputePreferred { ComputeActual, ComputePreferred };
+enum class StretchingMode { Any, Explicit };
+
class RenderBox : public RenderBoxModelObject {
WTF_MAKE_ISO_ALLOCATED(RenderBox);
public:
@@ -437,7 +439,7 @@
bool sizesLogicalWidthToFitContent(SizeType) const;
bool hasStretchedLogicalHeight() const;
- bool hasStretchedLogicalWidth() const;
+ bool hasStretchedLogicalWidth(StretchingMode = StretchingMode::Any) const;
bool isStretchingColumnFlexItem() const;
bool columnFlexItemHasStretchAlignment() const;
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (280074 => 280075)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2021-07-20 10:39:00 UTC (rev 280075)
@@ -68,7 +68,7 @@
StyleSelfAlignmentData RenderGrid::selfAlignmentForChild(GridAxis axis, const RenderBox& child, const RenderStyle* gridStyle) const
{
- return axis == GridRowAxis ? justifySelfForChild(child, gridStyle) : alignSelfForChild(child, gridStyle);
+ return axis == GridRowAxis ? justifySelfForChild(child, StretchingMode::Any, gridStyle) : alignSelfForChild(child, StretchingMode::Any, gridStyle);
}
bool RenderGrid::selfAlignmentChangedToStretch(GridAxis axis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox& child) const
@@ -1118,20 +1118,33 @@
return std::max(0_lu, gridAreaBreadthForChild - GridLayoutFunctions::marginLogicalSizeForChild(*this, childBlockFlowDirection, child));
}
-StyleSelfAlignmentData RenderGrid::alignSelfForChild(const RenderBox& child, const RenderStyle* gridStyle) const
+StyleSelfAlignmentData RenderGrid::alignSelfForChild(const RenderBox& child, StretchingMode stretchingMode, const RenderStyle* gridStyle) const
{
if (!gridStyle)
gridStyle = &style();
- return child.style().resolvedAlignSelf(gridStyle, selfAlignmentNormalBehavior(&child));
+ auto normalBehavior = stretchingMode == StretchingMode::Any ? selfAlignmentNormalBehavior(&child) : ItemPosition::Normal;
+ return child.style().resolvedAlignSelf(gridStyle, normalBehavior);
}
-StyleSelfAlignmentData RenderGrid::justifySelfForChild(const RenderBox& child, const RenderStyle* gridStyle) const
+StyleSelfAlignmentData RenderGrid::justifySelfForChild(const RenderBox& child, StretchingMode stretchingMode, const RenderStyle* gridStyle) const
{
if (!gridStyle)
gridStyle = &style();
- return child.style().resolvedJustifySelf(gridStyle, selfAlignmentNormalBehavior(&child));
+ auto normalBehavior = stretchingMode == StretchingMode::Any ? selfAlignmentNormalBehavior(&child) : ItemPosition::Normal;
+ return child.style().resolvedJustifySelf(gridStyle, normalBehavior);
}
+bool RenderGrid::aspectRatioPrefersInline(const RenderBox& child, bool blockFlowIsColumnAxis)
+{
+ if (!child.style().hasAspectRatio())
+ return false;
+ bool hasExplicitInlineStretch = justifySelfForChild(child, StretchingMode::Explicit).position() == ItemPosition::Stretch;
+ bool hasExplicitBlockStretch = alignSelfForChild(child, StretchingMode::Explicit).position() == ItemPosition::Stretch;
+ if (!blockFlowIsColumnAxis)
+ std::swap(hasExplicitInlineStretch, hasExplicitBlockStretch);
+ return !hasExplicitBlockStretch;
+}
+
// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child)
{
@@ -1144,7 +1157,7 @@
GridTrackSizingDirection childBlockDirection = GridLayoutFunctions::flowAwareDirectionForChild(*this, child, ForRows);
bool blockFlowIsColumnAxis = childBlockDirection == ForRows;
bool allowedToStretchChildBlockSize = blockFlowIsColumnAxis ? allowedToStretchChildAlongColumnAxis(child) : allowedToStretchChildAlongRowAxis(child);
- if (allowedToStretchChildBlockSize) {
+ if (allowedToStretchChildBlockSize && !aspectRatioPrefersInline(child, blockFlowIsColumnAxis)) {
LayoutUnit stretchedLogicalHeight = availableAlignmentSpaceForChildBeforeStretching(GridLayoutFunctions::overridingContainingBlockContentSizeForChild(child, childBlockDirection).value(), child);
LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight, std::nullopt);
child.setOverridingLogicalHeight(desiredLogicalHeight);
@@ -1867,11 +1880,12 @@
bool RenderGrid::hasAutoSizeInColumnAxis(const RenderBox& child) const
{
if (child.style().hasAspectRatio()) {
- if (isHorizontalWritingMode() == child.isHorizontalWritingMode()) {
+ // FIXME: should align-items + align-self: auto/justify-items + justify-self: auto be taken into account?
+ if (isHorizontalWritingMode() == child.isHorizontalWritingMode() && child.style().alignSelf().position() != ItemPosition::Stretch) {
// A non-auto inline size means the same for block size (column axis size) because of the aspect ratio.
if (!child.style().logicalWidth().isAuto())
return false;
- } else {
+ } else if (child.style().justifySelf().position() != ItemPosition::Stretch) {
const Length& logicalHeight = child.style().logicalHeight();
if (logicalHeight.isFixed() || (logicalHeight.isPercentOrCalculated() && child.percentageLogicalHeightIsResolvable()))
return false;
@@ -1883,12 +1897,13 @@
bool RenderGrid::hasAutoSizeInRowAxis(const RenderBox& child) const
{
if (child.style().hasAspectRatio()) {
- if (isHorizontalWritingMode() == child.isHorizontalWritingMode()) {
+ // FIXME: should align-items + align-self: auto/justify-items + justify-self: auto be taken into account?
+ if (isHorizontalWritingMode() == child.isHorizontalWritingMode() && child.style().justifySelf().position() != ItemPosition::Stretch) {
// A non-auto block size means the same for inline size (row axis size) because of the aspect ratio.
const Length& logicalHeight = child.style().logicalHeight();
if (logicalHeight.isFixed() || (logicalHeight.isPercentOrCalculated() && child.percentageLogicalHeightIsResolvable()))
return false;
- } else {
+ } else if (child.style().alignSelf().position() != ItemPosition::Stretch) {
if (!child.style().logicalWidth().isAuto())
return false;
}
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (280074 => 280075)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2021-07-20 10:25:10 UTC (rev 280074)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2021-07-20 10:39:00 UTC (rev 280075)
@@ -156,8 +156,8 @@
void paintChildren(PaintInfo& forSelf, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect) override;
LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const;
- StyleSelfAlignmentData justifySelfForChild(const RenderBox&, const RenderStyle* = nullptr) const;
- StyleSelfAlignmentData alignSelfForChild(const RenderBox&, const RenderStyle* = nullptr) const;
+ StyleSelfAlignmentData justifySelfForChild(const RenderBox&, StretchingMode = StretchingMode::Any, const RenderStyle* = nullptr) const;
+ StyleSelfAlignmentData alignSelfForChild(const RenderBox&, StretchingMode = StretchingMode::Any, const RenderStyle* = nullptr) const;
void applyStretchAlignmentToChildIfNeeded(RenderBox&);
bool hasAutoSizeInColumnAxis(const RenderBox& child) const;
bool hasAutoSizeInRowAxis(const RenderBox& child) const;
@@ -188,6 +188,8 @@
bool shouldResetLogicalHeightBeforeLayout() const override { return true; }
+ bool aspectRatioPrefersInline(const RenderBox& child, bool blockFlowIsColumnAxis);
+
Grid m_grid;
GridTrackSizingAlgorithm m_trackSizingAlgorithm;
