Bug 1266250 part 2 - [css-grid] Resurrect the 'grid-template' shorthand (backs out bug 1253529).
authorMats Palmgren <mats@mozilla.com>
Thu, 21 Apr 2016 16:18:34 +0200
changeset 332165 497ba59de864566de039de4229a574f14663d651
parent 332164 b24d0d66855a15df986e2971c3394f7038359876
child 332166 523a4b91cbde18dbc1d76652f115917533dc18c2
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1266250, 1253529
milestone48.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 1266250 part 2 - [css-grid] Resurrect the 'grid-template' shorthand (backs out bug 1253529).
layout/reftests/css-grid/grid-abspos-items-003-ref.html
layout/reftests/css-grid/grid-abspos-items-003.html
layout/reftests/css-grid/grid-abspos-items-004-ref.html
layout/reftests/css-grid/grid-abspos-items-004.html
layout/reftests/css-grid/grid-abspos-items-005-ref.html
layout/reftests/css-grid/grid-abspos-items-005.html
layout/reftests/css-grid/grid-abspos-items-006-ref.html
layout/reftests/css-grid/grid-abspos-items-006.html
layout/reftests/css-grid/grid-abspos-items-007.html
layout/reftests/css-grid/grid-abspos-items-008.html
layout/reftests/css-grid/grid-abspos-items-009.html
layout/reftests/css-grid/grid-abspos-items-010-ref.html
layout/reftests/css-grid/grid-abspos-items-010.html
layout/reftests/css-grid/grid-abspos-items-014-ref.html
layout/reftests/css-grid/grid-abspos-items-014.html
layout/reftests/css-grid/grid-abspos-items-015-ref.html
layout/reftests/css-grid/grid-abspos-items-015.html
layout/reftests/css-grid/grid-align-content-001-ref.html
layout/reftests/css-grid/grid-align-content-001.html
layout/reftests/css-grid/grid-container-min-max-width-height-001.html
layout/reftests/css-grid/grid-item-align-001.html
layout/reftests/css-grid/grid-item-align-002.html
layout/reftests/css-grid/grid-item-align-003.html
layout/reftests/css-grid/grid-item-justify-001.html
layout/reftests/css-grid/grid-item-justify-002.html
layout/reftests/css-grid/grid-item-margin-left-auto-001-ref.html
layout/reftests/css-grid/grid-item-margin-left-auto-001.html
layout/reftests/css-grid/grid-item-margin-left-auto-002-ref.html
layout/reftests/css-grid/grid-item-margin-left-auto-002.html
layout/reftests/css-grid/grid-item-margin-left-auto-003-ref.html
layout/reftests/css-grid/grid-item-margin-left-auto-003.html
layout/reftests/css-grid/grid-item-margin-left-auto-004-ref.html
layout/reftests/css-grid/grid-item-margin-left-auto-004.html
layout/reftests/css-grid/grid-item-margin-left-right-auto-001-ref.html
layout/reftests/css-grid/grid-item-margin-left-right-auto-001.html
layout/reftests/css-grid/grid-item-margin-left-right-auto-002-ref.html
layout/reftests/css-grid/grid-item-margin-left-right-auto-002.html
layout/reftests/css-grid/grid-item-margin-left-right-auto-003-ref.html
layout/reftests/css-grid/grid-item-margin-left-right-auto-003.html
layout/reftests/css-grid/grid-item-margin-left-right-auto-004-ref.html
layout/reftests/css-grid/grid-item-margin-left-right-auto-004.html
layout/reftests/css-grid/grid-item-margin-right-auto-001-ref.html
layout/reftests/css-grid/grid-item-margin-right-auto-001.html
layout/reftests/css-grid/grid-item-margin-right-auto-002-ref.html
layout/reftests/css-grid/grid-item-margin-right-auto-002.html
layout/reftests/css-grid/grid-item-margin-right-auto-003-ref.html
layout/reftests/css-grid/grid-item-margin-right-auto-003.html
layout/reftests/css-grid/grid-item-margin-right-auto-004-ref.html
layout/reftests/css-grid/grid-item-margin-right-auto-004.html
layout/reftests/css-grid/grid-item-stretch-001-ref.html
layout/reftests/css-grid/grid-item-stretch-001.html
layout/reftests/css-grid/grid-justify-content-001-ref.html
layout/reftests/css-grid/grid-justify-content-001.html
layout/reftests/css-grid/grid-row-gap-001-ref.html
layout/reftests/css-grid/grid-row-gap-001.html
--- a/layout/reftests/css-grid/grid-abspos-items-003-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-003-ref.html
@@ -16,17 +16,17 @@ separator { clear:both; display:block; h
 .grid {
   display: block;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 11px 31px 13px / 13px 23px 7px;
+  grid-template: 11px 31px 13px / 13px 23px 7px;
   margin-right: 4px;
   inline-size: 55px;
   block-size: 43px;
 }
 
 abs1,abs2 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
--- a/layout/reftests/css-grid/grid-abspos-items-003.html
+++ b/layout/reftests/css-grid/grid-abspos-items-003.html
@@ -18,17 +18,17 @@ separator { clear:both; display:block; h
 .grid {
   display: grid;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 13px 23px 7px / 11px 31px 13px;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
   margin-right: 4px;
 }
 
 abs1,abs2,abs3,abs4 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: grey;
 }
--- a/layout/reftests/css-grid/grid-abspos-items-004-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-004-ref.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
   display: block;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   padding: 11px 13px 15px 17px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 11px 31px 13px / 13px 23px 7px;
+  grid-template: 11px 31px 13px / 13px 23px 7px;
   margin-right: 4px;
   inline-size: 55px;
   block-size: 43px;
 }
 
 abs1,abs2 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
