Skip to content

GitLab

T
tangled
Commit 154de628 authored by Christian Biesinger's avatar Christian Biesinger Committed by Chromium LUCI CQ
Browse files
Options

[AspectRatio] Correctly handle "auto m/n" with display: block 

The code previously effectively ignored the auto.

flex-aspect-ratio-024 is now failing in legacy because the
LayoutReplaced code, unlike ComputeLogicalWidthFromAspectRatio,
does not take an override logical height into account.

Bug: 1157740
Change-Id: I593674569bb6d6ae76b957a09908bbade60c8fa5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2585641
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Auto-Submit: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#836645}
parent 6a790229
Hide whitespace changes
Inline Side-by-side
Showing with 26 additions and 3 deletions
third_party/blink/renderer/core/layout/layout_box.cc
View file @ 154de628
......@@ -4101,7 +4101,7 @@ void LayoutBox::ComputeLogicalWidth(
ContainerWidthInInlineDirection();
LayoutBlock* cb = ContainingBlock();
if (StyleRef().LogicalWidth().IsAuto() &&
if (StyleRef().LogicalWidth().IsAuto() && !treat_as_replaced &&
ComputeLogicalWidthFromAspectRatio(&computed_values.extent_)) {
/* we're good */
} else if (treat_as_replaced) {
......@@ -4621,12 +4621,13 @@ void LayoutBox::ComputeLogicalHeight(
}
bool check_min_max_height = false;
bool compute_size_as_replaced = ShouldComputeSizeAsReplaced();
// The parent box is flexing us, so it has increased or decreased our
// height. We have to grab our cached flexible height.
if (HasOverrideLogicalHeight()) {
h = Length::Fixed(OverrideLogicalHeight());
} else if (ShouldComputeSizeAsReplaced()) {
} else if (compute_size_as_replaced) {
h = Length::Fixed(ComputeReplacedLogicalHeight() +
BorderAndPaddingLogicalHeight());
} else {
......@@ -4636,7 +4637,8 @@ void LayoutBox::ComputeLogicalHeight(
LayoutUnit height_result;
if (check_min_max_height) {
if (ShouldComputeLogicalHeightFromAspectRatio()) {
if (!compute_size_as_replaced &&
ShouldComputeLogicalHeightFromAspectRatio()) {
NGBoxStrut border_padding(BorderStart() + ComputedCSSPaddingStart(),
BorderEnd() + ComputedCSSPaddingEnd(),
BorderBefore() + ComputedCSSPaddingBefore(),
......
third_party/blink/web_tests/FlagExpectations/disable-layout-ng
View file @ 154de628
......@@ -140,6 +140,7 @@ crbug.com/591099 external/wpt/css/css-shapes/shape-outside/supported-shapes/poly
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-013.html [ Pass ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-024.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-028.html [ Failure ]
crbug.com/1157740 external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-024.html [ Failure ]
crbug.com/591099 external/wpt/css/css-sizing/clone-nowrap-intrinsic-size-bidi.html [ Failure ]
crbug.com/591099 external/wpt/css/css-sizing/intrinsic-percent-non-replaced-004.html [ Failure ]
crbug.com/591099 external/wpt/css/css-sizing/intrinsic-percent-non-replaced-005.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-029.html 0 → 100644
View file @ 154de628
<!DOCTYPE html>
<title>CSS aspect-ratio: img with display:block and auto ratio</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<img src="support/1x1-green.png" style="width: 100px; aspect-ratio: auto 10/1; display: block;">
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-030.html 0 → 100644
View file @ 154de628
<!DOCTYPE html>
<title>CSS aspect-ratio: img with display:block and auto ratio</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<img src="support/1x1-green.png" style="height: 100px; aspect-ratio: auto 10/1; display: block;">
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment