Changeset 274596 in webkit


Ignore:
Timestamp:
Mar 17, 2021 3:59:09 PM (16 months ago)
Author:
commit-queue@webkit.org
Message:

[css-grid] Incorrect track sizing when using relative sized items in 'auto' column tracks
​https://bugs.webkit.org/show_bug.cgi?id=191627

Patch by Ziran Sun <Ziran Sun> on 2021-03-17
Reviewed by Javier Fernandez.

LayoutTests/imported/w3c:

Updated expectation file for test grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html.
All sub-tests in this test file are now all passed.

  • web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001-expected.txt:

Source/WebCore:

Containing block for a grid item is the grid area it's located in. During the GridTrackSizingAlgorithm,
we determine that this item has a relative size (percent in this case) and that the grid area is still
indefinite. Hence, we set nullopt for the grid area width and mark the item for layout. During the item's
layout, we call this RenderBox::containingBlockLogicalWidthForContent to determine the available height.
However, this method checks the containing block's width if the overridingContentLogicalWidth is nullopt,
which is incorrect for grid items. We should never use the grid container for resolving grid item's size.

This change is to return 0_lu for grid item when overridingContainingBlockContentLogicalHeight() or
overridingContainingBlockContentLogicalWidth() returns nullopt rather than use containing block's width
or height.

  • rendering/RenderBox.cpp:

(WebCore::RenderBox::containingBlockLogicalWidthForContent const):

