<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[199098] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/199098">199098</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2016-04-06 03:21:59 -0700 (Wed, 06 Apr 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Fix positioned children in RTL
https://bugs.webkit.org/show_bug.cgi?id=156162
Reviewed by Sergio Villar Senin.
Source/WebCore:
This patch fixes a problem affecting the items without
a static inline position (i.e. "left" and/or "right" properties
are not "auto"). In this particular case we need to compute
the "offset" from the left, so we need a specific condition
and computation.
Let's use an example to understand what it's fixing:
<div style="display: grid; grid-template-columns: 100px 50px; width: 300px;
position: relative; direction: rtl;">
<div style="position: absolute; left: 0; grid-column: 1 / 2;">item</div>
</div>
In this case the item has to be placed in the first column
(the one on the right as we're in RTL).
For this we need to calculate the offset from the left, which is 200px:
150px (alignment offset) + 50px (offset from line 3 to 2).
Test: fast/css-grid-layout/grid-positioned-items-background-rtl.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
LayoutTests:
Added more RTL cases for the positioned tests.
* fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt:
* fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
* fast/css-grid-layout/grid-positioned-items-background-rtl-expected.html: Added.
* fast/css-grid-layout/grid-positioned-items-background-rtl.html: Added.
* fast/css-grid-layout/grid-positioned-items-padding-expected.txt:
* fast/css-grid-layout/grid-positioned-items-padding.html:
* fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt:
* fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html:
* fast/css-grid-layout/grid-sizing-positioned-items-expected.txt:
* fast/css-grid-layout/grid-sizing-positioned-items.html:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainercontainingblockexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainercontainingblockhtml">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddingexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemswithingridimplicittrackexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemswithingridimplicittrackhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridsizingpositioneditemsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridsizingpositioneditemshtml">trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundrtlexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundrtlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/LayoutTests/ChangeLog 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -1,3 +1,23 @@
</span><ins>+2016-04-06 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Fix positioned children in RTL
+ https://bugs.webkit.org/show_bug.cgi?id=156162
+
+ Reviewed by Sergio Villar Senin.
+
+ Added more RTL cases for the positioned tests.
+
+ * fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt:
+ * fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
+ * fast/css-grid-layout/grid-positioned-items-background-rtl-expected.html: Added.
+ * fast/css-grid-layout/grid-positioned-items-background-rtl.html: Added.
+ * fast/css-grid-layout/grid-positioned-items-padding-expected.txt:
+ * fast/css-grid-layout/grid-positioned-items-padding.html:
+ * fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt:
+ * fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html:
+ * fast/css-grid-layout/grid-sizing-positioned-items-expected.txt:
+ * fast/css-grid-layout/grid-sizing-positioned-items.html:
+
</ins><span class="cx"> 2016-04-06 Antti Koivisto <antti@apple.com>
</span><span class="cx">
</span><span class="cx"> ComposedTreeIterator may crash when first child of shadow root is a comment node
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainercontainingblockexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -8,3 +8,5 @@
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><ins>+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainercontainingblockhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -293,5 +293,55 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<div class="grid directionRTL">
+ <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+ data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
+ </div>
+ <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+ data-offset-x="40" data-offset-y="95" data-expected-width="515" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+ data-offset-x="-50" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+ data-offset-x="-20" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+ data-offset-x="-50" data-offset-y="140" data-expected-width="465" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+ data-offset-x="25" data-offset-y="65" data-expected-width="365" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+ data-offset-x="-35" data-offset-y="105" data-expected-width="350" data-expected-height="350">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div>
+ <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+ data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
+ </div>
+ <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+ data-offset-x="40" data-offset-y="95" data-expected-width="515" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+ data-offset-x="-50" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+ data-offset-x="-20" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+ data-offset-x="-50" data-offset-y="140" data-expected-width="465" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+ data-offset-x="25" data-offset-y="65" data-expected-width="365" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+ data-offset-x="-35" data-offset-y="105" data-expected-width="350" data-expected-height="350">
+ </div>
+ </div>
+</div>
+
</ins><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundrtlexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl-expected.html (0 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl-expected.html 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+<!DOCTYPE html>
+<style>
+.grid {
+ width: 500px;
+ height: 300px;
+ border: 5px solid black;
+ margin: 30px;
+ padding: 15px;
+}
+
+.container {
+ position: relative;
+ float: left;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.green {
+ background-color: green;
+}
+</style>
+
+<p>This test checks that the background of positioned items is painted in the right position using RTL direction.</p>
+
+<p>The test passes if you see 4 green boxes and no red.</p>
+
+<div class="container">
+ <div class="grid"></div>
+ <div class="absolute green" style="left: 455px; top: 50px; width: 100px; height: 50px"></div>
+ <div class="absolute green" style="left: 390px; top: 50px; width: 50px; height: 20px"></div>
+ <div class="absolute green" style="left: 500px; top: 115px; width: 50px; height: 30px"></div>
+ <div class="absolute green" style="left: 275px; top: 135px; width: 145px; height: 75px"></div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundrtlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl.html (0 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl.html 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -0,0 +1,74 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+ -webkit-grid-template-columns: 100px 200px;
+ -webkit-grid-template-rows: 50px 150px;
+ width: 500px;
+ height: 300px;
+ border: 5px solid black;
+ margin: 30px;
+ padding: 15px;
+ /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+ position: relative;
+ background-color: transparent;
+}
+
+.container {
+ position: relative;
+ float: left;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.grid > div {
+ background-color: green;
+}
+
+.lengthSize {
+ width: 50px;
+ height: 20px;
+}
+
+.percentageSize {
+ width: 50%;
+ height: 20%;
+}
+
+.offsetsSize {
+ left: 25px;
+ right: 30px;
+ top: 35px;
+ bottom: 40px;
+}
+
+.red {
+ background-color: red;
+}
+</style>
+
+<p>This test checks that the background of positioned items is painted in the right position using RTL direction.</p>
+
+<p>The test passes if you see 4 green boxes and no red.</p>
+
+<div class="container">
+ <div class="absolute red" style="left: 455px; top: 50px; width: 100px; height: 50px"></div>
+ <div class="absolute red" style="left: 390px; top: 50px; width: 50px; height: 20px"></div>
+ <div class="absolute red" style="left: 500px; top: 115px; width: 50px; height: 30px"></div>
+ <div class="absolute red" style="left: 275px; top: 135px; width: 145px; height: 75px"></div>
+ <div class="grid directionRTL">
+ <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
+ style="left: 5px;">
+ </div>
+ <div class="absolute onlyFirstRowOnlySecondColumn lengthSize"
+ style="right: 10px;">
+ </div>
+ <div class="absolute onlySecondRowOnlyFirstColumn percentageSize"
+ style="top: 15px;">
+ </div>
+ <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddingexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -4,3 +4,7 @@
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><ins>+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -113,4 +113,88 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<div class="grid directionRTL">
+ <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
+ data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: auto / 1;"
+ data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: 1 / 2;"
+ data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
+ data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / auto;"
+ data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 2 / 3;"
+ data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="absolute" style="-webkit-grid-column: -5 / 1; -webkit-grid-row: -5 / 1;"
+ data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: -5 / 1;"
+ data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: -5 / 1; -webkit-grid-row: 1 / 2;"
+ data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / 5; -webkit-grid-row: 3 / 5;"
+ data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / 5;"
+ data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / 5; -webkit-grid-row: 2 / 3;"
+ data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="absolute" style="-webkit-grid-column: span 2 / 1; -webkit-grid-row: span 2 / 1;"
+ data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: span 2 / 1;"
+ data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: span 2 / 1; -webkit-grid-row: 1 / 2;"
+ data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / span 2; -webkit-grid-row: 3 / span 2;"
+ data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / span 2;"
+ data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / span 2; -webkit-grid-row: 2 / 3;"
+ data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="absolute" style="-webkit-grid-column: foo / 1; -webkit-grid-row: foo / 1;"
+ data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: foo / 1;"
+ data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: foo / 1; -webkit-grid-row: 1 / 2;"
+ data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / foo; -webkit-grid-row: 3 / foo;"
+ data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / foo;"
+ data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / foo; -webkit-grid-row: 2 / 3;"
+ data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+ </div>
+</div>
+
</ins><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemswithingridimplicittrackexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -8,3 +8,11 @@
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><ins>+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemswithingridimplicittrackhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -109,4 +109,76 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<div class="grid directionRTL">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
+ data-offset-x="615" data-offset-y="0" data-expected-width="215" data-expected-height="115">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="265">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
+ data-offset-x="0" data-offset-y="515" data-expected-width="115" data-expected-height="115">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="265" data-expected-width="415" data-expected-height="365">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: -4 / 1; -webkit-grid-row: -4 / 1;"
+ data-offset-x="615" data-offset-y="0" data-expected-width="215" data-expected-height="115">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: -4 / 2; -webkit-grid-row: -4 / 2;"
+ data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="265">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / 4; -webkit-grid-row: 3 / 4;"
+ data-offset-x="0" data-offset-y="515" data-expected-width="115" data-expected-height="115">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
+ data-offset-x="0" data-offset-y="265" data-expected-width="415" data-expected-height="365">
+ </div>
+</div>
+
</ins><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridsizingpositioneditemsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -7,3 +7,4 @@
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><ins>+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridsizingpositioneditemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -161,4 +161,21 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<div class="unconstrainedContainer">
+ <div class="grid directionRTL">
+ <div class="absolute autoRowAutoColumn offsets"
+ data-offset-x="5" data-offset-y="15" data-expected-width="1015" data-expected-height="995">
+ </div>
+ <div class="absolute secondRowSecondColumn offsets"
+ data-offset-x="5" data-offset-y="80" data-expected-width="900" data-expected-height="930">
+ </div>
+ <div class="absolute onlyFirstRowOnlyFirstColumn offsets"
+ data-offset-x="920" data-offset-y="30" data-expected-width="85" data-expected-height="15">
+ </div>
+ <div class="absolute endSecondRowEndSecondColumn offsets"
+ data-offset-x="720" data-offset-y="15" data-expected-width="300" data-expected-height="180">
+ </div>
+ </div>
+</div>
+
</ins><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/Source/WebCore/ChangeLog 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -1,3 +1,32 @@
</span><ins>+2016-04-06 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Fix positioned children in RTL
+ https://bugs.webkit.org/show_bug.cgi?id=156162
+
+ Reviewed by Sergio Villar Senin.
+
+ This patch fixes a problem affecting the items without
+ a static inline position (i.e. "left" and/or "right" properties
+ are not "auto"). In this particular case we need to compute
+ the "offset" from the left, so we need a specific condition
+ and computation.
+
+ Let's use an example to understand what it's fixing:
+ <div style="display: grid; grid-template-columns: 100px 50px; width: 300px;
+ position: relative; direction: rtl;">
+ <div style="position: absolute; left: 0; grid-column: 1 / 2;">item</div>
+ </div>
+
+ In this case the item has to be placed in the first column
+ (the one on the right as we're in RTL).
+ For this we need to calculate the offset from the left, which is 200px:
+ 150px (alignment offset) + 50px (offset from line 3 to 2).
+
+ Test: fast/css-grid-layout/grid-positioned-items-background-rtl.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
+
</ins><span class="cx"> 2016-04-06 Antti Koivisto <antti@apple.com>
</span><span class="cx">
</span><span class="cx"> ComposedTreeIterator may crash when first child of shadow root is a comment node
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (199097 => 199098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-04-06 09:27:22 UTC (rev 199097)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-04-06 10:21:59 UTC (rev 199098)
</span><span class="lines">@@ -1537,6 +1537,18 @@
</span><span class="cx"> breadth = end - start;
</span><span class="cx"> offset = start;
</span><span class="cx">
</span><ins>+ if (isRowAxis && !style().isLeftToRightDirection() && !child.style().hasStaticInlinePosition(child.isHorizontalWritingMode())) {
+ // If the child doesn't have a static inline position (i.e. "left" and/or "right" aren't "auto",
+ // we need to calculate the offset from the left (even if we're in RTL).
+ if (endIsAuto)
+ offset = LayoutUnit();
+ else {
+ LayoutUnit alignmentOffset = m_columnPositions[0] - borderAndPaddingStart();
+ LayoutUnit offsetFromLastLine = m_columnPositions[m_columnPositions.size() - 1] - m_columnPositions[endLine];
+ offset = paddingLeft() + alignmentOffset + offsetFromLastLine;
+ }
+ }
+
</ins><span class="cx"> if (child.parent() == this && !startIsAuto) {
</span><span class="cx"> // If column/row start is "auto" the static position has been already set in prepareChildForPositionedLayout().
</span><span class="cx"> RenderLayer* childLayer = child.layer();
</span></span></pre>
</div>
</div>
</body>
</html>