Bug 1319958 - [css-grid] Sprinkle some place-items/self/content shorthands around in the Grid reftests to increase test coverage.
authorMats Palmgren <mats@mozilla.com>
Mon, 28 Nov 2016 00:44:22 +0100
changeset 324381 8a3c0687c9489b1d19e21be08dbb08b11d8513c4
parent 324380 07ecf6f5e0ab23a50aff9ead0f2332e403653e2b
child 324382 dad211727cb3a1f110fe977d8f0b35f6416aea68
push id31004
push usercbook@mozilla.com
push dateMon, 28 Nov 2016 15:37:32 +0000
treeherdermozilla-central@8387a4ada9a5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1319958
milestone53.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1319958 - [css-grid] Sprinkle some place-items/self/content shorthands around in the Grid reftests to increase test coverage.
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html
layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html
layout/reftests/css-grid/grid-item-mixed-baseline-002-ref.html
layout/reftests/css-grid/grid-item-mixed-baseline-002.html
layout/reftests/css-grid/grid-item-self-baseline-001.html
layout/reftests/css-grid/grid-percent-grid-gap-001.html
layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html
layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html
--- a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html
@@ -9,18 +9,17 @@
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
   <style type="text/css">
 html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; }
 
 .grid {
   display: grid;
   float: left;
   border: 1px solid;
-  align-items: start;
-  justify-items: start;
+  place-items: start;
   margin-bottom:1em;
 }
 
 .row { }
 .row img { min-width:0; }
 
 br { clear:both; }
 
--- a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html
@@ -9,18 +9,17 @@
   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
   <style type="text/css">
 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
 
 .grid {
   display: inline-grid;
   border: 1px solid;
   margin: 5px;
-  align-items: start;
-  justify-items: start;
+  place-items: start start;
 }
 .vertical-tests div { vertical-align:bottom }
   </style>
 </head>
 <body>
 
 <div class="grid" style="grid: 96px / 20px">
 <img src="support/lime-2x24.png" style="width:4px; height:48px">
--- a/layout/reftests/css-grid/grid-item-mixed-baseline-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-mixed-baseline-002-ref.html
@@ -38,18 +38,18 @@ span {
 span:nth-child(1) { font-size:32px; }
 span:nth-child(2) { font-size:12px; }
 span:nth-child(3) { font-size:10px; }
 span:nth-child(4) { font-size:24px; }
 
 .pbs { padding-block-start: 15px; margin-block-start: 5px; }
 .pbe { padding-block-end: 7px; margin-block-end: 3px; }
 
-.fb { align-self:baseline; justify-self:self-start; }
-.lb { align-self:last baseline; justify-self:self-end; }
+.fb { place-self:first baseline self-start; }
+.lb { place-self:last baseline self-end; }
 .s  { justify-self:stretch; }
 
 .sfb { align-self:baseline; }
 .slb { align-self:last baseline; align-content:self-end;}
 
 .hl { writing-mode: horizontal-tb; direction:ltr; }
 .hr { writing-mode: horizontal-tb; direction:rtl; }
 .vl { writing-mode: vertical-lr; text-orientation: sideways; }
--- a/layout/reftests/css-grid/grid-item-mixed-baseline-002.html
+++ b/layout/reftests/css-grid/grid-item-mixed-baseline-002.html
@@ -16,23 +16,21 @@ html,body {
 }
 
 .grid {
   float: left;
   display: grid;
   grid: 100px / repeat(10, auto);
   border: 2px solid;
   margin: 1px;
-  align-content: start;
-  justify-content: end;
+  place-content: start end;
 }
 .c {
   grid: repeat(4, auto) / 100px;
-  align-content: end;
-  justify-content: start;
+  place-content: end start;
 }
 .t2 { grid: 100px / repeat(3, auto);}
 
 span { 
   background: lime;
   display: inline-block;
   border: 1px solid black;
 }
@@ -40,19 +38,19 @@ span {
 span:nth-child(1) { font-size:32px; }
 span:nth-child(2) { font-size:12px; }
 span:nth-child(3) { font-size:10px; }
 span:nth-child(4) { font-size:24px; }
 
 .pbs { padding-block-start: 15px; margin-block-start: 5px; }
 .pbe { padding-block-end: 7px; margin-block-end: 3px; }
 
-.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
-.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
-.s  { align-self:stretch; justify-self:stretch; }
+.fb { align-content:baseline; place-self:self-start; }
+.lb { align-content:last baseline; place-self:self-end; }
+.s  { place-self:stretch; }
 
 .sfb { align-self:baseline; }
 .slb { align-self:last baseline; align-content:self-end;}
 
 .hl { writing-mode: horizontal-tb; direction:ltr; }
 .hr { writing-mode: horizontal-tb; direction:rtl; }
 .vl { writing-mode: vertical-lr; text-orientation: sideways; }
 .vr { writing-mode: vertical-rl; text-orientation: sideways; }
--- a/layout/reftests/css-grid/grid-item-self-baseline-001.html
+++ b/layout/reftests/css-grid/grid-item-self-baseline-001.html
@@ -13,18 +13,17 @@
 html,body {
     color:black; background-color:white; font-size:16px; padding:0; margin:0;
 }
 
 .grid {
   float: left;
   display: grid;
   grid: auto / repeat(4, auto);
-  align-items: start;
-  justify-items: start;
+  place-items: start;
   border: 2px solid;
   padding: 1px;
   margin: 1px;
 }
 .c {
   grid: repeat(4, auto) / auto;
 }
 
--- a/layout/reftests/css-grid/grid-percent-grid-gap-001.html
+++ b/layout/reftests/css-grid/grid-percent-grid-gap-001.html
@@ -58,17 +58,17 @@ br { clear: both; }
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
 </div>
 </div>
 
 <div class="inline-grid" style="grid: auto / auto">
-<div class="grid percentgap" style="align-self:start; justify-self:start; width:160px; height:120px">
+<div class="grid percentgap" style="place-self:start/start; width:160px; height:120px">
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
 </div>
 </div>
 
 <div class="float">
@@ -76,17 +76,17 @@ br { clear: both; }
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
 </div>
 </div>
 
 <div class="inline-grid">
-<div class="grid percentgap" style="align-self:start; justify-self:start">
+<div class="grid percentgap" style="place-self:start">
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
   <span><x></x></span>
 </div>
 </div>
 
 <br>
--- a/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html
+++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html
@@ -17,18 +17,17 @@ html,body {
 div {
   display: grid;
   float: left;
   grid-template-columns: auto auto;
   grid-template-rows: 5px;
   height: 5px;
   border: 1px solid;
   clear: left;
-  align-content: start;
-  justify-content: start;
+  place-content: start start;
 }
 
 span {
   min-width: 10px;
   background: grey;
 }
 span:nth-child(2) { background:lime; }
 x { background: blue; }
--- a/layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html
+++ b/layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html
@@ -11,20 +11,18 @@
 div {
   display: grid;
   grid-auto-columns: 3px;
   grid-auto-rows: 3px;
   border: 1px solid;
   float: left;
   width: 100px;
   margin: 2px;
-  align-items: stretch;
-  justify-items: stretch;
-  align-content: start;
-  justify-content: start;
+  place-items: stretch;
+  place-content: start;
 }
 .row-tests div {
   height: 100px;
 }
 span { background:lime; grid-column:A/B; grid-row:A/B; }
 
 .col-valid { grid-template-columns:[A] 40px [] 40px [B]; }
 .row-valid { grid-template-rows:   [A] 40px [] 40px [B]; }