Changeset 270617 in webkit


Ignore:
Timestamp:
Dec 10, 2020 1:21:48 AM (20 months ago)
Author:
svillar@igalia.com
Message:

[css-flex] RenderFlexibleBox::computeMainSizeFromAspectRatioUsing() must obbey box-sizing
​https://bugs.webkit.org/show_bug.cgi?id=219690

Reviewed by Darin Adler.

LayoutTests/imported/w3c:

  • web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-005-expected.txt: Replaced one FAIL by PASS expectation.
  • web-platform-tests/css/css-flexbox/image-as-flexitem-size-007-expected.txt: Ditto.
  • web-platform-tests/css/css-flexbox/image-as-flexitem-size-007v-expected.txt: Ditto.

Source/WebCore:

The method was not handling the cases in which box-sizing was border-box and thus it was incorrectly using
border and padding to compute sizes based on aspect ratios (the aspect ratio must be applied to content box).

This fixes 3 subtests from the WPT test suite.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing const): Use a lambda to substract border and
padding extent when box-sizing is border-box.
(WebCore::RenderFlexibleBox::computeInnerFlexBaseSizeForChild): Do not substract border and padding because
computeMainSizeFromAspectRatioUsing now always returns the content box size.

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r270613 r270617  
     12020-12-09  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flex] RenderFlexibleBox::computeMainSizeFromAspectRatioUsing() must obbey box-sizing
     4        https://bugs.webkit.org/show_bug.cgi?id=219690
     5
     6        Reviewed by Darin Adler.
     7
     8        * web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-005-expected.txt: Replaced one FAIL by PASS expectation.
     9        * web-platform-tests/css/css-flexbox/image-as-flexitem-size-007-expected.txt: Ditto.
     10        * web-platform-tests/css/css-flexbox/image-as-flexitem-size-007v-expected.txt: Ditto.
     11
    1122020-12-09  Cathie Chen  <cathiechen@igalia.com>
    213

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-005-expected.txt

    r267650 r270617  
    1111
    1212PASS img 1
    13 FAIL img 2 assert_equals:
    14 <img style="height: 150px; box-sizing: border-box;" src="support/200x200-green.png" data-expected-client-width="100" data-expected-client-height="100">
    15 clientWidth expected 100 but got 150
     13PASS img 2
    1614PASS img 3
    1715PASS img 4

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-007-expected.txt

    r270116 r270617  
    88PASS .flexbox > img 1
    99PASS .flexbox > img 2
    10 FAIL .flexbox > img 3 assert_equals:
    11 <img src="support/solidblue.png" style="height: 30px" data-expected-width="32" data-expected-height="30">
    12 width expected 32 but got 30
     10PASS .flexbox > img 3
    1311PASS .flexbox > img 4
    1412PASS .flexbox > img 5

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-007v-expected.txt

    r270073 r270617  
    88PASS .flexbox > img 1
    99PASS .flexbox > img 2
    10 FAIL .flexbox > img 3 assert_equals:
    11 <img src="support/solidblue.png" style="height: 30px" data-expected-width="32" data-expected-height="30">
    12 width expected 32 but got 30
     10PASS .flexbox > img 3
    1311PASS .flexbox > img 4
    1412PASS .flexbox > img 5

  • trunk/Source/WebCore/ChangeLog

    r270613 r270617  
     12020-12-09  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flex] RenderFlexibleBox::computeMainSizeFromAspectRatioUsing() must obbey box-sizing
     4        https://bugs.webkit.org/show_bug.cgi?id=219690
     5
     6        Reviewed by Darin Adler.
     7
     8        The method was not handling the cases in which box-sizing was border-box and thus it was incorrectly using
     9        border and padding to compute sizes based on aspect ratios (the aspect ratio must be applied to content box).
     10
     11        This fixes 3 subtests from the WPT test suite.
     12
     13        * rendering/RenderFlexibleBox.cpp:
     14        (WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing const): Use a lambda to substract border and
     15        padding extent when box-sizing is border-box.
     16        (WebCore::RenderFlexibleBox::computeInnerFlexBaseSizeForChild): Do not substract border and padding because
     17        computeMainSizeFromAspectRatioUsing now always returns the content box size.
     18
    1192020-12-09  Cathie Chen  <cathiechen@igalia.com>
    220

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

    r270578 r270617  
    759759    ASSERT(child.hasAspectRatio());
    760760    ASSERT(child.intrinsicSize().height());
    761    
     761
     762    auto adjustForBoxSizing = [this] (const RenderBox& box, Length length) -> LayoutUnit {
     763        ASSERT(length.isFixed());
     764        auto value = LayoutUnit(length.value());
     765        // We need to substract the border and padding extent from the cross axis.
     766        // Furthermore, the sizing calculations that floor the content box size at zero when applying box-sizing are also ignored.
     767        // https://drafts.csswg.org/css-flexbox/#algo-main-item.
     768        if (box.style().boxSizing() == BoxSizing::BorderBox)
     769            value -= isHorizontalFlow() ? box.verticalBorderAndPaddingExtent() : box.horizontalBorderAndPaddingExtent();
     770        return value;
     771    };
     772
    762773    Optional<LayoutUnit> crossSize;
    763774    if (crossSizeLength.isFixed())
    764         crossSize = LayoutUnit(crossSizeLength.value());
     775        crossSize = adjustForBoxSizing(child, crossSizeLength);
    765776    else if (crossSizeLength.isAuto()) {
    766777        auto containerCrossSizeLength = isHorizontalFlow() ? style().height() : style().width();
    767778        // Keep this sync'ed with childCrossSizeIsDefinite().
    768779        ASSERT(containerCrossSizeLength.isFixed());
    769         crossSize = valueForLength(containerCrossSizeLength, -1_lu);
     780        crossSize = adjustForBoxSizing(*this, containerCrossSizeLength);
    770781    } else {
    771782        ASSERT(crossSizeLength.isPercentOrCalculated());
    … …  
    879890    if (useChildAspectRatio(child)) {
    880891        const Length& crossSizeLength = isHorizontalFlow() ? child.style().height() : child.style().width();
    881         auto mainSize = adjustChildSizeForAspectRatioCrossAxisMinAndMax(child, computeMainSizeFromAspectRatioUsing(child, crossSizeLength));
    882         return mainSize - mainAxisBorderAndPadding;
     892        return adjustChildSizeForAspectRatioCrossAxisMinAndMax(child, computeMainSizeFromAspectRatioUsing(child, crossSizeLength));
    883893    }
    884894
Note: See TracChangeset for help on using the changeset viewer.