Source/WebCore/ChangeLog

 12016-03-29 Manuel Rego Casasnovas <rego@igalia.com>
 2
 3 [css-grid] Refactor positioned children code
 4 https://bugs.webkit.org/show_bug.cgi?id=155972
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 This is a refactoring of RenderGrid::offsetAndBreadthForPositionedChild()
 9 in order to calculate offset and breadth in a more clean way.
 10 Hopefully making the code easier to follow.
 11
 12 Thanks to the refactoring, now positioned children in RTL
 13 are working fine if they use the static inline position
 14 (when "left" and "right" properties are both "auto").
 15
 16 The other case (not having a static inline position)
 17 will be fixed in a separated patch.
 18
 19 * rendering/RenderGrid.cpp:
 20 (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
 21
1222016-03-29 Gyuyoung Kim <gyuyoung.kim@webkit.org>
223
324 Unreviewed EFL build fix caused by r198773

Source/WebCore/rendering/RenderGrid.cpp

@@void RenderGrid::offsetAndBreadthForPositionedChild(const RenderBox& child, Grid
15171517 || (endLine < firstExplicitLine)
15181518 || (endLine > lastExplicitLine);
15191519
1520  LayoutUnit start = startIsAuto ? LayoutUnit() : (isRowAxis ? m_columnPositions[startLine] : m_rowPositions[startLine]);
1521  LayoutUnit end = endIsAuto ? (isRowAxis ? logicalWidth() : logicalHeight()) : (isRowAxis ? m_columnPositions[endLine] : m_rowPositions[endLine]);
1522 
1523  breadth = end - start;
1524 
1525  if (startIsAuto)
1526  breadth -= isRowAxis ? borderStart() : borderBefore();
1527  else
1528  start -= isRowAxis ? borderStart() : borderBefore();
 1520 // We're normalizing the positions to avoid issues with RTL (as they're stored in the same order than LTR but adding an offset).
 1521 LayoutUnit start;
 1522 if (!startIsAuto) {
 1523 if (isRowAxis)
 1524 start = m_columnPositions[startLine] - m_columnPositions[0] + paddingStart();
 1525 else
 1526 start = m_rowPositions[startLine] - m_rowPositions[0] + paddingBefore();
 1527 }
15291528
1530  if (endIsAuto) {
1531  breadth -= isRowAxis ? borderEnd() : borderAfter();
1532  breadth -= scrollbarLogicalWidth();
 1529 LayoutUnit end = isRowAxis ? clientLogicalWidth() : clientLogicalHeight();
 1530 if (!endIsAuto) {
 1531 if (isRowAxis)
 1532 end = m_columnPositions[endLine] - m_columnPositions[0] + paddingStart();
 1533 else
 1534 end = m_rowPositions[endLine] - m_rowPositions[0] + paddingBefore();
15331535 }
15341536
 1537 breadth = end - start;
15351538 offset = start;
15361539
15371540 if (child.parent() == this && !startIsAuto) {

LayoutTests/ChangeLog

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

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

@@PASS
55PASS
66PASS
77PASS
 8PASS
 9PASS
 10PASS

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

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

LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt

@@PASS
66PASS
77PASS
88PASS
 9PASS
 10PASS
 11PASS
 12PASS
 13PASS
 14PASS

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

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

LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html

22<html>
33<style>
44.grid {
5  width: 400px;
 5 width: 500px;
66 height: 300px;
77 border: 5px solid black;
88 margin: 30px;
99 padding: 15px;
10  background-color: grey;
1110}
1211
1312.container {

LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html

66.grid {
77 -webkit-grid-template-columns: 100px 200px;
88 -webkit-grid-template-rows: 50px 150px;
9  width: 400px;
 9 width: 500px;
1010 height: 300px;
1111 border: 5px solid black;
1212 margin: 30px;
1313 padding: 15px;
1414 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
1515 position: relative;
 16 background-color: transparent;
1617}
1718
1819.container {

LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt

@@This test checks the behavior of the absolutely positioned grid items placed on
22
33PASS
44PASS
 5PASS
 6PASS

LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt

@@This test checks that grid placement properties of absolutely positioned items u
22
33PASS
44PASS
 5PASS
 6PASS

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

6666 </div>
6767</div>
6868
 69<div class="grid directionRTL">
 70 <div class="absolute sizedToGridArea startImplicitLine"
 71 data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
 72 </div>
 73 <div class="absolute sizedToGridArea endImplicitLine"
 74 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
 75 </div>
 76</div>
 77
 78<div class="grid directionRTL">
 79 <div class="absolute sizedToGridArea startImplicitLineSpan"
 80 data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
 81 </div>
 82 <div class="absolute sizedToGridArea endImplicitLineSpan"
 83 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
 84 </div>
 85</div>
 86
6987</body>

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

5252 </div>
5353</div>
5454
 55<div class="grid directionRTL">
 56 <div class="sizedToGridArea absolute secondRowSecondColumn"
 57 data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
 58 </div>
 59 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
 60 data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
 61 </div>
 62 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
 63 data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
 64 </div>
 65</div>
 66
 67<div class="grid grid-columns-rows directionRTL">
 68 <div class="sizedToGridArea absolute secondRowSecondColumn"
 69 data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165">
 70 </div>
 71 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
 72 data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
 73 </div>
 74 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
 75 data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165">
 76 </div>
 77</div>
 78
5579</body>
5680</html>

LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt

11This test checks that grid placement properties of absolutely positioned items using unknown named grid lines are treated as "auto".
22
33PASS
 4PASS

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

5454 </div>
5555</div>
5656
 57<div class="grid directionRTL">
 58 <div class="absolute sizedToGridArea startAndEndUnknownLines"
 59 data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
 60 </div>
 61 <div class="absolute sizedToGridArea endUnknownLine"
 62 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
 63 </div>
 64 <div class="absolute sizedToGridArea startUnknownLine"
 65 data-offset-x="200" data-offset-y="15" data-expected-width="315" data-expected-height="215">
 66 </div>
 67</div>
 68
5769</body>

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

@@PASS
44PASS
55PASS
66PASS
 7PASS
 8PASS
 9PASS

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

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