Changeset 280631 in webkit

Timestamp:

Aug 4, 2021, 3:57:08 AM (5 years ago)

Author:

cathiechen

Message:

REGRESSION (r277997) Images get stretched with aspect-ratio and max-width: x%
​https://bugs.webkit.org/show_bug.cgi?id=228076

Reviewed by Antti Koivisto.

Source/WebCore:

The image get stretched because constrainLogicalWidthInFragmentByMinMax returns the intrinsic width while computing MinSize.
According to [1], the box's minimum width is its min-content size not the MinIntrinsic width which is used because of
the recursion. To break the recursion, computeIntrinsicLogicalWidthUsing calls computeLogicalWidthFromAspectRatioInternal instead,
then checks children's width.

[1] ​https://www.w3.org/TR/css-sizing-4/#aspect-ratio-minimum

• rendering/RenderBox.cpp:

(WebCore::RenderBox::constrainLogicalWidthInFragmentByMinMax const): If shouldComputeLogicalWidthFromAspectRatio,
the length should be treated as MinContent not MinIntrinsic.
(WebCore::RenderBox::computeIntrinsicLogicalWidthUsing const): To break the loop, call computeLogicalWidthFromAspectRatioInternal instead
to get the width from aspect-ratio and if there is child, make sure the min/max logical width not less than content's width.
(WebCore::RenderBox::computeLogicalWidthFromAspectRatioInternal const):
(WebCore::RenderBox::computeLogicalWidthFromAspectRatio const):

• rendering/RenderBox.h:

LayoutTests:

• TestExpectations:

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/TestExpectations (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/rendering/RenderBox.cpp (modified) (4 diffs)
• Source/WebCore/rendering/RenderBox.h (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2021-08-04  Cathie Chen  <cathiechen@igalia.com>
+
+        REGRESSION (r277997) Images get stretched with aspect-ratio and max-width: x%
+        https://bugs.webkit.org/show_bug.cgi?id=228076
+
+        Reviewed by Antti Koivisto.
+
+        * TestExpectations:
+
 2021-08-04  Tim Horton  <timothy_horton@apple.com>
 

trunk/LayoutTests/TestExpectations

@@ -4712 +4712 @@
 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/228076 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-027.html [ ImageOnlyFailure ]
-webkit.org/b/228076 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-028.html [ ImageOnlyFailure ]
 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001.html [ ImageOnlyFailure ]
 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002.html [ ImageOnlyFailure ]

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-08-04  Cathie Chen  <cathiechen@igalia.com>
+
+        REGRESSION (r277997) Images get stretched with aspect-ratio and max-width: x%
+        https://bugs.webkit.org/show_bug.cgi?id=228076
+
+        Reviewed by Antti Koivisto.
+
+        The image get stretched because constrainLogicalWidthInFragmentByMinMax returns the intrinsic width while computing MinSize.
+        According to [1], the box's minimum width is its min-content size not the MinIntrinsic width which is used because of
+        the recursion. To break the recursion, computeIntrinsicLogicalWidthUsing calls computeLogicalWidthFromAspectRatioInternal instead,
+        then checks children's width.
+
+        [1] https://www.w3.org/TR/css-sizing-4/#aspect-ratio-minimum
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::constrainLogicalWidthInFragmentByMinMax const): If shouldComputeLogicalWidthFromAspectRatio,
+        the length should be treated as MinContent not MinIntrinsic.
+        (WebCore::RenderBox::computeIntrinsicLogicalWidthUsing const): To break the loop, call computeLogicalWidthFromAspectRatioInternal instead
+        to get the width from aspect-ratio and if there is child, make sure the min/max logical width not less than content's width.
+        (WebCore::RenderBox::computeLogicalWidthFromAspectRatioInternal const):
+        (WebCore::RenderBox::computeLogicalWidthFromAspectRatio const):
+        * rendering/RenderBox.h:
+
 2021-08-04  Tim Horton  <timothy_horton@apple.com>
 

trunk/Source/WebCore/rendering/RenderBox.cpp

@@ -665 +665 @@
         // Make sure we actually used the aspect ratio.
         if (shouldComputeLogicalWidthFromAspectRatio())
-            minLength = Length(LengthType::MinIntrinsic);
+            minLength = Length(LengthType::MinContent);
     }
     return std::max(logicalWidth, computeLogicalWidthInFragmentUsing(MinSize, minLength, availableWidth, cb, fragment));
