From c4359c59073027340baab1d8e28fee47031e6576 Mon Sep 17 00:00:00 2001 From: Christian Biesinger Date: Thu, 28 Jan 2021 15:18:32 +0000 Subject: [PATCH] [css-grid] Correctly stretch a replaced element in both axes As discussed in https://github.com/w3c/csswg-drafts/issues/5713 Change-Id: I90c8bd9c5516d11cae6798d7d7cb6c679e166994 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2651651 Commit-Queue: Christian Biesinger Reviewed-by: Oriol Brufau Reviewed-by: Javier Fernandez Reviewed-by: Ian Kilpatrick Auto-Submit: Christian Biesinger Cr-Commit-Position: refs/heads/master@{#848107} GitOrigin-RevId: 2ba07b2385593e296bb69271b4c27402a6d929c3 --- blink/renderer/core/layout/layout_box.cc | 31 +++++++++++++++++- blink/renderer/core/layout/layout_box.h | 1 + blink/web_tests/TestExpectations | 8 +++++ ...laced-alignment-with-aspect-ratio-004.html | 10 ++++++ ...laced-alignment-with-aspect-ratio-005.html | 10 ++++++ ...laced-alignment-with-aspect-ratio-006.html | 10 ++++++ ...laced-alignment-with-aspect-ratio-007.html | 10 ++++++ ...laced-alignment-with-aspect-ratio-008.html | 10 ++++++ ...laced-alignment-with-aspect-ratio-009.html | 10 ++++++ .../alignment/support/25x50-green.png | Bin 0 -> 99 bytes .../alignment/support/50x50-green.png | Bin 0 -> 205 bytes blink/web_tests/external/wpt/lint.ignore | 3 ++ 12 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html create mode 100644 blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html create mode 100644 blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html create mode 100644 blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html create mode 100644 blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html create mode 100644 blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html create mode 100644 blink/web_tests/external/wpt/css/css-grid/alignment/support/25x50-green.png create mode 100644 blink/web_tests/external/wpt/css/css-grid/alignment/support/50x50-green.png diff --git a/blink/renderer/core/layout/layout_box.cc b/blink/renderer/core/layout/layout_box.cc index 8c3897548441..6c47f5906ada 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 645ca329baf9..2f7a56d71330 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 4fad027e927e..9b5ee9bd0676 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 000000000000..437b379332e9 --- /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.

+ +
+ +
diff --git a/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html new file mode 100644 index 000000000000..b14c45d0c2d9 --- /dev/null +++ b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html @@ -0,0 +1,10 @@ + + + + + +

Test passes if there is a filled green square and no red.

+ +
+ +
diff --git a/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html new file mode 100644 index 000000000000..ed14e3605794 --- /dev/null +++ b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html @@ -0,0 +1,10 @@ + + + + + +

Test passes if there is a filled green square and no red.

+ +
+ +
diff --git a/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html new file mode 100644 index 000000000000..0c841c7654c2 --- /dev/null +++ b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html @@ -0,0 +1,10 @@ + + + + + +

Test passes if there is a filled green square and no red.

+ +
+ +
diff --git a/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html new file mode 100644 index 000000000000..9227332851a4 --- /dev/null +++ b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html @@ -0,0 +1,10 @@ + + + + + +

Test passes if there is a filled green square and no red.

+ +
+ +
diff --git a/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html new file mode 100644 index 000000000000..ff721b8f19b4 --- /dev/null +++ b/blink/web_tests/external/wpt/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html @@ -0,0 +1,10 @@ + + + + + +

Test passes if there is a filled green square and no red.

+ +
+ +
diff --git a/blink/web_tests/external/wpt/css/css-grid/alignment/support/25x50-green.png b/blink/web_tests/external/wpt/css/css-grid/alignment/support/25x50-green.png new file mode 100644 index 0000000000000000000000000000000000000000..6ab02fce0fa9b708880d4dbb2dc2b927fd30f59b GIT binary patch literal 99 zcmeAS@N?(olHy`uVBq!ia0vp^l0a<4!2~4L9y~t?q_jL;978;gzdd6p$iTqCvf%m? wx9u&@Sr}LNtSfm`v@=F;`st@2>iX-g3G*19Z2kH*9jJ@J)78&qol`;+08hdq1poj5 literal 0 HcmV?d00001 diff --git a/blink/web_tests/external/wpt/css/css-grid/alignment/support/50x50-green.png b/blink/web_tests/external/wpt/css/css-grid/alignment/support/50x50-green.png new file mode 100644 index 0000000000000000000000000000000000000000..6c1406b7dfd7c59f413a183c8896b8c2b3395bf5 GIT binary patch literal 205 zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1SBWM%0B~AjKx9jP7LeL$-D$|I14-?iy0WW zg+Z8+Vb&Z8pdfpRr>`sf9WH)xT{B-MmIk1ZWQl7;iF1B#Zfaf$gL6@8Vo7R>LV0FM zhJw4NZ$Nk>pEyvFm8XkiNW|f{=NNez7&w?0WEU-tb~g8LNG%FbkHQ1yM{&=0V|bFd SsqZY%6b4UMKbLh*2~7Zf#5OPh literal 0 HcmV?d00001 diff --git a/blink/web_tests/external/wpt/lint.ignore b/blink/web_tests/external/wpt/lint.ignore index 0c12d66c0458..e296376fb69c 100644 --- a/blink/web_tests/external/wpt/lint.ignore +++ b/blink/web_tests/external/wpt/lint.ignore @@ -613,6 +613,9 @@ CSS-COLLIDING-SUPPORT-NAME: css/css-backgrounds/support/50x50-green.png CSS-COLLIDING-SUPPORT-NAME: css/css-grid/grid-items/support/50x50-green.png CSS-COLLIDING-SUPPORT-NAME: css/CSS2/support/50x50-green.png CSS-COLLIDING-SUPPORT-NAME: css/CSS2/ui/support/animated.gif +CSS-COLLIDING-SUPPORT-NAME: css/css-grid/alignment/support/50x50-green.png +CSS-COLLIDING-SUPPORT-NAME: css/css-grid/alignment/support/25x50-green.png +CSS-COLLIDING-SUPPORT-NAME: css/css-grid/grid-items/support/25x50-green.png CSS-COLLIDING-SUPPORT-NAME: css/CSS2/backgrounds/support/animated.gif CSS-COLLIDING-SUPPORT-NAME: css/css-shapes/shape-outside/shape-image/support/animated.gif CSS-COLLIDING-SUPPORT-NAME: css/css-display/support/util.js