Changeset 199098 in webkit


Ignore:
Timestamp:
Apr 6, 2016 3:21:59 AM (8 years ago)
Author:
Manuel Rego Casasnovas
Message:

[css-grid] Fix positioned children in RTL
​https://bugs.webkit.org/show_bug.cgi?id=156162

Reviewed by Sergio Villar Senin.

Source/WebCore:

This patch fixes a problem affecting the items without
a static inline position (i.e. "left" and/or "right" properties
are not "auto"). In this particular case we need to compute
the "offset" from the left, so we need a specific condition
and computation.

Let's use an example to understand what it's fixing:
<div style="display: grid; grid-template-columns: 100px 50px; width: 300px;

position: relative; direction: rtl;">

<div style="position: absolute; left: 0; grid-column: 1 / 2;">item</div>

</div>

In this case the item has to be placed in the first column
(the one on the right as we're in RTL).
For this we need to calculate the offset from the left, which is 200px:
150px (alignment offset) + 50px (offset from line 3 to 2).

Test: fast/css-grid-layout/grid-positioned-items-background-rtl.html

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):

LayoutTests:

Added more RTL cases for the positioned tests.

  • fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt:
  • fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
  • fast/css-grid-layout/grid-positioned-items-background-rtl-expected.html: Added.
  • fast/css-grid-layout/grid-positioned-items-background-rtl.html: Added.
  • fast/css-grid-layout/grid-positioned-items-padding-expected.txt:
  • fast/css-grid-layout/grid-positioned-items-padding.html:
  • fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt:
  • fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html:
  • fast/css-grid-layout/grid-sizing-positioned-items-expected.txt:
  • fast/css-grid-layout/grid-sizing-positioned-items.html:
Location:
trunk
Files:
2 added
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r199097 r199098  
     12016-04-06  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Fix positioned children in RTL
     4        https://bugs.webkit.org/show_bug.cgi?id=156162
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        Added more RTL cases for the positioned tests.
     9
     10        * fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt:
     11        * fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
     12        * fast/css-grid-layout/grid-positioned-items-background-rtl-expected.html: Added.
     13        * fast/css-grid-layout/grid-positioned-items-background-rtl.html: Added.
     14        * fast/css-grid-layout/grid-positioned-items-padding-expected.txt:
     15        * fast/css-grid-layout/grid-positioned-items-padding.html:
     16        * fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt:
     17        * fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html:
     18        * fast/css-grid-layout/grid-sizing-positioned-items-expected.txt:
     19        * fast/css-grid-layout/grid-sizing-positioned-items.html:
     20
    1212016-04-06  Antti Koivisto  <antti@apple.com>
    222

  • trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt

    r198834 r199098  
    99PASS
    1010PASS
     11PASS
     12PASS

  • trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html

    r198834 r199098  
    294294</div>
    295295
     296<div class="grid directionRTL">
     297    <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
     298        data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
     299    </div>
     300    <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
     301        data-offset-x="40" data-offset-y="95" data-expected-width="515" data-expected-height="515">
     302    </div>
     303    <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
     304        data-offset-x="-50" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
     305    </div>
     306    <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
     307        data-offset-x="-20" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
     308    </div>
     309    <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
     310        data-offset-x="-50" data-offset-y="140" data-expected-width="465" data-expected-height="465">
     311    </div>
     312    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
     313        data-offset-x="25" data-offset-y="65" data-expected-width="365" data-expected-height="350">
     314    </div>
     315    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
     316        data-offset-x="-35" data-offset-y="105" data-expected-width="350" data-expected-height="350">
     317    </div>
     318</div>
     319
     320<div class="grid directionRTL">
     321    <div>
     322        <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
     323            data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
     324        </div>
     325        <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
     326            data-offset-x="40" data-offset-y="95" data-expected-width="515" data-expected-height="515">
     327        </div>
     328        <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
     329            data-offset-x="-50" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
     330        </div>
     331        <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
     332            data-offset-x="-20" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
     333        </div>
     334        <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
     335            data-offset-x="-50" data-offset-y="140" data-expected-width="465" data-expected-height="465">
     336        </div>
     337        <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
     338            data-offset-x="25" data-offset-y="65" data-expected-width="365" data-expected-height="350">
     339        </div>
     340        <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
     341            data-offset-x="-35" data-offset-y="105" data-expected-width="350" data-expected-height="350">
     342        </div>
     343    </div>
     344</div>
     345
    296346</body>
    297347</html>

  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt

    r197857 r199098  
    55PASS
    66PASS
     7PASS
     8PASS
     9PASS
     10PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html

    r197857 r199098  
    114114</div>
    115115
     116<div class="grid directionRTL">
     117    <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
     118        data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
     119    </div>
     120    <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: auto / 1;"
     121        data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
     122    </div>
     123    <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: 1 / 2;"
     124        data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
     125    </div>
     126    <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
     127        data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
     128    </div>
     129    <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / auto;"
     130        data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
     131    </div>
     132    <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 2 / 3;"
     133        data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
     134    </div>
     135</div>
     136
     137<div class="grid directionRTL">
     138    <div class="absolute" style="-webkit-grid-column: -5 / 1; -webkit-grid-row: -5 / 1;"
     139        data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
     140    </div>
     141    <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: -5 / 1;"
     142        data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
     143    </div>
     144    <div class="absolute" style="-webkit-grid-column: -5 / 1; -webkit-grid-row: 1 / 2;"
     145        data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
     146    </div>
     147    <div class="absolute" style="-webkit-grid-column: 3 / 5; -webkit-grid-row: 3 / 5;"
     148        data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
     149    </div>
     150    <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / 5;"
     151        data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
     152    </div>
     153    <div class="absolute" style="-webkit-grid-column: 3 / 5; -webkit-grid-row: 2 / 3;"
     154        data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
     155    </div>
     156</div>
     157
     158<div class="grid directionRTL">
     159    <div class="absolute" style="-webkit-grid-column: span 2 / 1; -webkit-grid-row: span 2 / 1;"
     160        data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
     161    </div>
     162    <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: span 2 / 1;"
     163        data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
     164    </div>
     165    <div class="absolute" style="-webkit-grid-column: span 2 / 1; -webkit-grid-row: 1 / 2;"
     166        data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
     167    </div>
     168    <div class="absolute" style="-webkit-grid-column: 3 / span 2; -webkit-grid-row: 3 / span 2;"
     169        data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
     170    </div>
     171    <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / span 2;"
     172        data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
     173    </div>
     174    <div class="absolute" style="-webkit-grid-column: 3 / span 2; -webkit-grid-row: 2 / 3;"
     175        data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
     176    </div>
     177</div>
     178
     179<div class="grid directionRTL">
     180    <div class="absolute" style="-webkit-grid-column: foo / 1; -webkit-grid-row: foo / 1;"
     181        data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
     182    </div>
     183    <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: foo / 1;"
     184        data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
     185    </div>
     186    <div class="absolute" style="-webkit-grid-column: foo / 1; -webkit-grid-row: 1 / 2;"
     187        data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
     188    </div>
     189    <div class="absolute" style="-webkit-grid-column: 3 / foo; -webkit-grid-row: 3 / foo;"
     190        data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
     191    </div>
     192    <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / foo;"
     193        data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
     194    </div>
     195    <div class="absolute" style="-webkit-grid-column: 3 / foo; -webkit-grid-row: 2 / 3;"
     196        data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
     197    </div>
     198</div>
     199
    116200</body>

  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt

    r197857 r199098  
    99PASS
    1010PASS
     11PASS
     12PASS
     13PASS
     14PASS
     15PASS
     16PASS
     17PASS
     18PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html

    r197857 r199098  
    110110</div>
    111111
     112<div class="grid directionRTL">
     113    <div class="sixRowsAndSixColumns"
     114        data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
     115    </div>
     116    <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
     117        data-offset-x="615" data-offset-y="0" data-expected-width="215" data-expected-height="115">
     118    </div>
     119</div>
     120
     121<div class="grid directionRTL">
     122    <div class="sixRowsAndSixColumns"
     123        data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
     124    </div>
     125    <div class="absolute" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
     126        data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="265">
     127    </div>
     128</div>
     129
     130<div class="grid directionRTL">
     131    <div class="sixRowsAndSixColumns"
     132        data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
     133    </div>
     134    <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
     135        data-offset-x="0" data-offset-y="515" data-expected-width="115" data-expected-height="115">
     136    </div>
     137</div>
     138
     139<div class="grid directionRTL">
     140    <div class="sixRowsAndSixColumns"
     141        data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
     142    </div>
     143    <div class="absolute" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
     144        data-offset-x="0" data-offset-y="265" data-expected-width="415" data-expected-height="365">
     145    </div>
     146</div>
     147
     148<div class="grid directionRTL">
     149    <div class="sixRowsAndSixColumns"
     150        data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
     151    </div>
     152    <div class="absolute" style="-webkit-grid-column: -4 / 1; -webkit-grid-row: -4 / 1;"
     153        data-offset-x="615" data-offset-y="0" data-expected-width="215" data-expected-height="115">
     154    </div>
     155</div>
     156
     157<div class="grid directionRTL">
     158    <div class="sixRowsAndSixColumns"
     159        data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
     160    </div>
     161    <div class="absolute" style="-webkit-grid-column: -4 / 2; -webkit-grid-row: -4 / 2;"
     162        data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="265">
     163    </div>
     164</div>
     165
     166<div class="grid directionRTL">
     167    <div class="sixRowsAndSixColumns"
     168        data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
     169    </div>
     170    <div class="absolute" style="-webkit-grid-column: 3 / 4; -webkit-grid-row: 3 / 4;"
     171        data-offset-x="0" data-offset-y="515" data-expected-width="115" data-expected-height="115">
     172    </div>
     173</div>
     174
     175<div class="grid directionRTL">
     176    <div class="sixRowsAndSixColumns"
     177        data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
     178    </div>
     179    <div class="absolute" style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
     180        data-offset-x="0" data-offset-y="265" data-expected-width="415" data-expected-height="365">
     181    </div>
     182</div>
     183
    112184</body>

  • trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt

    r198834 r199098  
    88PASS
    99PASS
     10PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html

    r198834 r199098  
    162162</div>
    163163
     164<div class="unconstrainedContainer">
     165    <div class="grid directionRTL">
     166        <div class="absolute autoRowAutoColumn offsets"
     167            data-offset-x="5" data-offset-y="15" data-expected-width="1015" data-expected-height="995">
     168        </div>
     169        <div class="absolute secondRowSecondColumn offsets"
     170            data-offset-x="5" data-offset-y="80" data-expected-width="900" data-expected-height="930">
     171        </div>
     172        <div class="absolute onlyFirstRowOnlyFirstColumn offsets"
     173            data-offset-x="920" data-offset-y="30" data-expected-width="85" data-expected-height="15">
     174        </div>
     175        <div class="absolute endSecondRowEndSecondColumn offsets"
     176            data-offset-x="720" data-offset-y="15" data-expected-width="300" data-expected-height="180">
     177        </div>
     178    </div>
     179</div>
     180
    164181</body>

  • trunk/Source/WebCore/ChangeLog

    r199097 r199098  
     12016-04-06  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Fix positioned children in RTL
     4        https://bugs.webkit.org/show_bug.cgi?id=156162
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        This patch fixes a problem affecting the items without
     9        a static inline position (i.e. "left" and/or "right" properties
     10        are not "auto"). In this particular case we need to compute
     11        the "offset" from the left, so we need a specific condition
     12        and computation.
     13
     14        Let's use an example to understand what it's fixing:
     15        <div style="display: grid; grid-template-columns: 100px 50px; width: 300px;
     16                    position: relative; direction: rtl;">
     17            <div style="position: absolute; left: 0; grid-column: 1 / 2;">item</div>
     18        </div>
     19
     20        In this case the item has to be placed in the first column
     21        (the one on the right as we're in RTL).
     22        For this we need to calculate the offset from the left, which is 200px:
     23        150px (alignment offset) + 50px (offset from line 3 to 2).
     24
     25        Test: fast/css-grid-layout/grid-positioned-items-background-rtl.html
     26
     27        * rendering/RenderGrid.cpp:
     28        (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
     29
    1302016-04-06  Antti Koivisto  <antti@apple.com>
    231

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

    r198834 r199098  
    15371537    breadth = end - start;
    15381538    offset = start;
     1539
     1540    if (isRowAxis && !style().isLeftToRightDirection() && !child.style().hasStaticInlinePosition(child.isHorizontalWritingMode())) {
     1541        // If the child doesn't have a static inline position (i.e. "left" and/or "right" aren't "auto",
     1542        // we need to calculate the offset from the left (even if we're in RTL).
     1543        if (endIsAuto)
     1544            offset = LayoutUnit();
     1545        else {
     1546            LayoutUnit alignmentOffset =  m_columnPositions[0] - borderAndPaddingStart();
     1547            LayoutUnit offsetFromLastLine = m_columnPositions[m_columnPositions.size() - 1] - m_columnPositions[endLine];
     1548            offset = paddingLeft() +  alignmentOffset + offsetFromLastLine;
     1549        }
     1550    }
    15391551
    15401552    if (child.parent() == this && !startIsAuto) {
Note: See TracChangeset for help on using the changeset viewer.