@@ -2697 +2697 @@
     LayoutUnit minLogicalWidth;
     LayoutUnit maxLogicalWidth;
-    if (!logicalWidthLength.isMinIntrinsic() && shouldComputeLogicalWidthFromAspectRatio())
-        minLogicalWidth = maxLogicalWidth = computeLogicalWidthFromAspectRatio();
-    else
+    if (!logicalWidthLength.isMinIntrinsic() && shouldComputeLogicalWidthFromAspectRatio()) {
+        minLogicalWidth = maxLogicalWidth = computeLogicalWidthFromAspectRatioInternal() - borderAndPadding;
+        if (firstChild()) {
+            LayoutUnit minChildrenLogicalWidth;
+            LayoutUnit maxChildrenLogicalWidth;
+            computeIntrinsicKeywordLogicalWidths(minChildrenLogicalWidth, maxChildrenLogicalWidth);
+            minLogicalWidth = std::max(minLogicalWidth, minChildrenLogicalWidth);
+            maxLogicalWidth = std::max(maxLogicalWidth, maxChildrenLogicalWidth);
+        }
+    } else
         computeIntrinsicKeywordLogicalWidths(minLogicalWidth, maxLogicalWidth);
 
@@ -5303 +5310 @@
 }
 
-LayoutUnit RenderBox::computeLogicalWidthFromAspectRatio(RenderFragmentContainer* fragment) const
+LayoutUnit RenderBox::computeLogicalWidthFromAspectRatioInternal() const
 {
     ASSERT(shouldComputeLogicalWidthFromAspectRatio());
@@ -5309 +5316 @@
     LayoutUnit logicalHeightforAspectRatio = computedValues.m_extent;
 
-    auto logicalWidth = inlineSizeFromAspectRatio(horizontalBorderAndPaddingExtent(), verticalBorderAndPaddingExtent(), LayoutUnit(style().logicalAspectRatio()), style().boxSizingForAspectRatio(), logicalHeightforAspectRatio);
-
+    return inlineSizeFromAspectRatio(horizontalBorderAndPaddingExtent(), verticalBorderAndPaddingExtent(), LayoutUnit(style().logicalAspectRatio()), style().boxSizingForAspectRatio(), logicalHeightforAspectRatio);
+}
+
+LayoutUnit RenderBox::computeLogicalWidthFromAspectRatio(RenderFragmentContainer* fragment) const
+{
+    auto logicalWidth = computeLogicalWidthFromAspectRatioInternal();
     LayoutUnit containerWidthInInlineDirection = std::max<LayoutUnit>(0, containingBlockLogicalWidthForContentInFragment(fragment));
     return constrainLogicalWidthInFragmentByMinMax(logicalWidth, containerWidthInInlineDirection, *containingBlock(), fragment, AllowIntrinsic::No);

trunk/Source/WebCore/rendering/RenderBox.h

@@ -710 +710 @@
     bool shouldIgnoreAspectRatio() const;
     bool shouldComputeLogicalWidthFromAspectRatio() const;
+    LayoutUnit computeLogicalWidthFromAspectRatioInternal() const;
     LayoutUnit computeLogicalWidthFromAspectRatio(RenderFragmentContainer* = nullptr) const;
     std::pair<LayoutUnit, LayoutUnit> computeMinMaxLogicalWidthFromAspectRatio() const;