--- a/layout/reftests/css-grid/grid-abspos-items-004.html
+++ b/layout/reftests/css-grid/grid-abspos-items-004.html
@@ -19,17 +19,17 @@ separator { clear:both; display:block; h
   display: grid;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   padding: 11px 13px 15px 17px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 13px 23px 7px / 11px 31px 13px;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
   margin-right: 4px;
 }
 
 abs1,abs2,abs3,abs4 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: grey;
 }
--- a/layout/reftests/css-grid/grid-abspos-items-005-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-005-ref.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
   display: block;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   padding: 1px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 11px 31px 13px / 13px 23px 7px;
+  grid-template: 11px 31px 13px / 13px 23px 7px;
   margin-right: 4px;
   inline-size: 65px;
   block-size: 43px;
 }
 
 abs1,abs2 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
--- a/layout/reftests/css-grid/grid-abspos-items-005.html
+++ b/layout/reftests/css-grid/grid-abspos-items-005.html
@@ -19,17 +19,17 @@ separator { clear:both; display:block; h
   display: grid;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   padding: 1px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 13px 23px 7px / 11px 31px 13px;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
   margin-right: 4px;
   inline-size: 65px;
 }
 
 abs1,abs2,abs3,abs4 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: grey;
--- a/layout/reftests/css-grid/grid-abspos-items-006-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-006-ref.html
@@ -16,17 +16,17 @@ separator { clear:both; display:block; h
 .grid {
   display: block;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 11px 31px 13px / 13px 23px 7px;
+  grid-template: 11px 31px 13px / 13px 23px 7px;
   margin-right: 4px;
   inline-size: 55px;
   block-size: 57px;
 }
 
 abs1,abs2 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
--- a/layout/reftests/css-grid/grid-abspos-items-006.html
+++ b/layout/reftests/css-grid/grid-abspos-items-006.html
@@ -18,17 +18,17 @@ separator { clear:both; display:block; h
 .grid {
   display: grid;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 13px 23px 7px / 11px 31px 13px;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
   margin-right: 4px;
   block-size: 57px;
 }
 
 abs1,abs2,abs3,abs4 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: grey;
--- a/layout/reftests/css-grid/grid-abspos-items-007.html
+++ b/layout/reftests/css-grid/grid-abspos-items-007.html
@@ -18,17 +18,17 @@ separator { clear:both; display:block; h
 .grid {
   display: grid;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 13px 23px 7px / 11px 31px 13px;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
   margin-right: 4px;
 }
 
 abs1 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: grey;
 }
--- a/layout/reftests/css-grid/grid-abspos-items-008.html
+++ b/layout/reftests/css-grid/grid-abspos-items-008.html
@@ -19,17 +19,17 @@ separator { clear:both; display:block; h
   display: grid;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   padding: 11px 13px 15px 17px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 13px 23px 7px / 11px 31px 13px;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
   margin-right: 4px;
 }
 
 abs1 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: grey;
 }
--- a/layout/reftests/css-grid/grid-abspos-items-009.html
+++ b/layout/reftests/css-grid/grid-abspos-items-009.html
@@ -19,17 +19,17 @@ separator { clear:both; display:block; h
   display: grid;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   padding: 1px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 13px 23px 7px / 11px 31px 13px;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
   margin-right: 4px;
   block-size: 57px;
 }
 
 abs1 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: grey;
--- a/layout/reftests/css-grid/grid-abspos-items-010-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-010-ref.html
@@ -18,17 +18,17 @@ separator { clear:both; display:block; h
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
   inline-size: 65px;
   block-size: 43px;
-  grid: 11px 31px 13px / 13px 23px 7px;
+  grid-template: 11px 31px 13px / 13px 23px 7px;
   margin-right: 4px;
 }
 
 abs1 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: grey;
 }
