<!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>[196819] trunk/LayoutTests</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/196819">196819</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2016-02-19 05:25:49 -0800 (Fri, 19 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Grid Layout Refactoring some layout tests
https://bugs.webkit.org/show_bug.cgi?id=154291
Refactored several tests so they use the shared sizing keywords
instead of specific CSS rules.
Reviewed by Sergio Villar Senin.
* fast/css-grid-layout/calc-resolution-grid-item.html:
* fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt:
* fast/css-grid-layout/flex-and-intrinsic-sizes.html:
* 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/grid-align-justify-overflow.html:
* fast/css-grid-layout/grid-align-justify-stretch.html:
* fast/css-grid-layout/grid-align.html:
* fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
* fast/css-grid-layout/grid-columns-rows-get-set.html:
* fast/css-grid-layout/grid-container-margin-border-padding-scrollbar.html:
* fast/css-grid-layout/grid-content-alignment-and-self-alignment.html:
* fast/css-grid-layout/grid-content-alignment-overflow.html:
* fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html:
* fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html:
* fast/css-grid-layout/grid-content-alignment-with-span.html:
* fast/css-grid-layout/grid-element-change-columns-repaint.html:
* fast/css-grid-layout/grid-element-change-rows-repaint.html:
* fast/css-grid-layout/grid-element-repeat-get-set.html:
* fast/css-grid-layout/grid-gutters-and-alignment.html:
* fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html:
* fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html:
* fast/css-grid-layout/grid-item-auto-margins-alignment.html:
* fast/css-grid-layout/grid-item-auto-margins-and-stretch.html:
* fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html:
* fast/css-grid-layout/grid-item-change-column-repaint.html:
* fast/css-grid-layout/grid-item-order-paint-order.html:
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt: Added.
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt: Added.
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html: Added.
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt: Added.
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html: Added.
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html: Added.
* fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html:
* fast/css-grid-layout/grid-item-z-index-stacking-context.html:
* fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html:
* fast/css-grid-layout/grid-justify-content-distribution.html:
* fast/css-grid-layout/grid-justify-content-vertical-lr.html:
* fast/css-grid-layout/grid-justify-content-vertical-rl.html:
* fast/css-grid-layout/justify-self-cell.html:
* fast/css-grid-layout/min-width-height-auto-and-margins.html:
* fast/css-grid-layout/minmax-fixed-logical-height-only.html:
* fast/css-grid-layout/minmax-fixed-logical-width-only.html:
* fast/css-grid-layout/minmax-max-content-resolution-columns.html:
* fast/css-grid-layout/minmax-max-content-resolution-rows.html:
* fast/css-grid-layout/named-grid-line-get-set.html:
* fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html:
* fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html:
* fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html:
* fast/css-grid-layout/percent-of-indefinite-track-size.html:
* fast/css-grid-layout/percent-track-breadths-regarding-container-size.html:
* fast/css-grid-layout/place-cell-by-index.html:
* fast/css-grid-layout/resources/grid-alignment.css:
(.alignSelfCenterSafe):
(.alignSelfCenterUnsafe):
(.alignSelfEndSafe):
(.alignSelfEndUnsafe):
(.alignItemsAuto):
(.alignItemsStretch):
(.alignItemsStart):
(.alignItemsEnd):
(.alignItemsCenterSafe):
(.alignItemsCenterUnsafe):
(.alignItemsEndSafe):
(.alignItemsEndUnsafe):
(.justifySelfAuto):
(.justifySelfStretch):
(.justifySelfStart):
(.justifySelfCenter):
(.justifySelfEnd):
(.justifySelfRight):
(.justifySelfLeft):
(.justifySelfFlexStart):
(.justifySelfFlexEnd):
(.justifySelfSelfStart):
(.justifySelfSelfEnd):
(.justifySelfCenterSafe):
(.justifySelfCenterUnsafe):
(.justifyItemsAuto):
(.justifyItemsStretch):
(.justifyItemsStart):
(.justifyItemsCenter):
(.justifyItemsEnd):
(.justifyItemsCenterSafe):
(.justifyItemsCenterUnsafe):
(.justifyItemsEndSafe):
(.justifyItemsEndUnsafe):
(.selfStretch):
(.contentStart):
(.contentCenter):
(.contentEnd):
(.contentCenterSafe):
(.contentCenterUnsafe):
(.contentEndSafe):
(.contentEndUnsafe):
(.contentSpaceBetween):
(.contentSpaceAround):
(.contentSpaceEvenly):
(.contentStretch):
* fast/css-grid-layout/resources/grid.css:
(.verticalRL):
(.verticalLR):
(.horizontalTB):
(.horizontalBT):
(.inline-grid): Deleted.
(.firstRowFirstColumn): Deleted.
(.directionRTL): Deleted.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutcalcresolutiongriditemhtml">trunk/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexandintrinsicsizesexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexandintrinsicsizeshtml">trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html</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="#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="#trunkLayoutTestsfastcssgridlayoutgridalignjustifyoverflowhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifystretchhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetmultiplehtml">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontainermarginborderpaddingscrollbarhtml">trunk/LayoutTests/fast/css-grid-layout/grid-container-margin-border-padding-scrollbar.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentoverflowhtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanhtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementchangecolumnsrepainthtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementchangerowsrepainthtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementrepeatgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersandalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmentverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmentverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautomarginsandstretchhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautosizedalignjustifymarginborderpaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemchangecolumnrepainthtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemorderpaintorderhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemzindexstackingcontextexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemzindexstackingcontexthtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemsshouldnotbestretchedwhenheightorwidthormarginchangehtml">trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontentverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontentverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutjustifyselfcellhtml">trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautoandmarginshtml">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxfixedlogicalheightonlyhtml">trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxfixedlogicalwidthonlyhtml">trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxmaxcontentresolutioncolumnshtml">trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxmaxcontentresolutionrowshtml">trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlinegetsethtml">trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentgriditeminpercentgridtrackinpercentgridhtml">trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentgriditeminpercentgridtrackhtml">trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizeinautohtml">trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizehtml">trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizehtml">trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutplacecellbyindexhtml">trunk/LayoutTests/fast/css-grid-layout/place-cell-by-index.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridalignmentcss">trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridcss">trunk/LayoutTests/fast/css-grid-layout/resources/grid.css</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticallrexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticalrlexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/ChangeLog 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,3 +1,122 @@
</span><ins>+2016-02-19 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Grid Layout Refactoring some layout tests
+ https://bugs.webkit.org/show_bug.cgi?id=154291
+
+ Refactored several tests so they use the shared sizing keywords
+ instead of specific CSS rules.
+
+ Reviewed by Sergio Villar Senin.
+
+ * fast/css-grid-layout/calc-resolution-grid-item.html:
+ * fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt:
+ * fast/css-grid-layout/flex-and-intrinsic-sizes.html:
+ * 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/grid-align-justify-overflow.html:
+ * fast/css-grid-layout/grid-align-justify-stretch.html:
+ * fast/css-grid-layout/grid-align.html:
+ * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
+ * fast/css-grid-layout/grid-columns-rows-get-set.html:
+ * fast/css-grid-layout/grid-container-margin-border-padding-scrollbar.html:
+ * fast/css-grid-layout/grid-content-alignment-and-self-alignment.html:
+ * fast/css-grid-layout/grid-content-alignment-overflow.html:
+ * fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html:
+ * fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html:
+ * fast/css-grid-layout/grid-content-alignment-with-span.html:
+ * fast/css-grid-layout/grid-element-change-columns-repaint.html:
+ * fast/css-grid-layout/grid-element-change-rows-repaint.html:
+ * fast/css-grid-layout/grid-element-repeat-get-set.html:
+ * fast/css-grid-layout/grid-gutters-and-alignment.html:
+ * fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html:
+ * fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html:
+ * fast/css-grid-layout/grid-item-auto-margins-alignment.html:
+ * fast/css-grid-layout/grid-item-auto-margins-and-stretch.html:
+ * fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html:
+ * fast/css-grid-layout/grid-item-change-column-repaint.html:
+ * fast/css-grid-layout/grid-item-order-paint-order.html:
+ * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt: Added.
+ * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt: Added.
+ * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html: Added.
+ * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt: Added.
+ * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html: Added.
+ * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html: Added.
+ * fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html:
+ * fast/css-grid-layout/grid-item-z-index-stacking-context.html:
+ * fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html:
+ * fast/css-grid-layout/grid-justify-content-distribution.html:
+ * fast/css-grid-layout/grid-justify-content-vertical-lr.html:
+ * fast/css-grid-layout/grid-justify-content-vertical-rl.html:
+ * fast/css-grid-layout/justify-self-cell.html:
+ * fast/css-grid-layout/min-width-height-auto-and-margins.html:
+ * fast/css-grid-layout/minmax-fixed-logical-height-only.html:
+ * fast/css-grid-layout/minmax-fixed-logical-width-only.html:
+ * fast/css-grid-layout/minmax-max-content-resolution-columns.html:
+ * fast/css-grid-layout/minmax-max-content-resolution-rows.html:
+ * fast/css-grid-layout/named-grid-line-get-set.html:
+ * fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html:
+ * fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html:
+ * fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html:
+ * fast/css-grid-layout/percent-of-indefinite-track-size.html:
+ * fast/css-grid-layout/percent-track-breadths-regarding-container-size.html:
+ * fast/css-grid-layout/place-cell-by-index.html:
+ * fast/css-grid-layout/resources/grid-alignment.css:
+ (.alignSelfCenterSafe):
+ (.alignSelfCenterUnsafe):
+ (.alignSelfEndSafe):
+ (.alignSelfEndUnsafe):
+ (.alignItemsAuto):
+ (.alignItemsStretch):
+ (.alignItemsStart):
+ (.alignItemsEnd):
+ (.alignItemsCenterSafe):
+ (.alignItemsCenterUnsafe):
+ (.alignItemsEndSafe):
+ (.alignItemsEndUnsafe):
+ (.justifySelfAuto):
+ (.justifySelfStretch):
+ (.justifySelfStart):
+ (.justifySelfCenter):
+ (.justifySelfEnd):
+ (.justifySelfRight):
+ (.justifySelfLeft):
+ (.justifySelfFlexStart):
+ (.justifySelfFlexEnd):
+ (.justifySelfSelfStart):
+ (.justifySelfSelfEnd):
+ (.justifySelfCenterSafe):
+ (.justifySelfCenterUnsafe):
+ (.justifyItemsAuto):
+ (.justifyItemsStretch):
+ (.justifyItemsStart):
+ (.justifyItemsCenter):
+ (.justifyItemsEnd):
+ (.justifyItemsCenterSafe):
+ (.justifyItemsCenterUnsafe):
+ (.justifyItemsEndSafe):
+ (.justifyItemsEndUnsafe):
+ (.selfStretch):
+ (.contentStart):
+ (.contentCenter):
+ (.contentEnd):
+ (.contentCenterSafe):
+ (.contentCenterUnsafe):
+ (.contentEndSafe):
+ (.contentEndUnsafe):
+ (.contentSpaceBetween):
+ (.contentSpaceAround):
+ (.contentSpaceEvenly):
+ (.contentStretch):
+ * fast/css-grid-layout/resources/grid.css:
+ (.verticalRL):
+ (.verticalLR):
+ (.horizontalTB):
+ (.horizontalBT):
+ (.inline-grid): Deleted.
+ (.firstRowFirstColumn): Deleted.
+ (.directionRTL): Deleted.
+
</ins><span class="cx"> 2016-02-18 Andy Estes <aestes@apple.com>
</span><span class="cx">
</span><span class="cx"> Revert to dispatching the popstate event synchronously
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutcalcresolutiongriditemhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -11,17 +11,21 @@
</span><span class="cx">
</span><span class="cx"> .calcWidth {
</span><span class="cx"> width: -webkit-calc(80% + 20%);
</span><ins>+ width: calc(80% + 20%);
</ins><span class="cx"> height: 15px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .calcHeight {
</span><span class="cx"> width: 15px;
</span><span class="cx"> height: -webkit-calc(80% + 20px);
</span><ins>+ height: calc(80% + 20px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .calcHeightAndWidth {
</span><span class="cx"> width: -webkit-calc(80% + 20px);
</span><ins>+ width: calc(80% + 20px);
</ins><span class="cx"> height: -webkit-calc(70% + 30%);
</span><ins>+ height: calc(70% + 30%);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexandintrinsicsizesexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -7,7 +7,7 @@
</span><span class="cx"> Expected 30 for width, but got 70.
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid minContent" data-expected-width="30" data-expected-height="10">
</del><ins>+ <div class="grid min-content" data-expected-width="30" data-expected-height="10">
</ins><span class="cx"> <div>XXX XXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexandintrinsicsizeshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,5 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx">
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx">
</span><span class="cx"> <style>
</span><span class="lines">@@ -15,26 +17,6 @@
</span><span class="cx">
</span><span class="cx"> div { font: 10px/1 Ahem; }
</span><span class="cx">
</span><del>-.minContent {
- width: -webkit-min-content;
- height: -webkit-min-content;
-}
-
-.maxContent {
- width: -webkit-max-content;
- height: -webkit-max-content;
-}
-
-.fitContent {
- width: -webkit-fit-content;
- height: -webkit-fit-content;
-}
-
-.fillAvailable {
- width: -webkit-fill-available;
- height: -webkit-fill-available;
-}
-
</del><span class="cx"> </style>
</span><span class="cx">
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -51,25 +33,25 @@
</span><span class="cx">
</span><span class="cx"> <!-- This fails due to https://bugs.webkit.org/show_bug.cgi?id=150674 -->
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid minContent" data-expected-width="30" data-expected-height="10">
</del><ins>+ <div class="grid min-content" data-expected-width="30" data-expected-height="10">
</ins><span class="cx"> <div>XXX XXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid maxContent" data-expected-width="70" data-expected-height="10">
</del><ins>+ <div class="grid max-content" data-expected-width="70" data-expected-height="10">
</ins><span class="cx"> <div>XXX XXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContent" data-expected-width="70" data-expected-height="10">
</del><ins>+ <div class="grid fit-content" data-expected-width="70" data-expected-height="10">
</ins><span class="cx"> <div>XXX XXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fillAvailable" data-expected-width="100" data-expected-height="100">
</del><ins>+ <div class="grid fill-available" data-expected-width="100" data-expected-height="100">
</ins><span class="cx"> <div>XXX XXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,6 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -16,7 +17,6 @@
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="cx"> border-style: dotted;
</span><span class="cx"> border-color: blue;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -25,12 +25,6 @@
</span><span class="cx"> height: 40px;
</span><span class="cx"> margin: 4px 8px 12px 16px;
</span><span class="cx"> }
</span><del>-
-.stretch {
- align-self: stretch;
- justify-self: stretch;
-}
-
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -40,7 +34,7 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
</span><del>- <div class="grid verticalLR" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="46" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell secondRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -51,10 +45,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'center' | justify-items: 'center'</p>
</span><del>- <div class="grid verticalLR itemsCenter" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR itemsCenter" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="firstRowFirstColumn cell" data-offset-x="124" data-offset-y="36" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="324" data-offset-y="186" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -62,10 +56,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'end' | justify-items: 'end'</p>
</span><del>- <div class="grid verticalLR itemsEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR itemsEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="202" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -73,10 +67,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'left' | justify-items: 'left'</p>
</span><del>- <div class="grid verticalLR itemsLeft" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR itemsLeft" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -84,10 +78,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'right' | justify-items: 'right'</p>
</span><del>- <div class="grid verticalLR itemsRight" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR itemsRight" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -95,10 +89,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -106,10 +100,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -117,10 +111,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -128,10 +122,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="202" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -140,7 +134,7 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
</span><del>- <div class="grid verticalLR directionRTL" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell secondRowFirstColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -151,10 +145,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'center' | justify-items: 'center'</p>
</span><del>- <div class="grid verticalLR directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="124" data-offset-y="236" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="324" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -162,10 +156,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'end' | justify-items: 'end'</p>
</span><del>- <div class="grid verticalLR directionRTL itemsEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL itemsEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -173,10 +167,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'left' | justify-items: 'left'</p>
</span><del>- <div class="grid verticalLR directionRTL itemsLeft" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL itemsLeft" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -184,10 +178,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'right' | justify-items: 'right'</p>
</span><del>- <div class="grid verticalLR directionRTL itemsRight" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL itemsRight" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -195,10 +189,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -206,10 +200,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -217,10 +211,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -228,10 +222,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,6 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -16,7 +17,6 @@
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="cx"> border-style: dotted;
</span><span class="cx"> border-color: blue;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -25,12 +25,6 @@
</span><span class="cx"> height: 40px;
</span><span class="cx"> margin: 4px 8px 12px 16px;
</span><span class="cx"> }
</span><del>-
-.stretch {
- align-self: stretch;
- justify-self: stretch;
-}
-
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -40,7 +34,7 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
</span><del>- <div class="grid verticalRL" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell secondRowFirstColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -51,10 +45,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'center' | justify-items: 'center'</p>
</span><del>- <div class="grid verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="firstRowFirstColumn cell" data-offset-x="324" data-offset-y="36" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="186" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -62,10 +56,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'end' | justify-items: 'end'</p>
</span><del>- <div class="grid verticalRL itemsEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL itemsEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -73,10 +67,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'left' | justify-items: 'left'</p>
</span><del>- <div class="grid verticalRL itemsLeft" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL itemsLeft" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -84,10 +78,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'right' | justify-items: 'right'</p>
</span><del>- <div class="grid verticalRL itemsRight" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL itemsRight" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -95,10 +89,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="402" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -106,10 +100,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -117,10 +111,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -128,10 +122,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -141,7 +135,7 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
</span><del>- <div class="grid verticalRL directionRTL" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL directionRTL" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell secondRowFirstColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -152,10 +146,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'center' | justify-items: 'center'</p>
</span><del>- <div class="grid verticalRL directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="324" data-offset-y="236" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -163,10 +157,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'end' | justify-items: 'end'</p>
</span><del>- <div class="grid verticalRL directionRTL itemsEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL directionRTL itemsEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -174,10 +168,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'left' | justify-items: 'left'</p>
</span><del>- <div class="grid verticalRL directionRTL itemsLeft" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL directionRTL itemsLeft" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -185,10 +179,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'right' | justify-items: 'right'</p>
</span><del>- <div class="grid verticalRL directionRTL itemsRight" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL directionRTL itemsRight" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -196,10 +190,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="402" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -207,10 +201,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -218,10 +212,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -229,10 +223,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</del><ins>+ <div class="grid fit-content verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,6 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -16,7 +17,6 @@
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="cx"> border-style: dotted;
</span><span class="cx"> border-color: blue;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -25,13 +25,6 @@
</span><span class="cx"> height: 40px;
</span><span class="cx"> margin: 4px 8px 12px 16px;
</span><span class="cx"> }
</span><del>-
-
-.stretch {
- align-self: stretch;
- justify-self: stretch;
-}
-
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -41,7 +34,7 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
</span><del>- <div class="grid" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="146" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell secondRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -52,10 +45,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'center' | justify-items: 'center'</p>
</span><del>- <div class="grid itemsCenter" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content itemsCenter" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="firstRowFirstColumn cell" data-offset-x="74" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="224" data-offset-y="286" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -63,10 +56,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'end' | justify-items: 'end'</p>
</span><del>- <div class="grid itemsEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content itemsEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -74,10 +67,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'left' | justify-items: 'left'</p>
</span><del>- <div class="grid itemsLeft" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content itemsLeft" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -85,10 +78,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'right' | justify-items: 'right'</p>
</span><del>- <div class="grid itemsRight" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content itemsRight" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -96,10 +89,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -107,10 +100,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="146" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -118,10 +111,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -129,10 +122,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -141,7 +134,7 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
</span><del>- <div class="grid directionRTL" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell secondRowFirstColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -152,10 +145,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'center' | justify-items: 'center'</p>
</span><del>- <div class="grid directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="274" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="286" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -163,10 +156,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'end' | justify-items: 'end'</p>
</span><del>- <div class="grid directionRTL itemsEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -174,10 +167,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'left' | justify-items: 'left'</p>
</span><del>- <div class="grid directionRTL itemsLeft" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsLeft" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -185,10 +178,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'right' | justify-items: 'right'</p>
</span><del>- <div class="grid directionRTL itemsRight" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsRight" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -196,10 +189,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -207,10 +200,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="302" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -218,10 +211,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -229,10 +222,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifyoverflowhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,7 +1,9 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -10,7 +12,6 @@
</span><span class="cx"> .grid {
</span><span class="cx"> -webkit-grid-template-columns: 150px 150px;
</span><span class="cx"> -webkit-grid-template-rows: 120px 120px 120px;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx"> .cellOverflowWidth {
</span><span class="lines">@@ -25,28 +26,6 @@
</span><span class="cx"> width: 50px;
</span><span class="cx"> height: 40px;
</span><span class="cx"> }
</span><del>-.alignItemsCenter { align-items: center; }
-.alignItemsCenterSafe { align-items: center safe; }
-.alignItemsCenterUnsafe { align-items: center unsafe; }
-.alignItemsEnd { align-items: end; }
-.alignItemsEndSafe { align-items: end safe; }
-.alignItemsEndUnsafe { align-items: end unsafe; }
-.alignSelfCenter { align-self: center; }
-.alignSelfCenterSafe { align-self: center safe; }
-.alignSelfCenterUnsafe { align-self: center unsafe; }
-.alignSelfEnd { align-self: end; }
-.alignSelfEndSafe { align-self: end safe; }
-.alignSelfEndUnsafe { align-self: end unsafe; }
-.justifyItemsCenter { justify-items: center; }
-.justifyItemsCenterSafe { justify-items: center safe; }
-.justifyItemsCenterUnsafe { justify-items: center unsafe; }
-.justifyItemsEnd { justify-items: end; }
-.justifyItemsEndSafe { justify-items: end safe; }
-.justifyItemsEndUnsafe { justify-items: end unsafe; }
-.justifySelfCenter { justify-self: center; }
-.justifySelfCenterSafe { justify-self: center safe; }
-.justifySelfCenterUnsafe { justify-self: center unsafe; }
-.justifySelfEnd { justify-self: end; }
</del><span class="cx"> .thirdRowFirstColumn {
</span><span class="cx"> background-color: green;
</span><span class="cx"> -webkit-grid-column: 1;
</span><span class="lines">@@ -59,7 +38,7 @@
</span><span class="cx"> <p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
</del><ins>+ <div class="grid fit-content alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
</ins><span class="cx"> <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-15" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
</span><span class="lines">@@ -70,7 +49,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsCenterUnsafe justifyItemsCenterUnsafe" data-expected-width="300" data-expected-height="360">
</del><ins>+ <div class="grid fit-content alignItemsCenterUnsafe justifyItemsCenterUnsafe" data-expected-width="300" data-expected-height="360">
</ins><span class="cx"> <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="-15" data-expected-width="50" data-expected-height="150"></div>
</span><span class="cx"> <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
</span><span class="lines">@@ -81,7 +60,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
</del><ins>+ <div class="grid fit-content alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
</ins><span class="cx"> <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
</span><span class="lines">@@ -92,7 +71,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
</del><ins>+ <div class="grid fit-content alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
</ins><span class="cx"> <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
</span><span class="cx"> <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
</span><span class="lines">@@ -103,7 +82,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360">
</del><ins>+ <div class="grid fit-content alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360">
</ins><span class="cx"> <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-30" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
</span><span class="lines">@@ -114,7 +93,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsEndUnsafe justifyItemsEndUnsafe" data-expected-width="300" data-expected-height="360">
</del><ins>+ <div class="grid fit-content alignItemsEndUnsafe justifyItemsEndUnsafe" data-expected-width="300" data-expected-height="360">
</ins><span class="cx"> <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div>
</span><span class="cx"> <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
</span><span class="lines">@@ -125,7 +104,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
</del><ins>+ <div class="grid fit-content alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
</ins><span class="cx"> <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenterUnsafe" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
</span><span class="lines">@@ -136,7 +115,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
</del><ins>+ <div class="grid fit-content alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
</ins><span class="cx"> <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
</span><span class="cx"> <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
</span><span class="cx"> <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifystretchhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,7 +1,9 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -11,7 +13,6 @@
</span><span class="cx"> .grid {
</span><span class="cx"> -webkit-grid-template-columns: 100px 100px;
</span><span class="cx"> -webkit-grid-template-rows: 200px 200px;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -19,78 +20,12 @@
</span><span class="cx"> width: 20px;
</span><span class="cx"> height: 40px;
</span><span class="cx"> }
</span><del>-
-.onlyWidthSet {
- width: 20px;
-}
-
-.onlyHeightSet {
- height: 40px;
-}
-
-.maxHeight {
- max-height: 160px;
-}
-
-.maxWidth {
- max-width: 90px;
-}
-
-.minWidth {
- min-width: 120px;
-}
-
-.minHeight {
- min-height: 220px;
-}
-
-.alignItemsAuto {
- align-items: auto;
-}
-
-.alignItemsStretch {
- align-items: stretch;
-}
-
-.alignItemsStart {
- align-items: start;
-}
-
-.alignSelfAuto {
- align-self: auto;
-}
-
-.alignSelfStretch {
- align-self: stretch;
-}
-
-.alignSelfStart {
- align-self: start;
-}
-
-.justifyItemsAuto {
- justify-items: auto;
-}
-
-.justifyItemsStretch {
- justify-items: stretch;
-}
-
-.justifyItemsStart {
- justify-items: start;
-}
-
-.justifySelfAuto {
- justify-self: auto;
-}
-
-.justifySelfStretch {
- justify-self: stretch;
-}
-
-.justifySelfStart {
- justify-self: start;
-}
</del><ins>+.onlyWidthSet { width: 20px; }
+.onlyHeightSet { height: 40px; }
+.maxHeight { max-height: 160px; }
+.maxWidth { max-width: 90px; }
+.minWidth { min-width: 120px; }
+.minHeight { min-height: 220px; }
</ins><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -98,7 +33,7 @@
</span><span class="cx"> <p>This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.</p>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div>
</span><span class="cx"> <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
</span><span class="lines">@@ -107,7 +42,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
</span><span class="cx"> <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div>
</span><span class="lines">@@ -116,7 +51,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="160"></div>
</span><span class="cx"> <div class="minWidth widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="120" data-expected-height="40"></div>
</span><span class="cx"> <div class="minHeight onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="220"></div>
</span><span class="lines">@@ -125,7 +60,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
</span><span class="lines">@@ -134,7 +69,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsStretch justifyItemsStart" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content alignItemsStretch justifyItemsStart" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div>
</span><span class="cx"> <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
</span><span class="lines">@@ -143,7 +78,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsStart justifyItemsStretch" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content alignItemsStart justifyItemsStretch" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
</span><span class="cx"> <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div>
</span><span class="lines">@@ -152,7 +87,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
</span><span class="lines">@@ -161,7 +96,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsAuto justifyItemsAuto" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content alignItemsAuto justifyItemsAuto" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
</span><span class="lines">@@ -170,7 +105,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
</span><span class="lines">@@ -179,7 +114,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div>
</span><span class="lines">@@ -189,7 +124,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- RTL direction (it should not affect the block-flow direction). -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid directionRTL alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content directionRTL alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
</span><span class="lines">@@ -199,7 +134,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="widthAndHeightSet firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
</span><span class="lines">@@ -209,7 +144,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- Vertical RL writing mode. -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
</span><span class="lines">@@ -218,7 +153,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="lines">@@ -228,7 +163,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- Vertical LR writing mode. -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
</span><span class="lines">@@ -237,7 +172,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,6 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -12,7 +13,6 @@
</span><span class="cx"> .grid {
</span><span class="cx"> -webkit-grid-template-columns: 100px 100px;
</span><span class="cx"> -webkit-grid-template-rows: 200px 200px;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -34,7 +34,7 @@
</span><span class="cx"> <p>This test checks that the align-self property is applied correctly.</p>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -45,7 +45,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -55,7 +55,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- Default alignment and initial values. -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid alignItemsCenter" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content alignItemsCenter" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -64,7 +64,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -74,7 +74,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- RTL direction (it should not affect the block-flow direction). -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -85,7 +85,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -95,7 +95,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -106,7 +106,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -116,7 +116,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- Vertical RL writing mode. -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -127,7 +127,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -137,7 +137,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- Vertical LR writing mode. -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -148,7 +148,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -158,7 +158,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- Vertical RL writing mode with opposite block-flow directions grid container vs grid item. -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
</span><span class="cx"> </div>
</span><span class="cx"> <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
</span><span class="lines">@@ -180,7 +180,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40">
</span><span class="cx"> <div class="item"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -198,7 +198,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- Vertical LR writing mode with opposite block-flow directions grid container vs grid item. -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
</span><span class="cx"> </div>
</span><span class="cx"> <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
</span><span class="lines">@@ -220,7 +220,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalRL" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40">
</span><span class="cx"> <div class="item"></div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetmultiplehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,9 +1,10 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><del>-.grid {
</del><ins>+.definite {
</ins><span class="cx"> /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
</span><span class="cx"> width: 800px;
</span><span class="cx"> height: 600px;
</span><span class="lines">@@ -107,34 +108,34 @@
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><del>-<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
-<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
-<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize">
</del><ins>+<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
+<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid gridWithAuto" id="gridWithAutoElement">
</del><ins>+<div class="grid definite gridWithAuto" id="gridWithAutoElement">
</ins><span class="cx"> <div class="gridItem2"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid gridWithEM" id="gridWithEMElement"></div>
-<div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
-<div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
-<div class="grid gridWithThreeItems" id="gridWithThreeItems"></div>
-<div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
-<div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
-<div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
-<div class="grid gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement">
</del><ins>+<div class="grid definite gridWithEM" id="gridWithEMElement"></div>
+<div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
+<div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
+<div class="grid definite gridWithThreeItems" id="gridWithThreeItems"></div>
+<div class="grid definite gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
+<div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
+<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
+<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> <div class="gridItem2"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
-<div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
-<div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div>
-<div class="grid gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
-<div class="grid gridWithCalcCalc" id="gridWithCalcCalc"></div>
-<div class="grid gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
-<div class="grid gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
-<div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
-<div class="grid gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
</del><ins>+<div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
+<div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
+<div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction"></div>
+<div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
+<div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div>
+<div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
+<div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
+<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
+<div class="grid definite gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
</ins><span class="cx"> <script src="resources/grid-definitions-parsing-utils.js"></script>
</span><span class="cx"> <script src="resources/grid-columns-rows-get-set-multiple.js"></script>
</span><span class="cx"> <script src="../../resources/js-test-post.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,9 +1,10 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><del>-.grid {
</del><ins>+.definite {
</ins><span class="cx"> /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
</span><span class="cx"> width: 800px;
</span><span class="cx"> height: 600px;
</span><span class="lines">@@ -93,38 +94,39 @@
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><del>-<div class="grid gridWithNone" id="gridWithNoneElement"></div>
-<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
-<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
-<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"></div>
-<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
</del><ins>+<div class="grid definite gridWithNone" id="gridWithNoneElement"></div>
+<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
+<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
-<div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
</del><ins>+<div class="grid definite gridWithAuto" id="gridWithAutoElement"></div>
+<div class="grid definite gridWithAuto" id="gridWithAutoWithoutSizeElement"></div>
+<div class="grid definite gridWithAuto fontSpec" id="gridWithAutoWithChildrenElement">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid gridWithEM" id="gridWithEMElement"></div>
-<div class="grid gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
-<div class="grid gridWithFitContent" id="gridWithFitContentElement"></div>
-<div class="grid gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
-<div class="grid gridWithMinMax" id="gridWithMinMaxElement"></div>
-<div class="grid gridWithMinContent" id="gridWithMinContentElement"></div>
-<div class="grid gridWithMinContent" id="gridWithMinContentWithChildrenElement">
</del><ins>+<div class="grid definite gridWithEM" id="gridWithEMElement"></div>
+<div class="grid definite gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
+<div class="grid definite gridWithFitContent" id="gridWithFitContentElement"></div>
+<div class="grid definite gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
+<div class="grid definite gridWithMinMax" id="gridWithMinMaxElement"></div>
+<div class="grid definite gridWithMinContent" id="gridWithMinContentElement"></div>
+<div class="grid definite gridWithMinContent" id="gridWithMinContentWithChildrenElement">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> <div class="gridItem2"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid gridWithMaxContent" id="gridWithMaxContentElement"></div>
-<div class="grid gridWithMaxContent" id="gridWithMaxContentWithChildrenElement">
</del><ins>+<div class="grid definite gridWithMaxContent" id="gridWithMaxContentElement"></div>
+<div class="grid definite gridWithMaxContent" id="gridWithMaxContentWithChildrenElement">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> <div class="gridItem2"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid gridWithFraction" id="gridWithFractionElement"></div>
-<div class="grid gridWithCalc" id="gridWithCalcElement"></div>
-<div class="grid gridWithCalcComplex" id="gridWithCalcComplexElement"></div>
-<div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div>
-<div class="grid gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div>
-<div class="grid gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMaxElement">
</del><ins>+<div class="grid definite gridWithFraction" id="gridWithFractionElement"></div>
+<div class="grid definite gridWithCalc" id="gridWithCalcElement"></div>
+<div class="grid definite gridWithCalcComplex" id="gridWithCalcComplexElement"></div>
+<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div>
+<div class="grid definite gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div>
+<div class="grid definite gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMaxElement">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> </div>
</span><span class="cx"> <script src="resources/grid-definitions-parsing-utils.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontainermarginborderpaddingscrollbarhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-container-margin-border-padding-scrollbar.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-container-margin-border-padding-scrollbar.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-margin-border-padding-scrollbar.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,13 +1,10 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><del>-.grid {
- width: -webkit-min-content;
- height: -webkit-min-content;
-}
-
</del><span class="cx"> .margin {
</span><span class="cx"> margin: 10px;
</span><span class="cx"> }
</span><span class="lines">@@ -35,67 +32,67 @@
</span><span class="cx"> <body onload="checkLayout('.grid');">
</span><span class="cx"> <p>This test checks that grid container size includes border, padding and scrollbar; ignoring margin as expected.</p>
</span><span class="cx">
</span><del>- <div class="grid" data-expected-width="100" data-expected-height="100">
</del><ins>+ <div class="grid min-content" data-expected-width="100" data-expected-height="100">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid margin" data-expected-width="100" data-expected-height="100">
</del><ins>+ <div class="grid min-content margin" data-expected-width="100" data-expected-height="100">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid border" data-expected-width="110" data-expected-height="110">
</del><ins>+ <div class="grid min-content border" data-expected-width="110" data-expected-height="110">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid padding" data-expected-width="140" data-expected-height="140">
</del><ins>+ <div class="grid min-content padding" data-expected-width="140" data-expected-height="140">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid scroll" data-expected-width="115" data-expected-height="115">
</del><ins>+ <div class="grid min-content scroll" data-expected-width="115" data-expected-height="115">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid margin border" data-expected-width="110" data-expected-height="110">
</del><ins>+ <div class="grid min-content margin border" data-expected-width="110" data-expected-height="110">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid margin padding" data-expected-width="140" data-expected-height="140">
</del><ins>+ <div class="grid min-content margin padding" data-expected-width="140" data-expected-height="140">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid margin scroll" data-expected-width="115" data-expected-height="115">
</del><ins>+ <div class="grid min-content margin scroll" data-expected-width="115" data-expected-height="115">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid border padding" data-expected-width="150" data-expected-height="150">
</del><ins>+ <div class="grid min-content border padding" data-expected-width="150" data-expected-height="150">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid border scroll" data-expected-width="125" data-expected-height="125">
</del><ins>+ <div class="grid min-content border scroll" data-expected-width="125" data-expected-height="125">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid padding scroll" data-expected-width="155" data-expected-height="155">
</del><ins>+ <div class="grid min-content padding scroll" data-expected-width="155" data-expected-height="155">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid margin border padding" data-expected-width="150" data-expected-height="150">
</del><ins>+ <div class="grid min-content margin border padding" data-expected-width="150" data-expected-height="150">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid margin border scroll" data-expected-width="125" data-expected-height="125">
</del><ins>+ <div class="grid min-content margin border scroll" data-expected-width="125" data-expected-height="125">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid margin padding scroll" data-expected-width="155" data-expected-height="155">
</del><ins>+ <div class="grid min-content margin padding scroll" data-expected-width="155" data-expected-height="155">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid border padding scroll" data-expected-width="165" data-expected-height="165">
</del><ins>+ <div class="grid min-content border padding scroll" data-expected-width="165" data-expected-height="165">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid margin border padding scroll" data-expected-width="165" data-expected-height="165">
</del><ins>+ <div class="grid min-content margin border padding scroll" data-expected-width="165" data-expected-height="165">
</ins><span class="cx"> <div class="item" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -38,42 +39,11 @@
</span><span class="cx"> -webkit-grid-auto-rows: minmax(40px, auto);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.spaceBetween {
- justify-content: space-between;
- align-content: space-between;
-}
</del><span class="cx">
</span><del>-.spaceAround {
- justify-content: space-around;
- align-content: space-around;
-}
-
-.spaceEvenly {
- justify-content: space-evenly;
- align-content: space-evenly;
-}
-
-.stretch {
- justify-content: stretch;
- align-content: stretch;
-}
-
</del><span class="cx"> .cell {
</span><span class="cx"> width: 20px;
</span><span class="cx"> height: 40px;
</span><span class="cx"> }
</span><del>-.justifyCenter {
- justify-self: center;
-}
-.alignCenter {
- align-self: center;
-}
-.justifyEnd {
- justify-self: end;
-}
-.alignEnd {
- align-self: end;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -82,9 +52,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
</span><del>- <div class="grid spaceBetween" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -92,9 +62,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
</span><del>- <div class="grid spaceBetween" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -102,9 +72,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
</span><del>- <div class="grid spaceAround" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -112,9 +82,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
</span><del>- <div class="grid spaceAround" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -122,9 +92,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
</span><del>- <div class="grid spaceEvenly" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -132,9 +102,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
</span><del>- <div class="grid spaceEvenly" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -142,9 +112,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p>
</span><del>- <div class="grid stretchedGrid stretch" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyCenter alignCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell justifyCenter alignCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -152,9 +122,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p>
</span><del>- <div class="grid stretchedGrid stretch" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyEnd alignEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell justifyEnd alignEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -163,9 +133,9 @@
</span><span class="cx"> <!-- RTL direction. -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
</span><del>- <div class="grid spaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -173,9 +143,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
</span><del>- <div class="grid spaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -183,9 +153,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
</span><del>- <div class="grid spaceAround directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -193,9 +163,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
</span><del>- <div class="grid spaceAround directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -203,9 +173,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
</span><del>- <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -213,9 +183,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
</span><del>- <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -223,9 +193,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p>
</span><del>- <div class="grid stretchedGrid stretch directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyCenter alignCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell justifyCenter alignCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -233,9 +203,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p>
</span><del>- <div class="grid stretchedGrid stretch directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifyEnd alignEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell justifyEnd alignEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</del><ins>+ <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</ins><span class="cx"> <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentoverflowhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -22,37 +23,6 @@
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 150px;
</span><span class="cx"> }
</span><del>-
-.center {
- align-content: center;
- justify-content: center;
-}
-
-.centerSafe {
- align-content: center safe;
- justify-content: center safe;
-}
-
-.centerUnsafe {
- align-content: center unsafe;
- justify-content: center unsafe;
-}
-
-.end {
- align-content: end;
- justify-content: end;
-}
-
-.endSafe {
- align-content: end safe;
- justify-content: end safe;
-}
-
-.endUnsafe {
- align-content: end unsafe;
- justify-content: end unsafe;
-}
-
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -60,7 +30,7 @@
</span><span class="cx"> <p>This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.</p>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid overflowWidth center" data-expected-width="60" data-expected-height="300">
</del><ins>+ <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -69,7 +39,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid overflowHeight centerUnsafe" data-expected-width="200" data-expected-height="150">
</del><ins>+ <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -78,7 +48,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid overflowWidth centerSafe" data-expected-width="60" data-expected-height="300">
</del><ins>+ <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -87,7 +57,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid overflowHeight centerSafe" data-expected-width="200" data-expected-height="150">
</del><ins>+ <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -96,7 +66,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid overflowWidth end" data-expected-width="60" data-expected-height="300">
</del><ins>+ <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -105,7 +75,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid overflowHeight endUnsafe" data-expected-width="200" data-expected-height="150">
</del><ins>+ <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -114,7 +84,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid overflowWidth endSafe" data-expected-width="60" data-expected-height="300">
</del><ins>+ <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -123,7 +93,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid overflowHeight endSafe" data-expected-width="200" data-expected-height="150">
</del><ins>+ <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -37,22 +38,6 @@
</span><span class="cx"> -webkit-grid-auto-columns: auto;
</span><span class="cx"> -webkit-grid-auto-rows: auto;
</span><span class="cx"> }
</span><del>-.spaceBetween {
- justify-content: space-between;
- align-content: space-between;
-}
-.spaceAround {
- justify-content: space-around;
- align-content: space-around;
-}
-.spaceEvenly {
- justify-content: space-evenly;
- align-content: space-evenly;
-}
-.stretch {
- justify-content: stretch;
- align-content: stretch;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -61,7 +46,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-between'</p>
</span><del>- <div class="grid spaceBetween verticalLR" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceBetween verticalLR" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
</span><span class="cx"> <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -71,7 +56,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-around'</p>
</span><del>- <div class="grid spaceAround verticalLR" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceAround verticalLR" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
</span><span class="cx"> <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -81,7 +66,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-evenly'</p>
</span><del>- <div class="grid spaceEvenly verticalLR" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceEvenly verticalLR" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
</span><span class="cx"> <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -91,7 +76,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'stretch'</p>
</span><del>- <div class="grid stretchedGrid stretch verticalLR" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid stretchedGrid contentStretch verticalLR" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="c" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
</span><span class="lines">@@ -102,7 +87,7 @@
</span><span class="cx"> <!-- RTL direction. -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-between'</p>
</span><del>- <div class="grid spaceBetween verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceBetween verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
</span><span class="cx"> <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="160" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -112,7 +97,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-around'</p>
</span><del>- <div class="grid spaceAround verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceAround verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
</span><span class="cx"> <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="130" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -122,7 +107,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-evenly'</p>
</span><del>- <div class="grid spaceEvenly verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceEvenly verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
</span><span class="cx"> <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="120" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -132,7 +117,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'stretch'</p>
</span><del>- <div class="grid stretchedGrid stretch verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid stretchedGrid contentStretch verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="c" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -37,22 +38,6 @@
</span><span class="cx"> -webkit-grid-auto-columns: auto;
</span><span class="cx"> -webkit-grid-auto-rows: auto;
</span><span class="cx"> }
</span><del>-.spaceBetween {
- justify-content: space-between;
- align-content: space-between;
-}
-.spaceAround {
- justify-content: space-around;
- align-content: space-around;
-}
-.spaceEvenly {
- justify-content: space-evenly;
- align-content: space-evenly;
-}
-.stretch {
- justify-content: stretch;
- align-content: stretch;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -61,7 +46,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-between'</p>
</span><del>- <div class="grid spaceBetween verticalRL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceBetween verticalRL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
</span><span class="cx"> <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -71,7 +56,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-around'</p>
</span><del>- <div class="grid spaceAround verticalRL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceAround verticalRL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
</span><span class="cx"> <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -81,7 +66,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-evenly'</p>
</span><del>- <div class="grid spaceEvenly verticalRL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceEvenly verticalRL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
</span><span class="cx"> <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -91,7 +76,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'stretch'</p>
</span><del>- <div class="grid stretchedGrid stretch verticalRL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid stretchedGrid contentStretch verticalRL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
</span><span class="lines">@@ -102,7 +87,7 @@
</span><span class="cx"> <!-- RTL direction. -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-between'</p>
</span><del>- <div class="grid spaceBetween verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceBetween verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
</span><span class="cx"> <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -112,7 +97,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-around'</p>
</span><del>- <div class="grid spaceAround verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceAround verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
</span><span class="cx"> <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="30" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -122,7 +107,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-evenly'</p>
</span><del>- <div class="grid spaceEvenly verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid contentSpaceEvenly verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
</span><span class="cx"> <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
</span><span class="cx"> <div class="c" data-offset-x="40" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
</span><span class="lines">@@ -132,7 +117,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'stretch'</p>
</span><del>- <div class="grid stretchedGrid stretch verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
</del><ins>+ <div class="grid stretchedGrid contentStretch verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
</ins><span class="cx"> <div class="a" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="c" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -37,22 +38,6 @@
</span><span class="cx"> -webkit-grid-auto-columns: auto;
</span><span class="cx"> -webkit-grid-auto-rows: auto;
</span><span class="cx"> }
</span><del>-.spaceBetween {
- justify-content: space-between;
- align-content: space-between;
-}
-.spaceAround {
- justify-content: space-around;
- align-content: space-around;
-}
-.spaceEvenly {
- justify-content: space-evenly;
- align-content: space-evenly;
-}
-.stretch {
- justify-content: stretch;
- align-content: stretch;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -61,7 +46,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-between'</p>
</span><del>- <div class="grid spaceBetween" data-expected-width="300" data-expected-height="200">
</del><ins>+ <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
</ins><span class="cx"> <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
</span><span class="cx"> <div class="b" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
</span><span class="cx"> <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -71,7 +56,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-around'</p>
</span><del>- <div class="grid spaceAround" data-expected-width="300" data-expected-height="200">
</del><ins>+ <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
</ins><span class="cx"> <div class="a" data-offset-x="40" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
</span><span class="cx"> <div class="b" data-offset-x="240" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
</span><span class="cx"> <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -81,7 +66,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'space-evenly'</p>
</span><del>- <div class="grid spaceEvenly" data-expected-width="300" data-expected-height="200">
</del><ins>+ <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
</ins><span class="cx"> <div class="a" data-offset-x="60" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
</span><span class="cx"> <div class="b" data-offset-x="220" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
</span><span class="cx"> <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -91,7 +76,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: LTR | distribution: 'stretch'</p>
</span><del>- <div class="grid stretchedGrid stretch" data-expected-width="300" data-expected-height="200">
</del><ins>+ <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
</ins><span class="cx"> <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="b" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</span><span class="lines">@@ -102,7 +87,7 @@
</span><span class="cx"> <!-- RTL direction. -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-between'</p>
</span><del>- <div class="grid spaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
</del><ins>+ <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
</ins><span class="cx"> <div class="a" data-offset-x="140" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
</span><span class="cx"> <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
</span><span class="cx"> <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -112,7 +97,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-around'</p>
</span><del>- <div class="grid spaceAround directionRTL" data-expected-width="300" data-expected-height="200">
</del><ins>+ <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
</ins><span class="cx"> <div class="a" data-offset-x="140" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
</span><span class="cx"> <div class="b" data-offset-x="40" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
</span><span class="cx"> <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -122,7 +107,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'space-evenly''</p>
</span><del>- <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
</del><ins>+ <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
</ins><span class="cx"> <div class="a" data-offset-x="140" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
</span><span class="cx"> <div class="b" data-offset-x="60" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
</span><span class="cx"> <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -132,7 +117,7 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <p>direction: RTL | distribution: 'stretch'</p>
</span><del>- <div class="grid stretchedGrid stretch directionRTL" data-expected-width="300" data-expected-height="200">
</del><ins>+ <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
</ins><span class="cx"> <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementchangecolumnsrepainthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -9,6 +9,7 @@
</span><span class="cx"> }
</span><span class="cx"> window.addEventListener("load", runRepaintTest, false);
</span><span class="cx"> </script>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -16,7 +17,6 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- width: -webkit-min-content;
</del><span class="cx"> -webkit-grid-template-rows: 50px;
</span><span class="cx"> -webkit-grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
</span><span class="cx"> }
</span><span class="lines">@@ -27,7 +27,7 @@
</span><span class="cx"> <body>
</span><span class="cx"> <div> This test checks that changing the grid-template-columns lead to a repaint. The final grid element should be 250px * 50px, the grid item should be 50px * 50px. No trace of the elements before the grid-template-columns change should be seen.</div>
</span><span class="cx"> <div class="constrainedContainer">
</span><del>- <div class="grid">
</del><ins>+ <div class="grid min-content">
</ins><span class="cx"> <div class="sizedToGridArea"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementchangerowsrepainthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -9,6 +9,7 @@
</span><span class="cx"> }
</span><span class="cx"> window.addEventListener("load", runRepaintTest, false);
</span><span class="cx"> </script>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -16,7 +17,6 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> -webkit-grid-template-rows: 50px 100px;
</span><span class="cx"> -webkit-grid-template-columns: 100px;
</span><span class="cx"> }
</span><span class="lines">@@ -27,7 +27,7 @@
</span><span class="cx"> <body>
</span><span class="cx"> <div>This test checks that changing the grid-template-rows lead to a repaint. The final grid element should be 100px * 150px, the grid item should be 100px * 100px. No trace of the elements before the grid-template-rows change should be seen.</div>
</span><span class="cx"> <div class="constrainedContainer">
</span><del>- <div class="grid">
</del><ins>+ <div class="grid fit-content">
</ins><span class="cx"> <div class="sizedToGridArea"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementrepeatgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,14 +1,14 @@
</span><span class="cx"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><del>-.grid {
</del><ins>+.definite {
</ins><span class="cx"> /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
</span><span class="cx"> width: 800px;
</span><span class="cx"> height: 600px;
</span><span class="cx"> }
</span><del>-
</del><span class="cx"> .gridItem {
</span><span class="cx"> -webkit-grid-column: 1;
</span><span class="cx"> -webkit-grid-row: 1;
</span><span class="lines">@@ -71,28 +71,28 @@
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><del>-<div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
-<div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
-<div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
-<div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
</del><ins>+<div class="grid definite singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
+<div class="grid min-content singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
+<div class="grid definite twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
+<div class="grid definite twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> <div class="gridItem2"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid twoDoubleTrackRepeat" id="twoDoubleTrackRepeat">
</del><ins>+<div class="grid definite twoDoubleTrackRepeat" id="twoDoubleTrackRepeat">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> <div class="gridItem2"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat">
</del><ins>+<div class="grid definite twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> <div class="gridItem2"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
-<div class="grid trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
-<div class="grid leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
-<div class="grid mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
</del><ins>+<div class="grid definite twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
+<div class="grid definite trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
+<div class="grid definite leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
+<div class="grid definite mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
</del><ins>+<div class="grid definite mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
</ins><span class="cx">
</span><span class="cx"> <script src="resources/grid-definitions-parsing-utils.js"></script>
</span><span class="cx"> <script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersandalignmenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,7 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><del>-<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
</del><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="cx"> <style>
</span><span class="lines">@@ -10,7 +10,6 @@
</span><span class="cx"> .grid100And200 {
</span><span class="cx"> -webkit-grid-template-columns: 100px 100px;
</span><span class="cx"> -webkit-grid-template-rows: 200px 200px;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> position: relative; /* For the <p> comments */
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -36,7 +35,6 @@
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="cx"> border-style: dotted;
</span><span class="cx"> border-color: blue;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> position: relative; /* For the <p> comments */
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -56,11 +54,6 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.stretch {
- align-self: stretch;
- justify-self: stretch;
-}
-
</del><span class="cx"> .stretchedGrid { -webkit-grid-auto-columns: auto; }
</span><span class="cx">
</span><span class="cx"> .gridRowColumnGaps {
</span><span class="lines">@@ -95,7 +88,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- Check that gutters do not interfere with self alignment computation. -->
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid grid100And200 alignItemsCenter gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
</del><ins>+ <div class="grid grid100And200 fit-content alignItemsCenter gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
</ins><span class="cx"> <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="121" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -104,7 +97,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid grid100And200 verticalLR gridRowColumnGaps" data-expected-width="417" data-expected-height="221">
</del><ins>+ <div class="grid grid100And200 fit-content verticalLR gridRowColumnGaps" data-expected-width="417" data-expected-height="221">
</ins><span class="cx"> <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
</span><span class="cx"> </div>
</span><span class="cx"> <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="121" data-expected-width="20" data-expected-height="40">
</span><span class="lines">@@ -126,7 +119,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid grid100And200 directionRTL gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
</del><ins>+ <div class="grid grid100And200 fit-content directionRTL gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
</ins><span class="cx"> <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="121" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -274,10 +267,10 @@
</span><span class="cx"> <div class="container">
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid gridWithPaddingBorder directionLTR itemsSelfStart gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
</del><ins>+ <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfStart gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="151" 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="227" data-expected-width="100" data-expected-height="200"></div>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="151" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="167" data-offset-y="231" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -285,10 +278,10 @@
</span><span class="cx"> <div class="container">
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid gridWithPaddingBorder directionLTR itemsSelfEnd gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
</del><ins>+ <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfEnd gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="151" 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="227" data-expected-width="100" data-expected-height="200"></div>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="151" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="167" data-offset-y="375" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -296,10 +289,10 @@
</span><span class="cx"> <div class="container">
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'right' | justify-items: 'right'</p>
</span><del>- <div class="grid gridWithPaddingBorder directionRTL itemsRight gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
</del><ins>+ <div class="grid gridWithPaddingBorder fit-content directionRTL itemsRight gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="323" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="231" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -307,10 +300,10 @@
</span><span class="cx"> <div class="container">
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid gridWithPaddingBorder directionRTL itemsSelfStart gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
</del><ins>+ <div class="grid gridWithPaddingBorder fit-content directionRTL itemsSelfStart gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="323" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
</span><del>- <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="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="231" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmentverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,7 +1,9 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -11,7 +13,6 @@
</span><span class="cx"> .grid {
</span><span class="cx"> -webkit-grid-template-columns: 100px 100px;
</span><span class="cx"> -webkit-grid-template-rows: 200px 200px;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -25,11 +26,6 @@
</span><span class="cx"> .autoMarginBottom { margin-bottom: auto; }
</span><span class="cx"> .autoMarginLeft { margin-left: auto; }
</span><span class="cx"> .autoMargin { margin: auto; }
</span><del>-
-.itemsCenter {
- align-items: center;
- justify-items: center;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -38,7 +34,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR itemsCenter" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR itemsCenter">
</ins><span class="cx"> <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -48,7 +44,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR">
</ins><span class="cx"> <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -58,7 +54,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR itemsCenter" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR itemsCenter">
</ins><span class="cx"> <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="lines">@@ -68,7 +64,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR">
</ins><span class="cx"> <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="lines">@@ -79,7 +75,7 @@
</span><span class="cx"> <!-- direction RTL -->
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR itemsCenter directionRTL">
</ins><span class="cx"> <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -90,7 +86,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL">
</ins><span class="cx"> <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -100,7 +96,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR itemsCenter directionRTL">
</ins><span class="cx"> <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="lines">@@ -111,7 +107,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR directionRTL">
</ins><span class="cx"> <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmentverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,7 +1,9 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -11,7 +13,6 @@
</span><span class="cx"> .grid {
</span><span class="cx"> -webkit-grid-template-columns: 100px 100px;
</span><span class="cx"> -webkit-grid-template-rows: 200px 200px;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -25,11 +26,6 @@
</span><span class="cx"> .autoMarginBottom { margin-bottom: auto; }
</span><span class="cx"> .autoMarginLeft { margin-left: auto; }
</span><span class="cx"> .autoMargin { margin: auto; }
</span><del>-
-.itemsCenter {
- align-items: center;
- justify-items: center;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -38,7 +34,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL itemsCenter" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL itemsCenter">
</ins><span class="cx"> <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -48,7 +44,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL">
</ins><span class="cx"> <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -58,7 +54,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL itemsCenter" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL itemsCenter">
</ins><span class="cx"> <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="lines">@@ -68,7 +64,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL">
</ins><span class="cx"> <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="lines">@@ -79,7 +75,7 @@
</span><span class="cx"> <!-- direction RTL -->
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL itemsCenter directionRTL">
</ins><span class="cx"> <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -90,7 +86,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL directionRTL">
</ins><span class="cx"> <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -100,7 +96,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL itemsCenter directionRTL">
</ins><span class="cx"> <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,7 +1,9 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -11,7 +13,6 @@
</span><span class="cx"> .grid {
</span><span class="cx"> -webkit-grid-template-columns: 100px 100px;
</span><span class="cx"> -webkit-grid-template-rows: 200px 200px;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -25,11 +26,6 @@
</span><span class="cx"> .autoMarginBottom { margin-bottom: auto; }
</span><span class="cx"> .autoMarginLeft { margin-left: auto; }
</span><span class="cx"> .autoMargin { margin: auto; }
</span><del>-
-.itemsCenter {
- align-items: center;
- justify-items: center;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -38,7 +34,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid itemsCenter" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content itemsCenter">
</ins><span class="cx"> <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -48,7 +44,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content">
</ins><span class="cx"> <div class="item autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -58,7 +54,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid itemsCenter" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content itemsCenter">
</ins><span class="cx"> <div class="autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="lines">@@ -68,7 +64,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content">
</ins><span class="cx"> <div class="autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="lines">@@ -79,7 +75,7 @@
</span><span class="cx"> <!-- direction RTL -->
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid itemsCenter directionRTL" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content itemsCenter directionRTL">
</ins><span class="cx"> <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -89,7 +85,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content directionRTL">
</ins><span class="cx"> <div class="item autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
</span><span class="cx"> <div class="item autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
</span><span class="lines">@@ -99,7 +95,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid itemsCenter directionRTL" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content itemsCenter directionRTL">
</ins><span class="cx"> <div class="autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="lines">@@ -109,7 +105,7 @@
</span><span class="cx">
</span><span class="cx"> <p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p>
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content directionRTL">
</ins><span class="cx"> <div class="autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span><span class="cx"> <div class="autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautomarginsandstretchhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,6 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="lines">@@ -11,7 +12,6 @@
</span><span class="cx"> .grid {
</span><span class="cx"> -webkit-grid-template-columns: 100px 100px;
</span><span class="cx"> -webkit-grid-template-rows: 200px 200px;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> font: 15px/1 Ahem;
</span><span class="cx"> }
</span><span class="lines">@@ -47,7 +47,7 @@
</span><span class="cx"> <p>This test checks that the 'stretch' value is only applied if neither of its margins (in the appropriate axis) are 'auto'.</p>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">
</span><span class="cx"> <div class="widthAndHeightSet"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -64,7 +64,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
</span><span class="cx"> <div class="widthAndHeightSet"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -81,7 +81,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
</span><span class="cx"> <div class="widthAndHeightSet"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -99,7 +99,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- RTL direction -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200">
</span><span class="cx"> <div class="widthAndHeightSet"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -116,7 +116,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid directionRTL verticalRL" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content directionRTL verticalRL" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100">
</span><span class="cx"> <div class="widthAndHeightSet"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -133,7 +133,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid directionRTL verticalLR" data-expected-width="400" data-expected-height="200">
</del><ins>+ <div class="grid fit-content directionRTL verticalLR" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
</span><span class="cx"> <div class="widthAndHeightSet"></div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautosizedalignjustifymarginborderpaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,4 +1,5 @@
</span><span class="cx"> <!DOCTYPE html>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -14,7 +15,6 @@
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="cx"> border-style: dotted;
</span><span class="cx"> border-color: blue;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -34,7 +34,7 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
</span><del>- <div class="grid itemsStart" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content itemsStart" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="146" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> <div class="cell secondRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="lines">@@ -45,10 +45,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'center' | justify-items: 'center'</p>
</span><del>- <div class="grid itemsCenter" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content itemsCenter" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="firstRowFirstColumn cell" data-offset-x="74" data-offset-y="86" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="224" data-offset-y="286" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -56,10 +56,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'end' | justify-items: 'end'</p>
</span><del>- <div class="grid itemsEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content itemsEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -67,10 +67,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'left' | justify-items: 'left'</p>
</span><del>- <div class="grid itemsLeft" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content itemsLeft" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -78,10 +78,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR | align-items: 'right' | justify-items: 'right'</p>
</span><del>- <div class="grid itemsRight" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content itemsRight" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -89,10 +89,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -100,10 +100,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="146" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -111,10 +111,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -122,10 +122,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -134,7 +134,7 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
</span><del>- <div class="grid directionRTL itemsStart" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsStart" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> <div class="cell secondRowFirstColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="lines">@@ -145,10 +145,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'center' | justify-items: 'center'</p>
</span><del>- <div class="grid directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="274" data-offset-y="86" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="286" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -156,10 +156,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'end' | justify-items: 'end'</p>
</span><del>- <div class="grid directionRTL itemsEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -167,10 +167,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'left' | justify-items: 'left'</p>
</span><del>- <div class="grid directionRTL itemsLeft" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsLeft" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -178,10 +178,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL | align-items: 'right' | justify-items: 'right'</p>
</span><del>- <div class="grid directionRTL itemsRight" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsRight" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -189,10 +189,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -200,10 +200,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionLTR cell firstRowFirstColumn" data-offset-x="302" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -211,10 +211,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
</span><del>- <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -222,10 +222,10 @@
</span><span class="cx"> <div>
</span><span class="cx"> <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
</span><span class="cx"> direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
</span><del>- <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</del><ins>+ <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
</ins><span class="cx"> <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><del>- <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
- <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</del><ins>+ <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
</ins><span class="cx"> <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemchangecolumnrepainthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -9,6 +9,7 @@
</span><span class="cx"> }
</span><span class="cx"> window.addEventListener("load", runRepaintTest, false);
</span><span class="cx"> </script>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -16,7 +17,6 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- width: -webkit-min-content;
</del><span class="cx"> -webkit-grid-template-rows: 50px;
</span><span class="cx"> -webkit-grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
</span><span class="cx"> }
</span><span class="lines">@@ -27,7 +27,7 @@
</span><span class="cx"> <body>
</span><span class="cx"> <div>This test checks that changing the grid-column on a grid item properly repaint. The final grid item should be 50px * 50px. There should be no trace of the grid item at the old position.</div>
</span><span class="cx"> <div class="constrainedContainer">
</span><del>- <div class="grid">
</del><ins>+ <div class="grid fit-content">
</ins><span class="cx"> <div class="sizedToGridArea"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemorderpaintorderhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,13 +1,12 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- display: -webkit-grid;
</del><span class="cx"> -webkit-grid-template-rows: 100px;
</span><span class="cx"> -webkit-grid-template-columns: 100px;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> }
</span><span class="cx"> .sizedToGridArea {
</span><span class="cx"> background-color: green;
</span><span class="lines">@@ -29,12 +28,12 @@
</span><span class="cx"> <body>
</span><span class="cx"> <p>This test checks that 'order' changes the paint ordering.</p>
</span><span class="cx"> <p>There should be 2 green squares below.</p>
</span><del>- <div class="grid">
</del><ins>+ <div class="grid fit-content">
</ins><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn"></div>
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn negativeOrder red"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="grid">
</del><ins>+ <div class="grid fit-content">
</ins><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn positiveOrder"></div>
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn red"></div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt (0 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -0,0 +1,50 @@
</span><ins>+This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.
+
+direction: LTR | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X
+PASS
+direction: LTR | border: 5px 10px 15px 20px
+
+X X X X X X X X X X
+PASS
+direction: LTR | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X
+PASS
+direction: RTL | border: 5px 10px 15px 20px
+
+X X X X X X X X X X
+PASS
+direction: RTL | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticallrexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt (0 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -0,0 +1,50 @@
</span><ins>+This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.
+
+direction: LTR | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticallrhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html (0 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -0,0 +1,161 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+ margin: 0;
+}
+
+.grid {
+ -webkit-grid-template-columns: 100px 100px;
+ -webkit-grid-template-rows: 200px 200px;
+ margin-bottom: 20px;
+ position: relative;
+ font: 15px/1 Ahem;
+}
+
+.margins {
+ margin: 4px 8px 12px 16px;
+}
+
+.paddings {
+ padding: 4px 6px 8px 10px;
+}
+
+.borders {
+ border-width: 5px 10px 15px 20px;
+ border-style: dotted;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.</p>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px</p>
+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+ <div class="margins firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins secondRowSecondColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+ <div class="borders firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="borders secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+ <div class="paddings firstRowFirstColumn" data-total-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="paddings secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+ <div class="margins borders firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins borders secondRowSecondColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+ <div class="margins paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins paddings secondRowSecondColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+ <div class="margins borders paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins borders paddings secondRowSecondColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84"></div>
+ </div>
+</div>
+
+<!-- rtl direction -->
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px</p>
+ <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="margins firstRowFirstColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins secondRowSecondColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="borders firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="borders secondRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="paddings firstRowFirstColumn" data-total-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="paddings secondRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="margins borders firstRowFirstColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins borders secondRowSecondColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="margins paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins paddings secondRowSecondColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="margins borders paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins borders paddings secondRowSecondColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84"></div>
+ </div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticalrlexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt (0 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -0,0 +1,50 @@
</span><ins>+This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.
+
+direction: LTR | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticalrlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html (0 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -0,0 +1,161 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+ margin: 0;
+}
+
+.grid {
+ -webkit-grid-template-columns: 100px 100px;
+ -webkit-grid-template-rows: 200px 200px;
+ margin-bottom: 20px;
+ position: relative;
+ font: 15px/1 Ahem;
+}
+
+.margins {
+ margin: 4px 8px 12px 16px;
+}
+
+.paddings {
+ padding: 4px 6px 8px 10px;
+}
+
+.borders {
+ border-width: 5px 10px 15px 20px;
+ border-style: dotted;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.</p>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px</p>
+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+ <div class="margins firstRowFirstColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins secondRowSecondColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+ <div class="borders firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="borders secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+ <div class="paddings firstRowFirstColumn" data-total-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="paddings secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+ <div class="margins borders firstRowFirstColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins borders secondRowSecondColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+ <div class="margins paddings firstRowFirstColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+ <div class="margins borders paddings firstRowFirstColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins borders paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84"></div>
+ </div>
+</div>
+
+<!-- rtl direction -->
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px</p>
+ <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="margins firstRowFirstColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins secondRowSecondColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="borders firstRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="borders secondRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="paddings firstRowFirstColumn" data-total-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="paddings secondRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="margins borders firstRowFirstColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins borders secondRowSecondColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="margins paddings firstRowFirstColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+ <div class="margins borders paddings firstRowFirstColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+ <div class="margins borders paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84"></div>
+ </div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html (0 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -0,0 +1,161 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+ margin: 0;
+}
+
+.grid {
+ -webkit-grid-template-columns: 100px 100px;
+ -webkit-grid-template-rows: 200px 200px;
+ margin-bottom: 20px;
+ position: relative;
+ font: 15px/1 Ahem;
+}
+
+.margins {
+ margin: 4px 8px 12px 16px;
+}
+
+.paddings {
+ padding: 4px 6px 8px 10px;
+}
+
+.borders {
+ border-width: 5px 10px 15px 20px;
+ border-style: dotted;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.</p>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px</p>
+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+ <div class="margins firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="margins secondRowSecondColumn" data-offset-x="116" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+ <div class="borders firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="70" data-expected-client-height="180">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="borders secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="70" data-expected-client-height="180"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+ <div class="paddings firstRowFirstColumn" data-total-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="paddings secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+ <div class="margins borders firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="margins borders secondRowSecondColumn" data-offset-x="116" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+ <div class="margins paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="margins paddings secondRowSecondColumn" data-offset-x="116" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+ <div class="margins borders paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="margins borders paddings secondRowSecondColumn" data-offset-x="116" data-offset-y="204" data-expected-width="76" data-expected-height="184"></div>
+ </div>
+</div>
+
+<!-- rtl direction -->
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px</p>
+ <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+ <div class="margins firstRowFirstColumn" data-offset-x="116" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="margins secondRowSecondColumn" data-offset-x="16" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+ <div class="borders firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="70" data-expected-client-height="180">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="borders secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="70" data-expected-client-height="180"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+ <div class="paddings firstRowFirstColumn" data-total-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="paddings secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+ <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+ <div class="margins borders firstRowFirstColumn" data-offset-x="116" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="margins borders secondRowSecondColumn" data-offset-x="16" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+ <div class="margins paddings firstRowFirstColumn" data-offset-x="116" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="margins paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+ <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+ <div class="margins borders paddings firstRowFirstColumn" data-offset-x="116" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164">X X X X X X X X X X</div>
+ <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+ <div class="margins borders paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="204" data-expected-width="76" data-expected-height="184"></div>
+ </div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemzindexstackingcontextexpectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,6 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><span class="lines">@@ -17,15 +18,15 @@
</span><span class="cx"> <p>This test checks that grid items with 'z-index' do produce a stacking context and that we honor the property.</p>
</span><span class="cx"> <p>For this test to pass, there should be no red below.</p>
</span><span class="cx">
</span><del>-<div class="grid">
</del><ins>+<div class="grid fit-content">
</ins><span class="cx"> <div class="sizedToGridArea green"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="grid">
</del><ins>+<div class="grid fit-content">
</ins><span class="cx"> <div class="sizedToGridArea green"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="grid">
</del><ins>+<div class="grid fit-content">
</ins><span class="cx"> <div class="sizedToGridArea green firstRowBothColumn"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemzindexstackingcontexthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,6 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><span class="lines">@@ -26,17 +27,17 @@
</span><span class="cx"> <p>This test checks that grid items with 'z-index' do produce a stacking context and that we honor the property.</p>
</span><span class="cx"> <p>For this test to pass, there should be no red below.</p>
</span><span class="cx">
</span><del>-<div class="grid">
</del><ins>+<div class="grid fit-content">
</ins><span class="cx"> <div class="sizedToGridArea green positiveZIndex firstRowFirstColumn"></div>
</span><span class="cx"> <div class="sizedToGridArea red firstRowFirstColumn"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="grid">
</del><ins>+<div class="grid fit-content">
</ins><span class="cx"> <div class="sizedToGridArea green firstRowFirstColumn"></div>
</span><span class="cx"> <div class="sizedToGridArea red negativeZIndex firstRowFirstColumn"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="grid">
</del><ins>+<div class="grid fit-content">
</ins><span class="cx"> <div class="sizedToGridArea green firstRowBothColumn"></div>
</span><span class="cx"> <div class="sizedToGridArea red negativeZIndex firstRowFirstColumn"></div>
</span><span class="cx"> <div class="sizedToGridArea red negativeZIndex firstRowSecondColumn"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemsshouldnotbestretchedwhenheightorwidthormarginchangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,9 +1,9 @@
</span><span class="cx"> <!DOCTYPE HTML>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx"> .content {
</span><span class="lines">@@ -15,19 +15,19 @@
</span><span class="cx"> #fromMarginAuto { margin: auto; }
</span><span class="cx"> </style>
</span><span class="cx"> <p>The grids below had initially 'stretched' items, but we have changed 'height', 'width' and 'margin' to values which don't allow stretch. This test verifies that the layout algorithm properly detects such changes and clear the override height and width accordingly.</p>
</span><del>-<div class="grid" style="-webkit-grid-template: 200px 200px / 200px 200px;">
</del><ins>+<div class="grid fit-content" style="-webkit-grid-template: 200px 200px / 200px 200px;">
</ins><span class="cx"> <div id="toFixedHeight" class="firstRowFirstColumn" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> <div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid" style="-webkit-grid-template: 200px 200px / 200px 200px;">
</del><ins>+<div class="grid fit-content" style="-webkit-grid-template: 200px 200px / 200px 200px;">
</ins><span class="cx"> <div id="toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> <div id="fromFixedWidth" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid" style="-webkit-grid-template: 200px 200px / 200px 200px;">
</del><ins>+<div class="grid fit-content" style="-webkit-grid-template: 200px 200px / 200px 200px;">
</ins><span class="cx"> <div id="toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
</span><span class="cx"> <div style="width: 150px; height: 100px"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -37,19 +37,19 @@
</span><span class="cx"> <div style="width: 150px; height: 100px"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>-<div class="grid">
</del><ins>+<div class="grid fit-content">
</ins><span class="cx"> <div id="contentSized-toFixedHeight" class="firstRowFirstColumn" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
</span><span class="cx"> <div id="contentSized-fromFixedHeight" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid">
</del><ins>+<div class="grid fit-content">
</ins><span class="cx"> <div id="contentSized-toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
</span><span class="cx"> <div id="contentSized-fromFixedWidth" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid">
</del><ins>+<div class="grid fit-content">
</ins><span class="cx"> <div id="contentSized-toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
</span><span class="cx"> <div style="width: 150px; height: 100px"></div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -19,22 +20,6 @@
</span><span class="cx"> .stretchedGrid {
</span><span class="cx"> -webkit-grid-auto-columns: auto;
</span><span class="cx"> }
</span><del>-
-.justifyContentSpaceBetween {
- justify-content: space-between;
-}
-
-.justifyContentSpaceAround {
- justify-content: space-around;
-}
-
-.justifyContentSpaceEvenly {
- justify-content: space-evenly;
-}
-
-.justifyContentStretch {
- justify-content: stretch;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontentverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -19,34 +20,6 @@
</span><span class="cx"> width: 20px;
</span><span class="cx"> height: 40px;
</span><span class="cx"> }
</span><del>-
-.justifyContentStart {
- justify-content: start;
-}
-
-.justifyContentEnd {
- justify-content: end;
-}
-
-.justifyContentCenter {
- justify-content: center;
-}
-
-.justifyContentLeft {
- justify-content: left;
-}
-
-.justifyContentRight {
- justify-content: right;
-}
-
-.justifyContentFlexStart {
- justify-content: flex-start;
-}
-
-.justifyContentFlexEnd {
- justify-content: flex-end;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontentverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="lines">@@ -19,34 +20,6 @@
</span><span class="cx"> width: 20px;
</span><span class="cx"> height: 40px;
</span><span class="cx"> }
</span><del>-
-.justifyContentStart {
- justify-content: start;
-}
-
-.justifyContentEnd {
- justify-content: end;
-}
-
-.justifyContentCenter {
- justify-content: center;
-}
-
-.justifyContentLeft {
- justify-content: left;
-}
-
-.justifyContentRight {
- justify-content: right;
-}
-
-.justifyContentFlexStart {
- justify-content: flex-start;
-}
-
-.justifyContentFlexEnd {
- justify-content: flex-end;
-}
</del><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutjustifyselfcellhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,65 +1,18 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><ins>+<link href="resources/grid-alignment.css" rel="stylesheet">
</ins><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><span class="cx"> -webkit-grid-template-columns: 100px 100px;
</span><span class="cx"> -webkit-grid-template-rows: 200px 200px;
</span><del>- width: -webkit-fit-content;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .cell {
</span><span class="cx"> width: 10px;
</span><span class="cx"> height: 20px;
</span><span class="cx"> }
</span><del>-
-.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;
-}
</del><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -67,7 +20,7 @@
</span><span class="cx"> <p>This test checks that the justify-self property is applied correctly.</p>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative" class="constrainedContainer">
</span><del>-<div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+<div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="lines">@@ -77,7 +30,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative" class="constrainedContainer">
</span><del>-<div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+<div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
</span><span class="lines">@@ -87,7 +40,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- Default justification and initial values. -->
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid justifyItemsCenter" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content justifyItemsCenter" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="cell justifySelfAuto firstRowFirstColumn" data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="145" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
</span><span class="lines">@@ -96,7 +49,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>- <div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="justifySelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
</span><span class="lines">@@ -106,7 +59,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- Vertical writing mode. -->
</span><span class="cx"> <div style="position: relative" class="constrainedContainer">
</span><del>-<div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
</del><ins>+<div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="390" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="390" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div>
</span><span class="lines">@@ -116,7 +69,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative" class="constrainedContainer">
</span><del>-<div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
</del><ins>+<div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
</ins><span class="cx"> <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="lines">@@ -126,7 +79,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- RTL direction. -->
</span><span class="cx"> <div style="position: relative" class="constrainedContainer">
</span><del>-<div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
</del><ins>+<div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="justifySelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="lines">@@ -136,7 +89,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative" class="constrainedContainer">
</span><del>-<div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
</del><ins>+<div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
</span><span class="lines">@@ -146,7 +99,7 @@
</span><span class="cx">
</span><span class="cx"> <!-- RTL direction with opposite directions grid container vs grid item. -->
</span><span class="cx"> <div style="position: relative" class="constrainedContainer">
</span><del>-<div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+<div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="justifySelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
</span><span class="cx"> <div class="cell justifySelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfEnd firstRowSecondColumn directionRTL" data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="lines">@@ -156,7 +109,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative" class="constrainedContainer">
</span><del>-<div class="grid" data-expected-width="200" data-expected-height="400">
</del><ins>+<div class="grid fit-content" data-expected-width="200" data-expected-height="400">
</ins><span class="cx"> <div class="cell justifySelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div>
</span><span class="cx"> <div class="cell justifySelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="90" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautoandmarginshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,4 +1,6 @@
</span><span class="cx"> <!DOCTYPE html>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .columnsSmallerThanContentBox { -webkit-grid-template-columns: 80px; }
</span><span class="lines">@@ -26,8 +28,8 @@
</span><span class="cx"> background-color: blue;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.fitContentHeight { align-items: start; }
-.fitContentWidth { justify-items: start; }
</del><ins>+.fitContentOnlyHeight { width: auto; align-items: start; }
+.fitContentOnlyWidth { height: auto; justify-items: start; }
</ins><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -73,35 +75,35 @@
</span><span class="cx"> <!-- Checking shrink-to-fit in row-axis -->
</span><span class="cx"> <p>Stretching allowed in column axis, fitContent in row-axis | column smaller than content-box, row bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContentWidth columnsSmallerThanContentBox rowsBiggerThanMarginBox">
</del><ins>+ <div class="grid fit-content fitContentOnlyWidth columnsSmallerThanContentBox rowsBiggerThanMarginBox">
</ins><span class="cx"> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <p>Stretching allowed in column axis, fitContent in row-axis | column of same size than content-box, row bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContentWidth columnsSameAsContentBox rowsBiggerThanMarginBox">
</del><ins>+ <div class="grid fit-content fitContentOnlyWidth columnsSameAsContentBox rowsBiggerThanMarginBox">
</ins><span class="cx"> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContentWidth columnsBiggerThanContentBox rowsBiggerThanMarginBox">
</del><ins>+ <div class="grid fit-content fitContentOnlyWidth columnsBiggerThanContentBox rowsBiggerThanMarginBox">
</ins><span class="cx"> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <p>Stretching allowed in column axis, fitContent in row-axis | column of same size as margin-box, row bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContentWidth columnsSameAsMarginBox rowsBiggerThanMarginBox">
</del><ins>+ <div class="grid fit-content fitContentOnlyWidth columnsSameAsMarginBox rowsBiggerThanMarginBox">
</ins><span class="cx"> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContentWidth columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
</del><ins>+ <div class="grid fit-content fitContentOnlyWidth columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
</ins><span class="cx"> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -145,35 +147,35 @@
</span><span class="cx"> <!-- Checking min-height: auto logic -->
</span><span class="cx"> <p>Stretching allowed in row axis, fitContent in column-axis | row smaller than content-box, column bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContentHeight rowsSmallerThanContentBox columnsBiggerThanMarginBox">
</del><ins>+ <div class="grid fit-content fitContentOnlyHeight rowsSmallerThanContentBox columnsBiggerThanMarginBox">
</ins><span class="cx"> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <p>Stretching allowed in row axis, fitContent in column-axis | row of same size than content-box, column bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContentHeight rowsSameAsContentBox columnsBiggerThanMarginBox">
</del><ins>+ <div class="grid fit-content fitContentOnlyHeight rowsSameAsContentBox columnsBiggerThanMarginBox">
</ins><span class="cx"> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <p>Stretching allowed in column axis, fitContent in row-axis | row bigger than content-box, column bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContentHeight rowsBiggerThanContentBox columnsBiggerThanMarginBox">
</del><ins>+ <div class="grid fit-content fitContentOnlyHeight rowsBiggerThanContentBox columnsBiggerThanMarginBox">
</ins><span class="cx"> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <p>Stretching allowed in row axis, fitContent in column-axis | row of same size as margin-box, column bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContentHeight rowsSameAsMarginBox columnsBiggerThanMarginBox">
</del><ins>+ <div class="grid fit-content fitContentOnlyHeight rowsSameAsMarginBox columnsBiggerThanMarginBox">
</ins><span class="cx"> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <p>Stretching allowed in column axis, fitContent in row-axis | row bigger than margin-box, column bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><del>- <div class="grid fitContentHeight rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
</del><ins>+ <div class="grid fit-content fitContentOnlyHeight rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
</ins><span class="cx"> <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxfixedlogicalheightonlyhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -26,21 +26,18 @@
</span><span class="cx"> #grid4 {
</span><span class="cx"> -webkit-grid-template-columns: 30px;
</span><span class="cx"> -webkit-grid-template-rows: minmax(20px, 80px) 60px;
</span><del>- -webkit-writing-mode: vertical-rl;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid5 {
</span><span class="cx"> -webkit-grid-template-columns: 30px;
</span><span class="cx"> /* 90% > 80px, 80px should be ignored. */
</span><span class="cx"> -webkit-grid-template-rows: minmax(90%, 80px) minmax(10px, 60%);
</span><del>- -webkit-writing-mode: vertical-lr;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid6 {
</span><span class="cx"> /* Overlapping range. */
</span><span class="cx"> -webkit-grid-template-columns: 30px;
</span><span class="cx"> -webkit-grid-template-rows: minmax(10px, 180px) minmax(30px, 150px);
</span><del>- -webkit-writing-mode: horizontal-bt;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span><span class="lines">@@ -74,17 +71,17 @@
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-height="110" data-expected-width="30"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="grid" id="grid4" data-expected-width="100" data-expected-height="200">
</del><ins>+<div class="grid verticalRL" id="grid4" data-expected-width="100" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="40"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-height="30" data-expected-width="60"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="grid" id="grid5" data-expected-width="100" data-expected-height="200">
</del><ins>+<div class="grid verticalLR" id="grid5" data-expected-width="100" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="90"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-height="30" data-expected-width="10"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="grid" id="grid6" data-expected-width="100" data-expected-height="200">
</del><ins>+<div class="grid horizontalBT" id="grid6" data-expected-width="100" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-height="90" data-expected-width="30"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-height="110" data-expected-width="30"></div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxfixedlogicalwidthonlyhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -27,21 +27,18 @@
</span><span class="cx"> #grid4 {
</span><span class="cx"> -webkit-grid-template-columns: minmax(20px, 80px) 160px;
</span><span class="cx"> -webkit-grid-template-rows: 30px;
</span><del>- -webkit-writing-mode: vertical-rl;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid5 {
</span><span class="cx"> /* 50% > 80px, 80px should be ignored. */
</span><span class="cx"> -webkit-grid-template-columns: minmax(50%, 80px) minmax(10px, 60%);
</span><span class="cx"> -webkit-grid-template-rows: 30px;
</span><del>- -webkit-writing-mode: vertical-lr;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid6 {
</span><span class="cx"> /* Overlapping range. */
</span><span class="cx"> -webkit-grid-template-columns: minmax(10px, 180px) minmax(30px, 150px);
</span><span class="cx"> -webkit-grid-template-rows: 30px;
</span><del>- -webkit-writing-mode: horizontal-bt;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span><span class="lines">@@ -75,17 +72,17 @@
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="50"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="grid" id="grid4" data-expected-width="100" data-expected-height="200">
</del><ins>+<div class="grid verticalRL" id="grid4" data-expected-width="100" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-height="40" data-expected-width="30"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-height="160" data-expected-width="30"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="grid" id="grid5" data-expected-width="100" data-expected-height="200">
</del><ins>+<div class="grid verticalLR" id="grid5" data-expected-width="100" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-height="100" data-expected-width="30"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-height="100" data-expected-width="30"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="grid" id="grid6" data-expected-width="100" data-expected-height="200">
</del><ins>+<div class="grid horizontalBT" id="grid6" data-expected-width="100" data-expected-height="200">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="40"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="60"></div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxmaxcontentresolutioncolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -18,10 +18,6 @@
</span><span class="cx"> width: 100%;
</span><span class="cx"> height: 100%;
</span><span class="cx"> }
</span><del>-
-.verticalRL {
- -webkit-writing-mode: vertical-rl;
-}
</del><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <body onload="checkLayout('.gridMinMaxContent'); checkLayout('.gridMaxMaxContent')">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxmaxcontentresolutionrowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -18,10 +18,6 @@
</span><span class="cx"> width: 100%;
</span><span class="cx"> height: 100%;
</span><span class="cx"> }
</span><del>-
-.verticalRL {
- -webkit-writing-mode: vertical-rl;
-}
</del><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <body onload="checkLayout('.gridMinMaxContent'); checkLayout('.gridMaxMaxContent')">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlinegetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,9 +1,10 @@
</span><span class="cx"> <!DOCTYPE HTML>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><del>-.grid {
</del><ins>+.definite {
</ins><span class="cx"> /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
</span><span class="cx"> width: 800px;
</span><span class="cx"> height: 600px;
</span><span class="lines">@@ -70,26 +71,27 @@
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><del>-<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
-<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
-<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"></div>
-<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
</del><ins>+<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
+<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
-<div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
</del><ins>+<div class="grid definite gridWithAuto" id="gridWithAutoElement"></div>
+<div class="grid definite gridWithAuto" id="gridWithAutoWithChildrenElement">
</ins><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid gridWithMinMax" id="gridWithMinMax"></div>
-<div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
-<div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
-<div class="grid gridWithRepeat" id="gridWithRepeatElement"></div>
-<div class="grid gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
-<div class="grid gridWithoutBrackets" id="gridWithoutBrackets"></div>
-<div class="grid gridWithInvalidNestedBrackets" id="gridWithInvalidNestedBrackets"></div>
-<div class="grid gridWithUnbalancedBrackets" id="gridWithUnbalancedBrackets"></div>
-<div class="grid gridWithMisplacedBrackets" id="gridWithMisplacedBrackets"></div>
-<div class="grid gridWithContiguousBrackets" id="gridWithContiguousBrackets"></div>
</del><ins>+<div class="grid definite gridWithMinMax" id="gridWithMinMax"></div>
+<div class="grid definite gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
+<div class="grid definite gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
+<div class="grid definite gridWithRepeat" id="gridWithRepeatElement"></div>
+<div class="grid definite gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
+<div class="grid definite gridWithoutBrackets" id="gridWithoutBrackets"></div>
+<div class="grid definite gridWithInvalidNestedBrackets" id="gridWithInvalidNestedBrackets"></div>
+<div class="grid definite gridWithUnbalancedBrackets" id="gridWithUnbalancedBrackets"></div>
+<div class="grid definite gridWithMisplacedBrackets" id="gridWithMisplacedBrackets"></div>
+<div class="grid definite gridWithContiguousBrackets" id="gridWithContiguousBrackets"></div>
+<div class="grid definite gridWithInvalidCustomIdents" id="gridWithInvalidCustomIdents"></div>
</ins><span class="cx"> <script src="resources/grid-definitions-parsing-utils.js"></script>
</span><span class="cx"> <script>
</span><span class="cx"> description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentgriditeminpercentgridtrackinpercentgridhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -50,7 +50,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><del>-<div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
</del><ins>+<div class="grid horizontalBT" data-expected-width="400" data-expected-height="300">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
</span><span class="lines">@@ -59,7 +59,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><del>-<div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
</del><ins>+<div class="grid verticalRL" data-expected-width="400" data-expected-height="300">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
</span><span class="lines">@@ -68,7 +68,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><del>-<div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
</del><ins>+<div class="grid verticalLR" data-expected-width="400" data-expected-height="300">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentgriditeminpercentgridtrackhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -44,7 +44,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>-<div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
</del><ins>+<div class="grid horizontalBT" data-expected-width="400" data-expected-height="300">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
</span><span class="lines">@@ -53,7 +53,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>-<div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
</del><ins>+<div class="grid verticalRL" data-expected-width="400" data-expected-height="300">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
</span><span class="lines">@@ -62,7 +62,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>-<div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
</del><ins>+<div class="grid verticalLR" data-expected-width="400" data-expected-height="300">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizeinautohtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,7 +1,8 @@
</span><span class="cx"> <!DOCTYPE html>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><del>-.indefiniteSizeGrid {
</del><ins>+.grid {
</ins><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><span class="lines">@@ -30,37 +31,37 @@
</span><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><del>-<body onload="checkLayout('.indefiniteSizeGrid');">
</del><ins>+<body onload="checkLayout('.grid');">
</ins><span class="cx"> <p>This test checks that percentages of indefinite sizes are treated as min-content (for the min track sizing function) or max-content (for the max track sizing function).</p>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercent" data-expected-width="30" data-expected-height="20">
</del><ins>+ <div class="grid min-content gridWithPercent" data-expected-width="30" data-expected-height="20">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXX<br>XXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="20">
</del><ins>+ <div class="grid min-content gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="20">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXX</div>
</span><span class="cx"> <div class="firstRowFirstColumn">XX XX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax2" data-expected-width="30" data-expected-height="20">
</del><ins>+ <div class="grid min-content gridWithPercentInMinOfMinMax2" data-expected-width="30" data-expected-height="20">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXX</div>
</span><span class="cx"> <div class="firstRowFirstColumn">XX XX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax" data-expected-width="40" data-expected-height="20">
</del><ins>+ <div class="grid min-content gridWithPercentInMaxOfMinMax" data-expected-width="40" data-expected-height="20">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXXX<br>X</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax2" data-expected-width="20" data-expected-height="20">
</del><ins>+ <div class="grid min-content gridWithPercentInMaxOfMinMax2" data-expected-width="20" data-expected-height="20">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXXX<br>X</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercentsInMinMax" data-expected-width="40" data-expected-height="40">
</del><ins>+ <div class="grid min-content gridWithPercentsInMinMax" data-expected-width="40" data-expected-height="40">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXX<br>XX XX<br>XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,9 +1,9 @@
</span><span class="cx"> <!DOCTYPE html>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><del>-.indefiniteSizeGrid {
</del><ins>+.grid {
</ins><span class="cx"> font: 10px/1 Ahem;
</span><del>- width: -webkit-min-content;
</del><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><span class="cx"> -webkit-grid-template-columns: 25%;
</span><span class="lines">@@ -31,37 +31,37 @@
</span><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><del>-<body onload="checkLayout('.indefiniteSizeGrid');">
</del><ins>+<body onload="checkLayout('.grid');">
</ins><span class="cx"> <p>This test checks that percentages of indefinite sizes are treated as min-content (for the min track sizing function) or max-content (for the max track sizing function).</p>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercent" data-expected-width="30" data-expected-height="20">
</del><ins>+ <div class="grid min-content gridWithPercent" data-expected-width="30" data-expected-height="20">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXX<br>XXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="20">
</del><ins>+ <div class="grid min-content gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="20">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXX</div>
</span><span class="cx"> <div class="firstRowFirstColumn">XX XX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax2" data-expected-width="30" data-expected-height="20">
</del><ins>+ <div class="grid min-content gridWithPercentInMinOfMinMax2" data-expected-width="30" data-expected-height="20">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXX</div>
</span><span class="cx"> <div class="firstRowFirstColumn">XX XX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax" data-expected-width="40" data-expected-height="20">
</del><ins>+ <div class="grid min-content gridWithPercentInMaxOfMinMax" data-expected-width="40" data-expected-height="20">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXXX<br>X</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax2" data-expected-width="20" data-expected-height="20">
</del><ins>+ <div class="grid min-content gridWithPercentInMaxOfMinMax2" data-expected-width="20" data-expected-height="20">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXXX<br>X</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div style="position: relative;">
</span><del>- <div class="indefiniteSizeGrid gridWithPercentsInMinMax" data-expected-width="40" data-expected-height="40">
</del><ins>+ <div class="grid min-content gridWithPercentsInMinMax" data-expected-width="40" data-expected-height="40">
</ins><span class="cx"> <div class="firstRowFirstColumn">XXX<br>XX XX<br>XXXX</div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -1,6 +1,8 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><span class="lines">@@ -27,8 +29,7 @@
</span><span class="cx"> position: absolute;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.indefiniteSize {
- width: -webkit-fit-content;
</del><ins>+.indefiniteHeight {
</ins><span class="cx"> height: auto;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -61,7 +62,7 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="indefiniteSize">
</del><ins>+ <div class="indefiniteHeight fit-content">
</ins><span class="cx"> <div class="grid">
</span><span class="cx"> <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
</span><span class="cx"> <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
</span><span class="lines">@@ -77,7 +78,7 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="indefiniteSize">
</del><ins>+ <div class="indefiniteHeight">
</ins><span class="cx"> <div class="grid fixedSize">
</span><span class="cx"> <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
</span><span class="cx"> <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
</span><span class="lines">@@ -85,7 +86,7 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="indefiniteSize">
</del><ins>+ <div class="fit-content indefiniteHeight">
</ins><span class="cx"> <div class="grid calculatedSize">
</span><span class="cx"> <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
</span><span class="cx"> <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
</span><span class="lines">@@ -101,7 +102,7 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="indefiniteSize">
</del><ins>+ <div class="fit-content indefiniteHeight">
</ins><span class="cx"> <div class="grid percentageSize">
</span><span class="cx"> <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
</span><span class="cx"> <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
</span><span class="lines">@@ -117,7 +118,7 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="indefiniteSize">
</del><ins>+ <div class="fit-content indefiniteHeight">
</ins><span class="cx"> <div class="grid absolutelyPositioned">
</span><span class="cx"> <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XX</div>
</span><span class="cx"> <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXXXX</div>
</span><span class="lines">@@ -133,8 +134,8 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <div class="indefiniteSize">
- <div class="grid indefiniteSize">
</del><ins>+ <div class="fit-content indefiniteHeight">
+ <div class="grid fit-content indefiniteHeight">
</ins><span class="cx"> <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
</span><span class="cx"> <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
</span><span class="cx"> <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
</span><span class="lines">@@ -142,7 +143,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="unconstrainedContainer">
</span><del>- <div class="grid indefiniteSize">
</del><ins>+ <div class="grid fit-content">
</ins><span class="cx"> <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
</span><span class="cx"> <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
</span><span class="cx"> <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutplacecellbyindexhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/place-cell-by-index.html (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/place-cell-by-index.html 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/place-cell-by-index.html 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -54,7 +54,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>-<div class="grid" style="-webkit-writing-mode: vertical-rl; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
</del><ins>+<div class="grid verticalRL" style="margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="40" data-offset-y="0"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="40" data-offset-y="50"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
</span><span class="lines">@@ -63,7 +63,7 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>-<div class="grid" style="-webkit-writing-mode: vertical-lr; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
</del><ins>+<div class="grid verticalLR" style="margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
</ins><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridalignmentcss"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -13,9 +13,23 @@
</span><span class="cx"> .alignSelfSelfStart { align-self: self-start; }
</span><span class="cx"> .alignSelfSelfEnd { align-self: self-end; }
</span><span class="cx">
</span><ins>+.alignSelfCenterSafe { align-self: center safe; }
+.alignSelfCenterUnsafe { align-self: center unsafe; }
+.alignSelfEndSafe { align-self: end safe; }
+.alignSelfEndUnsafe { align-self: end unsafe; }
+
</ins><span class="cx"> /* align-items */
</span><ins>+.alignItemsAuto { align-items: auto; }
+.alignItemsStretch { align-items: stretch; }
+.alignItemsStart { align-items: start; }
</ins><span class="cx"> .alignItemsCenter { align-items: center; }
</span><ins>+.alignItemsEnd { align-items: end; }
</ins><span class="cx">
</span><ins>+.alignItemsCenterSafe { align-items: center safe; }
+.alignItemsCenterUnsafe { align-items: center unsafe; }
+.alignItemsEndSafe { align-items: end safe; }
+.alignItemsEndUnsafe { align-items: end unsafe; }
+
</ins><span class="cx"> /* align-content */
</span><span class="cx"> .alignContentBaseline { align-content: baseline; }
</span><span class="cx"> .alignContentLastBaseline { align-content: last-baseline; }
</span><span class="lines">@@ -27,6 +41,36 @@
</span><span class="cx"> .alignContentFlexStart { align-content: flex-start; }
</span><span class="cx"> .alignContentFlexEnd { align-content: flex-end; }
</span><span class="cx">
</span><ins>+/* justify-self */
+.justifySelfAuto { justify-self: auto; }
+.justifySelfStretch { justify-self: stretch; }
+.justifySelfStart { justify-self: start; }
+.justifySelfCenter { justify-self: center; }
+.justifySelfEnd { justify-self: end; }
+.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; }
+
+.justifySelfCenterSafe { justify-self: center safe; }
+.justifySelfCenterUnsafe { justify-self: center unsafe; }
+
+/* justify-items */
+.justifyItemsAuto { justify-items: auto; }
+.justifyItemsStretch { justify-items: stretch; }
+.justifyItemsStart { justify-items: start; }
+.justifyItemsCenter { justify-items: center; }
+.justifyItemsEnd { justify-items: end; }
+
+.justifyItemsCenterSafe { justify-items: center safe; }
+.justifyItemsCenterUnsafe { justify-items: center unsafe; }
+.justifyItemsEndSafe { justify-items: end safe; }
+.justifyItemsEndUnsafe { justify-items: end unsafe; }
+
</ins><span class="cx"> /* justify-content */
</span><span class="cx"> .justifyContentBaseline { justify-content: baseline; }
</span><span class="cx"> .justifyContentLastBaseline { justify-content: last-baseline; }
</span><span class="lines">@@ -81,3 +125,63 @@
</span><span class="cx"> align-self: stretch;
</span><span class="cx"> justify-self: stretch;
</span><span class="cx"> }
</span><ins>+
+/* Both align-self and justify-self */
+.selfStretch {
+ align-self: stretch;
+ justify-self: stretch;
+}
+
+/* Both align-content and justify-content */
+.contentStart {
+ align-content: start;
+ justify-content: start;
+}
+.contentCenter {
+ align-content: center;
+ justify-content: center;
+}
+.contentEnd {
+ align-content: end;
+ justify-content: end;
+}
+
+.contentCenterSafe {
+ align-content: center safe;
+ justify-content: center safe;
+}
+
+.contentCenterUnsafe {
+ align-content: center unsafe;
+ justify-content: center unsafe;
+}
+
+.contentEndSafe {
+ align-content: end safe;
+ justify-content: end safe;
+}
+
+.contentEndUnsafe {
+ align-content: end unsafe;
+ justify-content: end unsafe;
+}
+
+.contentSpaceBetween {
+ justify-content: space-between;
+ align-content: space-between;
+}
+
+.contentSpaceAround {
+ justify-content: space-around;
+ align-content: space-around;
+}
+
+.contentSpaceEvenly {
+ justify-content: space-evenly;
+ align-content: space-evenly;
+}
+
+.contentStretch {
+ justify-content: stretch;
+ align-content: stretch;
+}
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridcss"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid.css (196818 => 196819)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2016-02-19 13:13:49 UTC (rev 196818)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2016-02-19 13:25:49 UTC (rev 196819)
</span><span class="lines">@@ -3,13 +3,6 @@
</span><span class="cx"> background-color: grey;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.indefiniteSizeGrid {
- display: -webkit-grid;
- background-color: grey;
- width: -webkit-min-content;
- height: auto;
-}
-
</del><span class="cx"> .inline-grid {
</span><span class="cx"> display: -webkit-inline-grid;
</span><span class="cx"> background-color: grey;
</span><span class="lines">@@ -316,21 +309,24 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .verticalRL {
</span><ins>+ writing-mode: vertical-rl;
</ins><span class="cx"> -webkit-writing-mode: vertical-rl;
</span><span class="cx"> }
</span><del>-
</del><span class="cx"> .verticalLR {
</span><ins>+ writing-mode: vertical-lr;
</ins><span class="cx"> -webkit-writing-mode: vertical-lr;
</span><span class="cx"> }
</span><del>-
</del><ins>+.horizontalTB {
+ writing-mode: horizontal-tb;
+ -webkit-writing-mode: horizontal-tb;
+}
</ins><span class="cx"> .horizontalBT {
</span><ins>+ writing-mode: horizontal-bt;
</ins><span class="cx"> -webkit-writing-mode: horizontal-bt;
</span><span class="cx"> }
</span><del>-
</del><span class="cx"> .directionRTL {
</span><span class="cx"> direction: rtl;
</span><span class="cx"> }
</span><del>-
</del><span class="cx"> .directionLTR {
</span><span class="cx"> direction: ltr;
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>