Changeset 287976 in webkit


Ignore:
Timestamp:
Jan 13, 2022 5:04:00 AM (6 months ago)
Author:
svillar@igalia.com
Message:

[css-flexbox] Incorrect height of flex items with aspect-ratio whenever the cross axis intrinsic size is larger than the viewport
​https://bugs.webkit.org/show_bug.cgi?id=234564
<rdar://problem/86958389>

Reviewed by Manuel Rego Casasnovas.

Source/WebCore:

Automatic preferred sizes were considered always indefinite. However whenever they correspond to
the (physical) width we could consider them as definite. This allows us to use that size instead of
the flex item intrinsic size when computing the transferred size contribution. This way, flex items
with aspect ratio and large intrinsic size are not abnormally stretched due to the min-size:auto
computation.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing const): Use availableLogical{Width|Height}
to compute the cross size when then automatic preferred size is the physical width.
(WebCore::RenderFlexibleBox::childCrossAxisIsPhysicalWidth const):
(WebCore::RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize const): Handle the cases of
automatic preferred widths.

  • rendering/RenderFlexibleBox.h:

LayoutTests:

Adjusted the canvas-css-size-after-height-change-with-display-flex.html test case and expectations so it behaves as other engines.

  • TestExpectations: Unskipped a test that is passing now.
  • fast/canvas/canvas-css-size-after-height-change-with-display-flex-expected.html:
  • fast/canvas/canvas-css-size-after-height-change-with-display-flex.html:
Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r287975 r287976  
     12022-01-10  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] Incorrect height of flex items with aspect-ratio whenever the cross axis intrinsic size is larger than the viewport
     4        https://bugs.webkit.org/show_bug.cgi?id=234564
     5        <rdar://problem/86958389>
     6
     7        Reviewed by Manuel Rego Casasnovas.
     8
     9        Adjusted the canvas-css-size-after-height-change-with-display-flex.html test case and expectations so it behaves as other engines.
     10
     11        * TestExpectations: Unskipped a test that is passing now.
     12        * fast/canvas/canvas-css-size-after-height-change-with-display-flex-expected.html:
     13        * fast/canvas/canvas-css-size-after-height-change-with-display-flex.html:
     14
    1152022-01-13  Youenn Fablet  <youenn@apple.com>
    216

  • trunk/LayoutTests/TestExpectations

    r287927 r287976  
    13561356webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap-reverse.html [ ImageOnlyFailure ]
    13571357webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap.html [ ImageOnlyFailure ]
    1358 webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/canvas-dynamic-change-001.html [ Failure ]
    13591358webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html [ ImageOnlyFailure ]
    13601359webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001.html [ ImageOnlyFailure ]
    … …  
    42034202webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-010.html [ ImageOnlyFailure ]
    42044203webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/aspect-ratio-intrinsic-size-005.html [ ImageOnlyFailure ]
    4205 webkit.org/b/234564 imported/w3c/web-platform-tests/css/css-flexbox/aspect-ratio-intrinsic-size-007.html [ ImageOnlyFailure ]
    42064204
    42074205webkit.org/b/145176 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_align-items-stretch-3.html [ ImageOnlyFailure ]

  • trunk/LayoutTests/fast/canvas/canvas-css-size-after-height-change-with-display-flex-expected.html

    r201889 r287976  
    1 <div style="height: 500px; background-color: blue;"></div>
     1<div style="width: 600px; height: 600px; background-color: blue;"></div>

  • trunk/LayoutTests/fast/canvas/canvas-css-size-after-height-change-with-display-flex.html

    r201889 r287976  
    11<div style="display: flex; flex-direction: column;">
    2     <canvas style="background-color: blue;">
     2    <canvas style="background-color: blue; max-width: 600px">
    33        <script>
    44            if (window.testRunner)
    … …  
    66
    77            window.requestAnimationFrame(function() {
    8                 document.querySelector("canvas").height = "500";
     8                document.querySelector("canvas").height = "300";
    99                if (window.testRunner)
    1010                    testRunner.notifyDone();

  • trunk/Source/WebCore/ChangeLog

    r287973 r287976  
     12022-01-10  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] Incorrect height of flex items with aspect-ratio whenever the cross axis intrinsic size is larger than the viewport
     4        https://bugs.webkit.org/show_bug.cgi?id=234564
     5        <rdar://problem/86958389>
     6
     7        Reviewed by Manuel Rego Casasnovas.
     8
     9        Automatic preferred sizes were considered always indefinite. However whenever they correspond to
     10        the (physical) width we could consider them as definite. This allows us to use that size instead of
     11        the flex item intrinsic size when computing the transferred size contribution. This way, flex items
     12        with aspect ratio and large intrinsic size are not abnormally stretched due to the min-size:auto
     13        computation.
     14
     15        * rendering/RenderFlexibleBox.cpp:
     16        (WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing const): Use availableLogical{Width|Height}
     17        to compute the cross size when then automatic preferred size is the physical width.
     18        (WebCore::RenderFlexibleBox::childCrossAxisIsPhysicalWidth const):
     19        (WebCore::RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize const): Handle the cases of
     20        automatic preferred widths.
     21        * rendering/RenderFlexibleBox.h:
     22
    1232022-01-12  Antti Koivisto  <antti@apple.com>
    224

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r287355 r287976  
    915915    if (crossSizeLength.isFixed())
    916916        crossSize = adjustForBoxSizing(child, crossSizeLength);
    917     else if (crossSizeLength.isAuto())
     917    else if (crossSizeLength.isAuto()) {
     918        ASSERT(childCrossSizeShouldUseContainerCrossSize(child));
    918919        crossSize = computeCrossSizeForChildUsingContainerCrossSize(child);
    919     else {
     920    } else {
    920921        ASSERT(crossSizeLength.isPercentOrCalculated());
    921922        crossSize = mainAxisIsChildInlineAxis(child) ? child.computePercentageLogicalHeight(crossSizeLength) : adjustBorderBoxLogicalWidthForBoxSizing(valueForLength(crossSizeLength, contentWidth()), crossSizeLength.type());
    … …  
    988989}
    989990
     991bool RenderFlexibleBox::crossAxisIsPhysicalWidth() const
     992{
     993    return (isHorizontalWritingMode() && isColumnFlow()) || (!isHorizontalWritingMode() && !isColumnFlow());
     994}
     995
    990996bool RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize(const RenderBox& child) const
    991997{
    … …  
    9951001    // and is considered definite.
    9961002    if (!isMultiline() && alignmentForChild(child) == ItemPosition::Stretch && !hasAutoMarginsInCrossAxis(child) && crossSizeLengthForChild(MainOrPreferredSize, child).isAuto()) {
     1003        if (crossAxisIsPhysicalWidth())
     1004            return true;
    9971005        // This must be kept in sync with computeMainSizeFromAspectRatioUsing().
    9981006        // FIXME: so far we're only considered fixed sizes but we should extend it to other definite sizes.
    … …  
    17421750LayoutUnit RenderFlexibleBox::computeCrossSizeForChildUsingContainerCrossSize(const RenderBox& child) const
    17431751{
     1752    if (crossAxisIsPhysicalWidth())
     1753        return contentWidth();
     1754
    17441755    // Keep this sync'ed with childCrossSizeShouldUseContainerCrossSize().
    17451756    auto definiteSizeValue = [&] {

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.h

    r287128 r287976  
    147147    bool childHasComputableAspectRatio(const RenderBox&) const;
    148148    bool childHasComputableAspectRatioAndCrossSizeIsConsideredDefinite(const RenderBox&);
     149    bool crossAxisIsPhysicalWidth() const;
    149150    bool childCrossSizeShouldUseContainerCrossSize(const RenderBox& child) const;
    150151    LayoutUnit computeCrossSizeForChildUsingContainerCrossSize(const RenderBox& child) const;
Note: See TracChangeset for help on using the changeset viewer.