--- a/layout/reftests/css-grid/grid-abspos-items-010.html
+++ b/layout/reftests/css-grid/grid-abspos-items-010.html
@@ -18,17 +18,17 @@ separator { clear:both; display:block; h
 .grid {
   display: grid;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 13px 23px 7px / 11px 31px 13px;
+  grid-template: 13px 23px 7px / 11px 31px 13px;
   margin-right: 4px;
   inline-size: 65px;
 }
 
 abs1 {
   position: absolute;
   top:0;left:0;bottom:0;right:0;
   background: grey;
--- a/layout/reftests/css-grid/grid-abspos-items-014-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-014-ref.html
@@ -15,17 +15,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 3px 51px 5px / 5px 33px 7px;
+  grid-template: 3px 51px 5px / 5px 33px 7px;
   margin-right: 4px;
 }
 
 abs1,abs2,abs3,abs4 {
   grid-area: 2 / 2 / 3 / 3;
   position: absolute;
 }
 abs1 { top:17px; bottom:2px; background:lime; }
--- a/layout/reftests/css-grid/grid-abspos-items-014.html
+++ b/layout/reftests/css-grid/grid-abspos-items-014.html
@@ -18,17 +18,17 @@ separator { clear:both; display:block; h
 .grid {
   display: grid;
   float: left;
   position: relative;
   border-style: solid;
   border-width: 1px 3px 5px 7px;
   border-block-start-color: blue;
   border-inline-start-color: lime;
-  grid: 3px 51px 5px / 5px 33px 7px;
+  grid-template: 3px 51px 5px / 5px 33px 7px;
   margin-right: 4px;
 }
 
 abs1,abs2,abs3,abs4 {
   grid-area: 2 / 2 / 3 / 3;
   position: absolute;
 }
 abs1 { top:17px; bottom:2px; background:lime; }
--- a/layout/reftests/css-grid/grid-abspos-items-015-ref.html
+++ b/layout/reftests/css-grid/grid-abspos-items-015-ref.html
@@ -12,17 +12,17 @@ html,body {
     color:black; background-color:white; font-size:16px; padding:0; margin:0;
 }
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   position: relative;
   display: grid;
   padding: 1px 3px 5px 7px;
-  grid: 25px 33px 7px / 30px 51px 5px;
+  grid-template: 25px 33px 7px / 30px 51px 5px;
   margin-right: 4px;
   height: 100px;
   width: 100px;
 }
 .wrap {
   position: relative;
   float: left;
   padding: 3px 5px 7px 9px;
--- a/layout/reftests/css-grid/grid-abspos-items-015.html
+++ b/layout/reftests/css-grid/grid-abspos-items-015.html
@@ -13,17 +13,17 @@
 html,body {
     color:black; background-color:white; font-size:16px; padding:0; margin:0;
 }
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   padding: 1px 3px 5px 7px;
-  grid: 25px 33px 7px / 30px 51px 5px;
+  grid-template: 25px 33px 7px / 30px 51px 5px;
   margin-right: 4px;
   height: 100px;
   width: 100px;
 }
 .wrap {
   position: relative;
   float: left;
   padding: 3px 5px 7px 9px;
--- a/layout/reftests/css-grid/grid-align-content-001-ref.html
+++ b/layout/reftests/css-grid/grid-align-content-001-ref.html
@@ -14,17 +14,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 3px 5px 7px / 11px 7px 5px;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
   padding: 1px 1px 3px 2px;
   margin-right: 4px;
   width: 40px;
   height: 40px;
 }
 
 item1,item2,item3 {
   display: block;
--- a/layout/reftests/css-grid/grid-align-content-001.html
+++ b/layout/reftests/css-grid/grid-align-content-001.html
@@ -16,17 +16,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 3px 5px 7px / 11px 7px 5px;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
   padding: 1px 1px 3px 2px;
   margin-right: 4px;
   width: 40px;
   height: 40px;
 }
 
 item1,item2,item3 {
   display: block;
--- a/layout/reftests/css-grid/grid-container-min-max-width-height-001.html
+++ b/layout/reftests/css-grid/grid-container-min-max-width-height-001.html
@@ -12,17 +12,17 @@
   <style type="text/css">
 html,body {
   color:black; background-color:white; font-size:16px; padding:0; margin:0;
 }
 
 .grid {
   display: grid;
   float: left;
-  grid: 10px 10px / 10px 10px;
+  grid-template: 10px 10px / 10px 10px;
   grid-gap: 4px;
   border: 1px solid black;
   background: grey;
   margin-right:50px;
 }
 
 x { background:blue; }
 
--- a/layout/reftests/css-grid/grid-item-align-001.html
+++ b/layout/reftests/css-grid/grid-item-align-001.html
@@ -16,17 +16,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 3px 20px 2px / 1px 32px 3px;
+  grid-template: 3px 20px 2px / 1px 32px 3px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-align-002.html
+++ b/layout/reftests/css-grid/grid-item-align-002.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-block-start: 2px solid blue; */
   border-block-start: 2px solid black;
-  grid: 3px 20px 2px / 1px 32px 3px;
+  grid-template: 3px 20px 2px / 1px 32px 3px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-align-003.html
+++ b/layout/reftests/css-grid/grid-item-align-003.html
@@ -18,17 +18,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-block-start: 2px solid blue; */
   border-block-start: 2px solid black;
-  grid: 3px 20px 2px / 1px 32px 3px;
+  grid-template: 3px 20px 2px / 1px 32px 3px;
   margin-right: 20px;
   margin-bottom: 20px;
 }
 
 span {
   grid-area: 2 / 2; /* the center grid area */
   display: block;
   width: 40px;
--- a/layout/reftests/css-grid/grid-item-justify-001.html
+++ b/layout/reftests/css-grid/grid-item-justify-001.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 3px 20px 2px / 1px 32px 3px;
+  grid-template: 3px 20px 2px / 1px 32px 3px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-justify-002.html
+++ b/layout/reftests/css-grid/grid-item-justify-002.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 3px 20px 2px / 1px 32px 3px;
+  grid-template: 3px 20px 2px / 1px 32px 3px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-auto-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-001-ref.html
@@ -15,17 +15,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-auto-001.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-001.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-auto-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-002-ref.html
@@ -15,17 +15,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-auto-002.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-002.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-auto-003-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-003-ref.html
@@ -14,17 +14,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-auto-003.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-003.html
@@ -16,17 +16,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-auto-004-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-004-ref.html
@@ -15,17 +15,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-block-start: 2px solid blue; */
   border-block-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-auto-004.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-auto-004.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-block-start: 2px solid blue; */
   border-block-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-right-auto-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-001-ref.html
@@ -15,17 +15,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-right-auto-001.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-001.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-right-auto-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-002-ref.html
@@ -15,17 +15,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-right-auto-002.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-002.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-right-auto-003-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-003-ref.html
@@ -14,17 +14,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-right-auto-003.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-003.html
@@ -16,17 +16,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-right-auto-004-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-004-ref.html
@@ -15,17 +15,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-block-start: 2px solid blue; */
   border-block-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-left-right-auto-004.html
+++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-004.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-block-start: 2px solid blue; */
   border-block-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-right-auto-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-001-ref.html
@@ -15,17 +15,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-right-auto-001.html
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-001.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-right-auto-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-002-ref.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-right-auto-002.html
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-002.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-inline-start: 2px solid lime; */
   border-inline-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-right-auto-003-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-003-ref.html
@@ -14,17 +14,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-right-auto-003.html
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-003.html
@@ -16,17 +16,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-right-auto-004-ref.html
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-004-ref.html
@@ -15,17 +15,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-block-start: 2px solid blue; */
   border-block-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-margin-right-auto-004.html
+++ b/layout/reftests/css-grid/grid-item-margin-right-auto-004.html
@@ -17,17 +17,17 @@ separator { clear:both; display:block; h
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   /* border-block-start: 2px solid blue; */
   border-block-start: 2px solid black;
-  grid: 1px 32px 3px / 3px 20px 2px;
+  grid-template: 1px 32px 3px / 3px 20px 2px;
   margin-right: 4px;
 }
 
 span {
   grid-area: 2 / 2; /* the center 32 x 20 pixel area */
   display: block;
   width: 13px;
   height: 9px;
--- a/layout/reftests/css-grid/grid-item-stretch-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-stretch-001-ref.html
@@ -14,17 +14,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   position: relative;
   float: left;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 1px 25px 5px / 3px 21px 1px;
+  grid-template: 1px 25px 5px / 3px 21px 1px;
   padding: 1px 1px 3px 2px;
   margin-right: 2px;
   width: 40px;
   height: 40px;
   align-items: start;
   justify-items: start;
 }
 
--- a/layout/reftests/css-grid/grid-item-stretch-001.html
+++ b/layout/reftests/css-grid/grid-item-stretch-001.html
@@ -16,17 +16,17 @@ html,body {
 }
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 1px 25px 5px / 3px 21px 1px;
+  grid-template: 1px 25px 5px / 3px 21px 1px;
   padding: 1px 1px 3px 2px;
   margin-right: 2px;
   width: 40px;
   height: 40px;
   align-items: stretch;
   justify-items: stretch;
 }
 
--- a/layout/reftests/css-grid/grid-justify-content-001-ref.html
+++ b/layout/reftests/css-grid/grid-justify-content-001-ref.html
@@ -14,17 +14,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 3px 5px 7px / 11px 7px 5px;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
   padding: 1px 1px 3px 2px;
   margin-right: 4px;
   width: 40px;
   height: 40px;
 }
 
 item1,item2,item3 {
   display: block;
--- a/layout/reftests/css-grid/grid-justify-content-001.html
+++ b/layout/reftests/css-grid/grid-justify-content-001.html
@@ -16,17 +16,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 3px 5px 7px / 11px 7px 5px;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
   padding: 1px 1px 3px 2px;
   margin-right: 4px;
   width: 40px;
   height: 40px;
 }
 
 item1,item2,item3 {
   display: block;
--- a/layout/reftests/css-grid/grid-row-gap-001-ref.html
+++ b/layout/reftests/css-grid/grid-row-gap-001-ref.html
@@ -14,17 +14,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid:  3px 1px 5px 1px 7px / 11px 7px 5px;
+  grid-template:  3px 1px 5px 1px 7px / 11px 7px 5px;
   padding: 1px 1px 3px 2px;
   margin-right: 4px;
   width: 40px;
   height: 40px;
 }
 
 item1,item2,item3 {
   display: block;
--- a/layout/reftests/css-grid/grid-row-gap-001.html
+++ b/layout/reftests/css-grid/grid-row-gap-001.html
@@ -16,17 +16,17 @@ html,body {
 separator { clear:both; display:block; height:6px; }
 
 .grid {
   display: grid;
   float: left;
   position: relative;
   border: 1px solid;
   border-block-start: 2px solid blue;
-  grid: 3px 5px 7px / 11px 7px 5px;
+  grid-template: 3px 5px 7px / 11px 7px 5px;
   padding: 1px 1px 3px 2px;
   margin-right: 4px;
   width: 40px;
   height: 40px;
   grid-row-gap: 1px;
 }
 
 item1,item2,item3 {