diff --git a/blink/renderer/core/layout/layout_box.cc b/blink/renderer/core/layout/layout_box.cc
index 8c389754844..6c47f5906ad 100644
--- a/blink/renderer/core/layout/layout_box.cc
+++ b/blink/renderer/core/layout/layout_box.cc
@@ -4118,7 +4118,9 @@ void LayoutBox::ComputeLogicalWidth(
computed_values.extent_ =
ComputeReplacedLogicalWidth() + BorderAndPaddingLogicalWidth();
} else if (StyleRef().LogicalWidth().IsAuto() &&
- ComputeLogicalWidthFromAspectRatio(&computed_values.extent_)) {
+ (!IsGridItem() || !HasStretchedLogicalWidth() ||
+ !HasStretchedLogicalHeight()) &&
+ ComputeLogicalWidthFromAspectRatio(&computed_values.extent_)) {
/* we're good */
} else {
LayoutUnit preferred_width = ComputeLogicalWidthUsing(
@@ -4356,6 +4358,33 @@ bool LayoutBox::HasStretchedLogicalWidth() const {
.GetPosition() == ItemPosition::kStretch;
}
+// TODO (lajava) Can/Should we move this inside specific layout classes (flex.
+// grid)? Can we refactor columnFlexItemHasStretchAlignment logic?
+bool LayoutBox::HasStretchedLogicalHeight() const {
+ NOT_DESTROYED();
+ const ComputedStyle& style = StyleRef();
+ if (!style.LogicalHeight().IsAuto() || style.MarginBefore().IsAuto() ||
+ style.MarginAfter().IsAuto())
+ return false;
+ LayoutBlock* cb = ContainingBlock();
+ if (!cb) {
+ // We are evaluating align-self/justify-self, which default to 'normal' for
+ // the root element. The 'normal' value behaves like 'start' except for
+ // Flexbox Items, which obviously should have a container.
+ return false;
+ }
+ if (cb->IsHorizontalWritingMode() != IsHorizontalWritingMode()) {
+ return style
+ .ResolvedJustifySelf(cb->SelfAlignmentNormalBehavior(this),
+ cb->Style())
+ .GetPosition() == ItemPosition::kStretch;
+ }
+ return style
+ .ResolvedAlignSelf(cb->SelfAlignmentNormalBehavior(this),
+ cb->Style())
+ .GetPosition() == ItemPosition::kStretch;
+}
+
bool LayoutBox::SizesLogicalWidthToFitContent(
const Length& logical_width) const {
NOT_DESTROYED();
diff --git a/blink/renderer/core/layout/layout_box.h b/blink/renderer/core/layout/layout_box.h
index 645ca329baf..2f7a56d7133 100644
--- a/blink/renderer/core/layout/layout_box.h
+++ b/blink/renderer/core/layout/layout_box.h
@@ -2117,6 +2117,7 @@ class CORE_EXPORT LayoutBox : public LayoutBoxModelObject {
bool ColumnFlexItemHasStretchAlignment() const;
bool IsStretchingColumnFlexItem() const;
bool HasStretchedLogicalWidth() const;
+ bool HasStretchedLogicalHeight() const;
void ExcludeScrollbars(
PhysicalRect&,
diff --git a/blink/web_tests/TestExpectations b/blink/web_tests/TestExpectations
index 4fad027e927..9b5ee9bd067 100644
--- a/blink/web_tests/TestExpectations
+++ b/blink/web_tests/TestExpectations
@@ -3329,6 +3329,10 @@ crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-siz
crbug.com/941987 external/wpt/css/css-grid/alignment/grid-baseline-align-cycles-001.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html [ Failure ]
+crbug.com/1171262 external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html [ Failure ]
+crbug.com/1171262 external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html [ Failure ]
+crbug.com/1171262 external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html [ Failure ]
+crbug.com/1171262 external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html [ Failure ]
crbug.com/759665 external/wpt/css/css-grid/animation/grid-template-columns-001.html [ Failure ]
crbug.com/759665 external/wpt/css/css-grid/animation/grid-template-rows-001.html [ Failure ]
crbug.com/935102 external/wpt/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-002.html [ Failure ]
@@ -3382,6 +3386,10 @@ crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/gri
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-036.html [ Pass ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html [ Pass ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html [ Pass ]
+crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html [ Pass ]
# Tests that pass with layout-ng-grid enabled but fail in legacy grid:
virtual/layout-ng-grid/external/wpt/css/css-grid/abspos/descendant-static-position-003.html [ Pass ]
diff --git a/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html
new file mode 100644
index 00000000000..437b379332e
--- /dev/null
+++ b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+Test passes if there is a filled green square and no red.
+
+
+
+
Test passes if there is a filled green square and no red.
+
+
+
+
Test passes if there is a filled green square and no red.
+
+
+
+
Test passes if there is a filled green square and no red.
+
+
+
+
Test passes if there is a filled green square and no red.
+
+
+
+
Test passes if there is a filled green square and no red.
+
+
+
+