Changeset 238551 in webkit


Ignore:
Timestamp:
Nov 27, 2018 5:52:57 AM (5 years ago)
Author:
jfernandez@igalia.com
Message:

[css-grid] align-self center and position sticky don't work together
​https://bugs.webkit.org/show_bug.cgi?id=191963

Reviewed by Manuel Rego Casasnovas.

LayoutTests/imported/w3c:

This change makes several cases of the following tests to pass now.

  • web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001-expected.txt:
  • web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002-expected.txt:
  • web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001-expected.txt:
  • web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002-expected.txt:

Source/WebCore:

This is a fix for a regression introduced in r515391, where we landed
the implementation of alignment for positioned objects in a Grid Layout
container.

We assumed that items with non-static positions shouldn't honor the
CSS Box Alignment properties. This is only true for out-of-flow items,
absolute or fixed positioned elements. However, sticky positioned
elements are treated as relative positioned items, but they indeed use
non-static position to define their behavior.

No new tests, this change is covered by current tests and make several cases to pass now.

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::columnAxisPositionForChild const):
(WebCore::RenderGrid::rowAxisPositionForChild const):

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r238491 r238551  
     12018-11-27  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [css-grid] align-self center and position sticky don't work together
     4        https://bugs.webkit.org/show_bug.cgi?id=191963
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        This change makes several cases of the following tests to pass now.
     9
     10        * web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001-expected.txt:
     11        * web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002-expected.txt:
     12        * web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001-expected.txt:
     13        * web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002-expected.txt:
     14
    1152018-11-26  Javier Fernandez  <jfernandez@igalia.com>
    216

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001-expected.txt

    r232903 r238551  
    11
    2 FAIL .grid 1 assert_equals:
    3 <div class="container">
    4     <div style="height:30px"></div>
    5     <div class="grid">
    6         <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div>
    7         <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
    8         <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
    9         <div class="item4"></div>
    10     </div>
    11     <div class="grid scroll">
    12         <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div>
    13         <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
    14         <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
    15         <div class="item4"></div>
    16     </div>
    17     <div style="height:2000px"></div>
    18 </div>
    19 offsetTop expected 140 but got 100
    20 FAIL .grid 2 assert_equals:
    21 <div class="container">
    22     <div style="height:30px"></div>
    23     <div class="grid">
    24         <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div>
    25         <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
    26         <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
    27         <div class="item4"></div>
    28     </div>
    29     <div class="grid scroll">
    30         <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div>
    31         <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
    32         <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
    33         <div class="item4"></div>
    34     </div>
    35     <div style="height:2000px"></div>
    36 </div>
    37 offsetTop expected 140 but got 100
     2PASS .grid 1
     3PASS .grid 2
    384

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002-expected.txt

    r232903 r238551  
    11
    2 FAIL .grid 1 assert_equals:
    3 <div class="container">
    4     <div style="height:30px"></div>
    5     <div class="grid">
    6         <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="10"></div>
    7         <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
    8         <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
    9         <div class="item4"></div>
    10     </div>
    11     <div class="grid scroll">
    12         <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="40"></div>
    13         <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
    14         <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="290"></div>
    15         <div class="item4"></div>
    16     </div>
    17     <div style="height:2000px"></div>
    18 </div>
    19 offsetTop expected 140 but got 100
    20 FAIL .grid 2 assert_equals:
    21 <div class="container">
    22     <div style="height:30px"></div>
    23     <div class="grid">
    24         <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="10"></div>
    25         <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
    26         <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
    27         <div class="item4"></div>
    28     </div>
    29     <div class="grid scroll">
    30         <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="40"></div>
    31         <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
    32         <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="290"></div>
    33         <div class="item4"></div>
    34     </div>
    35     <div style="height:2000px"></div>
    36 </div>
    37 offsetTop expected 140 but got 100
     2PASS .grid 1
     3PASS .grid 2
    384

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001-expected.txt

    r232903 r238551  
    11
    2 FAIL .grid 1 assert_equals:
    3 <div class="container">
    4     <div style="width: 30px; float:left; height: 10px;"></div>
    5     <div class="grid">
    6         <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div>
    7         <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
    8         <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
    9         <div class="item4"></div>
    10     </div>
    11     <div style="width: 30px; float:left; height: 10px;"></div>
    12     <div class="grid scroll">
    13         <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div>
    14         <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
    15         <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
    16         <div class="item4"></div>
    17     </div>
    18     <div style="width: 2000px; height: 10px;"></div>
    19 </div>
    20 offsetLeft expected 140 but got 100
    21 FAIL .grid 2 assert_equals:
    22 <div class="container">
    23     <div style="width: 30px; float:left; height: 10px;"></div>
    24     <div class="grid">
    25         <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div>
    26         <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
    27         <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
    28         <div class="item4"></div>
    29     </div>
    30     <div style="width: 30px; float:left; height: 10px;"></div>
    31     <div class="grid scroll">
    32         <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div>
    33         <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
    34         <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
    35         <div class="item4"></div>
    36     </div>
    37     <div style="width: 2000px; height: 10px;"></div>
    38 </div>
    39 offsetLeft expected 140 but got 100
     2PASS .grid 1
     3PASS .grid 2
    404

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002-expected.txt

    r232903 r238551  
    11
    2 FAIL .grid 1 assert_equals:
    3 <div class="container">
    4     <div style="width: 30px; float:left; height: 10px;"></div>
    5     <div class="grid">
    6         <div class="item1 sticky justifySelfStart" data-offset-x="10" data-offset-y="0"></div>
    7         <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
    8         <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
    9         <div class="item4"></div>
    10     </div>
    11     <div style="width: 30px; float:left; height: 10px;"></div>
    12     <div class="grid scroll">
    13         <div class="item1 sticky justifySelfStart" data-offset-x="40" data-offset-y="0"></div>
    14         <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
    15         <div class="item3 sticky justifySelfEnd" data-offset-x="290" data-offset-y="150"></div>
    16         <div class="item4"></div>
    17     </div>
    18     <div style="width: 2000px; height: 10px;"></div>
    19 </div>
    20 offsetLeft expected 140 but got 100
    21 FAIL .grid 2 assert_equals:
    22 <div class="container">
    23     <div style="width: 30px; float:left; height: 10px;"></div>
    24     <div class="grid">
    25         <div class="item1 sticky justifySelfStart" data-offset-x="10" data-offset-y="0"></div>
    26         <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
    27         <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
    28         <div class="item4"></div>
    29     </div>
    30     <div style="width: 30px; float:left; height: 10px;"></div>
    31     <div class="grid scroll">
    32         <div class="item1 sticky justifySelfStart" data-offset-x="40" data-offset-y="0"></div>
    33         <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
    34         <div class="item3 sticky justifySelfEnd" data-offset-x="290" data-offset-y="150"></div>
    35         <div class="item4"></div>
    36     </div>
    37     <div style="width: 2000px; height: 10px;"></div>
    38 </div>
    39 offsetLeft expected 140 but got 100
     2PASS .grid 1
     3PASS .grid 2
    404

  • trunk/Source/WebCore/ChangeLog

    r238545 r238551  
     12018-11-27  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [css-grid] align-self center and position sticky don't work together
     4        https://bugs.webkit.org/show_bug.cgi?id=191963
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        This is a fix for a regression introduced in r515391, where we landed
     9        the implementation of alignment for positioned objects in a Grid Layout
     10        container.
     11
     12        We assumed that items with non-static positions shouldn't honor the
     13        CSS Box Alignment properties. This is only true for out-of-flow items,
     14        absolute or fixed positioned elements. However, sticky positioned
     15        elements are treated as relative positioned items, but they indeed use
     16        non-static position to define their behavior.
     17
     18        No new tests, this change is covered by current tests and make several cases to pass now.
     19
     20        * rendering/RenderGrid.cpp:
     21        (WebCore::RenderGrid::columnAxisPositionForChild const):
     22        (WebCore::RenderGrid::rowAxisPositionForChild const):
     23
    1242018-11-26  Daniel Bates  <dabates@apple.com>
    225

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

    r238491 r238551  
    12891289    bool hasSameWritingMode = child.style().writingMode() == style().writingMode();
    12901290    bool childIsLTR = child.style().isLeftToRightDirection();
    1291     if (!hasStaticPositionForChild(child, ForRows))
     1291    if (child.isOutOfFlowPositioned() && !hasStaticPositionForChild(child, ForRows))
    12921292        return GridAxisStart;
    12931293
    … …  
    13571357    bool hasSameDirection = child.style().direction() == style().direction();
    13581358    bool gridIsLTR = style().isLeftToRightDirection();
    1359     if (!hasStaticPositionForChild(child, ForColumns))
     1359    if (child.isOutOfFlowPositioned() && !hasStaticPositionForChild(child, ForColumns))
    13601360        return GridAxisStart;
    13611361
Note: See TracChangeset for help on using the changeset viewer.