Changeset 270578 in webkit


Ignore:
Timestamp:
Dec 9, 2020 7:40:17 AM (3 years ago)
Author:
svillar@igalia.com
Message:

[css-flex] Implement 9.8.1 Definite and Indefinite Sizes
https://bugs.webkit.org/show_bug.cgi?id=219538

Reviewed by Manuel Rego Casasnovas.

LayoutTests/imported/w3c:

  • web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-013-expected.txt: Replaced FAIL by PASS expectations.
  • web-platform-tests/css/css-flexbox/image-as-flexitem-size-003-expected.txt: Ditto.
  • web-platform-tests/css/css-flexbox/image-as-flexitem-size-003v-expected.txt: Ditto.
  • web-platform-tests/css/css-flexbox/image-as-flexitem-size-004-expected.txt: Ditto.
  • web-platform-tests/css/css-flexbox/image-as-flexitem-size-004v-expected.txt: Ditto.
  • web-platform-tests/css/css-sizing/percentage-height-in-flexbox.html: Updated expectation. Still failing.

Source/WebCore:

If a single-line flex container has a definite cross size, the automatic preferred outer cross size
of any stretched flex items is the flex container's inner cross size (clamped to the flex item's
min and max cross size) and is considered definite. Before that we were considering all automatic
sizes as indefinite.

This patch does not consider all the cases where the container cross size is definite but just when
that size is fixed. Support for additional cases should be added in followup patches.

This fixes 3 full tests plus 24 subtests in some other flexbox aspect ratio tests from the WPT suite.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing const): Use the container's cross size
as the item's cross size.
(WebCore::RenderFlexibleBox::childCrossSizeIsDefinite const): Consider automatic cross size inside a
single line container with definite cross size as definite.

LayoutTests:

Location:
trunk
Files:
11 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r270574 r270578  
     12020-12-04  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flex] Implement 9.8.1 Definite and Indefinite Sizes
     4        https://bugs.webkit.org/show_bug.cgi?id=219538
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        * TestExpectations: Unskipped 3 tests that are passing now.
     9
    1102020-12-09  Sihui Liu  <sihui_liu@apple.com>
    211
  • trunk/LayoutTests/TestExpectations

    r270574 r270578  
    39133913webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-015.html [ ImageOnlyFailure ]
    39143914webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-017.html [ ImageOnlyFailure ]
    3915 webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-006.html [ ImageOnlyFailure ]
    39163915webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-007.html [ ImageOnlyFailure ]
    39173916webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-009.html [ ImageOnlyFailure ]
     
    39243923webkit.org/b/210144 imported/w3c/web-platform-tests/css/css-flexbox/anonymous-flex-item-005.html [ ImageOnlyFailure ]
    39253924webkit.org/b/210478 imported/w3c/web-platform-tests/css/css-flexbox/percentage-heights-006.html [ ImageOnlyFailure ]
    3926 webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-005.xht [ ImageOnlyFailure ]
    3927 webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-007.xht [ ImageOnlyFailure ]
    39283925webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-005.xht [ ImageOnlyFailure ]
    39293926webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-007.xht [ ImageOnlyFailure ]
  • trunk/LayoutTests/imported/w3c/ChangeLog

    r270551 r270578  
     12020-12-04  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flex] Implement 9.8.1 Definite and Indefinite Sizes
     4        https://bugs.webkit.org/show_bug.cgi?id=219538
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        * web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-013-expected.txt: Replaced FAIL by PASS expectations.
     9        * web-platform-tests/css/css-flexbox/image-as-flexitem-size-003-expected.txt: Ditto.
     10        * web-platform-tests/css/css-flexbox/image-as-flexitem-size-003v-expected.txt: Ditto.
     11        * web-platform-tests/css/css-flexbox/image-as-flexitem-size-004-expected.txt: Ditto.
     12        * web-platform-tests/css/css-flexbox/image-as-flexitem-size-004v-expected.txt: Ditto.
     13        * web-platform-tests/css/css-sizing/percentage-height-in-flexbox.html: Updated expectation. Still failing.
     14
    1152020-12-08  Rob Buis  <rbuis@igalia.com>
    216
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-013-expected.txt

    r270237 r270578  
    1313
    1414
    15 FAIL img 1 assert_equals:
    16 <img src="support/200x200-green.png" data-expected-height="100" data-expected-width="100">
    17 width expected 100 but got 200
     15PASS img 1
    1816FAIL img 2 assert_equals:
    1917<img src="support/200x200-green.png" style="margin-bottom: 20px" data-expected-height="100" data-expected-width="100">
    20 width expected 100 but got 200
    21 FAIL img 3 assert_equals:
    22 <img src="support/200x200-green.png" style="min-height: 100px;" data-expected-height="100" data-expected-width="100">
    23 width expected 100 but got 200
     18width expected 100 but got 120
     19PASS img 3
    2420
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-003-expected.txt

    r269628 r270578  
    66
    77
    8 FAIL .flexbox > img 1 assert_equals:
    9 <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
    10 width expected 40 but got 16
     8PASS .flexbox > img 1
    119PASS .flexbox > img 2
    1210PASS .flexbox > img 3
    1311PASS .flexbox > img 4
    14 FAIL .flexbox > img 5 assert_equals:
    15 <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
    16 width expected 40 but got 34
    17 FAIL .flexbox > img 6 assert_equals:
    18 <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
    19 width expected 40 but got 34
    20 FAIL .flexbox > img 7 assert_equals:
    21 <img src="support/solidblue.png" style="min-width: 30px;
    22                                               min-height: 34px" data-expected-width="40" data-expected-height="40">
    23 width expected 40 but got 34
    24 FAIL .flexbox > img 8 assert_equals:
    25 <img src="support/solidblue.png" style="min-width: 34px;
    26                                               min-height: 30px" data-expected-width="40" data-expected-height="40">
    27 width expected 40 but got 34
     12PASS .flexbox > img 5
     13PASS .flexbox > img 6
     14PASS .flexbox > img 7
     15PASS .flexbox > img 8
    2816PASS .flexbox > img 9
    2917PASS .flexbox > img 10
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-003v-expected.txt

    r269628 r270578  
    66
    77
    8 FAIL .flexbox > img 1 assert_equals:
    9 <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
    10 width expected 40 but got 16
     8PASS .flexbox > img 1
    119PASS .flexbox > img 2
    1210PASS .flexbox > img 3
    1311PASS .flexbox > img 4
    14 FAIL .flexbox > img 5 assert_equals:
    15 <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
    16 width expected 40 but got 34
    17 FAIL .flexbox > img 6 assert_equals:
    18 <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
    19 width expected 40 but got 34
    20 FAIL .flexbox > img 7 assert_equals:
    21 <img src="support/solidblue.png" style="min-width: 30px;
    22                                               min-height: 34px" data-expected-width="40" data-expected-height="40">
    23 width expected 40 but got 34
    24 FAIL .flexbox > img 8 assert_equals:
    25 <img src="support/solidblue.png" style="min-width: 34px;
    26                                               min-height: 30px" data-expected-width="40" data-expected-height="40">
    27 width expected 40 but got 34
     12PASS .flexbox > img 5
     13PASS .flexbox > img 6
     14PASS .flexbox > img 7
     15PASS .flexbox > img 8
    2816PASS .flexbox > img 9
    2917PASS .flexbox > img 10
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-004-expected.txt

    r269628 r270578  
    66
    77
    8 FAIL .flexbox > img 1 assert_equals:
    9 <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
    10 height expected 40 but got 16
     8PASS .flexbox > img 1
    119PASS .flexbox > img 2
    1210PASS .flexbox > img 3
    1311PASS .flexbox > img 4
    14 FAIL .flexbox > img 5 assert_equals:
    15 <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
    16 height expected 40 but got 34
    17 FAIL .flexbox > img 6 assert_equals:
    18 <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
    19 height expected 40 but got 34
    20 FAIL .flexbox > img 7 assert_equals:
    21 <img src="support/solidblue.png" style="min-width: 30px;
    22                                               min-height: 34px" data-expected-width="40" data-expected-height="40">
    23 height expected 40 but got 34
    24 FAIL .flexbox > img 8 assert_equals:
    25 <img src="support/solidblue.png" style="min-width: 34px;
    26                                               min-height: 30px" data-expected-width="40" data-expected-height="40">
    27 height expected 40 but got 34
     12PASS .flexbox > img 5
     13PASS .flexbox > img 6
     14PASS .flexbox > img 7
     15PASS .flexbox > img 8
    2816PASS .flexbox > img 9
    2917PASS .flexbox > img 10
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-004v-expected.txt

    r269628 r270578  
    66
    77
    8 FAIL .flexbox > img 1 assert_equals:
    9 <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
    10 height expected 40 but got 16
     8PASS .flexbox > img 1
    119PASS .flexbox > img 2
    1210PASS .flexbox > img 3
    1311PASS .flexbox > img 4
    14 FAIL .flexbox > img 5 assert_equals:
    15 <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
    16 height expected 40 but got 34
    17 FAIL .flexbox > img 6 assert_equals:
    18 <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
    19 height expected 40 but got 34
    20 FAIL .flexbox > img 7 assert_equals:
    21 <img src="support/solidblue.png" style="min-width: 30px;
    22                                               min-height: 34px" data-expected-width="40" data-expected-height="40">
    23 height expected 40 but got 34
    24 FAIL .flexbox > img 8 assert_equals:
    25 <img src="support/solidblue.png" style="min-width: 34px;
    26                                               min-height: 30px" data-expected-width="40" data-expected-height="40">
    27 height expected 40 but got 34
     12PASS .flexbox > img 5
     13PASS .flexbox > img 6
     14PASS .flexbox > img 7
     15PASS .flexbox > img 8
    2816PASS .flexbox > img 9
    2917PASS .flexbox > img 10
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/percentage-height-in-flexbox-expected.txt

    r267650 r270578  
    22
    33PASS #target offsetSize matches #container offsetSize
    4 FAIL #target offsetSize matches #container offsetSize after resize assert_equals: expected 100 but got 50
     4FAIL #target offsetSize matches #container offsetSize after resize assert_equals: expected 50 but got 100
    55
  • trunk/Source/WebCore/ChangeLog

    r270577 r270578  
     12020-12-04  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flex] Implement 9.8.1 Definite and Indefinite Sizes
     4        https://bugs.webkit.org/show_bug.cgi?id=219538
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        If a single-line flex container has a definite cross size, the automatic preferred outer cross size
     9        of any stretched flex items is the flex container's inner cross size (clamped to the flex item's
     10        min and max cross size) and is considered definite. Before that we were considering all automatic
     11        sizes as indefinite.
     12
     13        This patch does not consider all the cases where the container cross size is definite but just when
     14        that size is fixed. Support for additional cases should be added in followup patches.
     15
     16        This fixes 3 full tests plus 24 subtests in some other flexbox aspect ratio tests from the WPT suite.
     17
     18        * rendering/RenderFlexibleBox.cpp:
     19        (WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing const): Use the container's cross size
     20        as the item's cross size.
     21        (WebCore::RenderFlexibleBox::childCrossSizeIsDefinite const): Consider automatic cross size inside a
     22        single line container with definite cross size as definite.
     23
    1242020-12-09  Per Arne Vollan  <pvollan@apple.com>
    225
  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r270388 r270578  
    763763    if (crossSizeLength.isFixed())
    764764        crossSize = LayoutUnit(crossSizeLength.value());
    765     else {
     765    else if (crossSizeLength.isAuto()) {
     766        auto containerCrossSizeLength = isHorizontalFlow() ? style().height() : style().width();
     767        // Keep this sync'ed with childCrossSizeIsDefinite().
     768        ASSERT(containerCrossSizeLength.isFixed());
     769        crossSize = valueForLength(containerCrossSizeLength, -1_lu);
     770    } else {
    766771        ASSERT(crossSizeLength.isPercentOrCalculated());
    767772        crossSize = mainAxisIsChildInlineAxis(child) ? child.computePercentageLogicalHeight(crossSizeLength) : adjustBorderBoxLogicalWidthForBoxSizing(valueForLength(crossSizeLength, contentWidth()));
     
    769774            return 0_lu;
    770775    }
    771    
     776
    772777    const LayoutSize& childIntrinsicSize = child.intrinsicSize();
    773778    double ratio = childIntrinsicSize.width().toFloat() / childIntrinsicSize.height().toFloat();
     
    813818bool RenderFlexibleBox::childCrossSizeIsDefinite(const RenderBox& child, const Length& length) const
    814819{
    815     if (length.isAuto())
     820    if (length.isAuto()) {
     821        // 9.8 https://drafts.csswg.org/css-flexbox/#definite-sizes
     822        // 1. If a single-line flex container has a definite cross size, the automatic preferred outer cross size of any
     823        // stretched flex items is the flex container's inner cross size (clamped to the flex item’s min and max cross size)
     824        // and is considered definite.
     825        if (!isMultiline() && alignmentForChild(child) == ItemPosition::Stretch) {
     826            // This must be kept in sync with computeMainSizeFromAspectRatioUsing().
     827            // FIXME: so far we're only considered fixed sizes but we should extend it to other definite sizes.
     828            if (auto& crossSize = isHorizontalFlow() ? style().height() : style().width(); crossSize.isFixed())
     829                return true;
     830        }
    816831        return false;
     832    }
    817833    if (length.isPercentOrCalculated()) {
    818834        if (!mainAxisIsChildInlineAxis(child) || m_hasDefiniteHeight == SizeDefiniteness::Definite)
Note: See TracChangeset for help on using the changeset viewer.