Changeset 280024 in webkit


Ignore:
Timestamp:
Jul 19, 2021 7:25:38 AM (12 months ago)
Author:
Ziran Sun
Message:

[css-grid] Images as grid items should use the overridingLogicalHeight when defined to compute the logical width
​https://bugs.webkit.org/show_bug.cgi?id=227984

Reviewed by Javier Fernandez.
LayoutTests/imported/w3c:

  • web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-011-expected.txt:
  • web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-012-expected.txt:
  • web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-013-expected.txt:
  • web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-014-expected.txt:
  • web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-017-expected.txt:
  • web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-018-expected.txt:

Source/WebCore:

As discussed in ​https://github.com/w3c/csswg-drafts/issues/5713, for images as grid items, when
stretch alignment is only applied in one axis we should respect aspect-ratio on the other.

When computing the logical width using an intrinsic aspect ratio, RenderReplaced should use the
overridingLogicalHeight whenever defined just as how it does for flex items. This change is to
replace the use of intrinsic (non-stretched) logical height in current code with the overridingLogicalHeight.

This allows us to pass an additional of 9 grid WPT tests.

  • rendering/RenderReplaced.cpp:

(WebCore::RenderReplaced::computeReplacedLogicalWidth const):

LayoutTests:

9 grid WPT tests are now passing.