LayoutTests:

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r274595 r274596  
     12021-03-17  Ziran Sun  <zsun@igalia.com>
     2
     3        [css-grid] Incorrect track sizing when using relative sized items in 'auto' column tracks
     4        https://bugs.webkit.org/show_bug.cgi?id=191627
     5
     6        Reviewed by Javier Fernandez.
     7
     8        * TestExpectations:
     9
    1102021-03-17  Robert Jenner  <jenner@apple.com>
    211

  • trunk/LayoutTests/TestExpectations

    r274521 r274596  
    12191219webkit.org/b/216145 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-9.html [ ImageOnlyFailure ]
    12201220webkit.org/b/216145 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-10.html [ ImageOnlyFailure ]
    1221 webkit.org/b/191627 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html [ Failure ]
    12221221webkit.org/b/149890 fast/css-grid-layout/grid-shorthands-style-format.html [ Failure ]
    12231222webkit.org/b/191507 fast/css-grid-layout/positioned-grid-container-percentage-tracks.html [ Failure ]

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r274561 r274596  
     12021-03-17  Ziran Sun  <zsun@igalia.com>
     2
     3        [css-grid] Incorrect track sizing when using relative sized items in 'auto' column tracks
     4        https://bugs.webkit.org/show_bug.cgi?id=191627
     5
     6        Reviewed by Javier Fernandez.
     7
     8        Updated expectation file for test grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html.
     9        All sub-tests in this test file are now all passed.
     10
     11        * web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001-expected.txt:
     12
    1132021-03-17  Alexey Shvayka  <shvaikalesh@gmail.com>
    214

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001-expected.txt

    r274477 r274596  
    2525PASS .inline-grid 5
    2626PASS .inline-grid 6
    27 FAIL .inline-grid 7 assert_equals:
    28 <div class="inline-grid justifyItemsBaseline rows">
    29         <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
    30         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    31         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    32     </div>
    33 width expected 100 but got 700
    34 FAIL .inline-grid 8 assert_equals:
    35 <div class="inline-grid justifyItemsBaseline rows min-content-columns">
    36         <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    37         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
    38         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    39     </div>
    40 width expected 160 but got 940
    41 FAIL .inline-grid 9 assert_equals:
    42 <div class="inline-grid justifyItemsBaseline rows max-content-columns">
    43         <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    44         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
    45         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    46     </div>
    47 width expected 160 but got 940
    48 FAIL .inline-grid 10 assert_equals:
    49 <div class="inline-grid justifyItemsBaseline rows fit-content-columns">
    50         <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    51         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
    52         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    53     </div>
    54 width expected 160 but got 940
    55 FAIL .inline-grid 11 assert_equals:
    56 <div class="inline-grid justifyItemsBaseline rows flex-columns">
    57         <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
    58         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    59         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    60     </div>
    61 width expected 100 but got 700
    62 FAIL .inline-grid 12 assert_equals:
    63 <div class="inline-grid justifyItemsBaseline rows max-flex-columns">
    64         <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
    65         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="-50" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    66         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    67     </div>
    68 offsetLeft expected 0 but got 100
     27PASS .inline-grid 7
     28PASS .inline-grid 8
     29PASS .inline-grid 9
     30PASS .inline-grid 10
     31PASS .inline-grid 11
     32PASS .inline-grid 12
    6933

  • trunk/LayoutTests/platform/ios-simulator-wk2/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001-expected.txt

    r267658 r274596  
    1919baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.
    2020
    21 FAIL .inline-grid 1 assert_equals:
    22 <div class="inline-grid justifyItemsBaseline rows max-flex-columns">
    23         <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
    24         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="-50" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    25         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
     21PASS .inline-grid 1
     22FAIL .inline-grid 2 assert_equals:
     23<div class="inline-grid alignItemsBaseline columns min-content-rows">
     24        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
     25        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
     26        <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
    2627    </div>
    27 offsetLeft expected -50 but got 0
    28 FAIL .inline-grid 2 assert_equals:
    29 <div class="inline-grid justifyItemsBaseline rows flex-columns">
    30         <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
    31         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    32         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
     28height expected 80 but got 85
     29FAIL .inline-grid 3 assert_equals:
     30<div class="inline-grid alignItemsBaseline columns max-content-rows">
     31        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
     32        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
     33        <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
    3334    </div>
    34 width expected 100 but got 300
    35 FAIL .inline-grid 3 assert_equals:
     35height expected 80 but got 85
     36FAIL .inline-grid 4 assert_equals:
     37<div class="inline-grid alignItemsBaseline columns fit-content-rows">
     38        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
     39        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
     40        <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
     41    </div>
     42height expected 80 but got 85
     43PASS .inline-grid 5
     44PASS .inline-grid 6
     45PASS .inline-grid 7
     46FAIL .inline-grid 8 assert_equals:
     47<div class="inline-grid justifyItemsBaseline rows min-content-columns">
     48        <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
     49        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
     50        <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
     51    </div>
     52width expected 80 but got 85
     53FAIL .inline-grid 9 assert_equals:
     54<div class="inline-grid justifyItemsBaseline rows max-content-columns">
     55        <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
     56        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
     57        <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
     58    </div>
     59width expected 80 but got 85
     60FAIL .inline-grid 10 assert_equals:
    3661<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
    3762        <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    … …  
    4065    </div>
    4166width expected 80 but got 85
    42 FAIL .inline-grid 4 assert_equals:
    43 <div class="inline-grid justifyItemsBaseline rows max-content-columns">
    44         <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    45         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
    46         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    47     </div>
    48 width expected 80 but got 85
    49 FAIL .inline-grid 5 assert_equals:
    50 <div class="inline-grid justifyItemsBaseline rows min-content-columns">
    51         <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    52         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
    53         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    54     </div>
    55 width expected 80 but got 85
    56 FAIL .inline-grid 6 assert_equals:
    57 <div class="inline-grid justifyItemsBaseline rows">
    58         <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
    59         <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    60         <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
    61     </div>
    62 width expected 100 but got 300
    63 PASS .inline-grid 7
    64 PASS .inline-grid 8
    65 FAIL .inline-grid 9 assert_equals:
    66 <div class="inline-grid alignItemsBaseline columns fit-content-rows">
    67         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    68         <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
    69         <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
    70     </div>
    71 height expected 80 but got 85
    72 FAIL .inline-grid 10 assert_equals:
    73 <div class="inline-grid alignItemsBaseline columns max-content-rows">
    74         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    75         <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
    76         <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
    77     </div>
    78 height expected 80 but got 85
    79 FAIL .inline-grid 11 assert_equals:
    80 <div class="inline-grid alignItemsBaseline columns min-content-rows">
    81         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
    82         <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
    83         <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
    84     </div>
    85 height expected 80 but got 85
     67PASS .inline-grid 11
    8668PASS .inline-grid 12
    8769

  • trunk/Source/WebCore/ChangeLog

    r274589 r274596  
     12021-03-17  Ziran Sun  <zsun@igalia.com>
     2
     3        [css-grid] Incorrect track sizing when using relative sized items in 'auto' column tracks
     4        https://bugs.webkit.org/show_bug.cgi?id=191627
     5
     6        Reviewed by Javier Fernandez.
     7
     8        Containing block for a grid item is the grid area it's located in. During the GridTrackSizingAlgorithm,
     9        we determine that this item has a relative size (percent in this case) and that the grid area is still
     10        indefinite. Hence, we set nullopt for the grid area width and mark the item for layout. During the item's
     11        layout, we call this RenderBox::containingBlockLogicalWidthForContent to determine the available height.
     12        However, this method checks the containing block's width if the overridingContentLogicalWidth is nullopt,
     13        which is incorrect for grid items. We should never use the grid container for resolving grid item's size.
     14
     15        This change is to return 0_lu for grid item when overridingContainingBlockContentLogicalHeight() or
     16        overridingContainingBlockContentLogicalWidth() returns nullopt rather than use containing block's width
     17        or height.
     18
     19        * rendering/RenderBox.cpp:
     20        (WebCore::RenderBox::containingBlockLogicalWidthForContent const):
     21
    1222021-03-17  Eric Carlson  <eric.carlson@apple.com>
    223

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

    r274477 r274596  
    20452045LayoutUnit RenderBox::containingBlockLogicalWidthForContent() const
    20462046{
    2047     if (hasOverridingContainingBlockContentLogicalWidth()) {
    2048         if (auto width = overridingContainingBlockContentLogicalWidth())
    2049             return width.value();
    2050     }
     2047    if (hasOverridingContainingBlockContentLogicalWidth())
     2048        return overridingContainingBlockContentLogicalWidth().valueOr(0_lu);
    20512049
    20522050    if (RenderBlock* cb = containingBlock())
    … …  
    20582056{
    20592057    if (hasOverridingContainingBlockContentLogicalHeight()) {
    2060         if (auto height = overridingContainingBlockContentLogicalHeight())
    2061             return height.value();
     2058        // FIXME: Containing block for a grid item is the grid area it's located in. We need to return whatever
     2059        // height value we get from overridingContainingBlockContentLogicalHeight() here, including WTF::nullopt.
     2060        return overridingContainingBlockContentLogicalHeight().valueOr(0_lu);
    20622061    }
    20632062
Note: See TracChangeset for help on using the changeset viewer.