<!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>[183399] 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/183399">183399</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2015-04-27 10:24:44 -0700 (Mon, 27 Apr 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Grid Layout] Support for the justify-self and justify-items in grid layout
https://bugs.webkit.org/show_bug.cgi?id=133280
Source/WebCore:
Reviewed by David Hyatt.
Implementation of justify-self and justify-items properties for grid. It supports
different writing-modes and direction. Margins, borders and paddings are also
considered when computing the final position and stretched size.
This patch applies also a quite important refactoring of the alignment logic in
order to share code between the two alignment dimensions, row-axis and column-axis.
Overflow handling is still missing and will be added later in a follow-up bug.
Tests: fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html
fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html
fast/css-grid-layout/grid-align-justify-margin-border-padding.html
fast/css-grid-layout/justify-self-cell.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutGridItems):
(WebCore::RenderGrid::columnAxisPositionForChild):
(WebCore::RenderGrid::rowAxisPositionForChild):
(WebCore::RenderGrid::rowPositionForChild):
(WebCore::RenderGrid::columnPositionForChild):
(WebCore::RenderGrid::findChildLogicalPosition):
(WebCore::RenderGrid::allowedToStretchLogicalHeightForChild): Deleted.
(WebCore::RenderGrid::needToStretchChildLogicalHeight): Deleted.
(WebCore::RenderGrid::marginLogicalHeightForChild): Deleted.
(WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching): Deleted.
(WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded): Deleted.
* rendering/RenderGrid.h:
* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::resolveJustification):
* rendering/style/RenderStyle.h:
LayoutTests:
Implementation of justify-self and justify-items properties for grid.
Added additional testing for ensuring margin, padding and border are considered when
computing grid item's position.
Reviewed by David Hyatt.
* fast/css-grid-layout/grid-align-justify-margin-border-padding-expected.txt: Added.
* fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr-expected.txt: Added.
* fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html: Added.
* fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl-expected.txt: Added.
* fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html: Added.
* fast/css-grid-layout/grid-align-justify-margin-border-padding.html: Added.
* fast/css-grid-layout/justify-self-cell-expected.txt: Added.
* fast/css-grid-layout/justify-self-cell.html: Added.
* fast/css-grid-layout/resources/grid.css:
(.directionLTR): Added. Useful for defining orthogonal flows.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridcss">trunk/LayoutTests/fast/css-grid-layout/resources/grid.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>
<li><a href="#trunkSourceWebCorerenderingRenderGridh">trunk/Source/WebCore/rendering/RenderGrid.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStylecpp">trunk/Source/WebCore/rendering/style/RenderStyle.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStyleh">trunk/Source/WebCore/rendering/style/RenderStyle.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticallrexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticalrlexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutjustifyselfcellexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/justify-self-cell-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutjustifyselfcellhtml">trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (183398 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-04-27 17:07:20 UTC (rev 183398)
+++ trunk/LayoutTests/ChangeLog 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2015-04-27 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Grid Layout] Support for the justify-self and justify-items in grid layout
+ https://bugs.webkit.org/show_bug.cgi?id=133280
+
+ Implementation of justify-self and justify-items properties for grid.
+ Added additional testing for ensuring margin, padding and border are considered when
+ computing grid item's position.
+
+ Reviewed by David Hyatt.
+
+ * fast/css-grid-layout/grid-align-justify-margin-border-padding-expected.txt: Added.
+ * fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr-expected.txt: Added.
+ * fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html: Added.
+ * fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl-expected.txt: Added.
+ * fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html: Added.
+ * fast/css-grid-layout/grid-align-justify-margin-border-padding.html: Added.
+ * fast/css-grid-layout/justify-self-cell-expected.txt: Added.
+ * fast/css-grid-layout/justify-self-cell.html: Added.
+ * fast/css-grid-layout/resources/grid.css:
+ (.directionLTR): Added. Useful for defining orthogonal flows.
+
</ins><span class="cx"> 2015-04-27 Youenn Fablet <youenn.fablet@crf.canon.fr> and Xabier Rodriguez Calvar <calvaris@igalia.com>
</span><span class="cx">
</span><span class="cx"> Unreviewed.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-expected.txt (0 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-expected.txt 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -0,0 +1,74 @@
</span><ins>+This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.
+
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'auto' | justify-items: 'auto'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'center' | justify-items: 'center'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'end' | justify-items: 'end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'left' | justify-items: 'left'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'auto' | justify-items: 'auto'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'center' | justify-items: 'center'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'end' | justify-items: 'end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'left' | justify-items: 'left'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticallrexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr-expected.txt (0 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr-expected.txt 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -0,0 +1,74 @@
</span><ins>+This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids.
+
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'auto' | justify-items: 'auto'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'center' | justify-items: 'center'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'end' | justify-items: 'end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'left' | justify-items: 'left'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'auto' | justify-items: 'auto'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'center' | justify-items: 'center'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'end' | justify-items: 'end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'left' | justify-items: 'left'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticallrhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html (0 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -0,0 +1,269 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+ margin: 0;
+}
+
+.grid {
+ -webkit-grid-template-columns: 100px 200px;
+ -webkit-grid-template-rows: 200px 200px;
+ padding: 10px 15px 20px 30px;
+ border-width: 5px 10px 15px 20px;
+ border-style: dotted;
+ border-color: blue;
+ width: -webkit-fit-content;
+ position: relative;
+}
+
+.cell {
+ width: 20px;
+ height: 40px;
+ margin: 4px 8px 12px 16px;
+}
+
+.itemsCenter {
+ align-items: center;
+ justify-items: center;
+}
+
+.itemsEnd {
+ align-items: end;
+ justify-items: end;
+}
+
+.itemsLeft {
+ align-items: left;
+ justify-items: left;
+}
+
+.itemsRight {
+ align-items: right;
+ justify-items: right;
+}
+
+.itemsSelfStart {
+ align-items: self-start;
+ justify-items: self-start;
+}
+
+.itemsSelfEnd {
+ align-items: self-end;
+ justify-items: self-end;
+}
+
+.stretch {
+ align-self: stretch;
+ justify-self: stretch;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids.</p>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+ <div class="grid verticalLR" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell firstRowSecondColumn" data-offset-x="46" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+ <div class="grid verticalLR itemsCenter" data-expected-width="475" data-expected-height="350">
+ <div class="firstRowFirstColumn cell" data-offset-x="124" data-offset-y="36" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="324" data-offset-y="186" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+ <div class="grid verticalLR itemsEnd" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="202" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'left' | justify-items: 'left'</p>
+ <div class="grid verticalLR itemsLeft" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'right' | justify-items: 'right'</p>
+ <div class="grid verticalLR itemsRight" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="202" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<!-- RTL direction. -->
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+ <div class="grid verticalLR directionRTL" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell firstRowSecondColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowFirstColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+ <div class="grid verticalLR directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="124" data-offset-y="236" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="324" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+ <div class="grid verticalLR directionRTL itemsEnd" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'left' | justify-items: 'left'</p>
+ <div class="grid verticalLR directionRTL itemsLeft" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'right' | justify-items: 'right'</p>
+ <div class="grid verticalLR directionRTL itemsRight" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticalrlexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl-expected.txt (0 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl-expected.txt 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -0,0 +1,74 @@
</span><ins>+This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids.
+
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'auto' | justify-items: 'auto'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'center' | justify-items: 'center'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'end' | justify-items: 'end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'left' | justify-items: 'left'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'auto' | justify-items: 'auto'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'center' | justify-items: 'center'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'end' | justify-items: 'end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'left' | justify-items: 'left'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticalrlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html (0 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -0,0 +1,270 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+ margin: 0;
+}
+
+.grid {
+ -webkit-grid-template-columns: 100px 200px;
+ -webkit-grid-template-rows: 200px 200px;
+ padding: 10px 15px 20px 30px;
+ border-width: 5px 10px 15px 20px;
+ border-style: dotted;
+ border-color: blue;
+ width: -webkit-fit-content;
+ position: relative;
+}
+
+.cell {
+ width: 20px;
+ height: 40px;
+ margin: 4px 8px 12px 16px;
+}
+
+.itemsCenter {
+ align-items: center;
+ justify-items: center;
+}
+
+.itemsEnd {
+ align-items: end;
+ justify-items: end;
+}
+
+.itemsLeft {
+ align-items: left;
+ justify-items: left;
+}
+
+.itemsRight {
+ align-items: right;
+ justify-items: right;
+}
+
+.itemsSelfStart {
+ align-items: self-start;
+ justify-items: self-start;
+}
+
+.itemsSelfEnd {
+ align-items: self-end;
+ justify-items: self-end;
+}
+
+.stretch {
+ align-self: stretch;
+ justify-self: stretch;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids.</p>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+ <div class="grid verticalRL" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell firstRowSecondColumn" data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowFirstColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+ <div class="grid verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
+ <div class="firstRowFirstColumn cell" data-offset-x="324" data-offset-y="36" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="186" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+ <div class="grid verticalRL itemsEnd" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'left' | justify-items: 'left'</p>
+ <div class="grid verticalRL itemsLeft" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'right' | justify-items: 'right'</p>
+ <div class="grid verticalRL itemsRight" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="402" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+
+<!-- RTL direction. -->
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+ <div class="grid verticalRL directionRTL" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell firstRowSecondColumn" data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowFirstColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+ <div class="grid verticalRL directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="324" data-offset-y="236" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+ <div class="grid verticalRL directionRTL itemsEnd" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'left' | justify-items: 'left'</p>
+ <div class="grid verticalRL directionRTL itemsLeft" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'right' | justify-items: 'right'</p>
+ <div class="grid verticalRL directionRTL itemsRight" data-expected-width="475" data-expected-height="350">
+ <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="402" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html (0 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -0,0 +1,269 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+ margin: 0;
+}
+
+.grid {
+ -webkit-grid-template-columns: 100px 200px;
+ -webkit-grid-template-rows: 200px 200px;
+ padding: 10px 15px 20px 30px;
+ border-width: 5px 10px 15px 20px;
+ border-style: dotted;
+ border-color: blue;
+ width: -webkit-fit-content;
+ position: relative;
+}
+
+.cell {
+ width: 20px;
+ height: 40px;
+ margin: 4px 8px 12px 16px;
+}
+
+.itemsCenter {
+ align-items: center;
+ justify-items: center;
+}
+
+.itemsEnd {
+ align-items: end;
+ justify-items: end;
+}
+
+.itemsLeft {
+ align-items: left;
+ justify-items: left;
+}
+
+.itemsRight {
+ align-items: right;
+ justify-items: right;
+}
+
+.itemsSelfStart {
+ align-items: self-start;
+ justify-items: self-start;
+}
+
+.itemsSelfEnd {
+ align-items: self-end;
+ justify-items: self-end;
+}
+
+.stretch {
+ align-self: stretch;
+ justify-self: stretch;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.</p>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+ <div class="grid" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell firstRowSecondColumn" data-offset-x="146" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+ <div class="grid itemsCenter" data-expected-width="375" data-expected-height="450">
+ <div class="firstRowFirstColumn cell" data-offset-x="74" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="224" data-offset-y="286" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+ <div class="grid itemsEnd" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'left' | justify-items: 'left'</p>
+ <div class="grid itemsLeft" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'right' | justify-items: 'right'</p>
+ <div class="grid itemsRight" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="146" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<!-- RTL direction. -->
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+ <div class="grid directionRTL" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell firstRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowFirstColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+ <div class="grid directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="274" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="286" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+ <div class="grid directionRTL itemsEnd" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'left' | justify-items: 'left'</p>
+ <div class="grid directionRTL itemsLeft" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'right' | justify-items: 'right'</p>
+ <div class="grid directionRTL itemsRight" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="302" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutjustifyselfcellexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/justify-self-cell-expected.txt (0 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/justify-self-cell-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/justify-self-cell-expected.txt 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+This test checks that the justify-self property is applied correctly.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutjustifyselfcellhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html (0 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -0,0 +1,168 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template-columns: 100px 100px;
+ -webkit-grid-template-rows: 200px 200px;
+ width: -webkit-fit-content;
+}
+
+.cell {
+ width: 10px;
+ height: 20px;
+}
+
+.justifySelfAuto {
+ justify-self: auto;
+}
+
+.justifySelfStretch {
+ justify-self: stretch;
+}
+
+.justifySelfStart {
+ justify-self: start;
+}
+
+.justifySelfEnd {
+ justify-self: end;
+}
+
+.justifySelfCenter {
+ justify-self: center;
+}
+
+.justifySelfRight {
+ justify-self: right;
+}
+
+.justifySelfLeft {
+ justify-self: left;
+}
+
+.justifySelfFlexStart {
+ justify-self: flex-start;
+}
+
+.justifySelfFlexEnd {
+ justify-self: flex-end;
+}
+
+.justifySelfSelfStart {
+ justify-self: self-start;
+}
+
+.justifySelfSelfEnd {
+ justify-self: self-end;
+}
+
+.justifyItemsCenter {
+ justify-items: center;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the justify-self property is applied correctly.</p>
+
+<div style="position: relative" class="constrainedContainer">
+<div class="grid" data-expected-width="200" data-expected-height="400">
+ <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="45" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+</div>
+
+<div style="position: relative" class="constrainedContainer">
+<div class="grid" data-expected-width="200" data-expected-height="400">
+ <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+</div>
+</div>
+
+<!-- Default justification and initial values. -->
+<div style="position: relative">
+ <div class="grid justifyItemsCenter" data-expected-width="200" data-expected-height="400">
+ <div class="cell justifySelfAuto firstRowFirstColumn" data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell firstRowSecondColumn" data-offset-x="145" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid" data-expected-width="200" data-expected-height="400">
+ <div class="justifySelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfEnd secondRowSecondColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ </div>
+</div>
+
+<!-- Vertical writing mode. -->
+<div style="position: relative" class="constrainedContainer">
+<div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
+ <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+ <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="390" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="390" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="190" data-offset-y="40" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="190" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="190" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div>
+</div>
+
+<div style="position: relative" class="constrainedContainer">
+<div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
+ <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="200" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div>
+</div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative" class="constrainedContainer">
+<div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
+ <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfCenter secondRowFirstColumn" data-offset-x="145" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfRight secondRowSecondColumn" data-offset-x="90" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfLeft secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+</div>
+
+<div style="position: relative" class="constrainedContainer">
+<div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
+ <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfSelfEnd secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+</div>
+</div>
+
+<!-- RTL direction with opposite directions grid container vs grid item. -->
+<div style="position: relative" class="constrainedContainer">
+<div class="grid" data-expected-width="200" data-expected-height="400">
+ <div class="justifySelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+ <div class="cell justifySelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfEnd firstRowSecondColumn directionRTL" data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfCenter secondRowFirstColumn directionRTL" data-offset-x="45" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfRight secondRowSecondColumn directionRTL" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfLeft secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+</div>
+
+<div style="position: relative" class="constrainedContainer">
+<div class="grid" data-expected-width="200" data-expected-height="400">
+ <div class="cell justifySelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="90" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+ <div class="cell justifySelfSelfEnd secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
+</div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridcss"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid.css (183398 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2015-04-27 17:07:20 UTC (rev 183398)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -222,3 +222,7 @@
</span><span class="cx"> .directionRTL {
</span><span class="cx"> direction: rtl;
</span><span class="cx"> }
</span><ins>+
+.directionLTR {
+ direction: ltr;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (183398 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-04-27 17:07:20 UTC (rev 183398)
+++ trunk/Source/WebCore/ChangeLog 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -1,3 +1,41 @@
</span><ins>+2015-04-27 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Grid Layout] Support for the justify-self and justify-items in grid layout
+ https://bugs.webkit.org/show_bug.cgi?id=133280
+
+ Reviewed by David Hyatt.
+
+ Implementation of justify-self and justify-items properties for grid. It supports
+ different writing-modes and direction. Margins, borders and paddings are also
+ considered when computing the final position and stretched size.
+
+ This patch applies also a quite important refactoring of the alignment logic in
+ order to share code between the two alignment dimensions, row-axis and column-axis.
+
+ Overflow handling is still missing and will be added later in a follow-up bug.
+
+ Tests: fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html
+ fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html
+ fast/css-grid-layout/grid-align-justify-margin-border-padding.html
+ fast/css-grid-layout/justify-self-cell.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::layoutGridItems):
+ (WebCore::RenderGrid::columnAxisPositionForChild):
+ (WebCore::RenderGrid::rowAxisPositionForChild):
+ (WebCore::RenderGrid::rowPositionForChild):
+ (WebCore::RenderGrid::columnPositionForChild):
+ (WebCore::RenderGrid::findChildLogicalPosition):
+ (WebCore::RenderGrid::allowedToStretchLogicalHeightForChild): Deleted.
+ (WebCore::RenderGrid::needToStretchChildLogicalHeight): Deleted.
+ (WebCore::RenderGrid::marginLogicalHeightForChild): Deleted.
+ (WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching): Deleted.
+ (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded): Deleted.
+ * rendering/RenderGrid.h:
+ * rendering/style/RenderStyle.cpp:
+ (WebCore::RenderStyle::resolveJustification):
+ * rendering/style/RenderStyle.h:
+
</ins><span class="cx"> 2015-04-27 Darin Adler <darin@apple.com>
</span><span class="cx">
</span><span class="cx"> Crashes under IDBDatabase::closeConnection
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (183398 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-04-27 17:07:20 UTC (rev 183398)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -40,8 +40,6 @@
</span><span class="cx">
</span><span class="cx"> static const int infinity = -1;
</span><span class="cx">
</span><del>-enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter};
-
</del><span class="cx"> class GridTrack {
</span><span class="cx"> public:
</span><span class="cx"> GridTrack() {}
</span><span class="lines">@@ -1186,7 +1184,7 @@
</span><span class="cx">
</span><span class="cx"> child->layoutIfNeeded();
</span><span class="cx">
</span><del>- child->setLogicalLocation(findChildLogicalPosition(*child, sizingData));
</del><ins>+ child->setLogicalLocation(findChildLogicalPosition(*child));
</ins><span class="cx">
</span><span class="cx"> // If the child moved, we have to repaint it as well as any floating/positioned
</span><span class="cx"> // descendants. An exception is if we need a layout. In this case, we know we're going to
</span><span class="lines">@@ -1240,42 +1238,6 @@
</span><span class="cx"> m_rowPositions[i + 1] = m_rowPositions[i] + sizingData.rowTracks[i].baseSize();
</span><span class="cx"> }
</span><span class="cx">
</span><del>-LayoutUnit RenderGrid::endOfRowForChild(const RenderBox& child) const
-{
- const GridCoordinate& coordinate = cachedGridCoordinate(child);
-
- LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
- // The grid items should be inside the grid container's border box, that's why they need to be shifted.
- LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
-
- LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
- // FIXME: This should account for the grid item's <overflow-position>.
- return rowPosition + std::max<LayoutUnit>(0, endOfRow - startOfRow - child.logicalHeight());
-}
-
-LayoutUnit RenderGrid::startOfRowForChild(const RenderBox& child) const
-{
- const GridCoordinate& coordinate = cachedGridCoordinate(child);
-
- LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
- // The grid items should be inside the grid container's border box, that's why they need to be shifted.
- // FIXME: This should account for the grid item's <overflow-position>.
- LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
-
- return rowPosition;
-}
-
-LayoutUnit RenderGrid::centeredRowPositionForChild(const RenderBox& child) const
-{
- const GridCoordinate& coordinate = cachedGridCoordinate(child);
-
- // The grid items should be inside the grid container's border box, that's why they need to be shifted.
- LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
- LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
- // FIXME: This should account for the grid item's <overflow-position>.
- return startOfRow + std::max<LayoutUnit>(0, endOfRow - startOfRow - child.logicalHeight()) / 2;
-}
-
</del><span class="cx"> bool RenderGrid::allowedToStretchLogicalHeightForChild(const RenderBox& child) const
</span><span class="cx"> {
</span><span class="cx"> return child.style().logicalHeight().isAuto() && !child.style().marginBeforeUsing(&style()).isAuto() && !child.style().marginAfterUsing(&style()).isAuto();
</span><span class="lines">@@ -1327,9 +1289,12 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static GridAxisPosition columnAxisPosition(ItemPosition position, bool hasOrthogonalWritingMode, bool hasSameWritingMode)
</del><ins>+GridAxisPosition RenderGrid::columnAxisPositionForChild(const RenderBox& child) const
</ins><span class="cx"> {
</span><del>- switch (position) {
</del><ins>+ bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
+ bool hasSameWritingMode = child.style().writingMode() == style().writingMode();
+
+ switch (RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch)) {
</ins><span class="cx"> case ItemPositionSelfStart:
</span><span class="cx"> // If orthogonal writing-modes, this computes to 'start'.
</span><span class="cx"> // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
</span><span class="lines">@@ -1362,7 +1327,7 @@
</span><span class="cx"> return GridAxisStart;
</span><span class="cx"> case ItemPositionBaseline:
</span><span class="cx"> case ItemPositionLastBaseline:
</span><del>- // FIXME: Implement the ItemPositionBaseline value. For now, we always 'start' align the child.
</del><ins>+ // FIXME: Implement the previous values. For now, we always 'start' align the child.
</ins><span class="cx"> return GridAxisStart;
</span><span class="cx"> case ItemPositionAuto:
</span><span class="cx"> break;
</span><span class="lines">@@ -1372,32 +1337,96 @@
</span><span class="cx"> return GridAxisStart;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
</del><ins>+GridAxisPosition RenderGrid::rowAxisPositionForChild(const RenderBox& child) const
</ins><span class="cx"> {
</span><span class="cx"> bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
</span><del>- bool hasSameWritingMode = child.style().writingMode() == style().writingMode();
- ItemPosition position = RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch);
</del><ins>+ bool hasSameDirection = child.style().direction() == style().direction();
+ bool isLTR = style().isLeftToRightDirection();
</ins><span class="cx">
</span><del>- switch (columnAxisPosition(position, hasOrthogonalWritingMode, hasSameWritingMode)) {
</del><ins>+ switch (RenderStyle::resolveJustification(style(), child.style(), ItemPositionStretch)) {
+ case ItemPositionSelfStart:
+ // 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 (hasOrthogonalWritingMode || hasSameDirection) ? GridAxisStart : GridAxisEnd;
+ case ItemPositionSelfEnd:
+ // For orthogonal writing-modes, this computes to 'start'
+ // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
+ return (hasOrthogonalWritingMode || hasSameDirection) ? GridAxisEnd : GridAxisStart;
+ case ItemPositionLeft:
+ return isLTR ? GridAxisStart : GridAxisEnd;
+ case ItemPositionRight:
+ return isLTR ? GridAxisEnd : GridAxisStart;
+ case ItemPositionCenter:
+ return GridAxisCenter;
+ case ItemPositionFlexStart: // Only used in flex layout, otherwise equivalent to 'start'.
+ case ItemPositionStart:
+ return GridAxisStart;
+ case ItemPositionFlexEnd: // Only used in flex layout, otherwise equivalent to 'end'.
+ case ItemPositionEnd:
+ return GridAxisEnd;
+ case ItemPositionStretch:
+ return GridAxisStart;
+ case ItemPositionBaseline:
+ case ItemPositionLastBaseline:
+ // FIXME: Implement the previous values. For now, we always 'start' align the child.
+ return GridAxisStart;
+ case ItemPositionAuto:
+ break;
+ }
+
+ ASSERT_NOT_REACHED();
+ return GridAxisStart;
+}
+
+LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
+{
+ const GridCoordinate& coordinate = cachedGridCoordinate(child);
+ LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
+ LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
+ LayoutUnit startPosition = startOfRow + marginBeforeForChild(child);
+ // FIXME: This should account for the grid item's <overflow-position>.
+ LayoutUnit offsetFromStartPosition = endOfRow - startOfRow - child.logicalHeight() - child.marginLogicalHeight();
+
+ switch (columnAxisPositionForChild(child)) {
</ins><span class="cx"> case GridAxisStart:
</span><del>- return startOfRowForChild(child);
</del><ins>+ return startPosition;
</ins><span class="cx"> case GridAxisEnd:
</span><del>- return endOfRowForChild(child);
</del><ins>+ return startPosition + offsetFromStartPosition;
</ins><span class="cx"> case GridAxisCenter:
</span><del>- return centeredRowPositionForChild(child);
</del><ins>+ return startPosition + offsetFromStartPosition / 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> ASSERT_NOT_REACHED();
</span><span class="cx"> return 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-LayoutPoint RenderGrid::findChildLogicalPosition(const RenderBox& child, const GridSizingData& sizingData) const
</del><ins>+
+LayoutUnit RenderGrid::columnPositionForChild(const RenderBox& child) const
</ins><span class="cx"> {
</span><span class="cx"> const GridCoordinate& coordinate = cachedGridCoordinate(child);
</span><del>- ASSERT_UNUSED(sizingData, coordinate.columns.resolvedInitialPosition.toInt() < sizingData.columnTracks.size());
- ASSERT_UNUSED(sizingData, coordinate.rows.resolvedInitialPosition.toInt() < sizingData.rowTracks.size());
</del><ins>+ LayoutUnit startOfColumn = m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()];
+ LayoutUnit endOfColumn = m_columnPositions[coordinate.columns.resolvedFinalPosition.next().toInt()];
+ LayoutUnit startPosition = startOfColumn + marginStartForChild(child);
+ // FIXME: This should account for the grid item's <overflow-position>.
+ LayoutUnit offsetFromStartPosition = endOfColumn - startOfColumn - child.logicalWidth() - child.marginLogicalWidth();
</ins><span class="cx">
</span><del>- LayoutUnit columnPosition = m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()] + marginStartForChild(child);
</del><ins>+ switch (rowAxisPositionForChild(child)) {
+ case GridAxisStart:
+ return startPosition;
+ case GridAxisEnd:
+ return startPosition + offsetFromStartPosition;
+ case GridAxisCenter:
+ return startPosition + offsetFromStartPosition / 2;
+ }
+
+ ASSERT_NOT_REACHED();
+ return 0;
+}
+
+LayoutPoint RenderGrid::findChildLogicalPosition(const RenderBox& child) const
+{
+ LayoutUnit columnPosition = columnPositionForChild(child);
</ins><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></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (183398 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h 2015-04-27 17:07:20 UTC (rev 183398)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -40,6 +40,8 @@
</span><span class="cx"> class GridTrack;
</span><span class="cx"> class GridItemWithSpan;
</span><span class="cx">
</span><ins>+enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter};
+
</ins><span class="cx"> class RenderGrid final : public RenderBlock {
</span><span class="cx"> public:
</span><span class="cx"> RenderGrid(Element&, Ref<RenderStyle>&&);
</span><span class="lines">@@ -117,13 +119,14 @@
</span><span class="cx"> LayoutUnit logicalContentHeightForChild(RenderBox&, Vector<GridTrack>&);
</span><span class="cx"> LayoutUnit minContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
</span><span class="cx"> LayoutUnit maxContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
</span><del>- LayoutUnit startOfRowForChild(const RenderBox&) const;
- LayoutUnit endOfRowForChild(const RenderBox&) const;
- LayoutUnit centeredRowPositionForChild(const RenderBox&) const;
</del><ins>+ GridAxisPosition columnAxisPositionForChild(const RenderBox&) const;
+ GridAxisPosition rowAxisPositionForChild(const RenderBox&) const;
</ins><span class="cx"> LayoutUnit rowPositionForChild(const RenderBox&) const;
</span><del>- LayoutPoint findChildLogicalPosition(const RenderBox&, const GridSizingData&) const;
</del><ins>+ LayoutUnit columnPositionForChild(const RenderBox&) const;
+ LayoutPoint findChildLogicalPosition(const RenderBox&) const;
</ins><span class="cx"> GridCoordinate cachedGridCoordinate(const RenderBox&) const;
</span><span class="cx">
</span><ins>+
</ins><span class="cx"> LayoutUnit gridAreaBreadthForChild(const RenderBox& child, GridTrackSizingDirection, const Vector<GridTrack>&) const;
</span><span class="cx">
</span><span class="cx"> virtual void paintChildren(PaintInfo& forSelf, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect) override;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStylecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.cpp (183398 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2015-04-27 17:07:20 UTC (rev 183398)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -179,6 +179,13 @@
</span><span class="cx"> return childStyle.alignSelf();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ItemPosition RenderStyle::resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForLayoutObject)
+{
+ if (childStyle.justifySelf() == ItemPositionAuto)
+ return (parentStyle.justifyItems() == ItemPositionAuto) ? resolvedAutoPositionForLayoutObject : parentStyle.justifyItems();
+ return childStyle.justifySelf();
+}
+
</ins><span class="cx"> void RenderStyle::inheritFrom(const RenderStyle* inheritParent, IsAtShadowBoundary isAtShadowBoundary)
</span><span class="cx"> {
</span><span class="cx"> if (isAtShadowBoundary == AtShadowBoundary) {
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStyleh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (183398 => 183399)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.h 2015-04-27 17:07:20 UTC (rev 183398)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.h 2015-04-27 17:24:44 UTC (rev 183399)
</span><span class="lines">@@ -492,6 +492,7 @@
</span><span class="cx"> static Ref<RenderStyle> createStyleInheritingFromPseudoStyle(const RenderStyle& pseudoStyle);
</span><span class="cx">
</span><span class="cx"> static ItemPosition resolveAlignment(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer);
</span><ins>+ static ItemPosition resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForLayoutObject);
</ins><span class="cx">
</span><span class="cx"> enum IsAtShadowBoundary {
</span><span class="cx"> AtShadowBoundary,
</span></span></pre>
</div>
</div>
</body>
</html>