Location:
trunk
Files:
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r280022 r280024  
     12021-07-19  Ziran Sun  <zsun@igalia.com>
     2
     3        [css-grid] Images as grid items should use the overridingLogicalHeight when defined to compute the logical width
     4        https://bugs.webkit.org/show_bug.cgi?id=227984
     5
     6        Reviewed by Javier Fernandez.
     7       
     8        9 grid WPT tests are now passing.
     9
     10        * TestExpectations:
     11
    1122021-07-19  Ziran Sun  <zsun@igalia.com>
    213

  • trunk/LayoutTests/TestExpectations

    r280023 r280024  
    14331433webkit.org/b/216146 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-baseline-align-001.html [ ImageOnlyFailure ]
    14341434webkit.org/b/216146 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-baseline-justify-001.html [ ImageOnlyFailure ]
    1435 imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html [ ImageOnlyFailure ]
    14361435imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html [ ImageOnlyFailure ]
    1437 imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html [ ImageOnlyFailure ]
    14381436imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html [ ImageOnlyFailure ]
    14391437imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html [ ImageOnlyFailure ]
    1440 imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html [ ImageOnlyFailure ]
    1441 
    14421438
    14431439imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-001.html [ ImageOnlyFailure ]

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r280023 r280024  
     12021-07-19  Ziran Sun  <zsun@igalia.com>
     2
     3        [css-grid] Images as grid items should use the overridingLogicalHeight when defined to compute the logical width
     4        https://bugs.webkit.org/show_bug.cgi?id=227984
     5
     6        Reviewed by Javier Fernandez.
     7
     8        * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-011-expected.txt:
     9        * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-012-expected.txt:
     10        * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-013-expected.txt:
     11        * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-014-expected.txt:
     12        * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-017-expected.txt:
     13        * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-018-expected.txt:
     14
    1152021-07-19  Ziran Sun  <zsun@igalia.com>
    216

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-011-expected.txt

    r279269 r280024  
    11
    22
    3 FAIL .before 1 assert_equals:
    4 <img id="item" src="support/100x100-green.png" class=" before" data-expected-width="200" data-expected-height="200">
    5 width expected 200 but got 100
     3PASS .before 1
    64PASS .after 2
    75

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-012-expected.txt

    r279269 r280024  
    22
    33PASS .before 1
    4 FAIL .after 2 assert_equals:
    5 <img id="item" src="support/100x100-green.png" class=" before after" data-expected-width="200" data-expected-height="200">
    6 width expected 200 but got 100
     4PASS .after 2
    75

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-013-expected.txt

    r279269 r280024  
    11
    22
    3 FAIL .before 1 assert_equals:
    4 <img id="item" src="support/100x100-green.png" class=" before" data-expected-width="200" data-expected-height="200">
    5 width expected 200 but got 100
     3PASS .before 1
    64PASS .after 2
    75

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-014-expected.txt

    r279269 r280024  
    22
    33PASS .before 1
    4 FAIL .after 2 assert_equals:
    5 <img id="item" src="support/100x100-green.png" class=" before after" data-expected-width="200" data-expected-height="200">
    6 width expected 200 but got 100
     4PASS .after 2
    75

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-017-expected.txt

    r279269 r280024  
    22
    33PASS .before 1
    4 FAIL .after 2 assert_equals:
    5 <img id="item" src="support/100x100-green.png" class=" before after" data-expected-width="80" data-expected-height="80">
    6 width expected 80 but got 100
     4PASS .after 2
    75

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-018-expected.txt

    r279269 r280024  
    11
    22
    3 FAIL .before 1 assert_equals:
    4 <img id="item" src="support/100x100-green.png" class=" before" data-expected-width="80" data-expected-height="80">
    5 width expected 80 but got 100
     3PASS .before 1
    64PASS .after 2
    75

  • trunk/Source/WebCore/ChangeLog

    r280023 r280024  
     12021-07-19  Ziran Sun  <zsun@igalia.com>
     2
     3        [css-grid] Images as grid items should use the overridingLogicalHeight when defined to compute the logical width
     4        https://bugs.webkit.org/show_bug.cgi?id=227984
     5
     6        Reviewed by Javier Fernandez.
     7
     8        As discussed in https://github.com/w3c/csswg-drafts/issues/5713, for images as grid items, when
     9        stretch alignment is only applied in one axis we should respect aspect-ratio on the other.
     10         
     11        When computing the logical width using an intrinsic aspect ratio, RenderReplaced should use the
     12        overridingLogicalHeight whenever defined just as how it does for flex items. This change is to
     13        replace the use of intrinsic (non-stretched) logical height in current code with the overridingLogicalHeight.
     14
     15        This allows us to pass an additional of 9 grid WPT tests.
     16
     17        * rendering/RenderReplaced.cpp:
     18        (WebCore::RenderReplaced::computeReplacedLogicalWidth const):
     19
    1202021-07-19  Ziran Sun  <zsun@igalia.com>
    221

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

    r280023 r280024  
    551551        bool hasIntrinsicHeight = constrainedSize.hasIntrinsicHeight || constrainedSize.height() > 0;
    552552
    553         // For flex items where the logical height has been overriden then we should use that size to compute the replaced width as long as the flex item has
    554         // an intrinsic size. It is possible (indeed, common) for an SVG graphic to have an intrinsic aspect ratio but not to have an intrinsic width or height.
    555         // There are also elements with intrinsic sizes but without intrinsic ratio (like an iframe). We cannot apply this rule to grid items because the grid
    556         // container can distort aspect ratios in case of "align-self: stretch" for example (see https://drafts.csswg.org/css-grid/#grid-item-sizing).
    557         if (intrinsicRatio && isFlexItem() && hasOverridingLogicalHeight() && hasIntrinsicWidth && hasIntrinsicHeight)
     553        // For flex or grid items where the logical height has been overriden then we should use that size to compute the replaced width as long as the flex or
     554        // grid item has an intrinsic size. It is possible (indeed, common) for an SVG graphic to have an intrinsic aspect ratio but not to have an intrinsic
     555        // width or height. There are also elements with intrinsic sizes but without intrinsic ratio (like an iframe).
     556        if (intrinsicRatio && (isFlexItem() || isGridItem()) && hasOverridingLogicalHeight() && hasIntrinsicWidth && hasIntrinsicHeight)
    558557            return computeReplacedLogicalWidthRespectingMinMaxWidth(roundToInt(round(overridingContentLogicalHeight() * intrinsicRatio)), shouldComputePreferred);
    559558
Note: See TracChangeset for help on using the changeset viewer.