Changeset 183370 in webkit


Ignore:
Timestamp:
Apr 26, 2015 3:44:11 PM (9 years ago)
Author:
jfernandez@igalia.com
Message:

[CSS Grid Layout] Support for align-self and align-items in grid layout
https://bugs.webkit.org/show_bug.cgi?id=133225

Reviewed by Darin Adler.

Source/WebCore:

Implementation of align-self and align-items properties for grid. It supports
different writing-modes and direction. Margins, borders and paddings are also
considered when computing the final position and stretched size.

Overflow handling is still missing and will be added when implemented row-axis
alignment support.

Test: fast/css-grid-layout/grid-align.html

  • rendering/RenderBox.cpp:

(WebCore::RenderBox::computeLogicalHeight):

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::logicalContentHeightForChild):
(WebCore::RenderGrid::layoutGridItems):
(WebCore::computeOverflowAlignmentOffset):
(WebCore::RenderGrid::endOfRowForChild):
(WebCore::RenderGrid::startOfRowForChild):
(WebCore::RenderGrid::centeredRowPositionForChild):
(WebCore::marginWidthForChild):
(WebCore::marginHeightForChild):
(WebCore::RenderGrid::allowedToStretchLogicalHeightForChild):
(WebCore::RenderGrid::needToStretchChildLogicalHeight):
(WebCore::RenderGrid::marginLogicalHeightForChild):
(WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching):
(WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
(WebCore::RenderGrid::rowPositionForChild):
(WebCore::RenderGrid::findChildLogicalPosition):
(WebCore::RenderGrid::populateGridPositions): Deleted.

  • rendering/RenderGrid.h:

LayoutTests:

Implementation of align-self and align-items properties ifor grid.

Several layout tests were touched for adapting them to the new grid item's
column-axis position when using RTL direction.

  • fast/css-grid-layout/grid-align-expected.txt: Added.
  • fast/css-grid-layout/grid-align.html: Added.
  • fast/css-grid-layout/grid-element-border-grid-item.html:
  • fast/css-grid-layout/grid-element-border-padding-grid-item.html:
  • fast/css-grid-layout/grid-element-padding-grid-item.html:
  • fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html:
  • fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html:
  • fast/css-grid-layout/grid-item-margin-resolution.html:
Location:
trunk
Files:
2 added
11 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r183368 r183370  
     12015-04-26  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [CSS Grid Layout] Support for align-self and align-items in grid layout
     4        https://bugs.webkit.org/show_bug.cgi?id=133225
     5
     6        Reviewed by Darin Adler.
     7
     8        Implementation of align-self and align-items properties ifor grid.
     9
     10        Several layout tests were touched for adapting them to the new grid item's
     11        column-axis position when using RTL direction.
     12
     13        * fast/css-grid-layout/grid-align-expected.txt: Added.
     14        * fast/css-grid-layout/grid-align.html: Added.
     15        * fast/css-grid-layout/grid-element-border-grid-item.html:
     16        * fast/css-grid-layout/grid-element-border-padding-grid-item.html:
     17        * fast/css-grid-layout/grid-element-padding-grid-item.html:
     18        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html:
     19        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html:
     20        * fast/css-grid-layout/grid-item-margin-resolution.html:
     21
    1222015-04-26  Doug Russell  <d_russell@apple.com>
    223
  • trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html

    r168416 r183370  
    2121<div style="position: relative">
    2222    <div class="grid" data-expected-width="280" data-expected-height="260">
    23         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    24         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    25         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    26         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     23        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     24        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     25        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     26        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    2727    </div>
    2828</div>
     
    3030<div style="position: relative">
    3131    <div class="grid verticalRL" data-expected-width="280" data-expected-height="260">
    32         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    33         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    34         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    35         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     32        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     33        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     34        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     35        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    3636    </div>
    3737</div>
     
    3939<div style="position: relative">
    4040    <div class="grid verticalLR" data-expected-width="280" data-expected-height="260">
    41         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    42         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    43         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    44         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     41        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     42        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     43        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     44        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    4545    </div>
    4646</div>
     
    4848<div style="position: relative">
    4949    <div class="grid horizontalBT" data-expected-width="280" data-expected-height="260">
    50         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    51         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    52         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    53         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     50        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     51        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     52        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     53        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    5454    </div>
    5555</div>
    5656
    57 <!-- rtl direciton -->
     57<!-- rtl direction -->
    5858<div style="position: relative">
    5959    <div class="grid directionRTL" data-expected-width="280" data-expected-height="260">
    60         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    61         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    62         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    63         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     60        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     61        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     62        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     63        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    6464    </div>
    6565</div>
     
    6767<div style="position: relative">
    6868    <div class="grid verticalRL directionRTL" data-expected-width="280" data-expected-height="260">
    69         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    70         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
    71         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    72         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
     69        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     70        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     71        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     72        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    7373    </div>
    7474</div>
     
    7676<div style="position: relative">
    7777    <div class="grid verticalLR directionRTL" data-expected-width="280" data-expected-height="260">
    78         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    79         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
    80         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    81         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
     78        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     79        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     80        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     81        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    8282    </div>
    8383</div>
     
    8585<div style="position: relative">
    8686    <div class="grid horizontalBT directionRTL" data-expected-width="280" data-expected-height="260">
    87         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    88         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    89         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    90         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     87        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     88        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     89        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     90        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    9191    </div>
    9292</div>
  • trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html

    r168416 r183370  
    2222<div style="position: relative">
    2323    <div class="grid" data-expected-width="280" data-expected-height="260">
    24         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    25         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    26         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    27         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     24        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     25        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     26        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     27        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    2828    </div>
    2929</div>
     
    3131<div style="position: relative">
    3232    <div class="grid verticalRL" data-expected-width="280" data-expected-height="260">
    33         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    34         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    35         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    36         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     33        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     34        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     35        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     36        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    3737    </div>
    3838</div>
     
    4040<div style="position: relative">
    4141    <div class="grid verticalLR" data-expected-width="280" data-expected-height="260">
    42         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    43         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    44         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    45         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     42        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     43        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     44        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     45        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    4646    </div>
    4747</div>
     
    4949<div style="position: relative">
    5050    <div class="grid horizontalBT" data-expected-width="280" data-expected-height="260">
    51         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    52         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    53         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    54         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     51        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     52        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     53        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     54        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    5555    </div>
    5656</div>
     
    5959<div style="position: relative">
    6060    <div class="grid directionRTL" data-expected-width="280" data-expected-height="260">
    61         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    62         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    63         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    64         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     61        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     62        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     63        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     64        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    6565    </div>
    6666</div>
     
    6868<div style="position: relative">
    6969    <div class="grid verticalRL directionRTL" data-expected-width="280" data-expected-height="260">
    70         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    71         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
    72         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    73         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
     70        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     71        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     72        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     73        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    7474    </div>
    7575</div>
     
    7777<div style="position: relative">
    7878    <div class="grid verticalLR directionRTL" data-expected-width="280" data-expected-height="260">
    79         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    80         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
    81         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    82         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
     79        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     80        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     81        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     82        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    8383    </div>
    8484</div>
     
    8686<div style="position: relative">
    8787    <div class="grid horizontalBT directionRTL" data-expected-width="280" data-expected-height="260">
    88         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    89         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    90         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    91         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     88        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     89        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     90        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     91        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    9292    </div>
    9393</div>
  • trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html

    r168416 r183370  
    1818<div style="position: relative">
    1919    <div class="grid" data-expected-width="280" data-expected-height="260">
    20         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    21         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    22         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    23         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     20        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     21        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     22        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     23        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    2424    </div>
    2525</div>
     
    2727<div style="position: relative">
    2828    <div class="grid verticalRL" data-expected-width="280" data-expected-height="260">
    29         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    30         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    31         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    32         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     29        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     30        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     31        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     32        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    3333    </div>
    3434</div>
     
    3636<div style="position: relative">
    3737    <div class="grid verticalLR" data-expected-width="280" data-expected-height="260">
    38         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    39         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    40         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    41         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     38        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     39        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     40        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     41        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    4242    </div>
    4343</div>
     
    4545<div style="position: relative">
    4646    <div class="grid horizontalBT" data-expected-width="280" data-expected-height="260">
    47         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    48         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    49         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    50         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     47        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     48        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     49        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     50        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    5151    </div>
    5252</div>
     
    5555<div style="position: relative">
    5656    <div class="grid directionRTL" data-expected-width="280" data-expected-height="260">
    57         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    58         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    59         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    60         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     57        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     58        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     59        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     60        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    6161    </div>
    6262</div>
     
    6464<div style="position: relative">
    6565    <div class="grid verticalRL directionRTL" data-expected-width="280" data-expected-height="260">
    66         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    67         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
    68         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    69         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
     66        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     67        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     68        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     69        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    7070    </div>
    7171</div>
     
    7373<div style="position: relative">
    7474    <div class="grid verticalLR directionRTL" data-expected-width="280" data-expected-height="260">
    75         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    76         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
    77         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
    78         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
     75        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     76        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     77        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     78        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    7979    </div>
    8080</div>
     
    8282<div style="position: relative">
    8383    <div class="grid horizontalBT directionRTL" data-expected-width="280" data-expected-height="260">
    84         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    85         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
    86         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    87         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     84        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     85        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     86        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     87        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
    8888    </div>
    8989</div>
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html

    r169197 r183370  
    5454<div class="testContainer">
    5555    <div class="grid gridLong">
    56         <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
    57         <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
    58         <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
    59         <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
     56        <div class="gridItem firstRowFirstColumn"   style="left: 20px; top: 20px;"></div>
     57        <div class="gridItem firstRowSecondColumn"  style="left: 0px"></div>
     58        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 60px;"></div>
     59        <div class="gridItem secondRowSecondColumn" style="left: 0px; top: 60px;"></div>
    6060    </div>
    6161</div>
     
    6363<div class="testContainer">
    6464    <div class="grid gridShort">
    65         <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
    66         <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
    67         <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
    68         <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
     65        <div class="gridItem firstRowFirstColumn"   style="left: 20px; top: 20px;"></div>
     66        <div class="gridItem firstRowSecondColumn"  style="left: 0px;"></div>
     67        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 60px;"></div>
     68        <div class="gridItem secondRowSecondColumn" style="left: 0px; top: 60px;"></div>
    6969    </div>
    7070</div>
     
    7272<div class="testContainer">
    7373    <div class="grid gridLong">
    74         <div class="gridItem firstRowFirstColumn"   style="top: 80px;"></div>
    75         <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 80px;"></div>
    76         <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
    77         <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 20px;"></div>
     74        <div class="gridItem firstRowFirstColumn"   style="left: 20px; top: 80px;"></div>
     75        <div class="gridItem firstRowSecondColumn"  style="left: 0px; top: 80px;"></div>
     76        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
     77        <div class="gridItem secondRowSecondColumn" style="left: 0px; top: 20px;"></div>
    7878    </div>
    7979</div>
     
    8181<div class="testContainer">
    8282    <div class="grid gridShort">
    83         <div class="gridItem firstRowFirstColumn"   style="top: 60px;"></div>
    84         <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 40px;"></div>
    85         <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
    86         <div class="gridItem secondRowSecondColumn" style="left: 20px;"></div>
     83        <div class="gridItem firstRowFirstColumn"   style="left: 20px; top: 60px;"></div>
     84        <div class="gridItem firstRowSecondColumn"  style="left: 0px; top: 40px;"></div>
     85        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
     86        <div class="gridItem secondRowSecondColumn" style="left: 0px;"></div>
    8787    </div>
    8888</div>
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html

    r169197 r183370  
    5454<div class="testContainer">
    5555    <div class="grid gridLong">
    56         <div class="gridItem firstRowFirstColumn"   style="left: 180px;"></div>
    57         <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
    58         <div class="gridItem secondRowFirstColumn"  style="left: 160px;"></div>
    59         <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 80px;"></div>
     56        <div class="gridItem firstRowFirstColumn"   style="left: 180px; top: 80px;"></div>
     57        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 20px;"></div>
     58        <div class="gridItem secondRowFirstColumn"  style="left: 160px; top: 80px;"></div>
     59        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 0px;"></div>
    6060    </div>
    6161</div>
     
    6363<div class="testContainer">
    6464    <div class="grid gridShort">
    65         <div class="gridItem firstRowFirstColumn"   style="left: 180px;"></div>
    66         <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
    67         <div class="gridItem secondRowFirstColumn"  style="left: 160px; top: 20px;"></div>
    68         <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
     65        <div class="gridItem firstRowFirstColumn"   style="left: 180px; top: 60px;"></div>
     66        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 0px;"></div>
     67        <div class="gridItem secondRowFirstColumn"  style="left: 160px; top: 40px;"></div>
     68        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 0px;"></div>
    6969    </div>
    7070</div>
     
    7272<div class="testContainer">
    7373    <div class="grid gridLong">
    74         <div class="gridItem firstRowFirstColumn"   style="top: 0px;"></div>
    75         <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
    76         <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
    77         <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 80px;"></div>
     74        <div class="gridItem firstRowFirstColumn"   style="top: 80px;"></div>
     75        <div class="gridItem firstRowSecondColumn"  style="top: 20px;"></div>
     76        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 80px"></div>
     77        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 0px;"></div>
    7878    </div>
    7979</div>
     
    8181<div class="testContainer">
    8282    <div class="grid gridShort">
    83         <div class="gridItem firstRowFirstColumn"   style="top: 0px;"></div>
    84         <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
    85         <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 20px;" ></div>
    86         <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
     83        <div class="gridItem firstRowFirstColumn"   style="top: 60px;"></div>
     84        <div class="gridItem firstRowSecondColumn"  style="top: 0px;"></div>
     85        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 40px;" ></div>
     86        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 0px;"></div>
    8787    </div>
    8888</div>
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-resolution.html

    r168416 r183370  
    6161<div style="position: relative">
    6262    <div class="grid directionRTL" data-expected-width="200" data-expected-height="200">
    63         <div class="gridItem firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
    64         <div class="gridItem firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
    65         <div class="gridItem secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
    66         <div class="gridItem secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     63        <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
     64        <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
     65        <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     66        <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
    6767    </div>
    6868</div>
     
    7070<div style="position: relative">
    7171    <div class="grid verticalRL directionRTL" data-expected-width="200" data-expected-height="200">
    72         <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
    73         <div class="gridItem firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
    74         <div class="gridItem secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
    75         <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
     72        <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     73        <div class="gridItem firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
     74        <div class="gridItem secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     75        <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
    7676    </div>
    7777</div>
     
    7979<div style="position: relative">
    8080    <div class="grid verticalLR directionRTL" data-expected-width="200" data-expected-height="200">
    81         <div class="gridItem firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
    82         <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
    83         <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
    84         <div class="gridItem secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
     81        <div class="gridItem firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     82        <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
     83        <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     84        <div class="gridItem secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
    8585    </div>
    8686</div>
     
    8888<div style="position: relative">
    8989    <div class="grid horizontalBT directionRTL" data-expected-width="200" data-expected-height="200">
    90         <div class="gridItem firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
    91         <div class="gridItem firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
    92         <div class="gridItem secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
    93         <div class="gridItem secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
     90        <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     91        <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     92        <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
     93        <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
    9494    </div>
    9595</div>
  • trunk/Source/WebCore/ChangeLog

    r183368 r183370  
     12015-04-26  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [CSS Grid Layout] Support for align-self and align-items in grid layout
     4        https://bugs.webkit.org/show_bug.cgi?id=133225
     5
     6        Reviewed by Darin Adler.
     7
     8        Implementation of align-self and align-items properties for grid. It supports
     9        different writing-modes and direction. Margins, borders and paddings are also
     10        considered when computing the final position and stretched size.
     11
     12        Overflow handling is still missing and will be added when implemented row-axis
     13        alignment support.
     14
     15        Test: fast/css-grid-layout/grid-align.html
     16
     17        * rendering/RenderBox.cpp:
     18        (WebCore::RenderBox::computeLogicalHeight):
     19        * rendering/RenderGrid.cpp:
     20        (WebCore::RenderGrid::logicalContentHeightForChild):
     21        (WebCore::RenderGrid::layoutGridItems):
     22        (WebCore::computeOverflowAlignmentOffset):
     23        (WebCore::RenderGrid::endOfRowForChild):
     24        (WebCore::RenderGrid::startOfRowForChild):
     25        (WebCore::RenderGrid::centeredRowPositionForChild):
     26        (WebCore::marginWidthForChild):
     27        (WebCore::marginHeightForChild):
     28        (WebCore::RenderGrid::allowedToStretchLogicalHeightForChild):
     29        (WebCore::RenderGrid::needToStretchChildLogicalHeight):
     30        (WebCore::RenderGrid::marginLogicalHeightForChild):
     31        (WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching):
     32        (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
     33        (WebCore::RenderGrid::rowPositionForChild):
     34        (WebCore::RenderGrid::findChildLogicalPosition):
     35        (WebCore::RenderGrid::populateGridPositions): Deleted.
     36        * rendering/RenderGrid.h:
     37
    1382015-04-26  Doug Russell  <d_russell@apple.com>
    239
  • trunk/Source/WebCore/rendering/RenderBox.cpp

    r183100 r183370  
    27132713        // FIXME: Account for block-flow in flexible boxes.
    27142714        // https://bugs.webkit.org/show_bug.cgi?id=46418
    2715         if (hasOverrideLogicalContentHeight() && parent()->isFlexibleBoxIncludingDeprecated())
     2715        if (hasOverrideLogicalContentHeight() && (parent()->isFlexibleBoxIncludingDeprecated() || parent()->isRenderGrid()))
    27162716            h = Length(overrideLogicalContentHeight(), Fixed);
    27172717        else if (treatAsReplaced)
  • trunk/Source/WebCore/rendering/RenderGrid.cpp

    r183065 r183370  
    4141static const int infinity = -1;
    4242
     43enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter};
     44
    4345class GridTrack {
    4446public:
     
    549551    LayoutUnit oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();
    550552    LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, columnTracks);
    551     if (child.hasRelativeLogicalHeight() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth)
     553    if (child.hasRelativeLogicalHeight() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth) {
    552554        child.setNeedsLayout(MarkOnlyThis);
     555        // We need to clear the stretched height to properly compute logical height during layout.
     556        child.clearOverrideLogicalContentHeight();
     557    }
    553558
    554559    child.setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
     
    11751180        LayoutRect oldChildRect = child->frameRect();
    11761181
    1177         // FIXME: Grid items should stretch to fill their cells. Once we
    1178         // implement grid-{column,row}-align, we can also shrink to fit. For
    1179         // now, just size as if we were a regular child.
     1182        // Stretching logic might force a child layout, so we need to run it before the layoutIfNeeded
     1183        // call to avoid unnecessary relayouts. This might imply that child margins, needed to correctly
     1184        // determine the available space before stretching, are not set yet.
     1185        applyStretchAlignmentToChildIfNeeded(*child, overrideContainingBlockContentLogicalHeight);
     1186
    11801187        child->layoutIfNeeded();
    11811188
     
    12341241}
    12351242
    1236 LayoutPoint RenderGrid::findChildLogicalPosition(RenderBox& child, const GridSizingData& sizingData)
     1243LayoutUnit RenderGrid::endOfRowForChild(const RenderBox& child) const
     1244{
     1245    const GridCoordinate& coordinate = cachedGridCoordinate(child);
     1246
     1247    LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
     1248    // The grid items should be inside the grid container's border box, that's why they need to be shifted.
     1249    LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
     1250
     1251    LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
     1252    // FIXME: This should account for the grid item's <overflow-position>.
     1253    return rowPosition + std::max<LayoutUnit>(0, endOfRow - startOfRow - child.logicalHeight());
     1254}
     1255
     1256LayoutUnit RenderGrid::startOfRowForChild(const RenderBox& child) const
     1257{
     1258    const GridCoordinate& coordinate = cachedGridCoordinate(child);
     1259
     1260    LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
     1261    // The grid items should be inside the grid container's border box, that's why they need to be shifted.
     1262    // FIXME: This should account for the grid item's <overflow-position>.
     1263    LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
     1264
     1265    return rowPosition;
     1266}
     1267
     1268LayoutUnit RenderGrid::centeredRowPositionForChild(const RenderBox& child) const
     1269{
     1270    const GridCoordinate& coordinate = cachedGridCoordinate(child);
     1271
     1272    // The grid items should be inside the grid container's border box, that's why they need to be shifted.
     1273    LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
     1274    LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
     1275    // FIXME: This should account for the grid item's <overflow-position>.
     1276    return startOfRow + std::max<LayoutUnit>(0, endOfRow - startOfRow - child.logicalHeight()) / 2;
     1277}
     1278
     1279bool RenderGrid::allowedToStretchLogicalHeightForChild(const RenderBox& child) const
     1280{
     1281    return child.style().logicalHeight().isAuto() && !child.style().marginBeforeUsing(&style()).isAuto() && !child.style().marginAfterUsing(&style()).isAuto();
     1282}
     1283
     1284// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
     1285bool RenderGrid::needToStretchChildLogicalHeight(const RenderBox& child) const
     1286{
     1287    if (RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch) != ItemPositionStretch)
     1288        return false;
     1289
     1290    return isHorizontalWritingMode() && child.style().height().isAuto();
     1291}
     1292
     1293// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
     1294LayoutUnit RenderGrid::marginLogicalHeightForChild(const RenderBox& child) const
     1295{
     1296    return isHorizontalWritingMode() ? child.verticalMarginExtent() : child.horizontalMarginExtent();
     1297}
     1298
     1299LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox& child) const
     1300{
     1301    return gridAreaBreadthForChild - marginLogicalHeightForChild(child);
     1302}
     1303
     1304// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
     1305void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child, LayoutUnit gridAreaBreadthForChild)
     1306{
     1307    if (RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch) != ItemPositionStretch)
     1308        return;
     1309
     1310    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     1311    if (allowedToStretchLogicalHeightForChild(child)) {
     1312        // FIXME: If the child has orthogonal flow, then it already has an override height set, so use it.
     1313        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
     1314        if (!hasOrthogonalWritingMode) {
     1315            LayoutUnit stretchedLogicalHeight = availableAlignmentSpaceForChildBeforeStretching(gridAreaBreadthForChild, child);
     1316            LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight);
     1317
     1318            // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
     1319            bool childNeedsRelayout = desiredLogicalHeight != child.logicalHeight();
     1320            if (childNeedsRelayout || !child.hasOverrideLogicalContentHeight())
     1321                child.setOverrideLogicalContentHeight(desiredLogicalHeight - child.borderAndPaddingLogicalHeight());
     1322            if (childNeedsRelayout) {
     1323                child.setLogicalHeight(0);
     1324                child.setNeedsLayout();
     1325            }
     1326        }
     1327    }
     1328}
     1329
     1330static GridAxisPosition columnAxisPosition(ItemPosition position, bool hasOrthogonalWritingMode, bool hasSameWritingMode)
     1331{
     1332    switch (position) {
     1333    case ItemPositionSelfStart:
     1334        // If orthogonal writing-modes, this computes to 'start'.
     1335        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
     1336        // self-start is based on the child's block axis direction. That's why we need to check against the grid container's block flow.
     1337        return (hasOrthogonalWritingMode || hasSameWritingMode) ? GridAxisStart : GridAxisEnd;
     1338    case ItemPositionSelfEnd:
     1339        // If orthogonal writing-modes, this computes to 'end'.
     1340        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
     1341        // self-end is based on the child's block axis direction. That's why we need to check against the grid container's block flow.
     1342        return (hasOrthogonalWritingMode || hasSameWritingMode) ? GridAxisEnd : GridAxisStart;
     1343    case ItemPositionLeft:
     1344        // The alignment axis (column axis) and the inline axis are parallell in
     1345        // orthogonal writing mode. Otherwise this this is equivalent to 'start'.
     1346        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
     1347        return GridAxisStart;
     1348    case ItemPositionRight:
     1349        // The alignment axis (column axis) and the inline axis are parallell in
     1350        // orthogonal writing mode. Otherwise this this is equivalent to 'start'.
     1351        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
     1352        return hasOrthogonalWritingMode ? GridAxisEnd : GridAxisStart;
     1353    case ItemPositionCenter:
     1354        return GridAxisCenter;
     1355    case ItemPositionFlexStart: // Only used in flex layout, otherwise equivalent to 'start'.
     1356    case ItemPositionStart:
     1357        return GridAxisStart;
     1358    case ItemPositionFlexEnd: // Only used in flex layout, otherwise equivalent to 'end'.
     1359    case ItemPositionEnd:
     1360        return GridAxisEnd;
     1361    case ItemPositionStretch:
     1362        return GridAxisStart;
     1363    case ItemPositionBaseline:
     1364    case ItemPositionLastBaseline:
     1365        // FIXME: Implement the ItemPositionBaseline value. For now, we always 'start' align the child.
     1366        return GridAxisStart;
     1367    case ItemPositionAuto:
     1368        break;
     1369    }
     1370
     1371    ASSERT_NOT_REACHED();
     1372    return GridAxisStart;
     1373}
     1374
     1375LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
     1376{
     1377    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     1378    bool hasSameWritingMode = child.style().writingMode() == style().writingMode();
     1379    ItemPosition position = RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch);
     1380
     1381    switch (columnAxisPosition(position, hasOrthogonalWritingMode, hasSameWritingMode)) {
     1382    case GridAxisStart:
     1383        return startOfRowForChild(child);
     1384    case GridAxisEnd:
     1385        return endOfRowForChild(child);
     1386    case GridAxisCenter:
     1387        return centeredRowPositionForChild(child);
     1388    }
     1389
     1390    ASSERT_NOT_REACHED();
     1391    return 0;
     1392}
     1393
     1394LayoutPoint RenderGrid::findChildLogicalPosition(const RenderBox& child, const GridSizingData& sizingData) const
    12371395{
    12381396    const GridCoordinate& coordinate = cachedGridCoordinate(child);
     
    12401398    ASSERT_UNUSED(sizingData, coordinate.rows.resolvedInitialPosition.toInt() < sizingData.rowTracks.size());
    12411399
     1400    LayoutUnit columnPosition = m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()] + marginStartForChild(child);
     1401    // We stored m_columnPositions's data ignoring the direction, hence we might need now
     1402    // to translate positions from RTL to LTR, as it's more convenient for painting.
     1403    if (!style().isLeftToRightDirection())
     1404        columnPosition = (m_columnPositions[m_columnPositions.size() - 1] + borderAndPaddingLogicalLeft()) - columnPosition  - child.logicalWidth();
     1405
    12421406    // The grid items should be inside the grid container's border box, that's why they need to be shifted.
    1243     return LayoutPoint(m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()] + marginStartForChild(child), m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()] + marginBeforeForChild(child));
     1407    return LayoutPoint(columnPosition, rowPositionForChild(child));
    12441408}
    12451409
  • trunk/Source/WebCore/rendering/RenderGrid.h

    r182780 r183370  
    118118    LayoutUnit minContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
    119119    LayoutUnit maxContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
    120     LayoutPoint findChildLogicalPosition(RenderBox&, const GridSizingData&);
     120    LayoutUnit startOfRowForChild(const RenderBox&) const;
     121    LayoutUnit endOfRowForChild(const RenderBox&) const;
     122    LayoutUnit centeredRowPositionForChild(const RenderBox&) const;
     123    LayoutUnit rowPositionForChild(const RenderBox&) const;
     124    LayoutPoint findChildLogicalPosition(const RenderBox&, const GridSizingData&) const;
    121125    GridCoordinate cachedGridCoordinate(const RenderBox&) const;
    122126
     
    124128
    125129    virtual void paintChildren(PaintInfo& forSelf, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect) override;
     130    bool allowedToStretchLogicalHeightForChild(const RenderBox&) const;
     131    bool needToStretchChildLogicalHeight(const RenderBox&) const;
     132    LayoutUnit marginLogicalHeightForChild(const RenderBox&) const;
     133    LayoutUnit computeMarginLogicalHeightForChild(const RenderBox&) const;
     134    LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const;
     135    void applyStretchAlignmentToChildIfNeeded(RenderBox&, LayoutUnit gridAreaBreadthForChild);
    126136
    127137#ifndef NDEBUG
Note: See TracChangeset for help on using the changeset viewer.