<!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>[203771] 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/203771">203771</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2016-07-27 03:07:19 -0700 (Wed, 27 Jul 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Handle alignment with orthogonal flows
https://bugs.webkit.org/show_bug.cgi?id=159295
Reviewed by Darin Adler.
Now that grid sizing and positioning issues wrt orthogonal flows have
been clarified in the last spec draft, we can adapt now our alignment
logic to work with orthogonal flows.
Source/WebCore:
Even though basic alignment would work with orthogonal flows with
this patch, we still doesn't allow stretching in that case. I'll provide a
patch for that feature since it's a complex logic and better have an
isolated change.
Tests: fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html
* rendering/RenderGrid.cpp:
(WebCore::computeOverflowAlignmentOffset): Using 'size' instead of 'breadth' as concept.
(WebCore::RenderGrid::columnAxisPositionForChild): Dealing with orthogonal flow cases.
(WebCore::RenderGrid::rowAxisPositionForChild): Dealing with orthogonal flow cases.
(WebCore::RenderGrid::columnAxisOffsetForChild): Using 'size' instead of 'breadth' as concept.
(WebCore::RenderGrid::rowAxisOffsetForChild): Using 'size' instead of 'breadth' as concept.
(WebCore::RenderGrid::findChildLogicalPosition): Dealing with orthogonal flow cases.
LayoutTests:
These tests ensure that alignment works as expected in the cases where
grid and its children are orthogonal.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt: Added.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt: Added.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html: Added.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt: Added.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html: Added.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html: Added.
* fast/css-grid-layout/resources/grid-alignment.css:
(.alignContentSpaceBetween):
(.alignContentSpaceAround):
(.alignContentSpaceEvenly):
(.alignContentStretch):
(.selfStart):
(.selfEnd):
(.selfCenter):
(.selfRight):
(.selfLeft):
(.selfSelfStart):
(.selfSelfEnd):
(.itemsSelfEnd): Deleted.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridalignmentcss">trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css</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="#trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowsverticallrexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowsverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowsverticalrlexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowsverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowshtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (203770 => 203771)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-07-27 07:42:16 UTC (rev 203770)
+++ trunk/LayoutTests/ChangeLog 2016-07-27 10:07:19 UTC (rev 203771)
</span><span class="lines">@@ -1,3 +1,37 @@
</span><ins>+2016-07-27 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid] Handle alignment with orthogonal flows
+ https://bugs.webkit.org/show_bug.cgi?id=159295
+
+ Reviewed by Darin Adler.
+
+ Now that grid sizing and positioning issues wrt orthogonal flows have
+ been clarified in the last spec draft, we can adapt now our alignment
+ logic to work with orthogonal flows.
+
+ These tests ensure that alignment works as expected in the cases where
+ grid and its children are orthogonal.
+
+ * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt: Added.
+ * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt: Added.
+ * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html: Added.
+ * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt: Added.
+ * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html: Added.
+ * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html: Added.
+ * fast/css-grid-layout/resources/grid-alignment.css:
+ (.alignContentSpaceBetween):
+ (.alignContentSpaceAround):
+ (.alignContentSpaceEvenly):
+ (.alignContentStretch):
+ (.selfStart):
+ (.selfEnd):
+ (.selfCenter):
+ (.selfRight):
+ (.selfLeft):
+ (.selfSelfStart):
+ (.selfSelfEnd):
+ (.itemsSelfEnd): Deleted.
+
</ins><span class="cx"> 2016-07-26 Youenn Fablet <youennf@gmail.com>
</span><span class="cx">
</span><span class="cx"> JS Built-ins should throw this-error messages consistently with binding generated code
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt (0 => 203771)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt 2016-07-27 10:07:19 UTC (rev 203771)
</span><span class="lines">@@ -0,0 +1,97 @@
</span><ins>+This test checks that grid items alignment works as expected with HORIZONTAL-TB vs VERTICAL-RL orthogonal flows.
+
+Orthogonal flows: HORIZONTAL-TB vs VERTICAL-RL
+
+Direction: LTR vs LTR
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: RTL vs LTR
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: LTR vs RTL
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: RTL vs RTL
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Orthogonal flows: HORIZONTAL-TB vs VERTICAL-LR
+
+Direction: LTR vs LTR
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: RTL vs LTR
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: RTL vs RTL
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowsverticallrexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt (0 => 203771)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt 2016-07-27 10:07:19 UTC (rev 203771)
</span><span class="lines">@@ -0,0 +1,54 @@
</span><ins>+This test checks that grid items alignment works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.
+
+Direction: LTR vs LTR
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: RTL vs LTR
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: LTR vs RTL
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: RTL vs RTL
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowsverticallrhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html (0 => 203771)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html 2016-07-27 10:07:19 UTC (rev 203771)
</span><span class="lines">@@ -0,0 +1,102 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+ margin: 0;
+}
+.container {
+ position: relative;
+}
+.grid {
+ grid-template-columns: 100px 100px;
+ grid-template-rows: 150px 150px;
+ font-size: 10px;
+}
+.item {
+ width: 50px;
+ height: 20px;
+}
+</style>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that grid items alignment works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.</p>
+
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+ <div class="grid fit-content verticalLR directionLTR">
+ <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="100" data-offset-y="80">end</div>
+ <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="50" data-offset-y="140">center</div>
+ <div class="item secondRowFirstColumn horizontalTB selfLeft" data-offset-x="150" data-offset-y="0">left</div>
+ <div class="item secondRowSecondColumn horizontalTB selfRight" data-offset-x="150" data-offset-y="180">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content verticalLR directionLTR">
+ <div class="item firstRowFirstColumn horizontalTB selfSelfEnd" data-offset-x="100" data-offset-y="80">s-end</div>
+ <div class="item firstRowSecondColumn horizontalTB selfStart" data-offset-x="0" data-offset-y="100">start</div>
+ <div class="item secondRowFirstColumn horizontalTB" data-offset-x="150" data-offset-y="0">default</div>
+ <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="150" data-offset-y="100">s-start</div>
+ </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+ <div class="grid fit-content verticalLR directionRTL">
+ <div class="item firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="100" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn directionLTR horizontalTB selfCenter" data-offset-x="50" data-offset-y="40">center</div>
+ <div class="item secondRowFirstColumn directionLTR horizontalTB selfLeft" data-offset-x="150" data-offset-y="100">left</div>
+ <div class="item secondRowSecondColumn directionLTR horizontalTB selfRight" data-offset-x="150" data-offset-y="80">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content verticalLR directionRTL">
+ <div class="item firstRowFirstColumn directionLTR horizontalTB selfSelfEnd" data-offset-x="100" data-offset-y="180">s-end</div>
+ <div class="item firstRowSecondColumn directionLTR horizontalTB selfStart" data-offset-x="0" data-offset-y="80">start</div>
+ <div class="item secondRowFirstColumn directionLTR horizontalTB" data-offset-x="150" data-offset-y="180">default</div>
+ <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfStart" data-offset-x="150" data-offset-y="0">s-start</div>
+ </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+ <div class="grid fit-content verticalLR directionLTR">
+ <div class="item firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="100" data-offset-y="80">end</div>
+ <div class="item firstRowSecondColumn directionRTL horizontalTB selfCenter" data-offset-x="50" data-offset-y="140">center</div>
+ <div class="item secondRowFirstColumn directionRTL horizontalTB selfLeft" data-offset-x="150" data-offset-y="0">left</div>
+ <div class="item secondRowSecondColumn directionRTL horizontalTB selfRight" data-offset-x="150" data-offset-y="180">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content verticalLR directionLTR">
+ <div class="item firstRowFirstColumn directionRTL horizontalTB selfSelfEnd" data-offset-x="0" data-offset-y="80">s-end</div>
+ <div class="item firstRowSecondColumn directionRTL horizontalTB selfStart" data-offset-x="0" data-offset-y="100">start</div>
+ <div class="item secondRowFirstColumn directionRTL horizontalTB" data-offset-x="150" data-offset-y="0">default</div>
+ <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfStart" data-offset-x="250" data-offset-y="100">s-start</div>
+ </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+ <div class="grid fit-content verticalLR directionRTL">
+ <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="100" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="50" data-offset-y="40">center</div>
+ <div class="item secondRowFirstColumn horizontalTB selfLeft" data-offset-x="150" data-offset-y="100">left</div>
+ <div class="item secondRowSecondColumn horizontalTB selfRight" data-offset-x="150" data-offset-y="80">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content verticalLR directionRTL">
+ <div class="item firstRowFirstColumn horizontalTB selfSelfEnd" data-offset-x="0" data-offset-y="180">s-end</div>
+ <div class="item firstRowSecondColumn horizontalTB selfStart" data-offset-x="0" data-offset-y="80">start</div>
+ <div class="item secondRowFirstColumn horizontalTB" data-offset-x="150" data-offset-y="180">default</div>
+ <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="250" data-offset-y="0">s-start</div>
+ </div>
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowsverticalrlexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt (0 => 203771)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt 2016-07-27 10:07:19 UTC (rev 203771)
</span><span class="lines">@@ -0,0 +1,54 @@
</span><ins>+This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.
+
+Direction: LTR vs LTR
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: RTL vs LTR
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: LTR vs RTL
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
+Direction: RTL vs RTL
+
+end
+center
+left
+right
+PASS
+
+s-end
+start
+default
+s-start
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowsverticalrlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html (0 => 203771)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html 2016-07-27 10:07:19 UTC (rev 203771)
</span><span class="lines">@@ -0,0 +1,103 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+ margin: 0;
+}
+.container {
+ position: relative;
+}
+.grid {
+ grid-template-columns: 100px 100px;
+ grid-template-rows: 150px 150px;
+ font-size: 10px;
+}
+.item {
+ width: 50px;
+ height: 20px;
+}
+</style>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.</p>
+
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+ <div class="grid fit-content verticalRL directionLTR">
+ <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="150" data-offset-y="80">end</div>
+ <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="200" data-offset-y="140">center</div>
+ <div class="item secondRowFirstColumn horizontalTB selfLeft" data-offset-x="100" data-offset-y="0">left</div>
+ <div class="item secondRowSecondColumn horizontalTB selfRight" data-offset-x="100" data-offset-y="180">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content verticalRL directionLTR">
+ <div class="item firstRowFirstColumn horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="80">s-end</div>
+ <div class="item firstRowSecondColumn horizontalTB selfStart" data-offset-x="250" data-offset-y="100">start</div>
+ <div class="item secondRowFirstColumn horizontalTB" data-offset-x="100" data-offset-y="0">default</div>
+ <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="0" data-offset-y="100">s-start</div>
+ </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+ <div class="grid fit-content verticalRL directionRTL">
+ <div class="item firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="150" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn directionLTR horizontalTB selfCenter" data-offset-x="200" data-offset-y="40">center</div>
+ <div class="item secondRowFirstColumn directionLTR horizontalTB selfLeft" data-offset-x="100" data-offset-y="100">left</div>
+ <div class="item secondRowSecondColumn directionLTR horizontalTB selfRight" data-offset-x="100" data-offset-y="80">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content verticalRL directionRTL">
+ <div class="item firstRowFirstColumn directionLTR horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="180">s-end</div>
+ <div class="item firstRowSecondColumn directionLTR horizontalTB selfStart" data-offset-x="250" data-offset-y="80">start</div>
+ <div class="item secondRowFirstColumn directionLTR horizontalTB" data-offset-x="100" data-offset-y="180">default</div>
+ <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfStart" data-offset-x="0" data-offset-y="0">s-start</div>
+ </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+ <div class="grid fit-content verticalRL directionLTR">
+ <div class="item firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="150" data-offset-y="80">end</div>
+ <div class="item firstRowSecondColumn directionRTL horizontalTB selfCenter" data-offset-x="200" data-offset-y="140">center</div>
+ <div class="item secondRowFirstColumn directionRTL horizontalTB selfLeft" data-offset-x="100" data-offset-y="0">left</div>
+ <div class="item secondRowSecondColumn directionRTL horizontalTB selfRight" data-offset-x="100" data-offset-y="180">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content verticalRL directionLTR">
+ <div class="item firstRowFirstColumn directionRTL horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="80">s-end</div>
+ <div class="item firstRowSecondColumn directionRTL horizontalTB selfStart" data-offset-x="250" data-offset-y="100">start</div>
+ <div class="item secondRowFirstColumn directionRTL horizontalTB" data-offset-x="100" data-offset-y="0">default</div>
+ <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="100">s-start</div>
+ </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+ <div class="grid fit-content verticalRL directionRTL">
+ <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="150" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="200" data-offset-y="40">center</div>
+ <div class="item secondRowFirstColumn horizontalTB selfLeft" data-offset-x="100" data-offset-y="100">left</div>
+ <div class="item secondRowSecondColumn horizontalTB selfRight" data-offset-x="100" data-offset-y="80">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content verticalRL directionRTL">
+ <div class="item firstRowFirstColumn horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="180">s-end</div>
+ <div class="item firstRowSecondColumn horizontalTB selfStart" data-offset-x="250" data-offset-y="80">start</div>
+ <div class="item secondRowFirstColumn horizontalTB" data-offset-x="100" data-offset-y="180">default</div>
+ <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="0">s-start</div>
+ </div>
+</div>
+
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemalignmentwithorthogonalflowshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html (0 => 203771)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html 2016-07-27 10:07:19 UTC (rev 203771)
</span><span class="lines">@@ -0,0 +1,162 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+ margin: 0;
+}
+.container {
+ position: relative;
+}
+.grid {
+ grid-template-columns: 100px 100px;
+ grid-template-rows: 150px 150px;
+ font-size: 10px;
+}
+.item {
+ width: 20px;
+ height: 50px;
+}
+</style>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+<p>This test checks that grid items alignment works as expected with HORIZONTAL-TB vs VERTICAL-RL orthogonal flows.</p>
+
+<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-RL</p>
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+ <div class="grid fit-content directionLTR">
+ <div class="item firstRowFirstColumn verticalRL selfEnd" data-offset-x="80" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn verticalRL selfCenter" data-offset-x="140" data-offset-y="50">center</div>
+ <div class="item secondRowFirstColumn verticalRL selfLeft" data-offset-x="0" data-offset-y="150">left</div>
+ <div class="item secondRowSecondColumn verticalRL selfRight" data-offset-x="180" data-offset-y="150">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content directionLTR">
+ <div class="item firstRowFirstColumn verticalRL selfSelfEnd" data-offset-x="0" data-offset-y="100">s-end</div>
+ <div class="item firstRowSecondColumn verticalRL selfStart" data-offset-x="100" data-offset-y="0">start</div>
+ <div class="item secondRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="150">default</div>
+ <div class="item secondRowSecondColumn verticalRL selfSelfStart" data-offset-x="180" data-offset-y="150">s-start</div>
+ </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+ <div class="grid fit-content directionRTL">
+ <div class="item firstRowFirstColumn directionLTR verticalRL selfEnd" data-offset-x="100" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn directionLTR verticalRL selfCenter" data-offset-x="40" data-offset-y="50">center</div>
+ <div class="item secondRowFirstColumn directionLTR verticalRL selfLeft" data-offset-x="100" data-offset-y="150">left</div>
+ <div class="item secondRowSecondColumn directionLTR verticalRL selfRight" data-offset-x="80" data-offset-y="150">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content directionRTL">
+ <div class="item firstRowFirstColumn directionLTR verticalRL selfSelfEnd" data-offset-x="100" data-offset-y="100">s-end</div>
+ <div class="item firstRowSecondColumn directionLTR verticalRL selfStart" data-offset-x="80" data-offset-y="0">start</div>
+ <div class="item secondRowFirstColumn directionLTR verticalRL" data-offset-x="180" data-offset-y="150">default</div>
+ <div class="item secondRowSecondColumn directionLTR verticalRL selfSelfStart" data-offset-x="80" data-offset-y="150">s-start</div>
+ </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+ <div class="grid fit-content directionLTR">
+ <div class="item firstRowFirstColumn directionRTL verticalRL selfEnd" data-offset-x="80" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn directionRTL verticalRL selfCenter" data-offset-x="140" data-offset-y="50">center</div>
+ <div class="item secondRowFirstColumn directionRTL verticalRL selfLeft" data-offset-x="0" data-offset-y="150">left</div>
+ <div class="item secondRowSecondColumn directionRTL verticalRL selfRight" data-offset-x="180" data-offset-y="150">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content directionLTR">
+ <div class="item firstRowFirstColumn directionRTL verticalRL selfSelfEnd" data-offset-x="0" data-offset-y="0">s-end</div>
+ <div class="item firstRowSecondColumn directionRTL verticalRL selfStart" data-offset-x="100" data-offset-y="0">start</div>
+ <div class="item secondRowFirstColumn directionRTL verticalRL" data-offset-x="0" data-offset-y="150">default</div>
+ <div class="item secondRowSecondColumn directionRTL verticalRL selfSelfStart" data-offset-x="180" data-offset-y="250">s-start</div>
+ </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+ <div class="grid fit-content directionRTL">
+ <div class="item firstRowFirstColumn verticalRL selfEnd" data-offset-x="100" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn verticalRL selfCenter" data-offset-x="40" data-offset-y="50">center</div>
+ <div class="item secondRowFirstColumn verticalRL selfLeft" data-offset-x="100" data-offset-y="150">left</div>
+ <div class="item secondRowSecondColumn verticalRL selfRight" data-offset-x="80" data-offset-y="150">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content directionRTL">
+ <div class="item firstRowFirstColumn verticalRL selfSelfEnd" data-offset-x="100" data-offset-y="0">s-end</div>
+ <div class="item firstRowSecondColumn verticalRL selfStart" data-offset-x="80" data-offset-y="0">start</div>
+ <div class="item secondRowFirstColumn verticalRL" data-offset-x="180" data-offset-y="150">default</div>
+ <div class="item secondRowSecondColumn verticalRL selfSelfStart" data-offset-x="80" data-offset-y="250">s-start</div>
+ </div>
+</div>
+
+<!-- HORIZONTAL-TB vs VERTICAL-LR -->
+<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-LR</p>
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+ <div class="grid fit-content drectionLTR">
+ <div class="item firstRowFirstColumn verticalLR selfEnd" data-offset-x="80" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn verticalLR selfCenter" data-offset-x="140" data-offset-y="50">center</div>
+ <div class="item secondRowFirstColumn verticalLR selfLeft" data-offset-x="0" data-offset-y="150">left</div>
+ <div class="item secondRowSecondColumn verticalLR selfRight" data-offset-x="180" data-offset-y="150">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content drectionLTR">
+ <div class="item firstRowFirstColumn verticalLR selfSelfEnd" data-offset-x="80" data-offset-y="100">s-end</div>
+ <div class="item firstRowSecondColumn verticalLR selfStart" data-offset-x="100" data-offset-y="0">start</div>
+ <div class="item secondRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="150">default</div>
+ <div class="item secondRowSecondColumn verticalLR selfSelfStart" data-offset-x="100" data-offset-y="150">s-start</div>
+ </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+ <div class="grid fit-content directionRTL">
+ <div class="item firstRowFirstColumn directionLTR verticalLR selfEnd" data-offset-x="100" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn directionLTR verticalLR selfCenter" data-offset-x="40" data-offset-y="50">center</div>
+ <div class="item secondRowFirstColumn directionLTR verticalLR selfLeft" data-offset-x="100" data-offset-y="150">left</div>
+ <div class="item secondRowSecondColumn directionLTR verticalLR selfRight" data-offset-x="80" data-offset-y="150">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content directionRTL">
+ <div class="item firstRowFirstColumn directionLTR verticalLR selfSelfEnd" data-offset-x="180" data-offset-y="100">s-end</div>
+ <div class="item firstRowSecondColumn directionLTR verticalLR selfStart" data-offset-x="80" data-offset-y="0">start</div>
+ <div class="item secondRowFirstColumn directionLTR verticalLR" data-offset-x="180" data-offset-y="150">default</div>
+ <div class="item secondRowSecondColumn directionLTR verticalLR selfSelfStart" data-offset-x="0" data-offset-y="150">s-start</div>
+ </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+ <div class="grid fit-content directionRTL">
+ <div class="item firstRowFirstColumn verticalLR selfEnd" data-offset-x="100" data-offset-y="100">end</div>
+ <div class="item firstRowSecondColumn verticalLR selfCenter" data-offset-x="40" data-offset-y="50">center</div>
+ <div class="item secondRowFirstColumn verticalLR selfLeft" data-offset-x="100" data-offset-y="150">left</div>
+ <div class="item secondRowSecondColumn verticalLR selfRight" data-offset-x="80" data-offset-y="150">right</div>
+ </div>
+</div>
+<br>
+<div class="container">
+ <div class="grid fit-content directionRTL">
+ <div class="item firstRowFirstColumn verticalLR selfSelfEnd" data-offset-x="180" data-offset-y="0">s-end</div>
+ <div class="item firstRowSecondColumn verticalLR selfStart" data-offset-x="80" data-offset-y="0">start</div>
+ <div class="item secondRowFirstColumn verticalLR" data-offset-x="180" data-offset-y="150">default</div>
+ <div class="item secondRowSecondColumn verticalLR selfSelfStart" data-offset-x="0" data-offset-y="250">s-start</div>
+ </div>
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridalignmentcss"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css (203770 => 203771)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2016-07-27 07:42:16 UTC (rev 203770)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2016-07-27 10:07:19 UTC (rev 203771)
</span><span class="lines">@@ -40,6 +40,10 @@
</span><span class="cx"> .alignContentRight { align-content: right; }
</span><span class="cx"> .alignContentFlexStart { align-content: flex-start; }
</span><span class="cx"> .alignContentFlexEnd { align-content: flex-end; }
</span><ins>+.alignContentSpaceBetween { align-content: space-between; }
+.alignContentSpaceAround { align-content: space-around; }
+.alignContentSpaceEvenly { align-content: space-evenly; }
+.alignContentStretch { align-content: stretch; }
</ins><span class="cx">
</span><span class="cx"> /* justify-self */
</span><span class="cx"> .justifySelfAuto { justify-self: auto; }
</span><span class="lines">@@ -91,6 +95,7 @@
</span><span class="cx"> align-items: start;
</span><span class="cx"> justify-items: start;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .itemsCenter {
</span><span class="cx"> align-items: center;
</span><span class="cx"> justify-items: center;
</span><span class="lines">@@ -121,16 +126,39 @@
</span><span class="cx"> justify-items: self-end;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.stretch {
- align-self: stretch;
- justify-self: stretch;
-}
-
</del><span class="cx"> /* Both align-self and justify-self */
</span><span class="cx"> .selfStretch {
</span><span class="cx"> align-self: stretch;
</span><span class="cx"> justify-self: stretch;
</span><span class="cx"> }
</span><ins>+.selfStart {
+ align-self: start;
+ justify-self: start;
+}
+.selfEnd {
+ align-self: end;
+ justify-self: end;
+}
+.selfCenter {
+ align-self: center;
+ justify-self: center;
+}
+.selfRight {
+ align-self: right;
+ justify-self: right;
+}
+.selfLeft {
+ align-self: left;
+ justify-self: left;
+}
+.selfSelfStart {
+ align-self: self-start;
+ justify-self: self-start;
+}
+.selfSelfEnd {
+ align-self: self-end;
+ justify-self: self-end;
+}
</ins><span class="cx">
</span><span class="cx"> /* Both align-content and justify-content */
</span><span class="cx"> .contentStart {
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (203770 => 203771)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-07-27 07:42:16 UTC (rev 203770)
+++ trunk/Source/WebCore/ChangeLog 2016-07-27 10:07:19 UTC (rev 203771)
</span><span class="lines">@@ -1,3 +1,31 @@
</span><ins>+2016-07-27 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid] Handle alignment with orthogonal flows
+ https://bugs.webkit.org/show_bug.cgi?id=159295
+
+ Reviewed by Darin Adler.
+
+ Now that grid sizing and positioning issues wrt orthogonal flows have
+ been clarified in the last spec draft, we can adapt now our alignment
+ logic to work with orthogonal flows.
+
+ Even though basic alignment would work with orthogonal flows with
+ this patch, we still doesn't allow stretching in that case. I'll provide a
+ patch for that feature since it's a complex logic and better have an
+ isolated change.
+
+ Tests: fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
+ fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
+ fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::computeOverflowAlignmentOffset): Using 'size' instead of 'breadth' as concept.
+ (WebCore::RenderGrid::columnAxisPositionForChild): Dealing with orthogonal flow cases.
+ (WebCore::RenderGrid::rowAxisPositionForChild): Dealing with orthogonal flow cases.
+ (WebCore::RenderGrid::columnAxisOffsetForChild): Using 'size' instead of 'breadth' as concept.
+ (WebCore::RenderGrid::rowAxisOffsetForChild): Using 'size' instead of 'breadth' as concept.
+ (WebCore::RenderGrid::findChildLogicalPosition): Dealing with orthogonal flow cases.
+
</ins><span class="cx"> 2016-07-26 Youenn Fablet <youenn@apple.com>
</span><span class="cx">
</span><span class="cx"> [Fetch API] Response constructor should be able to take a ReadableStream as body
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (203770 => 203771)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-07-27 07:42:16 UTC (rev 203770)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-07-27 10:07:19 UTC (rev 203771)
</span><span class="lines">@@ -2112,9 +2112,9 @@
</span><span class="cx"> offsetBetweenTracks = offset.distributionOffset;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static inline LayoutUnit computeOverflowAlignmentOffset(OverflowAlignment overflow, LayoutUnit trackBreadth, LayoutUnit childBreadth)
</del><ins>+static LayoutUnit computeOverflowAlignmentOffset(OverflowAlignment overflow, LayoutUnit trackSize, LayoutUnit childSize)
</ins><span class="cx"> {
</span><del>- LayoutUnit offset = trackBreadth - childBreadth;
</del><ins>+ LayoutUnit offset = trackSize - childSize;
</ins><span class="cx"> switch (overflow) {
</span><span class="cx"> case OverflowAlignmentSafe:
</span><span class="cx"> // If overflow is 'safe', we have to make sure we don't overflow the 'start'
</span><span class="lines">@@ -2263,34 +2263,51 @@
</span><span class="cx"> GridAxisPosition RenderGrid::columnAxisPositionForChild(const RenderBox& child) const
</span><span class="cx"> {
</span><span class="cx"> bool hasSameWritingMode = child.style().writingMode() == style().writingMode();
</span><ins>+ bool childIsLTR = child.style().isLeftToRightDirection();
</ins><span class="cx">
</span><span class="cx"> switch (child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior).position()) {
</span><span class="cx"> case ItemPositionSelfStart:
</span><del>- // If orthogonal writing-modes, this computes to 'start'.
- // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
- // 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.
- return (isOrthogonalChild(child) || hasSameWritingMode) ? GridAxisStart : GridAxisEnd;
</del><ins>+ // FIXME: Should we implement this logic in a generic utility function ?
+ // Aligns the alignment subject to be flush with the edge of the alignment container
+ // corresponding to the alignment subject's 'start' side in the column axis.
+ if (isOrthogonalChild(child)) {
+ // If orthogonal writing-modes, self-start will be based on the child's inline-axis
+ // direction (inline-start), because it's the one parallel to the column axis.
+ if (style().isFlippedBlocksWritingMode())
+ return childIsLTR ? GridAxisEnd : GridAxisStart;
+ return childIsLTR ? GridAxisStart : GridAxisEnd;
+ }
+ // self-start is based on the child's block-flow direction. That's why we need to check against the grid container's block-flow direction.
+ return hasSameWritingMode ? GridAxisStart : GridAxisEnd;
</ins><span class="cx"> case ItemPositionSelfEnd:
</span><del>- // If orthogonal writing-modes, this computes to 'end'.
- // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
- // 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.
- return (isOrthogonalChild(child) || hasSameWritingMode) ? GridAxisEnd : GridAxisStart;
</del><ins>+ // FIXME: Should we implement this logic in a generic utility function ?
+ // Aligns the alignment subject to be flush with the edge of the alignment container
+ // corresponding to the alignment subject's 'end' side in the column axis.
+ if (isOrthogonalChild(child)) {
+ // If orthogonal writing-modes, self-end will be based on the child's inline-axis
+ // direction, (inline-end) because it's the one parallel to the column axis.
+ if (style().isFlippedBlocksWritingMode())
+ return childIsLTR ? GridAxisStart : GridAxisEnd;
+ return childIsLTR ? GridAxisEnd : GridAxisStart;
+ }
+ // self-end is based on the child's block-flow direction. That's why we need to check against the grid container's block-flow direction.
+ return hasSameWritingMode ? GridAxisEnd : GridAxisStart;
</ins><span class="cx"> case ItemPositionLeft:
</span><del>- // The alignment axis (column axis) and the inline axis are parallell in
- // orthogonal writing mode. Otherwise this this is equivalent to 'start'.
- // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
</del><ins>+ // Aligns the alignment subject to be flush with the alignment container's 'line-left' edge.
+ // The alignment axis (column axis) is always orthogonal to the inline axis, hence this value behaves as 'start'.
</ins><span class="cx"> return GridAxisStart;
</span><span class="cx"> case ItemPositionRight:
</span><del>- // The alignment axis (column axis) and the inline axis are parallell in
- // orthogonal writing mode. Otherwise this this is equivalent to 'start'.
- // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
- return isOrthogonalChild(child) ? GridAxisEnd : GridAxisStart;
</del><ins>+ // Aligns the alignment subject to be flush with the alignment container's 'line-right' edge.
+ // The alignment axis (column axis) is always orthogonal to the inline axis, hence this value behaves as 'start'.
+ return GridAxisStart;
</ins><span class="cx"> case ItemPositionCenter:
</span><span class="cx"> return GridAxisCenter;
</span><span class="cx"> case ItemPositionFlexStart: // Only used in flex layout, otherwise equivalent to 'start'.
</span><ins>+ // Aligns the alignment subject to be flush with the alignment container's 'start' edge (block-start) in the column axis.
</ins><span class="cx"> case ItemPositionStart:
</span><span class="cx"> return GridAxisStart;
</span><span class="cx"> case ItemPositionFlexEnd: // Only used in flex layout, otherwise equivalent to 'end'.
</span><ins>+ // Aligns the alignment subject to be flush with the alignment container's 'end' edge (block-end) in the column axis.
</ins><span class="cx"> case ItemPositionEnd:
</span><span class="cx"> return GridAxisEnd;
</span><span class="cx"> case ItemPositionStretch:
</span><span class="lines">@@ -2311,28 +2328,51 @@
</span><span class="cx"> GridAxisPosition RenderGrid::rowAxisPositionForChild(const RenderBox& child) const
</span><span class="cx"> {
</span><span class="cx"> bool hasSameDirection = child.style().direction() == style().direction();
</span><del>- bool isLTR = style().isLeftToRightDirection();
</del><ins>+ bool gridIsLTR = style().isLeftToRightDirection();
</ins><span class="cx">
</span><span class="cx"> switch (child.style().resolvedJustifySelf(style(), selfAlignmentNormalBehavior).position()) {
</span><span class="cx"> case ItemPositionSelfStart:
</span><del>- // For orthogonal writing-modes, this computes to 'start'
- // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
- // self-start is based on the child's direction. That's why we need to check against the grid container's direction.
- return (isOrthogonalChild(child) || hasSameDirection) ? GridAxisStart : GridAxisEnd;
</del><ins>+ // FIXME: Should we implement this logic in a generic utility function ?
+ // Aligns the alignment subject to be flush with the edge of the alignment container
+ // corresponding to the alignment subject's 'start' side in the row axis.
+ if (isOrthogonalChild(child)) {
+ // If orthogonal writing-modes, self-start will be based on the child's block-axis
+ // direction, because it's the one parallel to the row axis.
+ if (child.style().isFlippedBlocksWritingMode())
+ return gridIsLTR ? GridAxisEnd : GridAxisStart;
+ return gridIsLTR ? GridAxisStart : GridAxisEnd;
+ }
+ // self-start is based on the child's inline-flow direction. That's why we need to check against the grid container's direction.
+ return hasSameDirection ? GridAxisStart : GridAxisEnd;
</ins><span class="cx"> case ItemPositionSelfEnd:
</span><del>- // For orthogonal writing-modes, this computes to 'start'
- // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
- return (isOrthogonalChild(child) || hasSameDirection) ? GridAxisEnd : GridAxisStart;
</del><ins>+ // FIXME: Should we implement this logic in a generic utility function ?
+ // Aligns the alignment subject to be flush with the edge of the alignment container
+ // corresponding to the alignment subject's 'end' side in the row axis.
+ if (isOrthogonalChild(child)) {
+ // If orthogonal writing-modes, self-end will be based on the child's block-axis
+ // direction, because it's the one parallel to the row axis.
+ if (child.style().isFlippedBlocksWritingMode())
+ return gridIsLTR ? GridAxisStart : GridAxisEnd;
+ return gridIsLTR ? GridAxisEnd : GridAxisStart;
+ }
+ // self-end is based on the child's inline-flow direction. That's why we need to check against the grid container's direction.
+ return hasSameDirection ? GridAxisEnd : GridAxisStart;
</ins><span class="cx"> case ItemPositionLeft:
</span><del>- return isLTR ? GridAxisStart : GridAxisEnd;
</del><ins>+ // Aligns the alignment subject to be flush with the alignment container's 'line-left' edge.
+ // We want the physical 'left' side, so we have to take account, container's inline-flow direction.
+ return gridIsLTR ? GridAxisStart : GridAxisEnd;
</ins><span class="cx"> case ItemPositionRight:
</span><del>- return isLTR ? GridAxisEnd : GridAxisStart;
</del><ins>+ // Aligns the alignment subject to be flush with the alignment container's 'line-right' edge.
+ // We want the physical 'right' side, so we have to take account, container's inline-flow direction.
+ return gridIsLTR ? GridAxisEnd : GridAxisStart;
</ins><span class="cx"> case ItemPositionCenter:
</span><span class="cx"> return GridAxisCenter;
</span><span class="cx"> case ItemPositionFlexStart: // Only used in flex layout, otherwise equivalent to 'start'.
</span><ins>+ // Aligns the alignment subject to be flush with the alignment container's 'start' edge (inline-start) in the row axis.
</ins><span class="cx"> case ItemPositionStart:
</span><span class="cx"> return GridAxisStart;
</span><span class="cx"> case ItemPositionFlexEnd: // Only used in flex layout, otherwise equivalent to 'end'.
</span><ins>+ // Aligns the alignment subject to be flush with the alignment container's 'end' edge (inline-end) in the row axis.
</ins><span class="cx"> case ItemPositionEnd:
</span><span class="cx"> return GridAxisEnd;
</span><span class="cx"> case ItemPositionStretch:
</span><span class="lines">@@ -2371,9 +2411,9 @@
</span><span class="cx"> // (this does not have to be done for the last track as there are no more m_rowPositions after it).
</span><span class="cx"> if (childEndLine < m_rowPositions.size() - 1)
</span><span class="cx"> endOfRow -= gridGapForDirection(ForRows) + m_offsetBetweenRows;
</span><del>- LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
</del><ins>+ LayoutUnit columnAxisChildSize = isOrthogonalChild(child) ? child.logicalWidth() + child.marginLogicalWidth() : child.logicalHeight() + child.marginLogicalHeight();
</ins><span class="cx"> auto overflow = child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior).overflow();
</span><del>- LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfRow - startOfRow, childBreadth);
</del><ins>+ LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfRow - startOfRow, columnAxisChildSize);
</ins><span class="cx"> return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -2404,9 +2444,9 @@
</span><span class="cx"> // (this does not have to be done for the last track as there are no more m_columnPositions after it).
</span><span class="cx"> if (childEndLine < m_columnPositions.size() - 1)
</span><span class="cx"> endOfColumn -= gridGapForDirection(ForColumns) + m_offsetBetweenColumns;
</span><del>- LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
</del><ins>+ LayoutUnit rowAxisChildSize = isOrthogonalChild(child) ? child.logicalHeight() + child.marginLogicalHeight() : child.logicalWidth() + child.marginLogicalWidth();
</ins><span class="cx"> auto overflow = child.style().resolvedJustifySelf(style(), selfAlignmentNormalBehavior).overflow();
</span><del>- LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfColumn - startOfColumn, childBreadth);
</del><ins>+ LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfColumn - startOfColumn, rowAxisChildSize);
</ins><span class="cx"> return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -2532,7 +2572,7 @@
</span><span class="cx"> // We stored m_columnPositions's data ignoring the direction, hence we might need now
</span><span class="cx"> // to translate positions from RTL to LTR, as it's more convenient for painting.
</span><span class="cx"> if (!style().isLeftToRightDirection())
</span><del>- rowAxisOffset = translateRTLCoordinate(rowAxisOffset) - child.logicalWidth();
</del><ins>+ rowAxisOffset = translateRTLCoordinate(rowAxisOffset) - (isOrthogonalChild(child) ? child.logicalHeight() : child.logicalWidth());
</ins><span class="cx">
</span><span class="cx"> // "In the positioning phase [...] calculations are performed according to the writing mode
</span><span class="cx"> // of the containing block of the box establishing the orthogonal flow." However, the
</span></span></pre>
</div>
</div>
</body>
</html>