Changeset 270288 in webkit


Ignore:
Timestamp:
Dec 1, 2020 1:21:49 AM (3 years ago)
Author:
svillar@igalia.com
Message:

[css-flexbox] WebKit doesn't preserve aspect ratio when computing cross size of flexed images in auto-height flex container
​https://bugs.webkit.org/show_bug.cgi?id=209983
<rdar://problem/61288094>

Reviewed by Darin Adler.

LayoutTests/imported/w3c:

  • web-platform-tests/css/css-flexbox/flexitem-stretch-image-expected.txt: Replace FAIL by PASS expectations.

Source/WebCore:

Aspect ratio was not preserved in the cross axis because WebKit was stretching the items (as they're auto sized) without considering
the aspect ratio. Instead of letting flexbox code deal with that we basically don't stretch them and let RenderReplaced compute the
cross size based on the aspect ratio as it does with other elements that are not flex items.

This allows us to pass 3 tests from the WPT test suite.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::needToStretchChildLogicalHeight const): Return false for replaced elements with aspect ratio.

LayoutTests:

  • TestExpectations: Unskipped 2 tests that are working fine now
  • css3/flexbox/flexitem.html: Updated expectations. Aspect ratio must be preserved.
Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r270287 r270288  
     12020-12-01  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] WebKit doesn't preserve aspect ratio when computing cross size of flexed images in auto-height flex container
     4        https://bugs.webkit.org/show_bug.cgi?id=209983
     5        <rdar://problem/61288094>
     6
     7        Reviewed by Darin Adler.
     8
     9        * TestExpectations: Unskipped 2 tests that are working fine now
     10        * css3/flexbox/flexitem.html: Updated expectations. Aspect ratio must be preserved.
     11
    1122020-12-01  Diego Pino Garcia  <dpino@igalia.com>
    213

  • trunk/LayoutTests/TestExpectations

    r270237 r270288  
    39133913webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-006.html [ ImageOnlyFailure ]
    39143914webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-007.html [ ImageOnlyFailure ]
    3915 webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-008.html [ ImageOnlyFailure ]
    39163915webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-009.html [ ImageOnlyFailure ]
    39173916webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-010.html [ ImageOnlyFailure ]
    39183917webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-013.html [ ImageOnlyFailure ]
    3919 webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-014.html [ ImageOnlyFailure ]
    39203918
    39213919webkit.org/b/145176 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_align-items-stretch-3.html [ ImageOnlyFailure ]

  • trunk/LayoutTests/css3/flexbox/flexitem.html

    r267995 r270288  
    4848<div class="flexbox">
    4949  <img data-expected-display="block" data-expected-width="200" style="flex: 1 0 auto;" src="../images/resources/blue-100.png">
    50   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="flex: 2 0 0;" src="doesnotexist.png">
    51   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
     50  <img data-expected-display="block" data-expected-width="200" data-expected-height="200" style="flex: 2 0 0;" src="doesnotexist.png">
     51  <img data-expected-display="block" data-expected-width="200" data-expected-height="200" style="flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
    5252</div>
    5353

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r270269 r270288  
     12020-12-01  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] WebKit doesn't preserve aspect ratio when computing cross size of flexed images in auto-height flex container
     4        https://bugs.webkit.org/show_bug.cgi?id=209983
     5        <rdar://problem/61288094>
     6
     7        Reviewed by Darin Adler.
     8
     9        * web-platform-tests/css/css-flexbox/flexitem-stretch-image-expected.txt: Replace FAIL by PASS expectations.
     10
    1112020-11-30  Alex Christensen  <achristensen@webkit.org>
    212

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

    r267650 r270288  
    11
    2 FAIL .flexbox 1 assert_equals:
    3 <div class="flexbox">
    4   <img data-expected-display="block" data-expected-width="345" data-expected-height="345" style="flex: 1 0 auto;" src="support/100x100-blue.png">
    5   <img data-expected-display="block" data-expected-width="255" data-expected-height="345" style="flex: 1 0 auto;" src="support/10x10-green.png">
    6 </div>
    7 height expected 345 but got 100
     2PASS .flexbox 1
    83

  • trunk/Source/WebCore/ChangeLog

    r270281 r270288  
     12020-12-01  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] WebKit doesn't preserve aspect ratio when computing cross size of flexed images in auto-height flex container
     4        https://bugs.webkit.org/show_bug.cgi?id=209983
     5        <rdar://problem/61288094>
     6
     7        Reviewed by Darin Adler.
     8
     9        Aspect ratio was not preserved in the cross axis because WebKit was stretching the items (as they're auto sized) without considering
     10        the aspect ratio. Instead of letting flexbox code deal with that we basically don't stretch them and let RenderReplaced compute the
     11        cross size based on the aspect ratio as it does with other elements that are not flex items.
     12
     13        This allows us to pass 3 tests from the WPT test suite.
     14
     15        * rendering/RenderFlexibleBox.cpp:
     16        (WebCore::RenderFlexibleBox::needToStretchChildLogicalHeight const): Return false for replaced elements with aspect ratio.
     17
    1182020-11-30  Andres Gonzalez  <andresg_22@apple.com>
    219

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

    r269840 r270288  
    15511551        return false;
    15521552
     1553    // Aspect ratio is properly handled by RenderReplaced during layout.
     1554    if (child.isRenderReplaced() && child.hasAspectRatio())
     1555        return false;
     1556
    15531557    return child.style().logicalHeight().isAuto();
    15541558}
Note: See TracChangeset for help on using the changeset viewer.