Changeset 198834 in webkit


Ignore:
Timestamp:
Mar 30, 2016 4:45:38 AM (8 years ago)
Author:
Manuel Rego Casasnovas
Message:

[css-grid] Refactor positioned children code
https://bugs.webkit.org/show_bug.cgi?id=155972

Reviewed by Sergio Villar Senin.

Source/WebCore:

This is a refactoring of RenderGrid::offsetAndBreadthForPositionedChild()
in order to calculate offset and breadth in a more clean way.
Hopefully making the code easier to follow.

Thanks to the refactoring, now positioned children in RTL
are working fine if they use the static inline position
(when "left" and "right" properties are both "auto").

The other case (not having a static inline position)
will be fixed in a separated patch.

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):

LayoutTests:

Added RTL cases for most of the positioned tests,
which are now passing with this patch.

Pending to add RTL tests when "left" and "right" are not "auto"
(the item doesn't use the static inline position),
but that will be done in the other patch.

  • 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/absolute-positioning-grid-container-parent-expected.txt:
  • fast/css-grid-layout/absolute-positioning-grid-container-parent.html:
  • fast/css-grid-layout/grid-positioned-items-background-expected.html:
  • fast/css-grid-layout/grid-positioned-items-background.html:

Fix test setting transparent background as it couldn't fail before.
Also using a different width, to have different values when we create the RTL version.

  • fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt:
  • fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt:
  • fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html:
  • fast/css-grid-layout/grid-positioned-items-implicit-grid.html:
  • fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt:
  • fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html:
  • fast/css-grid-layout/grid-sizing-positioned-items-expected.txt:
  • fast/css-grid-layout/grid-sizing-positioned-items.html:
Location:
trunk
Files:
17 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r198828 r198834  
     12016-03-30  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Refactor positioned children code
     4        https://bugs.webkit.org/show_bug.cgi?id=155972
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        Added RTL cases for most of the positioned tests,
     9        which are now passing with this patch.
     10
     11        Pending to add RTL tests when "left" and "right" are not "auto"
     12        (the item doesn't use the static inline position),
     13        but that will be done in the other patch.
     14
     15        * fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt:
     16        * fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
     17        * fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt:
     18        * fast/css-grid-layout/absolute-positioning-grid-container-parent.html:
     19        * fast/css-grid-layout/grid-positioned-items-background-expected.html:
     20        * fast/css-grid-layout/grid-positioned-items-background.html:
     21        Fix test setting transparent background as it couldn't fail before.
     22        Also using a different width, to have different values when we create the RTL version.
     23        * fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt:
     24        * fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt:
     25        * fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html:
     26        * fast/css-grid-layout/grid-positioned-items-implicit-grid.html:
     27        * fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt:
     28        * fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html:
     29        * fast/css-grid-layout/grid-sizing-positioned-items-expected.txt:
     30        * fast/css-grid-layout/grid-sizing-positioned-items.html:
     31
    1322016-03-26  Antti Koivisto  <antti@apple.com>
    233
  • trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt

    r192054 r198834  
    66PASS
    77PASS
     8PASS
     9PASS
     10PASS
  • trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html

    r192054 r198834  
    228228</div>
    229229
     230<div class="grid directionRTL">
     231    <div class="sizedToGridArea absolute autoRowAutoColumn"
     232        data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="530">
     233    </div>
     234    <div class="sizedToGridArea absolute firstRowFirstColumn"
     235        data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="515">
     236    </div>
     237    <div class="sizedToGridArea absolute secondRowFirstColumn"
     238        data-offset-x="0" data-offset-y="65" data-expected-width="515" data-expected-height="465">
     239    </div>
     240    <div class="sizedToGridArea absolute firstRowSecondColumn"
     241        data-offset-x="0" data-offset-y="15" data-expected-width="465" data-expected-height="515">
     242    </div>
     243    <div class="sizedToGridArea absolute secondRowSecondColumn"
     244        data-offset-x="0" data-offset-y="65" data-expected-width="465" data-expected-height="465">
     245    </div>
     246    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows"
     247        data-offset-x="0" data-offset-y="165" data-expected-width="365" data-expected-height="350">
     248    </div>
     249    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns"
     250        data-offset-x="15" data-offset-y="165" data-expected-width="350" data-expected-height="350">
     251    </div>
     252</div>
     253
     254<div class="grid directionRTL">
     255    <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
     256        data-offset-x="200" data-offset-y="65" data-expected-width="315" data-expected-height="250">
     257    </div>
     258    <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns"
     259        data-offset-x="215" data-offset-y="65" data-expected-width="250" data-expected-height="250">
     260    </div>
     261    <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
     262        data-offset-x="350" data-offset-y="15" data-expected-width="165" data-expected-height="165">
     263    </div>
     264    <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
     265        data-offset-x="450" data-offset-y="15" data-expected-width="65" data-expected-height="165">
     266    </div>
     267    <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
     268        data-offset-x="350" data-offset-y="15" data-expected-width="165" data-expected-height="65">
     269    </div>
     270    <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
     271        data-offset-x="450" data-offset-y="15" data-expected-width="65" data-expected-height="65">
     272    </div>
     273</div>
     274
     275<div class="grid directionRTL">
     276    <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn"
     277        data-offset-x="465" data-offset-y="15" data-expected-width="50" data-expected-height="50">
     278    </div>
     279    <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn"
     280        data-offset-x="465" data-offset-y="65" data-expected-width="50" data-expected-height="100">
     281    </div>
     282    <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn"
     283        data-offset-x="365" data-offset-y="15" data-expected-width="100" data-expected-height="50">
     284    </div>
     285    <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
     286        data-offset-x="365" data-offset-y="65" data-expected-width="100" data-expected-height="100">
     287    </div>
     288    <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns"
     289        data-offset-x="15" data-offset-y="165" data-expected-width="350" data-expected-height="350">
     290    </div>
     291    <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows"
     292        data-offset-x="215" data-offset-y="165" data-expected-width="150" data-expected-height="350">
     293    </div>
     294</div>
     295
    230296</body>
    231297</html>
  • trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt

    r192054 r198834  
    77PASS
    88PASS
     9PASS
     10PASS
     11PASS
     12PASS
     13PASS
     14PASS
  • trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html

    r192054 r198834  
    7070</div>
    7171
     72<div class="container relative">
     73    <div class="grid directionRTL">
     74        <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
     75    </div>
     76</div>
     77
     78<div class="container relative">
     79    <div class="grid directionRTL">
     80        <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
     81    </div>
     82</div>
     83
     84<div class="container relative">
     85    <div class="grid directionRTL">
     86        <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
     87    </div>
     88</div>
     89
     90<div class="container">
     91    <div class="grid relative directionRTL">
     92        <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-15" data-offset-y="5" data-expected-width="330" data-expected-height="210"></div>
     93    </div>
     94</div>
     95
     96<div class="container">
     97    <div class="grid relative directionRTL">
     98        <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="315" data-expected-height="205"></div>
     99    </div>
     100</div>
     101
     102<div class="container">
     103    <div class="grid relative directionRTL">
     104        <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="265" data-expected-height="180"></div>
     105    </div>
     106</div>
     107
    72108</body>
    73109</html>
  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html

    r192054 r198834  
    33<style>
    44.grid {
    5     width: 400px;
     5    width: 500px;
    66    height: 300px;
    77    border: 5px solid black;
    88    margin: 30px;
    99    padding: 15px;
    10     background-color: grey;
    1110}
    1211
  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html

    r192054 r198834  
    77    -webkit-grid-template-columns: 100px 200px;
    88    -webkit-grid-template-rows: 50px 150px;
    9     width: 400px;
     9    width: 500px;
    1010    height: 300px;
    1111    border: 5px solid black;
     
    1414    /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
    1515    position: relative;
     16    background-color: transparent;
    1617}
    1718
  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt

    r192054 r198834  
    33PASS
    44PASS
     5PASS
     6PASS
  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt

    r192054 r198834  
    33PASS
    44PASS
     5PASS
     6PASS
  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html

    r192054 r198834  
    6767</div>
    6868
     69<div class="grid directionRTL">
     70    <div class="absolute sizedToGridArea startImplicitLine"
     71        data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
     72    </div>
     73    <div class="absolute sizedToGridArea endImplicitLine"
     74        data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
     75    </div>
     76</div>
     77
     78<div class="grid directionRTL">
     79    <div class="absolute sizedToGridArea startImplicitLineSpan"
     80        data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
     81    </div>
     82    <div class="absolute sizedToGridArea endImplicitLineSpan"
     83        data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
     84    </div>
     85</div>
     86
    6987</body>
  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html

    r197857 r198834  
    5353</div>
    5454
     55<div class="grid directionRTL">
     56    <div class="sizedToGridArea absolute secondRowSecondColumn"
     57        data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     58    </div>
     59    <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
     60        data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     61    </div>
     62    <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
     63        data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     64    </div>
     65</div>
     66
     67<div class="grid grid-columns-rows directionRTL">
     68    <div class="sizedToGridArea absolute secondRowSecondColumn"
     69        data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165">
     70    </div>
     71    <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
     72        data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     73    </div>
     74    <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
     75        data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165">
     76    </div>
     77</div>
     78
    5579</body>
    5680</html>
  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt

    r192054 r198834  
    22
    33PASS
     4PASS
  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html

    r192054 r198834  
    5555</div>
    5656
     57<div class="grid directionRTL">
     58    <div class="absolute sizedToGridArea startAndEndUnknownLines"
     59        data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
     60    </div>
     61    <div class="absolute sizedToGridArea endUnknownLine"
     62        data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
     63    </div>
     64    <div class="absolute sizedToGridArea startUnknownLine"
     65        data-offset-x="200" data-offset-y="15" data-expected-width="315" data-expected-height="215">
     66    </div>
     67</div>
     68
    5769</body>
  • trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt

    r192054 r198834  
    55PASS
    66PASS
     7PASS
     8PASS
     9PASS
  • trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html

    r192054 r198834  
    111111</div>
    112112
     113<div class="unconstrainedContainer">
     114    <div class="grid directionRTL">
     115        <div class="absolute autoRowAutoColumn sizedToGridArea"
     116            data-offset-x="-15" data-offset-y="15" data-expected-width="1030" data-expected-height="1030">
     117        </div>
     118        <div class="absolute secondRowSecondColumn sizedToGridArea"
     119            data-offset-x="0" data-offset-y="65" data-expected-width="915" data-expected-height="965">
     120        </div>
     121        <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
     122            data-offset-x="915" data-offset-y="15" data-expected-width="100" data-expected-height="50">
     123        </div>
     124        <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
     125            data-offset-x="700" data-offset-y="15" data-expected-width="315" data-expected-height="215">
     126        </div>
     127    </div>
     128</div>
     129
     130<div class="unconstrainedContainer">
     131    <div class="grid directionRTL">
     132        <div class="absolute autoRowAutoColumn lengthSize"
     133            data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20">
     134        </div>
     135        <div class="absolute secondRowSecondColumn lengthSize"
     136            data-offset-x="865" data-offset-y="65" data-expected-width="50" data-expected-height="20">
     137        </div>
     138        <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize"
     139            data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20">
     140        </div>
     141        <div class="absolute endSecondRowEndSecondColumn lengthSize"
     142            data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20">
     143        </div>
     144    </div>
     145</div>
     146
     147<div class="unconstrainedContainer">
     148    <div class="grid directionRTL">
     149        <div class="absolute autoRowAutoColumn percentageSize"
     150            data-offset-x="603" data-offset-y="15" data-expected-width="412" data-expected-height="206">
     151        </div>
     152        <div class="absolute secondRowSecondColumn percentageSize"
     153            data-offset-x="549" data-offset-y="65" data-expected-width="366" data-expected-height="193">
     154        </div>
     155        <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
     156            data-offset-x="975" data-offset-y="15" data-expected-width="40" data-expected-height="10">
     157        </div>
     158        <div class="absolute endSecondRowEndSecondColumn percentageSize"
     159            data-offset-x="889" data-offset-y="15" data-expected-width="126" data-expected-height="43">
     160        </div>
     161    </div>
     162</div>
     163
    113164</body>
  • trunk/Source/WebCore/ChangeLog

    r198833 r198834  
     12016-03-30  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Refactor positioned children code
     4        https://bugs.webkit.org/show_bug.cgi?id=155972
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        This is a refactoring of RenderGrid::offsetAndBreadthForPositionedChild()
     9        in order to calculate offset and breadth in a more clean way.
     10        Hopefully making the code easier to follow.
     11
     12        Thanks to the refactoring, now positioned children in RTL
     13        are working fine if they use the static inline position
     14        (when "left" and "right" properties are both "auto").
     15
     16        The other case (not having a static inline position)
     17        will be fixed in a separated patch.
     18
     19        * rendering/RenderGrid.cpp:
     20        (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
     21
    1222016-03-30  Youenn Fablet  <youenn.fablet@crf.canon.fr>
    223
  • trunk/Source/WebCore/rendering/RenderGrid.cpp

    r198732 r198834  
    15181518        || (endLine > lastExplicitLine);
    15191519
    1520     LayoutUnit start = startIsAuto ? LayoutUnit() : (isRowAxis ?  m_columnPositions[startLine] : m_rowPositions[startLine]);
    1521     LayoutUnit end = endIsAuto ? (isRowAxis ? logicalWidth() : logicalHeight()) : (isRowAxis ?  m_columnPositions[endLine] : m_rowPositions[endLine]);
     1520    // We're normalizing the positions to avoid issues with RTL (as they're stored in the same order than LTR but adding an offset).
     1521    LayoutUnit start;
     1522    if (!startIsAuto) {
     1523        if (isRowAxis)
     1524            start = m_columnPositions[startLine] - m_columnPositions[0] + paddingStart();
     1525        else
     1526            start = m_rowPositions[startLine] - m_rowPositions[0] + paddingBefore();
     1527    }
     1528
     1529    LayoutUnit end = isRowAxis ? clientLogicalWidth() : clientLogicalHeight();
     1530    if (!endIsAuto) {
     1531        if (isRowAxis)
     1532            end = m_columnPositions[endLine] - m_columnPositions[0] + paddingStart();
     1533        else
     1534            end = m_rowPositions[endLine] - m_rowPositions[0] + paddingBefore();
     1535    }
    15221536
    15231537    breadth = end - start;
    1524 
    1525     if (startIsAuto)
    1526         breadth -= isRowAxis ? borderStart() : borderBefore();
    1527     else
    1528         start -= isRowAxis ? borderStart() : borderBefore();
    1529 
    1530     if (endIsAuto) {
    1531         breadth -= isRowAxis ? borderEnd() : borderAfter();
    1532         breadth -= scrollbarLogicalWidth();
    1533     }
    1534 
    15351538    offset = start;
    15361539
Note: See TracChangeset for help on using the changeset viewer.