Changeset 200572 in webkit


Ignore:
Timestamp:
May 9, 2016 3:17:29 AM (8 years ago)
Author:
Manuel Rego Casasnovas
Message:

[css-grid] Fix static position for positioned grid items
​https://bugs.webkit.org/show_bug.cgi?id=157417

Reviewed by Darin Adler.

Source/WebCore:

The spec was updated to define properly the static position
for positioned grid items, but we didn't update the implementation yet:
​https://drafts.csswg.org/css-grid-1/issues-wd-20150108#issue-1

We were only setting the static position when the start line
was not auto. Otherwise we were using the default one
which includes the padding.
With the spec change we need to set it always,
even if the start line is auto.

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::layoutPositionedObject):
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):

LayoutTests:

Updated several tests to follow the new expected behavior.

  • fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
  • fast/css-grid-layout/absolute-positioning-grid-container-parent.html:
  • fast/css-grid-layout/grid-positioned-items-gaps-rtl.html:
  • fast/css-grid-layout/grid-positioned-items-gaps.html:
  • 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.html:
  • fast/css-grid-layout/grid-sizing-positioned-items.html:
Location:
trunk
Files:
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r200571 r200572  
     12016-05-09  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Fix static position for positioned grid items
     4        https://bugs.webkit.org/show_bug.cgi?id=157417
     5
     6        Reviewed by Darin Adler.
     7
     8        Updated several tests to follow the new expected behavior.
     9
     10        * fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
     11        * fast/css-grid-layout/absolute-positioning-grid-container-parent.html:
     12        * fast/css-grid-layout/grid-positioned-items-gaps-rtl.html:
     13        * fast/css-grid-layout/grid-positioned-items-gaps.html:
     14        * fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html:
     15        * fast/css-grid-layout/grid-positioned-items-implicit-grid.html:
     16        * fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html:
     17        * fast/css-grid-layout/grid-sizing-positioned-items.html:
     18
    1192016-05-09  Gyuyoung Kim  <gyuyoung.kim@webkit.org>
    220

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

    r200510 r200572  
    114114<div class="grid">
    115115    <div class="sizedToGridArea absolute autoRowAutoColumn"
    116         data-offset-x="15" data-offset-y="15" data-expected-width="530" data-expected-height="530">
     116        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530">
    117117    </div>
    118118    <div class="sizedToGridArea absolute firstRowFirstColumn"
    … …  
    138138<div class="grid">
    139139    <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
    140         data-offset-x="15" data-offset-y="65" data-expected-width="315" data-expected-height="250">
     140        data-offset-x="0" data-offset-y="65" data-expected-width="315" data-expected-height="250">
    141141    </div>
    142142    <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns"
    … …  
    144144    </div>
    145145    <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
    146         data-offset-x="15" data-offset-y="15" data-expected-width="165" data-expected-height="165">
     146        data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="165">
    147147    </div>
    148148    <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
    149         data-offset-x="15" data-offset-y="15" data-expected-width="65" data-expected-height="165">
     149        data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="165">
    150150    </div>
    151151    <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
    152         data-offset-x="15" data-offset-y="15" data-expected-width="165" data-expected-height="65">
     152        data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="65">
    153153    </div>
    154154    <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
    155         data-offset-x="15" data-offset-y="15" data-expected-width="65" data-expected-height="65">
     155        data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="65">
    156156    </div>
    157157</div>
    … …  
    230230<div class="grid directionRTL">
    231231    <div class="sizedToGridArea absolute autoRowAutoColumn"
    232         data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="530">
     232        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530">
    233233    </div>
    234234    <div class="sizedToGridArea absolute firstRowFirstColumn"
    … …  
    254254<div class="grid directionRTL">
    255255    <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
    256         data-offset-x="200" data-offset-y="65" data-expected-width="315" data-expected-height="250">
     256        data-offset-x="215" data-offset-y="65" data-expected-width="315" data-expected-height="250">
    257257    </div>
    258258    <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns"
    … …  
    260260    </div>
    261261    <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
    262         data-offset-x="350" data-offset-y="15" data-expected-width="165" data-expected-height="165">
     262        data-offset-x="365" data-offset-y="0" data-expected-width="165" data-expected-height="165">
    263263    </div>
    264264    <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
    265         data-offset-x="450" data-offset-y="15" data-expected-width="65" data-expected-height="165">
     265        data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expected-height="165">
    266266    </div>
    267267    <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
    268         data-offset-x="350" data-offset-y="15" data-expected-width="165" data-expected-height="65">
     268        data-offset-x="365" data-offset-y="0" data-expected-width="165" data-expected-height="65">
    269269    </div>
    270270    <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
    271         data-offset-x="450" data-offset-y="15" data-expected-width="65" data-expected-height="65">
     271        data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expected-height="65">
    272272    </div>
    273273</div>

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

    r200510 r200572  
    5454<div class="container">
    5555    <div class="grid relative">
    56         <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="15" data-offset-y="5" data-expected-width="330" data-expected-height="210"></div>
     56        <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div>
    5757    </div>
    5858</div>
    … …  
    9090<div class="container">
    9191    <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>
     92        <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div>
    9393    </div>
    9494</div>

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

    r200510 r200572  
    3636<div class="grid directionRTL">
    3737    <div style="grid-column: auto / auto; grid-row: auto / auto;"
    38         data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
     38        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
    3939    </div>
    4040</div>
    … …  
    192192<div class="grid directionRTL">
    193193    <div style="grid-column: 4 / auto; grid-row: 4 / auto;"
    194         data-offset-x="0" data-offset-y="15" data-expected-width="365" data-expected-height="230">
     194        data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expected-height="230">
    195195    </div>
    196196</div>
    … …  
    204204<div class="grid directionRTL">
    205205    <div style="grid-column: 5 / auto; grid-row: 5 / auto;"
    206         data-offset-x="0" data-offset-y="15" data-expected-width="265" data-expected-height="230">
     206        data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="230">
    207207    </div>
    208208</div>
    … …  
    216216<div class="grid directionRTL">
    217217    <div style="grid-column: 6 / auto; grid-row: 6 / auto;"
    218         data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
     218        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
    219219    </div>
    220220</div>
    … …  
    228228<div class="grid directionRTL">
    229229    <div style="grid-column: auto / 1; grid-row: auto / 1;"
    230         data-offset-x="800" data-offset-y="15" data-expected-width="15" data-expected-height="15">
     230        data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expected-height="15">
    231231    </div>
    232232</div>
    … …  
    240240<div class="grid directionRTL">
    241241    <div style="grid-column: auto / 2; grid-row: auto / 2;"
    242         data-offset-x="700" data-offset-y="15" data-expected-width="115" data-expected-height="65">
     242        data-offset-x="715" data-offset-y="0" data-expected-width="115" data-expected-height="65">
    243243    </div>
    244244</div>
    … …  
    252252<div class="grid directionRTL">
    253253    <div style="grid-column: auto / 3; grid-row: auto / 3;"
    254         data-offset-x="550" data-offset-y="15" data-expected-width="265" data-expected-height="140">
     254        data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="140">
    255255    </div>
    256256</div>
    … …  
    264264<div class="grid directionRTL">
    265265    <div style="grid-column: auto / 4; grid-row: auto / 4;"
    266         data-offset-x="400" data-offset-y="15" data-expected-width="415" data-expected-height="230">
     266        data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="230">
    267267    </div>
    268268</div>
    … …  
    276276<div class="grid directionRTL">
    277277    <div style="grid-column: auto / 5; grid-row: auto / 5;"
    278         data-offset-x="250" data-offset-y="15" data-expected-width="565" data-expected-height="230">
     278        data-offset-x="265" data-offset-y="0" data-expected-width="565" data-expected-height="230">
    279279    </div>
    280280</div>
    … …  
    288288<div class="grid directionRTL">
    289289    <div style="grid-column: auto / 6; grid-row: auto / 6;"
    290         data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
     290        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
    291291    </div>
    292292</div>

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

    r200510 r200572  
    3636<div class="grid">
    3737    <div style="grid-column: auto / auto; grid-row: auto / auto;"
    38         data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
     38        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
    3939    </div>
    4040</div>
    … …  
    192192<div class="grid">
    193193    <div style="grid-column: 4 / auto; grid-row: 4 / auto;"
    194         data-offset-x="465" data-offset-y="15" data-expected-width="365" data-expected-height="230">
     194        data-offset-x="465" data-offset-y="0" data-expected-width="365" data-expected-height="230">
    195195    </div>
    196196</div>
    … …  
    204204<div class="grid">
    205205    <div style="grid-column: 5 / auto; grid-row: 5 / auto;"
    206         data-offset-x="565" data-offset-y="15" data-expected-width="265" data-expected-height="230">
     206        data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="230">
    207207    </div>
    208208</div>
    … …  
    216216<div class="grid">
    217217    <div style="grid-column: 6 / auto; grid-row: 6 / auto;"
    218         data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
     218        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
    219219    </div>
    220220</div>
    … …  
    228228<div class="grid">
    229229    <div style="grid-column: auto / 1; grid-row: auto / 1;"
    230         data-offset-x="15" data-offset-y="15" data-expected-width="15" data-expected-height="15">
     230        data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
    231231    </div>
    232232</div>
    … …  
    240240<div class="grid">
    241241    <div style="grid-column: auto / 2; grid-row: auto / 2;"
    242         data-offset-x="15" data-offset-y="15" data-expected-width="115" data-expected-height="65">
     242        data-offset-x="0" data-offset-y="0" data-expected-width="115" data-expected-height="65">
    243243    </div>
    244244</div>
    … …  
    252252<div class="grid">
    253253    <div style="grid-column: auto / 3; grid-row: auto / 3;"
    254         data-offset-x="15" data-offset-y="15" data-expected-width="265" data-expected-height="140">
     254        data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="140">
    255255    </div>
    256256</div>
    … …  
    264264<div class="grid">
    265265    <div style="grid-column: auto / 4; grid-row: auto / 4;"
    266         data-offset-x="15" data-offset-y="15" data-expected-width="415" data-expected-height="230">
     266        data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="230">
    267267    </div>
    268268</div>
    … …  
    276276<div class="grid">
    277277    <div style="grid-column: auto / 5; grid-row: auto / 5;"
    278         data-offset-x="15" data-offset-y="15" data-expected-width="565" data-expected-height="230">
     278        data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expected-height="230">
    279279    </div>
    280280</div>
    … …  
    288288<div class="grid">
    289289    <div style="grid-column: auto / 6; grid-row: auto / 6;"
    290         data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
     290        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
    291291    </div>
    292292</div>

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

    r200510 r200572  
    5151<div class="grid">
    5252    <div class="absolute sizedToGridArea startImplicitLine"
    53         data-offset-x="15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
     53        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
    5454    </div>
    5555    <div class="absolute sizedToGridArea endImplicitLine"
    … …  
    6060<div class="grid">
    6161    <div class="absolute sizedToGridArea startImplicitLineSpan"
    62         data-offset-x="15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
     62        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
    6363    </div>
    6464    <div class="absolute sizedToGridArea endImplicitLineSpan"
    … …  
    6969<div class="grid directionRTL">
    7070    <div class="absolute sizedToGridArea startImplicitLine"
    71         data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
     71        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
    7272    </div>
    7373    <div class="absolute sizedToGridArea endImplicitLine"
    … …  
    7878<div class="grid directionRTL">
    7979    <div class="absolute sizedToGridArea startImplicitLineSpan"
    80         data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
     80        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
    8181    </div>
    8282    <div class="absolute sizedToGridArea endImplicitLineSpan"

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

    r200510 r200572  
    3131<div class="grid">
    3232    <div class="sizedToGridArea absolute secondRowSecondColumn"
    33         data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     33        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
    3434    </div>
    3535    <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
    36         data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     36        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
    3737    </div>
    3838    <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
    39         data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     39        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
    4040    </div>
    4141</div>
    … …  
    4646    </div>
    4747    <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
    48         data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     48        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
    4949    </div>
    5050    <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
    … …  
    5555<div class="grid directionRTL">
    5656    <div class="sizedToGridArea absolute secondRowSecondColumn"
    57         data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     57        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
    5858    </div>
    5959    <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
    60         data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     60        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
    6161    </div>
    6262    <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
    63         data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     63        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
    6464    </div>
    6565</div>
    … …  
    7070    </div>
    7171    <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
    72         data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
     72        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
    7373    </div>
    7474    <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"

  • trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html

    r200510 r200572  
    4545<div class="grid">
    4646    <div class="absolute sizedToGridArea startAndEndUnknownLines"
    47         data-offset-x="15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
     47        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
    4848    </div>
    4949    <div class="absolute sizedToGridArea endUnknownLine"
    … …  
    5151    </div>
    5252    <div class="absolute sizedToGridArea startUnknownLine"
    53         data-offset-x="15" data-offset-y="15" data-expected-width="315" data-expected-height="215">
     53        data-offset-x="0" data-offset-y="0" data-expected-width="315" data-expected-height="215">
    5454    </div>
    5555</div>
    … …  
    5757<div class="grid directionRTL">
    5858    <div class="absolute sizedToGridArea startAndEndUnknownLines"
    59         data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
     59        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
    6060    </div>
    6161    <div class="absolute sizedToGridArea endUnknownLine"
    … …  
    6363    </div>
    6464    <div class="absolute sizedToGridArea startUnknownLine"
    65         data-offset-x="200" data-offset-y="15" data-expected-width="315" data-expected-height="215">
     65        data-offset-x="215" data-offset-y="0" data-expected-width="315" data-expected-height="215">
    6666    </div>
    6767</div>

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

    r200510 r200572  
    2626
    2727.percentageSize {
    28     width: 40%;
     28    width: 50%;
    2929    height: 20%;
    3030}
    … …  
    3535    top: 15px;
    3636    bottom: 20px;
     37}
     38
     39.onlyFirstRowOnlyFirstColumn {
     40    background-color: blue;
     41    grid-column: 1 / 2;
     42    grid-row: 1 / 2;
     43}
     44
     45.endSecondRowEndSecondColumn {
     46    background-color: orange;
     47    grid-column-end: 3;
     48    grid-row-end: 3;
    3749}
    3850
    … …  
    4658    <div class="grid">
    4759        <div class="absolute autoRowAutoColumn sizedToGridArea"
    48             data-offset-x="15" data-offset-y="15" data-expected-width="1030" data-expected-height="1030">
     60            data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030">
    4961        </div>
    5062        <div class="absolute secondRowSecondColumn sizedToGridArea"
    … …  
    5567        </div>
    5668        <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
    57             data-offset-x="15" data-offset-y="15" data-expected-width="315" data-expected-height="215">
     69            data-offset-x="0" data-offset-y="0" data-expected-width="315" data-expected-height="215">
    5870        </div>
    5971    </div>
    … …  
    6375    <div class="grid">
    6476        <div class="absolute autoRowAutoColumn lengthSize"
    65             data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20">
     77            data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20">
    6678        </div>
    6779        <div class="absolute secondRowSecondColumn lengthSize"
    … …  
    7284        </div>
    7385        <div class="absolute endSecondRowEndSecondColumn lengthSize"
    74             data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20">
     86            data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20">
    7587        </div>
    7688    </div>
    … …  
    8092    <div class="grid">
    8193        <div class="absolute autoRowAutoColumn percentageSize"
    82             data-offset-x="15" data-offset-y="15" data-expected-width="412" data-expected-height="206">
     94            data-offset-x="0" data-offset-y="0" data-expected-width="515" data-expected-height="206">
    8395        </div>
    8496        <div class="absolute secondRowSecondColumn percentageSize"
    85             data-offset-x="115" data-offset-y="65" data-expected-width="366" data-expected-height="193">
     97            data-offset-x="115" data-offset-y="65" data-expected-width="458" data-expected-height="193">
    8698        </div>
    8799        <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
    88             data-offset-x="15" data-offset-y="15" data-expected-width="40" data-expected-height="10">
     100            data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="10">
    89101        </div>
    90102        <div class="absolute endSecondRowEndSecondColumn percentageSize"
    91             data-offset-x="15" data-offset-y="15" data-expected-width="126" data-expected-height="43">
     103            data-offset-x="0" data-offset-y="0" data-expected-width="158" data-expected-height="43">
    92104        </div>
    93105    </div>
    … …  
    114126    <div class="grid directionRTL">
    115127        <div class="absolute autoRowAutoColumn sizedToGridArea"
    116             data-offset-x="-15" data-offset-y="15" data-expected-width="1030" data-expected-height="1030">
     128            data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030">
    117129        </div>
    118130        <div class="absolute secondRowSecondColumn sizedToGridArea"
    … …  
    123135        </div>
    124136        <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
    125             data-offset-x="700" data-offset-y="15" data-expected-width="315" data-expected-height="215">
     137            data-offset-x="715" data-offset-y="0" data-expected-width="315" data-expected-height="215">
    126138        </div>
    127139    </div>
    … …  
    131143    <div class="grid directionRTL">
    132144        <div class="absolute autoRowAutoColumn lengthSize"
    133             data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20">
     145            data-offset-x="980" data-offset-y="0" data-expected-width="50" data-expected-height="20">
    134146        </div>
    135147        <div class="absolute secondRowSecondColumn lengthSize"
    … …  
    140152        </div>
    141153        <div class="absolute endSecondRowEndSecondColumn lengthSize"
    142             data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20">
     154            data-offset-x="980" data-offset-y="0" data-expected-width="50" data-expected-height="20">
    143155        </div>
    144156    </div>
    … …  
    148160    <div class="grid directionRTL">
    149161        <div class="absolute autoRowAutoColumn percentageSize"
    150             data-offset-x="603" data-offset-y="15" data-expected-width="412" data-expected-height="206">
     162            data-offset-x="515" data-offset-y="0" data-expected-width="515" data-expected-height="206">
    151163        </div>
    152164        <div class="absolute secondRowSecondColumn percentageSize"
    153             data-offset-x="549" data-offset-y="65" data-expected-width="366" data-expected-height="193">
     165            data-offset-x="458" data-offset-y="65" data-expected-width="458" data-expected-height="193">
    154166        </div>
    155167        <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
    156             data-offset-x="975" data-offset-y="15" data-expected-width="40" data-expected-height="10">
     168            data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="10">
    157169        </div>
    158170        <div class="absolute endSecondRowEndSecondColumn percentageSize"
    159             data-offset-x="889" data-offset-y="15" data-expected-width="126" data-expected-height="43">
     171            data-offset-x="873" data-offset-y="0" data-expected-width="158" data-expected-height="43">
    160172        </div>
    161173    </div>

  • trunk/Source/WebCore/ChangeLog

    r200569 r200572  
     12016-05-09  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Fix static position for positioned grid items
     4        https://bugs.webkit.org/show_bug.cgi?id=157417
     5
     6        Reviewed by Darin Adler.
     7
     8        The spec was updated to define properly the static position
     9        for positioned grid items, but we didn't update the implementation yet:
     10        https://drafts.csswg.org/css-grid-1/issues-wd-20150108#issue-1
     11
     12        We were only setting the static position when the start line
     13        was not auto. Otherwise we were using the default one
     14        which includes the padding.
     15        With the spec change we need to set it always,
     16        even if the start line is auto.
     17
     18        * rendering/RenderGrid.cpp:
     19        (WebCore::RenderGrid::layoutPositionedObject):
     20        (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
     21
    1222016-05-08  Frederic Wang  <fwang@igalia.com>
    223

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

    r200427 r200572  
    15211521        child.setExtraInlineOffset(columnOffset);
    15221522        child.setExtraBlockOffset(rowOffset);
     1523
     1524        if (child.parent() == this) {
     1525            auto& childLayer = *child.layer();
     1526            childLayer.setStaticInlinePosition(borderStart() + columnOffset);
     1527            childLayer.setStaticBlockPosition(borderBefore() + rowOffset);
     1528        }
    15231529    }
    15241530
    … …  
    16031609            }
    16041610        }
    1605     }
    1606 
    1607     if (child.parent() == this && !startIsAuto) {
    1608         // If column/row start is "auto" the static position has been already set in prepareChildForPositionedLayout().
    1609         RenderLayer* childLayer = child.layer();
    1610         if (isRowAxis)
    1611             childLayer->setStaticInlinePosition(borderStart() + offset);
    1612         else
    1613             childLayer->setStaticBlockPosition(borderBefore() + offset);
    16141611    }
    16151612}
Note: See TracChangeset for help on using the changeset viewer.