Update CSS tests to revision 2baa72daab8bf37e3e910a9fd311a1eaa5b0f4a8

author: James Graham <james@hoppipolla.co.uk> 2015-07-27 17:47:31 +0100
committer: James Graham <james@hoppipolla.co.uk> 2015-07-27 17:47:31 +0100
commit: df03062d626f485dd896ce9c4374dfce447dc657 (patch)
tree: a96bdde06c6cd88dd68bc5ef4de8277fc6250a60 /tests/wpt/css-tests/css-grid-1_dev/html
parent: 662c00a8109c49d4c57343156b774441f4f48640 (diff)
download: servo-df03062d626f485dd896ce9c4374dfce447dc657.tar.gz
servo-df03062d626f485dd896ce9c4374dfce447dc657.zip
123 files changed, 6281 insertions, 157 deletions
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-12.htm b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-12.htm
index 8ac222a1893..5bc5f08c80f 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-12.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-12.htm
@@ -149,11 +149,11 @@
     </tbody>
     <tbody id="s.#property-index">
       <!-- 1 tests -->
-      <tr id="grid-layout-properties-.#property-index" class="primary dom script">
+      <tr id="grid-layout-properties-.#property-index" class="primary ahem dom script">
         <td><strong>
             <a href="grid-layout-properties.htm">grid-layout-properties</a></strong></td>
         <td></td>
-        <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
         <td>Grid Layout - Properties exist
           <ul class="assert">
             <li>Test checks that css properties of grid layout exist.</li>
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-2.htm b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-2.htm
index 6ea29b56f93..3eb2aa5b4d8 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-2.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-2.htm
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
-  <h2>Grid Layout Concepts and Terminology (2 tests)</h2>
+  <h2>Grid Layout Concepts and Terminology (0 tests)</h2>
   <table width="100%">
     <col id="test-column">
     <col id="refs-column">
@@ -70,29 +70,7 @@
       <!-- 0 tests -->
     </tbody>
     <tbody id="s2.2.#grid-line">
-      <!-- 2 tests -->
-      <tr id="grid-layout-lines-2.2.#grid-line" class="primary">
-        <td><strong>
-            <a href="grid-layout-lines.htm">grid-layout-lines</a></strong></td>
-        <td><a href="reference/grid-layout-basic-ref.htm">=</a> </td>
-        <td></td>
-        <td>grid lines
-          <ul class="assert">
-            <li>the subgrid layout should behave the same as reference.</li>
-          </ul>
-        </td>
-      </tr>
-      <tr id="grid-layout-lines-shorthands-2.2.#grid-line" class="primary">
-        <td><strong>
-            <a href="grid-layout-lines-shorthands.htm">grid-layout-lines-shorthands</a></strong></td>
-        <td><a href="reference/grid-layout-basic-ref.htm">=</a> </td>
-        <td></td>
-        <td>grid lines shorthands
-          <ul class="assert">
-            <li>the subgrid layout should behave the same as reference.</li>
-          </ul>
-        </td>
-      </tr>
+      <!-- 0 tests -->
     </tbody>
     <tbody id="s2.3">
       <tr><th colspan="4" scope="rowgroup">
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-3.htm b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-3.htm
index 279f28f3657..039deaa4fbc 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-3.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-3.htm
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
-  <h2>Grid Containers (9 tests)</h2>
+  <h2>Grid Containers (28 tests)</h2>
   <table width="100%">
     <col id="test-column">
     <col id="refs-column">
@@ -37,7 +37,7 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s3.1">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#grid-containers">3.1 Establishing Grid Containers: the grid and inline-grid display values</a></th></tr>
-      <!-- 9 tests -->
+      <!-- 28 tests -->
       <tr id="display-grid-3.1" class="primary">
         <td><strong>
             <a href="display-grid.htm">display-grid</a></strong></td>
@@ -60,6 +60,14 @@
           </ul>
         </td>
       </tr>
+      <tr id="grid-computed-value-display-floated-items-001-3.1" class="primary dom script">
+        <td><strong>
+            <a href="grid-computed-value-display-floated-items-001.htm">grid-computed-value-display-floated-items-001</a></strong></td>
+        <td></td>
+        <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>'float' affects to the computed value of 'display' on grid items
+        </td>
+      </tr>
       <tr id="grid-display-grid-001-3.1" class="primary ahem">
         <td><strong>
             <a href="grid-display-grid-001.htm">grid-display-grid-001</a></strong></td>
@@ -82,6 +90,72 @@
           </ul>
         </td>
       </tr>
+      <tr id="grid-first-letter-001-3.1" class="primary">
+        <td><strong>
+            <a href="grid-first-letter-001.htm">grid-first-letter-001</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-letter' from grid container does not apply to grid items
+          <ul class="assert">
+            <li>This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-first-letter-002-3.1" class="primary">
+        <td><strong>
+            <a href="grid-first-letter-002.htm">grid-first-letter-002</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-letter' from grid container ancestors does not apply to grid items
+          <ul class="assert">
+            <li>This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container ancestors.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-first-letter-003-3.1" class="primary">
+        <td><strong>
+            <a href="grid-first-letter-003.htm">grid-first-letter-003</a></strong></td>
+        <td><a href="reference/grid-first-letter-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-letter' works on grid items
+          <ul class="assert">
+            <li>This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-first-line-001-3.1" class="primary">
+        <td><strong>
+            <a href="grid-first-line-001.htm">grid-first-line-001</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-line' from grid container does not apply to grid items
+          <ul class="assert">
+            <li>This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-first-line-002-3.1" class="primary">
+        <td><strong>
+            <a href="grid-first-line-002.htm">grid-first-line-002</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-line' from grid container ancestors does not apply to grid items
+          <ul class="assert">
+            <li>This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container ancestors.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-first-line-003-3.1" class="primary">
+        <td><strong>
+            <a href="grid-first-line-003.htm">grid-first-line-003</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-line' works on grid items
+          <ul class="assert">
+            <li>This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item.</li>
+          </ul>
+        </td>
+      </tr>
       <tr id="grid-float-001-3.1" class="primary">
         <td><strong>
             <a href="grid-float-001.htm">grid-float-001</a></strong></td>
@@ -90,6 +164,80 @@
         <td>'float' has no effect on grid items
         </td>
       </tr>
+      <tr id="grid-floats-no-intrude-001-3.1" class="primary">
+        <td><strong>
+            <a href="grid-floats-no-intrude-001.htm">grid-floats-no-intrude-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td></td>
+        <td>floats do not intrude into a grid
+        </td>
+      </tr>
+      <tr id="grid-inline-first-letter-001-3.1" class="primary">
+        <td><strong>
+            <a href="grid-inline-first-letter-001.htm">grid-inline-first-letter-001</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-letter' from inline grid container does not apply to grid items
+          <ul class="assert">
+            <li>This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-inline-first-letter-002-3.1" class="primary">
+        <td><strong>
+            <a href="grid-inline-first-letter-002.htm">grid-inline-first-letter-002</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-letter' from inline grid container ancestors does not apply to grid items
+          <ul class="assert">
+            <li>This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container ancestors.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-inline-first-letter-003-3.1" class="primary">
+        <td><strong>
+            <a href="grid-inline-first-letter-003.htm">grid-inline-first-letter-003</a></strong></td>
+        <td><a href="reference/grid-first-letter-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-letter' works on grid items within an inline grid
+          <ul class="assert">
+            <li>This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item within an inline grid.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-inline-first-line-001-3.1" class="primary">
+        <td><strong>
+            <a href="grid-inline-first-line-001.htm">grid-inline-first-line-001</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-line' from inline grid container does not apply to grid items
+          <ul class="assert">
+            <li>This test checks that '::first-line' pseudo-element is ignored in grid items when applied to an inline grid container.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-inline-first-line-002-3.1" class="primary">
+        <td><strong>
+            <a href="grid-inline-first-line-002.htm">grid-inline-first-line-002</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-line' from inline grid container ancestors does not apply to grid items
+          <ul class="assert">
+            <li>This test checks that '::first-line' pseudo-element is ignored in anonymous grid items when applied to an inline grid container ancestors.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-inline-first-line-003-3.1" class="primary">
+        <td><strong>
+            <a href="grid-inline-first-line-003.htm">grid-inline-first-line-003</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>'::first-line' works on grid items within an inline grid
+          <ul class="assert">
+            <li>This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item within an inline grid.</li>
+          </ul>
+        </td>
+      </tr>
       <tr id="grid-inline-float-001-3.1" class="primary">
         <td><strong>
             <a href="grid-inline-float-001.htm">grid-inline-float-001</a></strong></td>
@@ -98,6 +246,36 @@
         <td>'float' has no effect on grid items within an inline grid
         </td>
       </tr>
+      <tr id="grid-inline-floats-no-intrude-001-3.1" class="primary">
+        <td><strong>
+            <a href="grid-inline-floats-no-intrude-001.htm">grid-inline-floats-no-intrude-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td></td>
+        <td>floats do not intrude into an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-margins-no-collapse-001-3.1" class="primary">
+        <td><strong>
+            <a href="grid-inline-margins-no-collapse-001.htm">grid-inline-margins-no-collapse-001</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>inline grid's margins do not collapse
+          <ul class="assert">
+            <li>This test checks that inline grid's margin (body) do not collapse with the marings of the grid item (a paragraph).</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-inline-multicol-001-3.1" class="primary">
+        <td><strong>
+            <a href="grid-inline-multicol-001.htm">grid-inline-multicol-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td></td>
+        <td>'column-*' properties from inline grid container does not apply to grid items
+          <ul class="assert">
+            <li>This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to an inline grid container.</li>
+          </ul>
+        </td>
+      </tr>
       <tr id="grid-inline-vertical-align-001-3.1" class="primary ahem">
         <td><strong>
             <a href="grid-inline-vertical-align-001.htm">grid-inline-vertical-align-001</a></strong></td>
@@ -106,6 +284,28 @@
         <td>'vertical-align' has no effect on grid items within an inline grid
         </td>
       </tr>
+      <tr id="grid-margins-no-collapse-001-3.1" class="primary">
+        <td><strong>
+            <a href="grid-margins-no-collapse-001.htm">grid-margins-no-collapse-001</a></strong></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td></td>
+        <td>grid's margins do not collapse
+          <ul class="assert">
+            <li>This test checks that grid's margin (body) do not collapse with the marings of the grid item (a paragraph).</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-multicol-001-3.1" class="primary">
+        <td><strong>
+            <a href="grid-multicol-001.htm">grid-multicol-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td></td>
+        <td>'column-*' properties from grid container does not apply to grid items
+          <ul class="assert">
+            <li>This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to a grid container.</li>
+          </ul>
+        </td>
+      </tr>
       <tr id="grid-support-display-001-3.1" class="primary dom script">
         <td><strong>
             <a href="grid-support-display-001.htm">grid-support-display-001</a></strong></td>
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-4.htm b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-4.htm
index 8ab9d14550a..b4b4d41dfc3 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-4.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-4.htm
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
-  <h2>Grid Items (2 tests)</h2>
+  <h2>Grid Items (52 tests)</h2>
   <table width="100%">
     <col id="test-column">
     <col id="refs-column">
@@ -31,7 +31,67 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s4">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#grid-items">4 Grid Items</a></th></tr>
-      <!-- 0 tests -->
+      <!-- 6 tests -->
+      <tr id="grid-inline-items-001-4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-items-001.htm">grid-inline-items-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>Regular and anonymous grid items within an inline grid
+          <ul class="assert">
+            <li>Checks that inline grid container children become grid items, and text that is directly contained inside the inline grid is wrapped in an anonymous grid item.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-inline-items-002-4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-items-002.htm">grid-inline-items-002</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>Children of grid items do not create new items within an inline grid
+          <ul class="assert">
+            <li>Checks that the grid items do not split around blocks creating extra items within an inline grid.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-inline-items-003-4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-items-003.htm">grid-inline-items-003</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>Grid items with 'display:none' are not rendered within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-items-001-4" class="primary ahem">
+        <td><strong>
+            <a href="grid-items-001.htm">grid-items-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>Regular and anonymous grid items
+          <ul class="assert">
+            <li>Checks that grid container children become grid items, and text that is directly contained inside the grid is wrapped in an anonymous grid item.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-items-002-4" class="primary ahem">
+        <td><strong>
+            <a href="grid-items-002.htm">grid-items-002</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>Children of grid items do not create new items
+          <ul class="assert">
+            <li>Checks that the grid items do not split around blocks creating extra items.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-items-003-4" class="primary ahem">
+        <td><strong>
+            <a href="grid-items-003.htm">grid-items-003</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>Grid items with 'display:none' are not rendered
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.#grid-item">
       <!-- 0 tests -->
@@ -49,7 +109,167 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s4.2">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#order-property">4.2 Reordered Grid Items: the order property</a></th></tr>
-      <!-- 0 tests -->
+      <!-- 20 tests -->
+      <tr id="grid-inline-order-property-auto-placement-001-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-order-property-auto-placement-001.htm">grid-inline-order-property-auto-placement-001</a></strong></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items auto-placement position within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-order-property-auto-placement-002-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-order-property-auto-placement-002.htm">grid-inline-order-property-auto-placement-002</a></strong></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items auto-placement position within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-order-property-auto-placement-003-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-order-property-auto-placement-003.htm">grid-inline-order-property-auto-placement-003</a></strong></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items auto-placement position within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-order-property-auto-placement-004-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-order-property-auto-placement-004.htm">grid-inline-order-property-auto-placement-004</a></strong></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items auto-placement position within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-order-property-auto-placement-005-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-order-property-auto-placement-005.htm">grid-inline-order-property-auto-placement-005</a></strong></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items auto-placement position within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-order-property-painting-001-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-order-property-painting-001.htm">grid-inline-order-property-painting-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items painting order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-order-property-painting-002-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-order-property-painting-002.htm">grid-inline-order-property-painting-002</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items painting order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-order-property-painting-003-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-order-property-painting-003.htm">grid-inline-order-property-painting-003</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items painting order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-order-property-painting-004-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-order-property-painting-004.htm">grid-inline-order-property-painting-004</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items painting order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-order-property-painting-005-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-order-property-painting-005.htm">grid-inline-order-property-painting-005</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items painting order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-order-property-auto-placement-001-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-order-property-auto-placement-001.htm">grid-order-property-auto-placement-001</a></strong></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items auto-placement position
+        </td>
+      </tr>
+      <tr id="grid-order-property-auto-placement-002-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-order-property-auto-placement-002.htm">grid-order-property-auto-placement-002</a></strong></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items auto-placement position
+        </td>
+      </tr>
+      <tr id="grid-order-property-auto-placement-003-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-order-property-auto-placement-003.htm">grid-order-property-auto-placement-003</a></strong></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items auto-placement position
+        </td>
+      </tr>
+      <tr id="grid-order-property-auto-placement-004-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-order-property-auto-placement-004.htm">grid-order-property-auto-placement-004</a></strong></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items auto-placement position
+        </td>
+      </tr>
+      <tr id="grid-order-property-auto-placement-005-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-order-property-auto-placement-005.htm">grid-order-property-auto-placement-005</a></strong></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items auto-placement position
+        </td>
+      </tr>
+      <tr id="grid-order-property-painting-001-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-order-property-painting-001.htm">grid-order-property-painting-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items painting order
+        </td>
+      </tr>
+      <tr id="grid-order-property-painting-002-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-order-property-painting-002.htm">grid-order-property-painting-002</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items painting order
+        </td>
+      </tr>
+      <tr id="grid-order-property-painting-003-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-order-property-painting-003.htm">grid-order-property-painting-003</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items painting order
+        </td>
+      </tr>
+      <tr id="grid-order-property-painting-004-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-order-property-painting-004.htm">grid-order-property-painting-004</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items painting order
+        </td>
+      </tr>
+      <tr id="grid-order-property-painting-005-4.2" class="primary ahem">
+        <td><strong>
+            <a href="grid-order-property-painting-005.htm">grid-order-property-painting-005</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'order' property affects grid items painting order
+        </td>
+      </tr>
     </tbody>
     <tbody id="s4.3">
       <tr><th colspan="4" scope="rowgroup">
@@ -61,7 +281,111 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s4.4">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#z-order">4.4 Z-axis Ordering: the z-index property</a></th></tr>
-      <!-- 2 tests -->
+      <!-- 26 tests -->
+      <tr id="grid-inline-items-inline-blocks-001-4.4" class="primary">
+        <td><strong>
+            <a href="grid-inline-items-inline-blocks-001.htm">grid-inline-items-inline-blocks-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td></td>
+        <td>Paint order of grid items within an inline grid is the same as inline blocks
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-001-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-001.htm">grid-inline-z-axis-ordering-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the z-axis order of grid items within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-002-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-002.htm">grid-inline-z-axis-ordering-002</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the z-axis order of grid items within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-003-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-003.htm">grid-inline-z-axis-ordering-003</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the z-axis order of grid items within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-004-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-004.htm">grid-inline-z-axis-ordering-004</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the z-axis order of grid items within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-005-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-005.htm">grid-inline-z-axis-ordering-005</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the z-axis order of grid items within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-overlapped-items-001-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-overlapped-items-001.htm">grid-inline-z-axis-ordering-overlapped-items-001</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-overlapped-items-002-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-overlapped-items-002.htm">grid-inline-z-axis-ordering-overlapped-items-002</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-overlapped-items-003-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-overlapped-items-003.htm">grid-inline-z-axis-ordering-overlapped-items-003</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-overlapped-items-004-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-overlapped-items-004.htm">grid-inline-z-axis-ordering-overlapped-items-004</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-overlapped-items-005-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-overlapped-items-005.htm">grid-inline-z-axis-ordering-overlapped-items-005</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-inline-z-axis-ordering-overlapped-items-006-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-inline-z-axis-ordering-overlapped-items-006.htm">grid-inline-z-axis-ordering-overlapped-items-006</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order within an inline grid
+        </td>
+      </tr>
+      <tr id="grid-items-inline-blocks-001-4.4" class="primary">
+        <td><strong>
+            <a href="grid-items-inline-blocks-001.htm">grid-items-inline-blocks-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td></td>
+        <td>Paint order of grid items is the same as inline blocks
+        </td>
+      </tr>
       <tr id="grid-layout-z-order-a-4.4" class="primary">
         <td><strong>
             <a href="grid-layout-z-order-a.htm">grid-layout-z-order-a</a></strong></td>
@@ -84,6 +408,94 @@
           </ul>
         </td>
       </tr>
+      <tr id="grid-z-axis-ordering-001-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-001.htm">grid-z-axis-ordering-001</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the z-axis order of grid items
+        </td>
+      </tr>
+      <tr id="grid-z-axis-ordering-002-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-002.htm">grid-z-axis-ordering-002</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the z-axis order of grid items
+        </td>
+      </tr>
+      <tr id="grid-z-axis-ordering-003-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-003.htm">grid-z-axis-ordering-003</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the z-axis order of grid items
+        </td>
+      </tr>
+      <tr id="grid-z-axis-ordering-004-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-004.htm">grid-z-axis-ordering-004</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the z-axis order of grid items
+        </td>
+      </tr>
+      <tr id="grid-z-axis-ordering-005-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-005.htm">grid-z-axis-ordering-005</a></strong></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the z-axis order of grid items
+        </td>
+      </tr>
+      <tr id="grid-z-axis-ordering-overlapped-items-001-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-overlapped-items-001.htm">grid-z-axis-ordering-overlapped-items-001</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order
+        </td>
+      </tr>
+      <tr id="grid-z-axis-ordering-overlapped-items-002-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-overlapped-items-002.htm">grid-z-axis-ordering-overlapped-items-002</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order
+        </td>
+      </tr>
+      <tr id="grid-z-axis-ordering-overlapped-items-003-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-overlapped-items-003.htm">grid-z-axis-ordering-overlapped-items-003</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order
+        </td>
+      </tr>
+      <tr id="grid-z-axis-ordering-overlapped-items-004-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-overlapped-items-004.htm">grid-z-axis-ordering-overlapped-items-004</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order
+        </td>
+      </tr>
+      <tr id="grid-z-axis-ordering-overlapped-items-005-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-overlapped-items-005.htm">grid-z-axis-ordering-overlapped-items-005</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order
+        </td>
+      </tr>
+      <tr id="grid-z-axis-ordering-overlapped-items-006-4.4" class="primary ahem">
+        <td><strong>
+            <a href="grid-z-axis-ordering-overlapped-items-006.htm">grid-z-axis-ordering-overlapped-items-006</a></strong></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+        <td>'z-index' property controls the grid items stacking order
+        </td>
+      </tr>
     </tbody>
   </table>
 
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-5.htm b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-5.htm
index 30f478c62df..38046521383 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-5.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-5.htm
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
-  <h2>The Explicit Grid (4 tests)</h2>
+  <h2>The Explicit Grid (17 tests)</h2>
   <table width="100%">
     <col id="test-column">
     <col id="refs-column">
@@ -40,7 +40,29 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s5.1">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#track-sizing">5.1 Track Sizing: the grid-template-rows and grid-template-columns properties</a></th></tr>
-      <!-- 1 tests -->
+      <!-- 4 tests -->
+      <tr id="grid-inline-support-grid-template-columns-rows-001-5.1" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-inline-support-grid-template-columns-rows-001.htm">grid-inline-support-grid-template-columns-rows-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>Support for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
+          <ul class="assert">
+            <li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in an inline grid. So you can use the different syntax options to define the trak list.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-layout-auto-tracks-5.1" class="primary">
+        <td><strong>
+            <a href="grid-layout-auto-tracks.htm">grid-layout-auto-tracks</a></strong></td>
+        <td><a href="reference/grid-layout-auto-tracks-ref.htm">=</a> </td>
+        <td></td>
+        <td>auto tracks
+          <ul class="assert">
+            <li>the layout should behave the same as reference.</li>
+          </ul>
+        </td>
+      </tr>
       <tr id="grid-layout-basic-5.1" class="primary">
         <td><strong>
             <a href="grid-layout-basic.htm">grid-layout-basic</a></strong></td>
@@ -52,6 +74,17 @@
           </ul>
         </td>
       </tr>
+      <tr id="grid-support-grid-template-columns-rows-001-5.1" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-support-grid-template-columns-rows-001.htm">grid-support-grid-template-columns-rows-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>Support for 'grid-template-columns' and 'grid-template-rows' properties
+          <ul class="assert">
+            <li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in a grid. So you can use the different syntax options to define the trak list.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s5.1.#propdef-grid-template-columns">
       <!-- 0 tests -->
@@ -114,7 +147,29 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s5.1.1">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#named-lines">5.1.1 Named Grid Lines: the (<custom-ident>*) syntax</a></th></tr>
-      <!-- 0 tests -->
+      <!-- 2 tests -->
+      <tr id="grid-inline-support-named-grid-lines-001-5.1.1" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-inline-support-named-grid-lines-001.htm">grid-inline-support-named-grid-lines-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
+          <ul class="assert">
+            <li>This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-support-named-grid-lines-001-5.1.1" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-support-named-grid-lines-001.htm">grid-support-named-grid-lines-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties
+          <ul class="assert">
+            <li>This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s5.1.1.#named-line">
       <!-- 0 tests -->
@@ -123,7 +178,18 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s5.1.2">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#repeat-notation">5.1.2 Repeating Rows and Columns: the repeat() notation</a></th></tr>
-      <!-- 1 tests -->
+      <!-- 3 tests -->
+      <tr id="grid-inline-support-repeat-001-5.1.2" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-inline-support-repeat-001.htm">grid-inline-support-repeat-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
+          <ul class="assert">
+            <li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation within an inline grid, so you can use it to represents a repeated fragment of the track list.</li>
+          </ul>
+        </td>
+      </tr>
       <tr id="grid-layout-repeat-notation-5.1.2" class="primary">
         <td><strong>
             <a href="grid-layout-repeat-notation.htm">grid-layout-repeat-notation</a></strong></td>
@@ -135,6 +201,17 @@
           </ul>
         </td>
       </tr>
+      <tr id="grid-support-repeat-001-5.1.2" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-support-repeat-001.htm">grid-support-repeat-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties
+          <ul class="assert">
+            <li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, so you can use it to represents a repeated fragment of the track list.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s5.1.2.#funcdef-repeat">
       <!-- 0 tests -->
@@ -146,7 +223,7 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s5.1.3">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#fr-unit">5.1.3 Flexible Lengths: the fr unit</a></th></tr>
-      <!-- 2 tests -->
+      <!-- 4 tests -->
       <tr id="fr-unit-5.1.3" class="primary">
         <td><strong>
             <a href="fr-unit.htm">fr-unit</a></strong></td>
@@ -166,6 +243,28 @@
         <td>CSS3 Grid Layout: Flexible Lenght
         </td>
       </tr>
+      <tr id="grid-inline-support-flexible-lengths-001-5.1.3" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-inline-support-flexible-lengths-001.htm">grid-inline-support-flexible-lengths-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
+          <ul class="assert">
+            <li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit) within an inline grid, so you can use it to represent a fraction of the free space in the grid container.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-support-flexible-lengths-001-5.1.3" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-support-flexible-lengths-001.htm">grid-support-flexible-lengths-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties
+          <ul class="assert">
+            <li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit), so you can use it to represent a fraction of the free space in the grid container.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s5.1.3.#flex-fraction">
       <!-- 0 tests -->
@@ -189,13 +288,57 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s5.1.5">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#resolved-track-list">5.1.5 Resolved Values</a></th></tr>
-      <!-- 0 tests -->
+      <!-- 2 tests -->
+      <tr id="grid-inline-template-columns-rows-resolved-values-001-5.1.5" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-inline-template-columns-rows-resolved-values-001.htm">grid-inline-template-columns-rows-resolved-values-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid
+          <ul class="assert">
+            <li>This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created in an inline grid.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-template-columns-rows-resolved-values-001-5.1.5" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-template-columns-rows-resolved-values-001.htm">grid-template-columns-rows-resolved-values-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks
+          <ul class="assert">
+            <li>This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s5.2">
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s5.2">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property">5.2 Named Areas: the grid-template-areas property</a></th></tr>
-      <!-- 0 tests -->
+      <!-- 2 tests -->
+      <tr id="grid-inline-support-grid-template-areas-001-5.2" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-inline-support-grid-template-areas-001.htm">grid-inline-support-grid-template-areas-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>Support for 'grid-template-ares' property within an inline grid
+          <ul class="assert">
+            <li>This test checks that 'grid-template-areas' is supported in an inline grid. So you can define the grid structure.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-support-grid-template-areas-001-5.2" class="primary ahem dom script">
+        <td><strong>
+            <a href="grid-support-grid-template-areas-001.htm">grid-support-grid-template-areas-001</a></strong></td>
+        <td></td>
+        <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
+        <td>Support for 'grid-template-ares' property
+          <ul class="assert">
+            <li>This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s5.2.#named-cell-token">
       <!-- 0 tests -->
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-6.htm b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-6.htm
index 6e52fd2a044..2d191256f68 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-6.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-6.htm
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
-  <h2>The Implicit Grid (1 tests)</h2>
+  <h2>The Implicit Grid (0 tests)</h2>
   <table width="100%">
     <col id="test-column">
     <col id="refs-column">
@@ -40,18 +40,7 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s6.1">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#auto-tracks">6.1 Sizing Auto-generated Rows and Columns: the grid-auto-rows and grid-auto-columns properties</a></th></tr>
-      <!-- 1 tests -->
-      <tr id="grid-layout-auto-tracks-6.1" class="primary">
-        <td><strong>
-            <a href="grid-layout-auto-tracks.htm">grid-layout-auto-tracks</a></strong></td>
-        <td><a href="reference/grid-layout-auto-tracks-ref.htm">=</a> </td>
-        <td></td>
-        <td>auto tracks
-          <ul class="assert">
-            <li>the layout should behave the same as reference.</li>
-          </ul>
-        </td>
-      </tr>
+      <!-- 0 tests -->
     </tbody>
     <tbody id="s6.1.#implicit-grid-track">
       <!-- 0 tests -->
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-9.htm b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-9.htm
index ea7e6fb7986..f110518c831 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/chapter-9.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/chapter-9.htm
@@ -13,7 +13,7 @@
  <body>
 
   <h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
-  <h2>Placing Grid Items (2 tests)</h2>
+  <h2>Placing Grid Items (4 tests)</h2>
   <table width="100%">
     <col id="test-column">
     <col id="refs-column">
@@ -93,7 +93,29 @@
       <tr><th colspan="4" scope="rowgroup">
         <a href="#s9.1.3">+</a>
         <a href="http://www.w3.org/TR/css-grid-1/#common-uses-named-lines">9.1.3 Named Lines and Spans</a></th></tr>
-      <!-- 0 tests -->
+      <!-- 2 tests -->
+      <tr id="grid-layout-lines-9.1.3" class="primary">
+        <td><strong>
+            <a href="grid-layout-lines.htm">grid-layout-lines</a></strong></td>
+        <td><a href="reference/grid-layout-basic-ref.htm">=</a> </td>
+        <td></td>
+        <td>grid lines
+          <ul class="assert">
+            <li>the layout should behave the same as reference.</li>
+          </ul>
+        </td>
+      </tr>
+      <tr id="grid-layout-lines-shorthands-9.1.3" class="primary">
+        <td><strong>
+            <a href="grid-layout-lines-shorthands.htm">grid-layout-lines-shorthands</a></strong></td>
+        <td><a href="reference/grid-layout-basic-ref.htm">=</a> </td>
+        <td></td>
+        <td>grid lines shorthands
+          <ul class="assert">
+            <li>the layout should behave the same as reference.</li>
+          </ul>
+        </td>
+      </tr>
     </tbody>
     <tbody id="s9.1.4">
       <tr><th colspan="4" scope="rowgroup">
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-computed-value-display-floated-items-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-computed-value-display-floated-items-001.htm
new file mode 100644
index 00000000000..61fe8f0ce85
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-computed-value-display-floated-items-001.htm
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'float' affects to the computed value of 'display' on grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo" title="9.7 Relationships between 'display', 'position', and 'float'">
+        <meta name="flags" content="dom">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <style type="text/css">
+            #grid {
+                display: grid;
+            }
+
+            #inline-grid {
+                display: inline-grid;
+            }
+
+            .inline-table {
+                display: inline-table;
+            }
+
+            .inline {
+                display: inline;
+            }
+
+            .flex {
+                display: flex;
+            }
+
+            .float {
+                float: left;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="grid">
+            <div id="grid-inline-table" class="float inline-table"></div>
+            <div id="grid-inline" class="float inline"></div>
+            <div id="grid-flex" class="float flex"></div>
+        </div>
+        <div id="inline-grid">
+            <div id="inline-grid-inline-table" class="float inline-table"></div>
+            <div id="inline-grid-inline" class="float inline"></div>
+            <div id="inline-grid-flex" class="float flex"></div>
+        </div>
+
+        <script type="text/javascript">
+            function testComputedStyleDisplay(element, value) {
+                assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'");
+            }
+
+            var gridInlineTable = document.getElementById("grid-inline-table");
+            test(function() {
+                    testComputedStyleDisplay(gridInlineTable, "table");
+                }, "Test display floated 'inline-table' grid item");
+
+            var gridInline = document.getElementById("grid-inline");
+            test(function() {
+                    testComputedStyleDisplay(gridInline, "block");
+                }, "Test display floated 'inline' grid item");
+
+            var gridFlex = document.getElementById("grid-flex");
+            test(function() {
+                    testComputedStyleDisplay(gridFlex, "flex");
+                }, "Test display floated 'flex' grid item");
+
+            var inlineGridInlineTable = document.getElementById("inline-grid-inline-table");
+            test(function() {
+                    testComputedStyleDisplay(inlineGridInlineTable, "table");
+                }, "Test display floated 'inline-table' grid item within an inline grid");
+
+            var inlineGridInline = document.getElementById("inline-grid-inline");
+            test(function() {
+                    testComputedStyleDisplay(inlineGridInline, "block");
+                }, "Test display floated 'inline' grid item within an inline grid");
+
+            var inlineGridFlex = document.getElementById("inline-grid-flex");
+            test(function() {
+                    testComputedStyleDisplay(inlineGridFlex, "flex");
+                }, "Test display floated 'flex' grid item within an inline grid");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-letter-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-letter-001.htm
new file mode 100644
index 00000000000..685ad4319d3
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-letter-001.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-letter' from grid container does not apply to grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container.">
+        <style type="text/css">
+            .grid {
+                display: grid;
+                color: green;
+            }
+
+            .grid::first-letter {
+                color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="grid">
+            <div>
+                <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-letter-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-letter-002.htm
new file mode 100644
index 00000000000..0c7807a95ba
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-letter-002.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-letter' from grid container ancestors does not apply to grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container ancestors.">
+        <style type="text/css">
+            .grid {
+                display: grid;
+                color: green;
+            }
+
+            body::first-letter {
+                color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="grid">
+            <div>
+                <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-letter-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-letter-003.htm
new file mode 100644
index 00000000000..69ad458e2af
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-letter-003.htm
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-letter' works on grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+        <link rel="match" href="reference/grid-first-letter-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item.">
+        <style type="text/css">
+            .grid {
+                display: grid;
+            }
+
+            .item::first-letter {
+                color: green;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="grid">
+            <div class="item">
+                <p>
+                    The <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
+                    In addition, body and paragraph margins should <strong>not collapse</strong>.
+                </p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-line-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-line-001.htm
new file mode 100644
index 00000000000..a5715eb4ea1
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-line-001.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-line' from grid container does not apply to grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container.">
+        <style type="text/css">
+            .grid {
+                display: grid;
+                color: green;
+            }
+
+            .grid::first-line {
+                color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="grid">
+            <div>
+                <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-line-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-line-002.htm
new file mode 100644
index 00000000000..8de534d2a04
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-line-002.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-line' from grid container ancestors does not apply to grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container ancestors.">
+        <style type="text/css">
+            .grid {
+                display: grid;
+                color: green;
+            }
+
+            body::first-line {
+                color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="grid">
+            <div>
+                <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-line-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-line-003.htm
new file mode 100644
index 00000000000..39167d32caf
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-first-line-003.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-line' works on grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item.">
+        <style type="text/css">
+            .grid {
+                display: grid;
+                color: red;
+            }
+
+            .item::first-line {
+                color: green;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="grid">
+            <div class="item">
+                <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-floats-no-intrude-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-floats-no-intrude-001.htm
new file mode 100644
index 00000000000..537715ba653
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-floats-no-intrude-001.htm
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: floats do not intrude into a grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            .test-overlapping-green {
+                background-color: green;
+                width: 50px;
+                height: 100px;
+            }
+
+            .float {
+                float: left;
+            }
+
+            .grid {
+                display: grid;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+
+        <div class="float test-overlapping-green"></div>
+        <div class="grid test-overlapping-green"></div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-letter-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-letter-001.htm
new file mode 100644
index 00000000000..4713849531f
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-letter-001.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-letter' from inline grid container does not apply to grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container.">
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+                color: green;
+            }
+
+            .grid::first-letter {
+                color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="inline-grid">
+            <div>
+                <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-letter-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-letter-002.htm
new file mode 100644
index 00000000000..777d1f66512
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-letter-002.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-letter' from inline grid container ancestors does not apply to grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container ancestors.">
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+                color: green;
+            }
+
+            body::first-letter {
+                color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="inline-grid">
+            <div>
+                <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-letter-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-letter-003.htm
new file mode 100644
index 00000000000..28f699f2f23
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-letter-003.htm
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-letter' works on grid items within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+        <link rel="match" href="reference/grid-first-letter-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item within an inline grid.">
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+            }
+
+            .item::first-letter {
+                color: green;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="inline-grid">
+            <div class="item">
+                <p>
+                    The <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
+                    In addition, body and paragraph margins should <strong>not collapse</strong>.
+                </p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-line-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-line-001.htm
new file mode 100644
index 00000000000..cda68d88764
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-line-001.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-line' from inline grid container does not apply to grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to an inline grid container.">
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+                color: green;
+            }
+
+            .inline-grid::first-line {
+                color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="inline-grid">
+            <div>
+                <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-line-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-line-002.htm
new file mode 100644
index 00000000000..80bc5a731dc
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-line-002.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-line' from inline grid container ancestors does not apply to grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in anonymous grid items when applied to an inline grid container ancestors.">
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+                color: green;
+            }
+
+            body::first-line {
+                color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="inline-grid">
+            <div>
+                <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-line-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-line-003.htm
new file mode 100644
index 00000000000..67941fb89ff
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-first-line-003.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: '::first-line' works on grid items within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item within an inline grid.">
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+                color: red;
+            }
+
+            .item::first-line {
+                color: green;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="inline-grid">
+            <div class="item">
+                <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-floats-no-intrude-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-floats-no-intrude-001.htm
new file mode 100644
index 00000000000..87d2d730895
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-floats-no-intrude-001.htm
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: floats do not intrude into an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            .test-overlapping-green {
+                background-color: green;
+                width: 50px;
+                height: 100px;
+            }
+
+            .float {
+                float: left;
+            }
+
+            .inline-grid {
+                display: inline-grid;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+
+        <div class="float test-overlapping-green"></div>
+        <div class="inline-grid test-overlapping-green"></div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-001.htm
new file mode 100644
index 00000000000..c57c1ed46d0
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-001.htm
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Regular and anonymous grid items within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <meta name="assert" content="Checks that inline grid container children become grid items, and text that is directly contained inside the inline grid is wrapped in an anonymous grid item.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            .test-inline-grid-overlapping-green {
+                display: inline-grid;
+                font: 25px/1 Ahem;
+                color: green;
+                grid-template-columns: auto auto;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div class="test-inline-grid-overlapping-green">
+            <div>it</div>
+            em
+            <div>it</div>
+            em
+        </div>
+        <br>
+        <div class="test-inline-grid-overlapping-green">
+            it
+            <span>em</span>
+            it
+            <span>em</span>
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-002.htm
new file mode 100644
index 00000000000..029a57f06e0
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-002.htm
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Children of grid items do not create new items within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <meta name="assert" content="Checks that the grid items do not split around blocks creating extra items within an inline grid.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            .test-inline-grid-overlapping-green {
+                display: inline-grid;
+                font: 25px/1 Ahem;
+                color: green;
+            }
+
+            .two-columns {
+                grid-template-columns: auto auto;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div class="test-inline-grid-overlapping-green two-columns">
+            <div>
+                <div>it</div>
+                em
+            </div>
+            <div>
+                it
+                <div>em</div>
+            </div>
+        </div>
+        <br>
+        <div class="test-inline-grid-overlapping-green">
+            <span>
+                <span>it</span>em
+            </span>
+            <span>
+                it<span>em</span>
+            </span>
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-003.htm
new file mode 100644
index 00000000000..b88ee22ec93
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-003.htm
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            .test-inline-grid-overlapping-green {
+                display: inline-grid;
+                font: 50px/1 Ahem;
+                color: green;
+            }
+
+            .display-none-red {
+                display: none;
+                color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div class="test-inline-grid-overlapping-green two-columns">
+            <span>it</span>
+            <span class="display-none-red">hidden</span>
+            <span>em</span>
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-inline-blocks-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-inline-blocks-001.htm
new file mode 100644
index 00000000000..3b3c1b68308
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-items-inline-blocks-001.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Paint order of grid items within an inline grid is the same as inline blocks</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property">
+        <link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+            }
+
+            #reference-overlapped-red {
+                color: red;
+                font: 100px/1 Ahem;
+                grid-row: 1;
+                grid-column: 1;
+            }
+
+            #test-overlapping-green {
+                background-color: green;
+                width: 100px;
+                height: 100px;
+                grid-row: 1;
+                grid-column: 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="reference-overlapped-red">R</div>
+            <div id="test-overlapping-green"></div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-margins-no-collapse-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-margins-no-collapse-001.htm
new file mode 100644
index 00000000000..0caf0fe279c
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-margins-no-collapse-001.htm
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: inline grid's margins do not collapse</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that inline grid's margin (body) do not collapse with the marings of the grid item (a paragraph).">
+        <style type="text/css">
+            body {
+                display: inline-grid;
+            }
+
+            p {
+                color: green;
+            }
+        </style>
+    </head>
+    <body>
+        <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-multicol-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-multicol-001.htm
new file mode 100644
index 00000000000..c964fb4755b
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-multicol-001.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'column-*' properties from inline grid container does not apply to grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="assert" content="This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to an inline grid container.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            .test-overlapping-green {
+                background-color: green;
+                width: 100px;
+                height: 50px;
+            }
+
+            .inline-grid {
+                display: inline-grid;
+                -moz-column-width: 50px;
+                -webkit-column-width: 50px;
+                column-width: 50px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+
+        <div class="inline-grid">
+            <div class="test-overlapping-green"></div>
+            <div class="test-overlapping-green"></div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-001.htm
new file mode 100644
index 00000000000..a5b2b301e00
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-001.htm
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #inline-grid {
+                display: inline-grid;
+                font: 50px/1 Ahem;
+                grid-template-columns: auto auto;
+            }
+
+            #blue {
+                color: blue;
+            }
+
+            #yellow {
+                color: yellow;
+                order: 1;
+            }
+
+            #lime {
+                color: lime;
+                order: 5;
+            }
+
+            #magenta {
+                color: magenta;
+                order: 10;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="inline-grid">
+            <div id="magenta">M</div>
+            <div id="lime">L</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-002.htm
new file mode 100644
index 00000000000..cea697b6e3a
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-002.htm
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #inline-grid {
+                display: inline-grid;
+                font: 50px/1 Ahem;
+                grid-template-columns: auto auto;
+            }
+
+            #blue {
+                color: blue;
+                order: -10;
+            }
+
+            #yellow {
+                color: yellow;
+                order: -5;
+            }
+
+            #lime {
+                color: lime;
+                order: -1;
+            }
+
+            #magenta {
+                color: magenta;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="inline-grid">
+            <div id="magenta">M</div>
+            <div id="lime">L</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-003.htm
new file mode 100644
index 00000000000..dc149c161a6
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-003.htm
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #inline-grid {
+                display: inline-grid;
+                font: 50px/1 Ahem;
+                grid-template-columns: auto auto;
+            }
+
+            #blue {
+                color: blue;
+                order: -5;
+            }
+
+            #yellow {
+                color: yellow;
+                order: -5;
+            }
+
+            #lime {
+                color: lime;
+            }
+
+            #magenta {
+                color: magenta;
+                order: 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="inline-grid">
+            <div id="lime">L</div>
+            <div id="magenta">M</div>
+            <div id="blue">B</div>
+            <div id="yellow">Y</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-004.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-004.htm
new file mode 100644
index 00000000000..c4b1bad3a96
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-004.htm
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #inline-grid {
+                display: inline-grid;
+                font: 50px/1 Ahem;
+                grid-template-columns: auto auto;
+            }
+
+            #blue {
+                color: blue;
+                order: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                order: 1;
+            }
+
+            #lime {
+                color: lime;
+                order: 5;
+            }
+
+            #magenta {
+                color: magenta;
+                order: 5;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="inline-grid">
+            <div id="blue">B</div>
+            <div id="lime">L</div>
+            <div id="magenta">M</div>
+            <div id="yellow">Y</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-005.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-005.htm
new file mode 100644
index 00000000000..032f4e3b68a
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-auto-placement-005.htm
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #inline-grid {
+                display: inline-grid;
+                font: 50px/1 Ahem;
+                grid-template-columns: auto auto;
+            }
+
+            #blue {
+                color: blue;
+                order: -5;
+            }
+
+            #yellow {
+                color: yellow;
+                order: -1;
+            }
+
+            #lime {
+                color: lime;
+                order: 1;
+            }
+
+            #magenta {
+                color: magenta;
+                order: 5;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="inline-grid">
+            <div id="yellow">Y</div>
+            <div id="magenta">M</div>
+            <div id="blue">B</div>
+            <div id="lime">L</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-001.htm
new file mode 100644
index 00000000000..ac1d31a0ff8
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-001.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                order: 1;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-002.htm
new file mode 100644
index 00000000000..9f6d7ba8c3d
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-002.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                order: -1;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-003.htm
new file mode 100644
index 00000000000..3f18c551dfb
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-003.htm
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                order: 10;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                order: 5;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-004.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-004.htm
new file mode 100644
index 00000000000..0da311ae674
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-004.htm
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                order: -5;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                order: -10;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-005.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-005.htm
new file mode 100644
index 00000000000..cc4317e88e6
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-order-property-painting-005.htm
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                order: 1;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                order: -1;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-flexible-lengths-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-flexible-lengths-001.htm
new file mode 100644
index 00000000000..09e2e9f525e
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-flexible-lengths-001.htm
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit) within an inline grid, so you can use it to represent a fraction of the free space in the grid container.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+                width: 800px;
+                height: 600px;
+                font: 10px/1 Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="emptyGrid" class="inline-grid"></div>
+        <div id="grid" class="inline-grid">
+            <div>GRID ITEM</div>
+        </div>
+
+        <script type="text/javascript">
+            // Valid values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+
+            // Reset values.
+            document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+            document.getElementById("emptyGrid").style.gridTemplateRows = "";
+            document.getElementById("grid").style.gridTemplateColumns = "";
+            document.getElementById("grid").style.gridTemplateRows = "";
+
+            // Wrong values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-grid-template-areas-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-grid-template-areas-001.htm
new file mode 100644
index 00000000000..220f8228426
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-grid-template-areas-001.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Support for 'grid-template-ares' property within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that 'grid-template-areas' is supported in an inline grid. So you can define the grid structure.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            #grid {
+                display: inline-grid;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="inline-grid"></div>
+
+        <script type="text/javascript">
+            // Single values.
+            TestingUtils.testGridTemplateAreas('inline-grid', 'none', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a"', '"a"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"."', '"."');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b"', '"a b"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', '"a b" "c d"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a     b"     "c     d"', '"a b" "c d"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b""c d"', '"a b" "c d"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\t"c d"', '"a b" "c d"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\n"c d"', '"a b" "c d"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "a b"', '"a b" "a b"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a a" "b b"', '"a a" "b b"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '". a ." "b a c"', '". a ." "b a c"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '".. a ..." "b a c"', '". a ." "b a c"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '".a..." "b a c"', '". a ." "b a c"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ...."', '"head head" "nav main" "foot ."');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot."', '"head head" "nav main" "foot ."');
+            TestingUtils.testGridTemplateAreas('inline-grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"... header header ...." "nav main main main" "nav footer footer ...."', '". header header ." "nav main main main" "nav footer footer ."');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"...header header...." "nav main main main" "nav footer footer...."', '". header header ." "nav main main main" "nav footer footer ."');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '".. a" "b a" "... a"', '". a" "b a" ". a"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"..a" "b a" ".a"', '". a" "b a" ". a"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a a a" "b b b"', '"a a a" "b b b"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '". ." "a a"', '". ." "a a"');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"... ...." "a a"', '". ." "a a"');
+
+            // Reset values.
+            document.getElementById('inline-grid').style.gridTemplateAreas = '';
+
+            // Wrong values.
+            TestingUtils.testGridTemplateAreas('inline-grid', 'a', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b c"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c" "d e"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b c" "d e"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b"-"c d"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b" - "c d"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b" . "c d"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b a"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b" "a"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b b"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"b a" "b b"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b a"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"a ." ". a"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '","', '","');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"10%"', 'none');
+            TestingUtils.testGridTemplateAreas('inline-grid', '"USD$"', 'none');
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-grid-template-columns-rows-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-grid-template-columns-rows-001.htm
new file mode 100644
index 00000000000..43655e25264
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-grid-template-columns-rows-001.htm
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in an inline grid. So you can use the different syntax options to define the trak list.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+                width: 800px;
+                height: 600px;
+                font: 10px/1 Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="emptyGrid" class="inline-grid"></div>
+        <div id="grid" class="inline-grid">
+            <div id="item">GRID ITEM</div>
+        </div>
+
+        <script type="text/javascript">
+            // Single values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+
+            // Multiple values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr  calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
+
+            // Reset values.
+            document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+            document.getElementById("emptyGrid").style.gridTemplateRows = "";
+            document.getElementById("grid").style.gridTemplateColumns = "";
+            document.getElementById("grid").style.gridTemplateRows = "";
+
+            // Wrong values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-named-grid-lines-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-named-grid-lines-001.htm
new file mode 100644
index 00000000000..2e21fb3e35e
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-named-grid-lines-001.htm
@@ -0,0 +1,121 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+                width: 800px;
+                height: 600px;
+                font: 10px/1 Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="emptyGrid" class="inline-grid"></div>
+        <div id="grid" class="inline-grid">
+            <div id="item">GRID ITEM</div>
+        </div>
+
+        <script type="text/javascript">
+            // Valid values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
+
+            // Reset values.
+            document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+            document.getElementById("emptyGrid").style.gridTemplateRows = "";
+            document.getElementById("grid").style.gridTemplateColumns = "";
+            document.getElementById("grid").style.gridTemplateRows = "";
+
+            // Wrong values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-repeat-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-repeat-001.htm
new file mode 100644
index 00000000000..91cb141aaf8
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-support-repeat-001.htm
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation within an inline grid, so you can use it to represents a repeated fragment of the track list.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+                width: 800px;
+                height: 600px;
+                font: 10px/1 Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="emptyGrid" class="inline-grid"></div>
+        <div id="grid" class="inline-grid">
+            <div id="item">GRID ITEM</div>
+        </div>
+
+        <script type="text/javascript">
+            // Valid values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
+
+            // Reset values.
+            document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+            document.getElementById("emptyGrid").style.gridTemplateRows = "";
+            document.getElementById("grid").style.gridTemplateColumns = "";
+            document.getElementById("grid").style.gridTemplateRows = "";
+
+            // Wrong values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-template-columns-rows-resolved-values-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-template-columns-rows-resolved-values-001.htm
new file mode 100644
index 00000000000..4b3a46bde80
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-template-columns-rows-resolved-values-001.htm
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created in an inline grid.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            .inline-grid {
+                display: inline-grid;
+                width: 800px;
+                height: 600px;
+                font: 10px/1 Ahem;
+            }
+
+            .fifthColumn {
+                grid-column: 5;
+            }
+
+            .fourthRow {
+                grid-row: 4;
+            }
+
+            .gridAutoFlowColumn {
+                grid-auto-flow: column;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="grid" class="inline-grid">
+            <div>FIRST ITEM</div>
+            <div>SECOND ITEM</div>
+            <div>THIRD<br>ITEM</div>
+        </div>
+
+        <div id="gridItemsPositions" class="inline-grid">
+            <div class="fifthColumn">FIRST ITEM</div>
+            <div class="fourthRow">SECOND ITEM</div>
+            <div>THIRD<br>ITEM</div>
+        </div>
+
+        <div id="gridAutoFlowColumn" class="inline-grid gridAutoFlowColumn">
+            <div>FIRST ITEM</div>
+            <div>SECOND ITEM</div>
+            <div>THIRD<br>ITEM</div>
+        </div>
+
+        <div id="gridAutoFlowColumnItemsPositions" class="inline-grid gridAutoFlowColumn">
+            <div class="fifthColumn">FIRST ITEM</div>
+            <div class="fourthRow">SECOND ITEM</div>
+            <div>THIRD<br>ITEM</div>
+        </div>
+
+        <script type="text/javascript">
+            // Valid values.
+            TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
+
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-001.htm
new file mode 100644
index 00000000000..dbf34e83f46
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-001.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                z-index: 1;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-002.htm
new file mode 100644
index 00000000000..3a023282cf3
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-002.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                z-index: -1;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-003.htm
new file mode 100644
index 00000000000..7315eee4513
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-003.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                z-index: 10;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                z-index: 5;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-004.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-004.htm
new file mode 100644
index 00000000000..1b40e28d57b
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-004.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                z-index: -5;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                z-index: -10;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-005.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-005.htm
new file mode 100644
index 00000000000..c1a8c7e22ee
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-005.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                z-index: 1;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                z-index: -1;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-001.htm
new file mode 100644
index 00000000000..8626f1c6077
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-001.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                z-index: -1;
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                grid-column: 2;
+                grid-row: 2;
+            }
+
+            #green {
+                color: green;
+                z-index: 1;
+                grid-column: 3;
+                grid-row: 3;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-002.htm
new file mode 100644
index 00000000000..b2aa93c72eb
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-002.htm
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                z-index: 1;
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                z-index: 5;
+                grid-column: 2;
+                grid-row: 2;
+            }
+
+            #green {
+                color: green;
+                z-index: 10;
+                grid-column: 3;
+                grid-row: 3;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-003.htm
new file mode 100644
index 00000000000..0970bc5a740
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-003.htm
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                z-index: -10;
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                z-index: -5;
+                grid-column: 2;
+                grid-row: 2;
+            }
+
+            #green {
+                color: green;
+                z-index: -1;
+                grid-column: 3;
+                grid-row: 3;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-004.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-004.htm
new file mode 100644
index 00000000000..ff26a328ea8
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-004.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                z-index: 1;
+                grid-column: 2;
+                grid-row: 2;
+            }
+
+            #green {
+                color: green;
+                z-index: 5;
+                grid-column: 3;
+                grid-row: 3;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-005.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-005.htm
new file mode 100644
index 00000000000..bd83a280403
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-005.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                z-index: -5;
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                z-index: -1;
+                grid-column: 2;
+                grid-row: 2;
+            }
+
+            #green {
+                color: green;
+                grid-column: 3;
+                grid-row: 3;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-006.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-006.htm
new file mode 100644
index 00000000000..fc62ec4c47c
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-inline-z-axis-ordering-overlapped-items-006.htm
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #inline-grid {
+                display: inline-grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                z-index: -1;
+                grid-column: 2;
+                grid-row: 2;
+                margin-top: -25px;
+                margin-left: -25px;
+            }
+
+            #yellow {
+                color: yellow;
+                grid-column: 4;
+                grid-row: 4;
+                margin-top: -50px;
+                margin-left: -50px;
+            }
+
+            #green {
+                color: green;
+                z-index: 1;
+                grid-column: 1;
+                grid-row: 1;
+                margin-top: 50px;
+                margin-left: 50px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="inline-grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-001.htm
new file mode 100644
index 00000000000..e921ed9ae80
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-001.htm
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Regular and anonymous grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <meta name="assert" content="Checks that grid container children become grid items, and text that is directly contained inside the grid is wrapped in an anonymous grid item.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            .test-grid-overlapping-green {
+                display: grid;
+                font: 25px/1 Ahem;
+                color: green;
+                grid-template-columns: auto auto;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div class="test-grid-overlapping-green">
+            <div>it</div>
+            em
+            <div>it</div>
+            em
+        </div>
+        <div class="test-grid-overlapping-green">
+            it
+            <span>em</span>
+            it
+            <span>em</span>
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-002.htm
new file mode 100644
index 00000000000..ee5757bbb71
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-002.htm
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Children of grid items do not create new items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <meta name="assert" content="Checks that the grid items do not split around blocks creating extra items.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            .test-grid-overlapping-green {
+                display: grid;
+                font: 25px/1 Ahem;
+                color: green;
+            }
+
+            .two-columns {
+                grid-template-columns: auto auto;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div class="test-grid-overlapping-green two-columns">
+            <div>
+                <div>it</div>
+                em
+            </div>
+            <div>
+                it
+                <div>em</div>
+            </div>
+        </div>
+        <div class="test-grid-overlapping-green">
+            <span>
+                <span>it</span>em
+            </span>
+            <span>
+                it<span>em</span>
+            </span>
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-003.htm
new file mode 100644
index 00000000000..02af8c4b818
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-003.htm
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            .test-grid-overlapping-green {
+                display: grid;
+                font: 50px/1 Ahem;
+                color: green;
+            }
+
+            .display-none-red {
+                display: none;
+                color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div class="test-grid-overlapping-green two-columns">
+            <span>it</span>
+            <span class="display-none-red">hidden</span>
+            <span>em</span>
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-inline-blocks-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-inline-blocks-001.htm
new file mode 100644
index 00000000000..1f0557273d0
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-items-inline-blocks-001.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Paint order of grid items is the same as inline blocks</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property">
+        <link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <style type="text/css">
+            #grid {
+                display: grid;
+            }
+
+            #reference-overlapped-red {
+                color: red;
+                font: 100px/1 Ahem;
+                grid-row: 1;
+                grid-column: 1;
+            }
+
+            #test-overlapping-green {
+                background-color: green;
+                width: 100px;
+                height: 100px;
+                grid-row: 1;
+                grid-column: 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="reference-overlapped-red">R</div>
+            <div id="test-overlapping-green"></div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-auto-tracks.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-auto-tracks.htm
index d343c8eb391..2859df9559e 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-auto-tracks.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-auto-tracks.htm
@@ -2,7 +2,7 @@
 <html><head>
     <title>CSS Grid Layout Test: auto tracks</title>
     <link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng">
-    <link href="http://www.w3.org/TR/css-grid-1/#auto-tracks" rel="help">
+    <link href="http://www.w3.org/TR/css-grid-1/#track-sizing" rel="help">
     <link href="reference/grid-layout-auto-tracks-ref.htm" rel="match">
     <meta content="the layout should behave the same as reference." name="assert">
     <style>
@@ -19,8 +19,8 @@
         width: 100px;
         background: #eee;
         display: grid;
-        grid-definition-columns: 100px;
-        grid-definition-rows: auto;
+        grid-template-columns: 100px;
+        grid-template-rows: auto;
       }
       .a {
         background: blue;
@@ -47,4 +47,5 @@
       <div class="c">&nbsp;</div>
     </div>
   
+
 </body></html>
 \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-basic.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-basic.htm
index 7f27d9e8f8c..43f68a166ce 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-basic.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-basic.htm
@@ -18,7 +18,7 @@
         width: 150px;
         background: #eee;
         display: grid;
-        grid-definition-columns: 100px 50px;
+        grid-template-columns: 100px 50px;
       }
       .a {
         background: blue;
@@ -39,4 +39,5 @@
       <div class="b">&nbsp;</div>
     </div>
   
+
 </body></html>
 \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-free-space-unit.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-free-space-unit.htm
index 940af36a029..267eb4f14a7 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-free-space-unit.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-free-space-unit.htm
@@ -18,7 +18,7 @@
         width: 150px;
         background: #eee;
         display: grid;
-        grid-definition-columns: 1fr 50px;
+        grid-template-columns: 1fr 50px;
       }
       .a {
         background: blue;
@@ -39,4 +39,5 @@
       <div class="b">&nbsp;</div>
     </div>
   
+
 </body></html>
 \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-grid-span.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-grid-span.htm
index 4b4d37a6f2a..5c261bfe353 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-grid-span.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-grid-span.htm
@@ -18,12 +18,11 @@
         width: 150px;
         background: #eee;
         display: grid;
-        grid-definition-columns: 50px 50px 50px;
+        grid-template-columns: 50px 50px 50px;
       }
       .a {
         background: blue;
-        grid-column: 1;
-        grid-column-span: 2;
+        grid-column: 1 / span 2;
         grid-row: 1;
       }
       .b {
@@ -40,4 +39,5 @@
       <div class="b">&nbsp;</div>
     </div>
   
+
 </body></html>
 \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-lines-shorthands.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-lines-shorthands.htm
index 2de6d6cf385..e04081b545d 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-lines-shorthands.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-lines-shorthands.htm
@@ -2,9 +2,9 @@
 <html><head>
     <title>CSS Grid Layout Test: grid lines shorthands</title>
     <link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng">
-    <link href="http://www.w3.org/TR/css-grid-1/#grid-line" rel="help">
+    <link href="http://www.w3.org/TR/css-grid-1/#common-uses-named-lines" rel="help">
     <link href="reference/grid-layout-basic-ref.htm" rel="match">
-    <meta content="the subgrid layout should behave the same as reference." name="assert">
+    <meta content="the layout should behave the same as reference." name="assert">
     <style>
       body {
         margin: 0;
@@ -18,15 +18,15 @@
         width: 150px;
         background: #eee;
         display: grid;
-        grid-definition-columns: "left" 100px "center" 50px "right";
+        grid-template-columns: [left] 100px [center] 50px [right];
       }
       .a {
         background: blue;
-        grid-column: "left" / "center";
+        grid-column: left / center;
       }
       .b {
         background: yellow;
-        grid-column: "center" / "right";
+        grid-column: center / right;
       }
     </style>
   </head>
@@ -37,4 +37,5 @@
       <div class="b">&nbsp;</div>
     </div>
   
+
 </body></html>
 \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-lines.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-lines.htm
index 397d0eaadaa..318953a03be 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-lines.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-lines.htm
@@ -2,9 +2,9 @@
 <html><head>
     <title>CSS Grid Layout Test: grid lines</title>
     <link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng">
-    <link href="http://www.w3.org/TR/css-grid-1/#grid-line" rel="help">
+    <link href="http://www.w3.org/TR/css-grid-1/#common-uses-named-lines" rel="help">
     <link href="reference/grid-layout-basic-ref.htm" rel="match">
-    <meta content="the subgrid layout should behave the same as reference." name="assert">
+    <meta content="the layout should behave the same as reference." name="assert">
     <style>
       body {
         margin: 0;
@@ -18,17 +18,17 @@
         width: 150px;
         background: #eee;
         display: grid;
-        grid-definition-columns: "left" 100px "center" 50px "right";
+        grid-template-columns: [left] 100px [center] 50px [right];
       }
       .a {
         background: blue;
-        grid-start: "left";
-        grid-end: "center";
+        grid-column-start: left;
+        grid-column-end: center;
       }
       .b {
         background: yellow;
-        grid-start: "center";
-        grid-end: "right";
+        grid-column-start: center;
+        grid-column-end: right;
       }
     </style>
   </head>
@@ -39,4 +39,5 @@
       <div class="b">&nbsp;</div>
     </div>
   
+
 </body></html>
 \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-placement-shorthands.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-placement-shorthands.htm
index c6510234d45..33f1bab9271 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-placement-shorthands.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-placement-shorthands.htm
@@ -18,7 +18,7 @@
         width: 150px;
         background: #eee;
         display: grid;
-        grid-definition-columns: 50px 50px 50px;
+        grid-template-columns: 50px 50px 50px;
       }
       .a {
         background: blue;
@@ -39,4 +39,5 @@
       <div class="b">&nbsp;</div>
     </div>
   
+
 </body></html>
 \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-properties.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-properties.htm
index e4e0334e899..c05a7cf00aa 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-properties.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-properties.htm
@@ -3,16 +3,32 @@
   <meta charset="UTF-8">
   <title>CSS Test: Grid Layout - Properties exist</title>
   <link href="mailto:johnhax@gmail.com" rel="author" title="贺师俊">
+  <link href="mailto:rego@igalia.com" rel="author" title="Manuel Rego Casasnovas">
   <link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen"> <!-- 2013-09-30 -->
   <link href="http://www.w3.org/TR/css-grid-1/#property-index" rel="help">
-  <meta content="dom" name="flags">
+  <meta content="ahem dom" name="flags">
   <meta content="Test checks that css properties of grid layout exist." name="assert">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
+  <style>
+    #container {
+        width: 800px;
+        height: 600px;
+    }
+    #myDiv {
+        font: 50px/1 Ahem;
+    }
+  </style>
 </head>
 <body>
-  <div id="myDiv"></div>
   <div id="log"></div>
+  <div id="container">
+    <div id="myDiv">
+      <div>I T</div>
+      <div>IT</div>
+      <div>I</div>
+    </div>
+  </div>
 
   <script>
     var myDiv = document.getElementById('myDiv')
@@ -48,112 +64,165 @@
         Object.keys(syntaxTests).forEach(function(testcase){
           test(function(){
             assert_own_property(myDiv.style, prop)
-            myDiv.style[prop] = syntaxTests[testcase]
-            assert_equals(getComputedStyle(myDiv)[prop], syntaxTests[testcase], testcase)
-            //assert_equals(myDiv.style[prop], syntaxTests[testcase], testcase)
+            myDiv.style[prop] = syntaxTests[testcase][0]
+            assert_equals(myDiv.style[prop], syntaxTests[testcase][0], testcase)
+            assert_equals(getComputedStyle(myDiv)[prop], syntaxTests[testcase][1], testcase)
           }, prop + '.' + testcase)
         })
       })
 
     }({
       'grid-template-columns': { // named 'grid-definition-columns' in last draft
-        initial: 'none',
-        'none': 'none',
-        '<line-names>': 'a b c',
-        '<track-size>.auto': 'auto',
-        '<track-size>.<track-breadth>.<length>': '100px',
-        '<track-size>.<track-breadth>.<percentage>': '100%',
-        '<track-size>.<track-breadth>.<flex>': '1fr',
-        '<track-size>.<track-breadth>.min-content': 'min-content',
-        '<track-size>.<track-breadth>.max-content': 'max-content',
-        '<track-size>.<track-breadth>.minmax()': 'minmax(100px, 200px)',
+        initial: '150px',
+        'none': ['none', '150px'],
+        '<line-names>': ['[a] auto [b] auto [c]', '[a] 150px [b] 100px [c]'],
+        '<track-size>.auto': ['auto', '150px'],
+        '<track-size>.<track-breadth>.<length>': ['100px', '100px'],
+        '<track-size>.<track-breadth>.<percentage>': ['100%', '800px'],
+        '<track-size>.<track-breadth>.<flex>': ['1fr', '800px'],
+        '<track-size>.<track-breadth>.min-content': ['min-content', '100px'],
+        '<track-size>.<track-breadth>.max-content': ['max-content', '150px'],
+        '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', '200px'],
+        'reset': ['none', '150px'],
       },
       'grid-template-rows': { // named 'grid-definition-rows' in last draft
-        initial: 'none',
-        'none': 'none',
-        '<line-names>': 'a b c',
-        '<track-size>.auto': 'auto',
-        '<track-size>.<track-breadth>.<length>': '100px',
-        '<track-size>.<track-breadth>.<percentage>': '100%',
-        '<track-size>.<track-breadth>.<flex>': '1fr',
-        '<track-size>.<track-breadth>.min-content': 'min-content',
-        '<track-size>.<track-breadth>.max-content': 'max-content',
-        '<track-size>.<track-breadth>.minmax()': 'minmax(100px, 200px)',
+        initial: '50px 50px 50px',
+        'none': ['none', '50px 50px 50px'],
+        '<line-names>': ['[a] auto [b] auto [c]', '[a] 50px [b] 50px [c] 50px'],
+        '<track-size>.auto': ['auto', '50px 50px 50px'],
+        '<track-size>.<track-breadth>.<length>': ['100px', '100px 50px 50px'],
+        '<track-size>.<track-breadth>.<percentage>': ['100%', '50px 50px 50px'],
+        '<track-size>.<track-breadth>.<flex>': ['1fr', '50px 50px 50px'],
+        '<track-size>.<track-breadth>.min-content': ['min-content', '50px 50px 50px'],
+        '<track-size>.<track-breadth>.max-content': ['max-content', '50px 50px 50px'],
+        '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', '200px 50px 50px'],
+        'reset': ['none', '50px 50px 50px'],
       },
       'grid-template-areas': {
         initial: 'none',
-        '<string>+': 'a',
+        'none': ['none', 'none'],
+        '<string>+': ['"a"', '"a"'],
+        'reset': ['none', 'none'],
       },
       'grid-template': {
-        'none': 'none',
-        '<grid-template-columns> / <grid-template-rows>': '100px / 100px',
-        '<line-names>': 'a b c',
+        initial: '150px / 50px 50px 50px',
+        'none': ['', '150px / 50px 50px 50px'],
+        '<grid-template-columns> / <grid-template-rows>': ['200px 200px / 100px 100px', '200px 200px / 100px 100px'],
+        '<line-names>': ['[a] auto [b] auto [c] / [d] auto [e] auto [f]', '[a] auto [b] auto [c] / [d] auto [e] auto [f]'],
+        '<string>+': ['"a b" "a b"', '"a b" "a b"'],
+        '<string><track-size>+': ['100px / "a b" 50px', '100px / "a b" 50px'],
+        'reset': ['', '150px / 50px 50px 50px'],
       },
       'grid-auto-columns': {
         initial: 'auto',
-        '<track-size>.auto': 'auto',
-        '<track-size>.<track-breadth>.<length>': '100px',
-        '<track-size>.<track-breadth>.<percentage>': '100%',
-        '<track-size>.<track-breadth>.<flex>': '1fr',
-        '<track-size>.<track-breadth>.min-content': 'min-content',
-        '<track-size>.<track-breadth>.max-content': 'max-content',
-        '<track-size>.<track-breadth>.minmax()': 'minmax(100px, 200px)',
+        '<track-size>.auto': ['auto', 'auto'],
+        '<track-size>.<track-breadth>.<length>': ['100px', '100px'],
+        '<track-size>.<track-breadth>.<percentage>': ['100%', '100%'],
+        '<track-size>.<track-breadth>.<flex>': ['1fr', '1fr'],
+        '<track-size>.<track-breadth>.min-content': ['min-content', 'min-content'],
+        '<track-size>.<track-breadth>.max-content': ['max-content', 'max-content'],
+        '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', 'minmax(100px, 200px)'],
+        'reset': ['auto', 'auto'],
       },
       'grid-auto-rows': {
         initial: 'auto',
-        '<track-size>.auto': 'auto',
-        '<track-size>.<track-breadth>.<length>': '100px',
-        '<track-size>.<track-breadth>.<percentage>': '100%',
-        '<track-size>.<track-breadth>.<flex>': '1fr',
-        '<track-size>.<track-breadth>.min-content': 'min-content',
-        '<track-size>.<track-breadth>.max-content': 'max-content',
-        '<track-size>.<track-breadth>.minmax()': 'minmax(100px, 200px)',
+        '<track-size>.auto': ['auto', 'auto'],
+        '<track-size>.<track-breadth>.<length>': ['100px', '100px'],
+        '<track-size>.<track-breadth>.<percentage>': ['100%', '100%'],
+        '<track-size>.<track-breadth>.<flex>': ['1fr', '1fr'],
+        '<track-size>.<track-breadth>.min-content': ['min-content', 'min-content'],
+        '<track-size>.<track-breadth>.max-content': ['max-content', 'max-content'],
+        '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', 'minmax(100px, 200px)'],
+        'reset': ['auto', 'auto'],
       },
       'grid-auto-flow': {
-        initial: 'rows',
-        'rows': 'rows',
-        'columns': 'columns',
-        'dense': 'rows dense',
-      },
-      'grid-auto': {
+        initial: 'row',
+        'row': ['row', 'row'],
+        'column': ['column', 'column'],
+        'dense': ['dense', 'row dense'],
+        'row dense': ['row dense', 'row dense'],
+        'column dense': ['column dense', 'column dense'],
+        'reset': ['row', 'row'],
       },
       'grid-row-start': {
         initial: 'auto',
-        'auto': 'auto',
-        '<indent>': 'a',
-        '<integer>': '1',
-        '<integer> && <indent>': '1 a',
-        'span': 'span 1',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a', 'a'],
+        '<integer>': ['1', '1'],
+        '<integer> <ident>': ['1 a', '1 a'],
+        'span <integer>': ['span 1', 'span 1'],
+        'span <custom-ident>': ['span a', 'span 1 a'],
+        'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+        'reset': ['auto', 'auto'],
       },
       'grid-column-start': {
         initial: 'auto',
-        'auto': 'auto',
-        '<indent>': 'a',
-        '<integer>': '1',
-        '<integer> && <indent>': '1 a',
-        'span': 'span 1',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a', 'a'],
+        '<integer>': ['1', '1'],
+        '<integer> <ident>': ['1 a', '1 a'],
+        'span <integer>': ['span 1', 'span 1'],
+        'span <custom-ident>': ['span a', 'span 1 a'],
+        'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+        'reset': ['auto', 'auto'],
       },
       'grid-row-end': {
         initial: 'auto',
-        'auto': 'auto',
-        '<indent>': 'a',
-        '<integer>': '1',
-        '<integer> && <indent>': '1 a',
-        'span': 'span 1',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a', 'a'],
+        '<integer>': ['1', '1'],
+        '<integer> <ident>': ['1 a', '1 a'],
+        'span <integer>': ['span 1', 'span 1'],
+        'span <custom-ident>': ['span a', 'span 1 a'],
+        'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+        'reset': ['auto', 'auto'],
       },
       'grid-column-end': {
         initial: 'auto',
-        'auto': 'auto',
-        '<indent>': 'a',
-        '<integer>': '1',
-        '<integer> && <indent>': '1 a',
-        'span': 'span 1',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a', 'a'],
+        '<integer>': ['1', '1'],
+        '<integer> <ident>': ['1 a', '1 a'],
+        'span <integer>': ['span 1', 'span 1'],
+        'span <custom-ident>': ['span a', 'span 1 a'],
+        'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+        'reset': ['auto', 'auto'],
       },
       'grid-column': {
+        initial: 'auto',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a / b', 'a / b'],
+        '<integer> start': ['1', '1'],
+        '<integer>': ['1 / 3', '1 / 3'],
+        '<integer> <ident>': ['1 a / 2 b', '1 a / 2 b'],
+        'span <integer>': ['span 1 / span 2', 'span 1 / span 2'],
+        'span <custom-ident>': ['span a / span b', 'span 1 a / span 1 b'],
+        'span <integer> <custom-ident>': ['span 2 a / span 3 b', 'span 2 a / span 3 b'],
+        'reset': ['auto', 'auto'],
       },
       'grid-row': {
+        initial: 'auto',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a / b', 'a / b'],
+        '<integer> start': ['1', '1'],
+        '<integer>': ['1 / 3', '1 / 3'],
+        '<integer> <ident>': ['1 a / 2 b', '1 a / 2 b'],
+        'span <integer>': ['span 1 / span 2', 'span 1 / span 2'],
+        'span <custom-ident>': ['span a / span b', 'span 1 a / span 1 b'],
+        'span <integer> <custom-ident>': ['span 2 a / span 3 b', 'span 2 a / span 3 b'],
+        'reset': ['auto', 'auto'],
       },
       'grid-area': {
+        initial: 'auto',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a / b / c / d', 'a / b / c / d'],
+        '<integer> start': ['1 / 2', '1 / 2'],
+        '<integer>': ['1 / 2 / 3 / 4', '1 / 2 / 3 / 4'],
+        '<integer> <ident>': ['1 a / 2 b / 3 c / 4 d', '1 a / 2 b / 3 c / 4 d'],
+        'span <integer>': ['span 1 / span 2 / span 3 / span 4', 'span 1 / span 2 / span 3 / span 4'],
+        'span <custom-ident>': ['span a / span b / span c / span d', 'span 1 a / span 1 b / span 1 c / span 1 d'],
+        'span <integer> <custom-ident>': ['span 2 a / span 3 b / span 4 c / span 5 d', 'span 2 a / span 3 b / span 4 c / span 5 d'],
+        'reset': ['auto', 'auto'],
       },
     })
   </script>
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-repeat-notation.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-repeat-notation.htm
index 8ce6b700801..ff61616c876 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-repeat-notation.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-repeat-notation.htm
@@ -18,7 +18,7 @@
         width: 450px;
         background: #eee;
         display: grid;
-        grid-definition-columns: repeat(4, 100px) 50px;
+        grid-template-columns: repeat(4, 100px) 50px;
       }
       .a {
         background: blue;
@@ -52,4 +52,5 @@
       <div class="e">&nbsp;</div>
     </div>
   
+
 </body></html>
 \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-z-order-a.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-z-order-a.htm
index f42c49f18d8..9fb5279c6dc 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-z-order-a.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-z-order-a.htm
@@ -18,16 +18,18 @@
         width: 150px;
         background: #eee;
         display: grid;
-        grid-definition-columns: 50px 50px 50px;
+        grid-template-columns: 50px 50px 50px;
         color:white;
       }
       .a {
         background: blue;
+        grid-row: 1;
         grid-column: 1 / span 2;
         z-index:10
       }
       .b {
         background: yellow;
+        grid-row: 1;
         grid-column: 2 / span 2;
         z-index:1
       }
@@ -40,4 +42,5 @@
       <div class="a">up</div>
     </div>
   
+
 </body></html>
 \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-z-order-b.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-z-order-b.htm
index b91966d9a9d..858537da3b1 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-z-order-b.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-layout-z-order-b.htm
@@ -18,19 +18,19 @@
         width: 150px;
         background: #eee;
         display: grid;
-        grid-definition-columns: 50px 50px 50px;
+        grid-template-columns: 50px 50px 50px;
         color:white;
       }
       .a {
         background: blue;
-        grid-column: 1;
-        grid-column-span: 2;
+        grid-row: 1;
+        grid-column: 1 / 3;
         z-index:10
       }
       .b {
         background: yellow;
-        grid-column: 2;
-        grid-column-span: 2;
+        grid-row: 1;
+        grid-column: 2 / 4;
         z-index:1
       }
     </style>
@@ -42,4 +42,5 @@
       <div class="a">up</div>
     </div>
   
+
 </body></html>
 \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-margins-no-collapse-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-margins-no-collapse-001.htm
new file mode 100644
index 00000000000..21c74a0b90d
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-margins-no-collapse-001.htm
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: grid's margins do not collapse</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.htm">
+        <meta name="assert" content="This test checks that grid's margin (body) do not collapse with the marings of the grid item (a paragraph).">
+        <style type="text/css">
+            body {
+                display: grid;
+            }
+
+            p {
+                color: green;
+            }
+        </style>
+    </head>
+    <body>
+        <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-001.htm
new file mode 100644
index 00000000000..f6fd2b6691f
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-001.htm
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Minimun size of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <meta name="assert" content="Checks that minimun size for grid items is the min-content size.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #constrained-grid {
+                display: grid;
+                grid: 10px / 10px;
+            }
+
+            #test-grid-item-overlapping-green {
+                color: green;
+                background-color: green;
+                font: 50px/1 Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="constrained-grid">
+            <div id="test-grid-item-overlapping-green">IT E</div>
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-002.htm
new file mode 100644
index 00000000000..1992edf5fd1
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-002.htm
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Minimun size of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="assert" content="Checks that minimun size for grid items is the min-content size.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #constrained-grid {
+                display: grid;
+                grid: 10px / 10px;
+            }
+
+            #test-grid-item-overlapping-green {
+                background-color: green;
+            }
+
+            #content-100x100 {
+                width: 100px;
+                height: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="constrained-grid">
+            <div id="test-grid-item-overlapping-green">
+                <div id="content-100x100"></div>
+            </div>
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-003.htm
new file mode 100644
index 00000000000..222da1768f8
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-003.htm
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Minimun size of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="assert" content="Checks that minimun size for grid items is the specified size regardless of the content size.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #constrained-grid {
+                display: grid;
+                grid: 10px / 10px;
+            }
+
+            #test-grid-item-overlapping-green {
+                background-color: green;
+                width: 100px;
+                height: 100px;
+            }
+
+            #content-500x500 {
+                width: 500px;
+                height: 500px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="constrained-grid">
+            <div id="test-grid-item-overlapping-green">
+                <div id="content-500x500"></div>
+            </div>
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-004.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-004.htm
new file mode 100644
index 00000000000..a017dced66d
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-004.htm
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Minimun size of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="assert" content="Checks that minimun size for grid items is the specified size regardless of the content size.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #constrained-grid {
+                display: grid;
+                grid: 10px / 10px;
+            }
+
+            #test-grid-item-overlapping-green {
+                background-color: green;
+                width: 100px;
+                height: 100px;
+            }
+
+            #content-50x50 {
+                width: 50px;
+                height: 50px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="constrained-grid">
+            <div id="test-grid-item-overlapping-green">
+                <div id="content-50x50"></div>
+            </div>
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-005.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-005.htm
new file mode 100644
index 00000000000..87a87696ede
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-005.htm
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Minimun size of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="assert" content="Checks that minimun size for grid items is the min-content size.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #constrained-grid {
+                display: grid;
+                grid: 10px / 10px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="constrained-grid">
+            <img src="../support/100x100-green.png">
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-006.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-006.htm
new file mode 100644
index 00000000000..0eed1e15492
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-006.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Minimun size of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="assert" content="Checks that minimun size for grid items is the specified size, as the min-content size of the image corresponds to that.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #constrained-grid {
+                display: grid;
+                grid: 10px / 10px;
+            }
+
+            #test-grid-item-overlapping-green {
+                width: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="constrained-grid">
+            <img id="test-grid-item-overlapping-green" src="../support/200x200-green.png">
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-007.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-007.htm
new file mode 100644
index 00000000000..b17471fa4ab
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-007.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Minimun size of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="assert" content="Checks that minimun size for grid items is the specified size, as the min-content size of the image corresponds to that.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #constrained-grid {
+                display: grid;
+                grid: 10px / 10px;
+            }
+
+            #test-grid-item-overlapping-green {
+                width: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="constrained-grid">
+            <img id="test-grid-item-overlapping-green" src="../support/60x60-green.png">
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-008.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-008.htm
new file mode 100644
index 00000000000..9a6d6c75213
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-008.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Minimun size of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="assert" content="Checks that minimun size for grid items is the transferred size, as the min-content size of the image corresponds to that.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #constrained-grid {
+                display: grid;
+                grid: 10px / 10px;
+            }
+
+            #test-grid-item-overlapping-green {
+                height: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="constrained-grid">
+            <img id="test-grid-item-overlapping-green" src="../support/200x200-green.png">
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-009.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-009.htm
new file mode 100644
index 00000000000..d0cd92bb404
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-minimun-size-grid-items-009.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Minimun size of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="assert" content="Checks that minimun size for grid items is the transferred size, as the min-content size of the image corresponds to that.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #constrained-grid {
+                display: grid;
+                grid: 10px / 10px;
+            }
+
+            #test-grid-item-overlapping-green {
+                height: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="constrained-grid">
+            <img id="test-grid-item-overlapping-green" src="../support/60x60-green.png">
+        </div>
+
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-multicol-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-multicol-001.htm
new file mode 100644
index 00000000000..b0562413226
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-multicol-001.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'column-*' properties from grid container does not apply to grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+        <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="assert" content="This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to a grid container.">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            .test-overlapping-green {
+                background-color: green;
+                width: 100px;
+                height: 50px;
+            }
+
+            .grid {
+                display: grid;
+                -moz-column-width: 50px;
+                -webkit-column-width: 50px;
+                column-width: 50px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="reference-overlapped-red"></div>
+
+        <div class="grid">
+            <div class="test-overlapping-green"></div>
+            <div class="test-overlapping-green"></div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-001.htm
new file mode 100644
index 00000000000..bf5e75b76b5
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-001.htm
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #grid {
+                display: grid;
+                font: 50px/1 Ahem;
+                grid-template-columns: auto auto;
+            }
+
+            #blue {
+                color: blue;
+            }
+
+            #yellow {
+                color: yellow;
+                order: 1;
+            }
+
+            #lime {
+                color: lime;
+                order: 5;
+            }
+
+            #magenta {
+                color: magenta;
+                order: 10;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="grid">
+            <div id="magenta">M</div>
+            <div id="lime">L</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-002.htm
new file mode 100644
index 00000000000..d2392781c02
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-002.htm
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #grid {
+                display: grid;
+                font: 50px/1 Ahem;
+                grid-template-columns: auto auto;
+            }
+
+            #blue {
+                color: blue;
+                order: -10;
+            }
+
+            #yellow {
+                color: yellow;
+                order: -5;
+            }
+
+            #lime {
+                color: lime;
+                order: -1;
+            }
+
+            #magenta {
+                color: magenta;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="grid">
+            <div id="magenta">M</div>
+            <div id="lime">L</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-003.htm
new file mode 100644
index 00000000000..8b1d5e8868a
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-003.htm
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #grid {
+                display: grid;
+                font: 50px/1 Ahem;
+                grid-template-columns: auto auto;
+            }
+
+            #blue {
+                color: blue;
+                order: -5;
+            }
+
+            #yellow {
+                color: yellow;
+                order: -5;
+            }
+
+            #lime {
+                color: lime;
+            }
+
+            #magenta {
+                color: magenta;
+                order: 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="grid">
+            <div id="lime">L</div>
+            <div id="magenta">M</div>
+            <div id="blue">B</div>
+            <div id="yellow">Y</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-004.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-004.htm
new file mode 100644
index 00000000000..d284eab127e
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-004.htm
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #grid {
+                display: grid;
+                font: 50px/1 Ahem;
+                grid-template-columns: auto auto;
+            }
+
+            #blue {
+                color: blue;
+                order: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                order: 1;
+            }
+
+            #lime {
+                color: lime;
+                order: 5;
+            }
+
+            #magenta {
+                color: magenta;
+                order: 5;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="grid">
+            <div id="blue">B</div>
+            <div id="lime">L</div>
+            <div id="magenta">M</div>
+            <div id="yellow">Y</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-005.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-005.htm
new file mode 100644
index 00000000000..9853e71b4a2
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-auto-placement-005.htm
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #reference-overlapped-red {
+                position: absolute;
+                background-color: red;
+                width: 100px;
+                height: 100px;
+                z-index: -1;
+            }
+
+            #grid {
+                display: grid;
+                font: 50px/1 Ahem;
+                grid-template-columns: auto auto;
+            }
+
+            #blue {
+                color: blue;
+                order: -5;
+            }
+
+            #yellow {
+                color: yellow;
+                order: -1;
+            }
+
+            #lime {
+                color: lime;
+                order: 1;
+            }
+
+            #magenta {
+                color: magenta;
+                order: 5;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div id="reference-overlapped-red"></div>
+        <div id="grid">
+            <div id="yellow">Y</div>
+            <div id="magenta">M</div>
+            <div id="blue">B</div>
+            <div id="lime">L</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-001.htm
new file mode 100644
index 00000000000..fe92c896973
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-001.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                order: 1;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-002.htm
new file mode 100644
index 00000000000..4a758affefd
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-002.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                order: -1;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-003.htm
new file mode 100644
index 00000000000..2fe9e2e0ded
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-003.htm
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                order: 10;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                order: 5;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-004.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-004.htm
new file mode 100644
index 00000000000..e7c32a2a6d1
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-004.htm
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                order: -5;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                order: -10;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-005.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-005.htm
new file mode 100644
index 00000000000..5a6fa1721af
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-order-property-painting-005.htm
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+        <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                order: 1;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                order: -1;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-flexible-lengths-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-flexible-lengths-001.htm
new file mode 100644
index 00000000000..944422877ea
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-flexible-lengths-001.htm
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit), so you can use it to represent a fraction of the free space in the grid container.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            .grid {
+                display: grid;
+                width: 800px;
+                height: 600px;
+                font: 10px/1 Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="emptyGrid" class="grid"></div>
+        <div id="grid" class="grid">
+            <div>GRID ITEM</div>
+        </div>
+
+        <script type="text/javascript">
+            // Valid values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+
+            // Reset values.
+            document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+            document.getElementById("emptyGrid").style.gridTemplateRows = "";
+            document.getElementById("grid").style.gridTemplateColumns = "";
+            document.getElementById("grid").style.gridTemplateRows = "";
+
+            // Wrong values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-grid-template-areas-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-grid-template-areas-001.htm
new file mode 100644
index 00000000000..843b11abafa
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-grid-template-areas-001.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Support for 'grid-template-ares' property</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            #grid {
+                display: grid;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="grid"></div>
+
+        <script type="text/javascript">
+            // Single values.
+            TestingUtils.testGridTemplateAreas('grid', 'none', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a"', '"a"');
+            TestingUtils.testGridTemplateAreas('grid', '"."', '"."');
+            TestingUtils.testGridTemplateAreas('grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
+            TestingUtils.testGridTemplateAreas('grid', '"a b"', '"a b"');
+            TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"');
+            TestingUtils.testGridTemplateAreas('grid', '"a     b"     "c     d"', '"a b" "c d"');
+            TestingUtils.testGridTemplateAreas('grid', '"a b""c d"', '"a b" "c d"');
+            TestingUtils.testGridTemplateAreas('grid', '"a b"\t"c d"', '"a b" "c d"');
+            TestingUtils.testGridTemplateAreas('grid', '"a b"\n"c d"', '"a b" "c d"');
+            TestingUtils.testGridTemplateAreas('grid', '"a b" "a b"', '"a b" "a b"');
+            TestingUtils.testGridTemplateAreas('grid', '"a a" "b b"', '"a a" "b b"');
+            TestingUtils.testGridTemplateAreas('grid', '". a ." "b a c"', '". a ." "b a c"');
+            TestingUtils.testGridTemplateAreas('grid', '".. a ..." "b a c"', '". a ." "b a c"');
+            TestingUtils.testGridTemplateAreas('grid', '".a..." "b a c"', '". a ." "b a c"');
+            TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
+            TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ...."', '"head head" "nav main" "foot ."');
+            TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot."', '"head head" "nav main" "foot ."');
+            TestingUtils.testGridTemplateAreas('grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
+            TestingUtils.testGridTemplateAreas('grid', '"... header header ...." "nav main main main" "nav footer footer ...."', '". header header ." "nav main main main" "nav footer footer ."');
+            TestingUtils.testGridTemplateAreas('grid', '"...header header...." "nav main main main" "nav footer footer...."', '". header header ." "nav main main main" "nav footer footer ."');
+            TestingUtils.testGridTemplateAreas('grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
+            TestingUtils.testGridTemplateAreas('grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
+            TestingUtils.testGridTemplateAreas('grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
+            TestingUtils.testGridTemplateAreas('grid', '".. a" "b a" "... a"', '". a" "b a" ". a"');
+            TestingUtils.testGridTemplateAreas('grid', '"..a" "b a" ".a"', '". a" "b a" ". a"');
+            TestingUtils.testGridTemplateAreas('grid', '"a a a" "b b b"', '"a a a" "b b b"');
+            TestingUtils.testGridTemplateAreas('grid', '". ." "a a"', '". ." "a a"');
+            TestingUtils.testGridTemplateAreas('grid', '"... ...." "a a"', '". ." "a a"');
+
+            // Reset values.
+            document.getElementById('grid').style.gridTemplateAreas = '';
+
+            // Wrong values.
+            TestingUtils.testGridTemplateAreas('grid', 'a', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a" "b c"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a b" "c" "d e"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a b c" "d e"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a b"-"c d"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a b" - "c d"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a b" . "c d"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a b a"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a" "b" "a"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a b" "b b"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"b a" "b b"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a b" "b a"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"a ." ". a"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '","', '","');
+            TestingUtils.testGridTemplateAreas('grid', '"10%"', 'none');
+            TestingUtils.testGridTemplateAreas('grid', '"USD$"', 'none');
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-grid-template-columns-rows-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-grid-template-columns-rows-001.htm
new file mode 100644
index 00000000000..e92533f3f61
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-grid-template-columns-rows-001.htm
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in a grid. So you can use the different syntax options to define the trak list.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            .grid {
+                display: grid;
+                width: 800px;
+                height: 600px;
+                font: 10px/1 Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="emptyGrid" class="grid"></div>
+        <div id="grid" class="grid">
+            <div id="item">GRID ITEM</div>
+        </div>
+
+        <script type="text/javascript">
+            // Single values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+
+            // Multiple values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr  calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
+
+            // Reset values.
+            document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+            document.getElementById("emptyGrid").style.gridTemplateRows = "";
+            document.getElementById("grid").style.gridTemplateColumns = "";
+            document.getElementById("grid").style.gridTemplateRows = "";
+
+            // Wrong values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-named-grid-lines-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-named-grid-lines-001.htm
new file mode 100644
index 00000000000..2ec49869d16
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-named-grid-lines-001.htm
@@ -0,0 +1,121 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            .grid {
+                display: grid;
+                width: 800px;
+                height: 600px;
+                font: 10px/1 Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="emptyGrid" class="grid"></div>
+        <div id="grid" class="grid">
+            <div id="item">GRID ITEM</div>
+        </div>
+
+        <script type="text/javascript">
+            // Valid values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
+
+            // Reset values.
+            document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+            document.getElementById("emptyGrid").style.gridTemplateRows = "";
+            document.getElementById("grid").style.gridTemplateColumns = "";
+            document.getElementById("grid").style.gridTemplateRows = "";
+
+            // Wrong values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-repeat-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-repeat-001.htm
new file mode 100644
index 00000000000..fb44c859cdb
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-support-repeat-001.htm
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, so you can use it to represents a repeated fragment of the track list.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            .grid {
+                display: grid;
+                width: 800px;
+                height: 600px;
+                font: 10px/1 Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="emptyGrid" class="grid"></div>
+        <div id="grid" class="grid">
+            <div id="item">GRID ITEM</div>
+        </div>
+
+        <script type="text/javascript">
+            // Valid values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
+
+            // Reset values.
+            document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+            document.getElementById("emptyGrid").style.gridTemplateRows = "";
+            document.getElementById("grid").style.gridTemplateColumns = "";
+            document.getElementById("grid").style.gridTemplateRows = "";
+
+            // Wrong values.
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
+            TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-template-columns-rows-resolved-values-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-template-columns-rows-resolved-values-001.htm
new file mode 100644
index 00000000000..a7ddc307b38
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-template-columns-rows-resolved-values-001.htm
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created.">
+        <script src="/resources/testharness.js" type="text/javascript"></script>
+        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+        <script src="support/testing-utils.js" type="text/javascript"></script>
+        <style type="text/css">
+            .grid {
+                display: grid;
+                width: 800px;
+                height: 600px;
+                font: 10px/1 Ahem;
+            }
+
+            .fifthColumn {
+                grid-column: 5;
+            }
+
+            .fourthRow {
+                grid-row: 4;
+            }
+
+            .gridAutoFlowColumn {
+                grid-auto-flow: column;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="log"></div>
+
+        <div id="grid" class="grid">
+            <div>FIRST ITEM</div>
+            <div>SECOND ITEM</div>
+            <div>THIRD<br>ITEM</div>
+        </div>
+
+        <div id="gridItemsPositions" class="grid">
+            <div class="fifthColumn">FIRST ITEM</div>
+            <div class="fourthRow">SECOND ITEM</div>
+            <div>THIRD<br>ITEM</div>
+        </div>
+
+        <div id="gridAutoFlowColumn" class="grid gridAutoFlowColumn">
+            <div>FIRST ITEM</div>
+            <div>SECOND ITEM</div>
+            <div>THIRD<br>ITEM</div>
+        </div>
+
+        <div id="gridAutoFlowColumnItemsPositions" class="grid gridAutoFlowColumn">
+            <div class="fifthColumn">FIRST ITEM</div>
+            <div class="fourthRow">SECOND ITEM</div>
+            <div>THIRD<br>ITEM</div>
+        </div>
+
+        <script type="text/javascript">
+            // Valid values.
+            TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
+            TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
+            TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
+
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+            TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+        </script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-001.htm
new file mode 100644
index 00000000000..6bf69c63bfc
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-001.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                z-index: 1;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-002.htm
new file mode 100644
index 00000000000..67b9f71c299
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-002.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                z-index: -1;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-003.htm
new file mode 100644
index 00000000000..839371cea23
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-003.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                z-index: 10;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                z-index: 5;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-004.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-004.htm
new file mode 100644
index 00000000000..607c7116fe2
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-004.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                z-index: -5;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                z-index: -10;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-005.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-005.htm
new file mode 100644
index 00000000000..12d4cdf85ec
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-005.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/ref-filled-green-100px-square.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+            }
+
+            #test-item-overlapping-green {
+                color: green;
+                z-index: 1;
+            }
+
+            #reference-item-overlapped-red {
+                color: red;
+                z-index: -1;
+            }
+
+            .first-row-first-column {
+                grid-area: 1 / 1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+        <div id="grid">
+            <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+            <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-001.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-001.htm
new file mode 100644
index 00000000000..0ed0eda8933
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-001.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                z-index: -1;
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                grid-column: 2;
+                grid-row: 2;
+            }
+
+            #green {
+                color: green;
+                z-index: 1;
+                grid-column: 3;
+                grid-row: 3;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-002.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-002.htm
new file mode 100644
index 00000000000..ebf28268cfd
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-002.htm
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                z-index: 1;
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                z-index: 5;
+                grid-column: 2;
+                grid-row: 2;
+            }
+
+            #green {
+                color: green;
+                z-index: 10;
+                grid-column: 3;
+                grid-row: 3;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-003.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-003.htm
new file mode 100644
index 00000000000..f3770b6d6f2
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-003.htm
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                z-index: -10;
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                z-index: -5;
+                grid-column: 2;
+                grid-row: 2;
+            }
+
+            #green {
+                color: green;
+                z-index: -1;
+                grid-column: 3;
+                grid-row: 3;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-004.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-004.htm
new file mode 100644
index 00000000000..b2f538b05cd
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-004.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                z-index: 1;
+                grid-column: 2;
+                grid-row: 2;
+            }
+
+            #green {
+                color: green;
+                z-index: 5;
+                grid-column: 3;
+                grid-row: 3;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-005.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-005.htm
new file mode 100644
index 00000000000..16ffaf10342
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-005.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                z-index: -5;
+                grid-column: 1;
+                grid-row: 1;
+            }
+
+            #yellow {
+                color: yellow;
+                z-index: -1;
+                grid-column: 2;
+                grid-row: 2;
+            }
+
+            #green {
+                color: green;
+                grid-column: 3;
+                grid-row: 3;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-006.htm b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-006.htm
new file mode 100644
index 00000000000..bd610e30424
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/grid-z-axis-ordering-overlapped-items-006.htm
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+        <link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">
+        <meta name="flags" content="ahem">
+        <style type="text/css">
+            #grid {
+                display: grid;
+                font: 100px/1 Ahem;
+                grid-template-columns: 25px 25px 25px 25px;
+                grid-template-rows: 25px 25px 25px 25px;
+            }
+
+            #blue {
+                color: blue;
+                z-index: -1;
+                grid-column: 2;
+                grid-row: 2;
+                margin-top: -25px;
+                margin-left: -25px;
+            }
+
+            #yellow {
+                color: yellow;
+                grid-column: 4;
+                grid-row: 4;
+                margin-top: -50px;
+                margin-left: -50px;
+            }
+
+            #green {
+                color: green;
+                z-index: 1;
+                grid-column: 1;
+                grid-row: 1;
+                margin-top: 50px;
+                margin-left: 50px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="grid">
+            <div id="green">G</div>
+            <div id="yellow">Y</div>
+            <div id="blue">B</div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-2x2-blue-yellow-lime-magenta.htm b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-2x2-blue-yellow-lime-magenta.htm
new file mode 100644
index 00000000000..e00b74435c6
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-2x2-blue-yellow-lime-magenta.htm
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <style type="text/css">
+            div {
+                font: 50px/1 Ahem;
+            }
+
+            #blue {
+                color: blue;
+            }
+
+            #yellow {
+                color: yellow;
+            }
+
+            #lime {
+                color: lime;
+            }
+
+            #magenta {
+                color: magenta;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+        <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+        <div>
+            <span id="blue">B</span><span id="yellow">Y</span>
+            <br>
+            <span id="lime">L</span><span id="magenta">M</span>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
new file mode 100644
index 00000000000..9c7e815d68f
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <style type="text/css">
+            #main {
+                  position: relative;
+            }
+
+            #main div {
+                width: 100px;
+                height: 100px;
+            }
+
+            .blue {
+                background-color: blue;
+                position: absolute;
+                left: 0px;
+                top: 0px;
+            }
+
+            .yellow {
+                background-color: yellow;
+                position: absolute;
+                left: 25px;
+                top: 25px;
+            }
+
+            .green {
+                background-color: green;
+                position: absolute;
+                left: 50px;
+                top: 50px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+        <div id="main">
+            <div class="blue"></div>
+            <div class="yellow"></div>
+            <div class="green"></div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-first-letter-green-margin-no-collapse-ref.htm b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-first-letter-green-margin-no-collapse-ref.htm
new file mode 100644
index 00000000000..bd721eba8b2
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-first-letter-green-margin-no-collapse-ref.htm
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Reference file text first letter should be green and margins do not collapse</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <style type="text/css">
+            p {
+                /* Prevent collapsing body and paragraph margins. */
+                float: left;
+            }
+
+            .green {
+                color: green;
+            }
+        </style>
+    </head>
+    <body>
+        <p>
+            <span class="green">T</span>he <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
+            In addition, body and paragraph margins should <strong>not collapse</strong>.
+        </p>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-text-green-margin-no-collapse-ref.htm b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-text-green-margin-no-collapse-ref.htm
new file mode 100644
index 00000000000..70cc6e6ec52
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/grid-text-green-margin-no-collapse-ref.htm
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+        <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+        <style type="text/css">
+            p {
+                color: green;
+                /* Prevent collapsing body and paragraph margins. */
+                float: left;
+            }
+        </style>
+    </head>
+    <body>
+        <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/100x100-green.png b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/100x100-green.png
new file mode 100644
index 00000000000..3883542392f
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/100x100-green.png
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/200x200-green.png b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/200x200-green.png
new file mode 100644
index 00000000000..7a47c0e5e7a
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/200x200-green.png
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/60x60-green.png b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/60x60-green.png
new file mode 100644
index 00000000000..b3c8cf3eb4c
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/60x60-green.png
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/testing-utils.js b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/testing-utils.js
new file mode 100644
index 00000000000..c4ceec3a805
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/reference/support/testing-utils.js
@@ -0,0 +1,33 @@
+var TestingUtils = (function() {
+
+    function checkGridTemplateColumns(element, value) {
+        assert_in_array(getComputedStyle(element).gridTemplateColumns, value, "gridTemplateColumns");
+    }
+
+    function checkGridTemplateRows(element, value) {
+        assert_in_array(getComputedStyle(element).gridTemplateRows, value, "gridTemplateRows");
+    }
+
+    function testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue) {
+        test(function() {
+            var grid = document.getElementById(gridId);
+            grid.style.gridTemplateColumns = columnsStyle;
+            grid.style.gridTemplateRows = rowsStyle;
+            checkGridTemplateColumns(grid, columnsComputedValue);
+            checkGridTemplateRows(grid, rowsComputedValue);
+        }, "'" + gridId + "' with: grid-template-columns: " + columnsStyle  + "; and grid-template-rows: " + rowsStyle + ";");
+    }
+
+    function testGridTemplateAreas(gridId, style, value) {
+        test(function() {
+            var grid = document.getElementById(gridId);
+            grid.style.gridTemplateAreas = style;
+            assert_equals(getComputedStyle(grid).gridTemplateAreas, value, "gridTemplateAreas");
+        }, "'" + gridId + "' with: grid-template-areas: " + style + ";");
+    }
+
+    return {
+        testGridTemplateColumnsRows: testGridTemplateColumnsRows,
+        testGridTemplateAreas: testGridTemplateAreas
+    }
+})();
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reftest-toc.htm b/tests/wpt/css-tests/css-grid-1_dev/html/reftest-toc.htm
index d38cda6cf34..3fedc00883d 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/reftest-toc.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/reftest-toc.htm
@@ -72,6 +72,54 @@
         <td rowspan="1"></td>
       </tr>
     </tbody>
+    <tbody id="grid-first-letter-001" class="">
+      <tr>
+        <td rowspan="1" title="'::first-letter' from grid container does not apply to grid items">
+          <a href="grid-first-letter-001.htm">grid-first-letter-001</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-first-letter-002" class="">
+      <tr>
+        <td rowspan="1" title="'::first-letter' from grid container ancestors does not apply to grid items">
+          <a href="grid-first-letter-002.htm">grid-first-letter-002</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-first-letter-003" class="">
+      <tr>
+        <td rowspan="1" title="'::first-letter' works on grid items">
+          <a href="grid-first-letter-003.htm">grid-first-letter-003</a></td>
+        <td><a href="reference/grid-first-letter-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-first-line-001" class="">
+      <tr>
+        <td rowspan="1" title="'::first-line' from grid container does not apply to grid items">
+          <a href="grid-first-line-001.htm">grid-first-line-001</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-first-line-002" class="">
+      <tr>
+        <td rowspan="1" title="'::first-line' from grid container ancestors does not apply to grid items">
+          <a href="grid-first-line-002.htm">grid-first-line-002</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-first-line-003" class="">
+      <tr>
+        <td rowspan="1" title="'::first-line' works on grid items">
+          <a href="grid-first-line-003.htm">grid-first-line-003</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
     <tbody id="grid-float-001" class="">
       <tr>
         <td rowspan="1" title="'float' has no effect on grid items">
@@ -80,6 +128,62 @@
         <td rowspan="1"></td>
       </tr>
     </tbody>
+    <tbody id="grid-floats-no-intrude-001" class="">
+      <tr>
+        <td rowspan="1" title="floats do not intrude into a grid">
+          <a href="grid-floats-no-intrude-001.htm">grid-floats-no-intrude-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-first-letter-001" class="">
+      <tr>
+        <td rowspan="1" title="'::first-letter' from inline grid container does not apply to grid items">
+          <a href="grid-inline-first-letter-001.htm">grid-inline-first-letter-001</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-first-letter-002" class="">
+      <tr>
+        <td rowspan="1" title="'::first-letter' from inline grid container ancestors does not apply to grid items">
+          <a href="grid-inline-first-letter-002.htm">grid-inline-first-letter-002</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-first-letter-003" class="">
+      <tr>
+        <td rowspan="1" title="'::first-letter' works on grid items within an inline grid">
+          <a href="grid-inline-first-letter-003.htm">grid-inline-first-letter-003</a></td>
+        <td><a href="reference/grid-first-letter-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-first-line-001" class="">
+      <tr>
+        <td rowspan="1" title="'::first-line' from inline grid container does not apply to grid items">
+          <a href="grid-inline-first-line-001.htm">grid-inline-first-line-001</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-first-line-002" class="">
+      <tr>
+        <td rowspan="1" title="'::first-line' from inline grid container ancestors does not apply to grid items">
+          <a href="grid-inline-first-line-002.htm">grid-inline-first-line-002</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-first-line-003" class="">
+      <tr>
+        <td rowspan="1" title="'::first-line' works on grid items within an inline grid">
+          <a href="grid-inline-first-line-003.htm">grid-inline-first-line-003</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
     <tbody id="grid-inline-float-001" class="">
       <tr>
         <td rowspan="1" title="'float' has no effect on grid items within an inline grid">
@@ -88,6 +192,142 @@
         <td rowspan="1"></td>
       </tr>
     </tbody>
+    <tbody id="grid-inline-floats-no-intrude-001" class="">
+      <tr>
+        <td rowspan="1" title="floats do not intrude into an inline grid">
+          <a href="grid-inline-floats-no-intrude-001.htm">grid-inline-floats-no-intrude-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-items-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="Regular and anonymous grid items within an inline grid">
+          <a href="grid-inline-items-001.htm">grid-inline-items-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-items-002" class="ahem">
+      <tr>
+        <td rowspan="1" title="Children of grid items do not create new items within an inline grid">
+          <a href="grid-inline-items-002.htm">grid-inline-items-002</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-items-003" class="ahem">
+      <tr>
+        <td rowspan="1" title="Grid items with 'display:none' are not rendered within an inline grid">
+          <a href="grid-inline-items-003.htm">grid-inline-items-003</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-items-inline-blocks-001" class="">
+      <tr>
+        <td rowspan="1" title="Paint order of grid items within an inline grid is the same as inline blocks">
+          <a href="grid-inline-items-inline-blocks-001.htm">grid-inline-items-inline-blocks-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-margins-no-collapse-001" class="">
+      <tr>
+        <td rowspan="1" title="inline grid's margins do not collapse">
+          <a href="grid-inline-margins-no-collapse-001.htm">grid-inline-margins-no-collapse-001</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-multicol-001" class="">
+      <tr>
+        <td rowspan="1" title="'column-*' properties from inline grid container does not apply to grid items">
+          <a href="grid-inline-multicol-001.htm">grid-inline-multicol-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-order-property-auto-placement-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items auto-placement position within an inline grid">
+          <a href="grid-inline-order-property-auto-placement-001.htm">grid-inline-order-property-auto-placement-001</a></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-order-property-auto-placement-002" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items auto-placement position within an inline grid">
+          <a href="grid-inline-order-property-auto-placement-002.htm">grid-inline-order-property-auto-placement-002</a></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-order-property-auto-placement-003" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items auto-placement position within an inline grid">
+          <a href="grid-inline-order-property-auto-placement-003.htm">grid-inline-order-property-auto-placement-003</a></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-order-property-auto-placement-004" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items auto-placement position within an inline grid">
+          <a href="grid-inline-order-property-auto-placement-004.htm">grid-inline-order-property-auto-placement-004</a></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-order-property-auto-placement-005" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items auto-placement position within an inline grid">
+          <a href="grid-inline-order-property-auto-placement-005.htm">grid-inline-order-property-auto-placement-005</a></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-order-property-painting-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items painting order within an inline grid">
+          <a href="grid-inline-order-property-painting-001.htm">grid-inline-order-property-painting-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-order-property-painting-002" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items painting order within an inline grid">
+          <a href="grid-inline-order-property-painting-002.htm">grid-inline-order-property-painting-002</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-order-property-painting-003" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items painting order within an inline grid">
+          <a href="grid-inline-order-property-painting-003.htm">grid-inline-order-property-painting-003</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-order-property-painting-004" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items painting order within an inline grid">
+          <a href="grid-inline-order-property-painting-004.htm">grid-inline-order-property-painting-004</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-order-property-painting-005" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items painting order within an inline grid">
+          <a href="grid-inline-order-property-painting-005.htm">grid-inline-order-property-painting-005</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
     <tbody id="grid-inline-vertical-align-001" class="ahem">
       <tr>
         <td rowspan="1" title="'vertical-align' has no effect on grid items within an inline grid">
@@ -96,6 +336,126 @@
         <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
       </tr>
     </tbody>
+    <tbody id="grid-inline-z-axis-ordering-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the z-axis order of grid items within an inline grid">
+          <a href="grid-inline-z-axis-ordering-001.htm">grid-inline-z-axis-ordering-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-z-axis-ordering-002" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the z-axis order of grid items within an inline grid">
+          <a href="grid-inline-z-axis-ordering-002.htm">grid-inline-z-axis-ordering-002</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-z-axis-ordering-003" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the z-axis order of grid items within an inline grid">
+          <a href="grid-inline-z-axis-ordering-003.htm">grid-inline-z-axis-ordering-003</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-z-axis-ordering-004" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the z-axis order of grid items within an inline grid">
+          <a href="grid-inline-z-axis-ordering-004.htm">grid-inline-z-axis-ordering-004</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-z-axis-ordering-005" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the z-axis order of grid items within an inline grid">
+          <a href="grid-inline-z-axis-ordering-005.htm">grid-inline-z-axis-ordering-005</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-z-axis-ordering-overlapped-items-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order within an inline grid">
+          <a href="grid-inline-z-axis-ordering-overlapped-items-001.htm">grid-inline-z-axis-ordering-overlapped-items-001</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-z-axis-ordering-overlapped-items-002" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order within an inline grid">
+          <a href="grid-inline-z-axis-ordering-overlapped-items-002.htm">grid-inline-z-axis-ordering-overlapped-items-002</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-z-axis-ordering-overlapped-items-003" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order within an inline grid">
+          <a href="grid-inline-z-axis-ordering-overlapped-items-003.htm">grid-inline-z-axis-ordering-overlapped-items-003</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-z-axis-ordering-overlapped-items-004" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order within an inline grid">
+          <a href="grid-inline-z-axis-ordering-overlapped-items-004.htm">grid-inline-z-axis-ordering-overlapped-items-004</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-z-axis-ordering-overlapped-items-005" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order within an inline grid">
+          <a href="grid-inline-z-axis-ordering-overlapped-items-005.htm">grid-inline-z-axis-ordering-overlapped-items-005</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-inline-z-axis-ordering-overlapped-items-006" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order within an inline grid">
+          <a href="grid-inline-z-axis-ordering-overlapped-items-006.htm">grid-inline-z-axis-ordering-overlapped-items-006</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-items-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="Regular and anonymous grid items">
+          <a href="grid-items-001.htm">grid-items-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-items-002" class="ahem">
+      <tr>
+        <td rowspan="1" title="Children of grid items do not create new items">
+          <a href="grid-items-002.htm">grid-items-002</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-items-003" class="ahem">
+      <tr>
+        <td rowspan="1" title="Grid items with 'display:none' are not rendered">
+          <a href="grid-items-003.htm">grid-items-003</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-items-inline-blocks-001" class="">
+      <tr>
+        <td rowspan="1" title="Paint order of grid items is the same as inline blocks">
+          <a href="grid-items-inline-blocks-001.htm">grid-items-inline-blocks-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
     <tbody id="grid-layout-auto-tracks" class="">
       <tr>
         <td rowspan="1" title="auto tracks">
@@ -176,6 +536,174 @@
         <td rowspan="1"></td>
       </tr>
     </tbody>
+    <tbody id="grid-margins-no-collapse-001" class="">
+      <tr>
+        <td rowspan="1" title="grid's margins do not collapse">
+          <a href="grid-margins-no-collapse-001.htm">grid-margins-no-collapse-001</a></td>
+        <td><a href="reference/grid-text-green-margin-no-collapse-ref.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-minimun-size-grid-items-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="Minimun size of grid items">
+          <a href="grid-minimun-size-grid-items-001.htm">grid-minimun-size-grid-items-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-minimun-size-grid-items-002" class="">
+      <tr>
+        <td rowspan="1" title="Minimun size of grid items">
+          <a href="grid-minimun-size-grid-items-002.htm">grid-minimun-size-grid-items-002</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-minimun-size-grid-items-003" class="">
+      <tr>
+        <td rowspan="1" title="Minimun size of grid items">
+          <a href="grid-minimun-size-grid-items-003.htm">grid-minimun-size-grid-items-003</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-minimun-size-grid-items-004" class="">
+      <tr>
+        <td rowspan="1" title="Minimun size of grid items">
+          <a href="grid-minimun-size-grid-items-004.htm">grid-minimun-size-grid-items-004</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-minimun-size-grid-items-005" class="">
+      <tr>
+        <td rowspan="1" title="Minimun size of grid items">
+          <a href="grid-minimun-size-grid-items-005.htm">grid-minimun-size-grid-items-005</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-minimun-size-grid-items-006" class="">
+      <tr>
+        <td rowspan="1" title="Minimun size of grid items">
+          <a href="grid-minimun-size-grid-items-006.htm">grid-minimun-size-grid-items-006</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-minimun-size-grid-items-007" class="">
+      <tr>
+        <td rowspan="1" title="Minimun size of grid items">
+          <a href="grid-minimun-size-grid-items-007.htm">grid-minimun-size-grid-items-007</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-minimun-size-grid-items-008" class="">
+      <tr>
+        <td rowspan="1" title="Minimun size of grid items">
+          <a href="grid-minimun-size-grid-items-008.htm">grid-minimun-size-grid-items-008</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-minimun-size-grid-items-009" class="">
+      <tr>
+        <td rowspan="1" title="Minimun size of grid items">
+          <a href="grid-minimun-size-grid-items-009.htm">grid-minimun-size-grid-items-009</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-multicol-001" class="">
+      <tr>
+        <td rowspan="1" title="'column-*' properties from grid container does not apply to grid items">
+          <a href="grid-multicol-001.htm">grid-multicol-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-order-property-auto-placement-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items auto-placement position">
+          <a href="grid-order-property-auto-placement-001.htm">grid-order-property-auto-placement-001</a></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-order-property-auto-placement-002" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items auto-placement position">
+          <a href="grid-order-property-auto-placement-002.htm">grid-order-property-auto-placement-002</a></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-order-property-auto-placement-003" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items auto-placement position">
+          <a href="grid-order-property-auto-placement-003.htm">grid-order-property-auto-placement-003</a></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-order-property-auto-placement-004" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items auto-placement position">
+          <a href="grid-order-property-auto-placement-004.htm">grid-order-property-auto-placement-004</a></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-order-property-auto-placement-005" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items auto-placement position">
+          <a href="grid-order-property-auto-placement-005.htm">grid-order-property-auto-placement-005</a></td>
+        <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-order-property-painting-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items painting order">
+          <a href="grid-order-property-painting-001.htm">grid-order-property-painting-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-order-property-painting-002" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items painting order">
+          <a href="grid-order-property-painting-002.htm">grid-order-property-painting-002</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-order-property-painting-003" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items painting order">
+          <a href="grid-order-property-painting-003.htm">grid-order-property-painting-003</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-order-property-painting-004" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items painting order">
+          <a href="grid-order-property-painting-004.htm">grid-order-property-painting-004</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-order-property-painting-005" class="ahem">
+      <tr>
+        <td rowspan="1" title="'order' property affects grid items painting order">
+          <a href="grid-order-property-painting-005.htm">grid-order-property-painting-005</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
     <tbody id="grid-vertical-align-001" class="ahem">
       <tr>
         <td rowspan="1" title="'vertical-align' has no effect on grid items">
@@ -184,6 +712,94 @@
         <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
       </tr>
     </tbody>
+    <tbody id="grid-z-axis-ordering-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the z-axis order of grid items">
+          <a href="grid-z-axis-ordering-001.htm">grid-z-axis-ordering-001</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-z-axis-ordering-002" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the z-axis order of grid items">
+          <a href="grid-z-axis-ordering-002.htm">grid-z-axis-ordering-002</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-z-axis-ordering-003" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the z-axis order of grid items">
+          <a href="grid-z-axis-ordering-003.htm">grid-z-axis-ordering-003</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-z-axis-ordering-004" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the z-axis order of grid items">
+          <a href="grid-z-axis-ordering-004.htm">grid-z-axis-ordering-004</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-z-axis-ordering-005" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the z-axis order of grid items">
+          <a href="grid-z-axis-ordering-005.htm">grid-z-axis-ordering-005</a></td>
+        <td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-z-axis-ordering-overlapped-items-001" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order">
+          <a href="grid-z-axis-ordering-overlapped-items-001.htm">grid-z-axis-ordering-overlapped-items-001</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-z-axis-ordering-overlapped-items-002" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order">
+          <a href="grid-z-axis-ordering-overlapped-items-002.htm">grid-z-axis-ordering-overlapped-items-002</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-z-axis-ordering-overlapped-items-003" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order">
+          <a href="grid-z-axis-ordering-overlapped-items-003.htm">grid-z-axis-ordering-overlapped-items-003</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-z-axis-ordering-overlapped-items-004" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order">
+          <a href="grid-z-axis-ordering-overlapped-items-004.htm">grid-z-axis-ordering-overlapped-items-004</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-z-axis-ordering-overlapped-items-005" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order">
+          <a href="grid-z-axis-ordering-overlapped-items-005.htm">grid-z-axis-ordering-overlapped-items-005</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
+    <tbody id="grid-z-axis-ordering-overlapped-items-006" class="ahem">
+      <tr>
+        <td rowspan="1" title="'z-index' property controls the grid items stacking order">
+          <a href="grid-z-axis-ordering-overlapped-items-006.htm">grid-z-axis-ordering-overlapped-items-006</a></td>
+        <td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
+        <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
+      </tr>
+    </tbody>
   </table>
 
  </body>
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/reftest.list b/tests/wpt/css-tests/css-grid-1_dev/html/reftest.list
index 921c0081e0e..20f0c441a8c 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/reftest.list
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/reftest.list
@@ -5,9 +5,54 @@ fr-unit.htm == reference/fr-unit-ref.htm
 fr-unit-with-percentage.htm == reference/fr-unit-with-percentage-ref.htm
 grid-display-grid-001.htm == reference/ref-filled-green-100px-square.htm
 grid-display-inline-grid-001.htm == reference/ref-filled-green-100px-square.htm
+grid-first-letter-001.htm == reference/grid-text-green-margin-no-collapse-ref.htm
+grid-first-letter-002.htm == reference/grid-text-green-margin-no-collapse-ref.htm
+grid-first-letter-003.htm == reference/grid-first-letter-green-margin-no-collapse-ref.htm
+grid-first-line-001.htm == reference/grid-text-green-margin-no-collapse-ref.htm
+grid-first-line-002.htm == reference/grid-text-green-margin-no-collapse-ref.htm
+grid-first-line-003.htm == reference/grid-text-green-margin-no-collapse-ref.htm
 grid-float-001.htm == reference/ref-filled-green-100px-square.htm
+grid-floats-no-intrude-001.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-first-letter-001.htm == reference/grid-text-green-margin-no-collapse-ref.htm
+grid-inline-first-letter-002.htm == reference/grid-text-green-margin-no-collapse-ref.htm
+grid-inline-first-letter-003.htm == reference/grid-first-letter-green-margin-no-collapse-ref.htm
+grid-inline-first-line-001.htm == reference/grid-text-green-margin-no-collapse-ref.htm
+grid-inline-first-line-002.htm == reference/grid-text-green-margin-no-collapse-ref.htm
+grid-inline-first-line-003.htm == reference/grid-text-green-margin-no-collapse-ref.htm
 grid-inline-float-001.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-floats-no-intrude-001.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-items-001.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-items-002.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-items-003.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-items-inline-blocks-001.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-margins-no-collapse-001.htm == reference/grid-text-green-margin-no-collapse-ref.htm
+grid-inline-multicol-001.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-order-property-auto-placement-001.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm
+grid-inline-order-property-auto-placement-002.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm
+grid-inline-order-property-auto-placement-003.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm
+grid-inline-order-property-auto-placement-004.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm
+grid-inline-order-property-auto-placement-005.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm
+grid-inline-order-property-painting-001.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-order-property-painting-002.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-order-property-painting-003.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-order-property-painting-004.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-order-property-painting-005.htm == reference/ref-filled-green-100px-square.htm
 grid-inline-vertical-align-001.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-z-axis-ordering-001.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-z-axis-ordering-002.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-z-axis-ordering-003.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-z-axis-ordering-004.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-z-axis-ordering-005.htm == reference/ref-filled-green-100px-square.htm
+grid-inline-z-axis-ordering-overlapped-items-001.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-inline-z-axis-ordering-overlapped-items-002.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-inline-z-axis-ordering-overlapped-items-003.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-inline-z-axis-ordering-overlapped-items-004.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-inline-z-axis-ordering-overlapped-items-005.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-inline-z-axis-ordering-overlapped-items-006.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-items-001.htm == reference/ref-filled-green-100px-square.htm
+grid-items-002.htm == reference/ref-filled-green-100px-square.htm
+grid-items-003.htm == reference/ref-filled-green-100px-square.htm
+grid-items-inline-blocks-001.htm == reference/ref-filled-green-100px-square.htm
 grid-layout-auto-tracks.htm == reference/grid-layout-auto-tracks-ref.htm
 grid-layout-basic.htm == reference/grid-layout-basic-ref.htm
 grid-layout-free-space-unit.htm == reference/grid-layout-basic-ref.htm
@@ -18,4 +63,36 @@ grid-layout-placement-shorthands.htm == reference/grid-layout-basic-ref.htm
 grid-layout-repeat-notation.htm == reference/grid-layout-repeat-notation-ref.htm
 grid-layout-z-order-a.htm == reference/grid-layout-z-order-ref.htm
 grid-layout-z-order-b.htm == reference/grid-layout-z-order-ref.htm
+grid-margins-no-collapse-001.htm == reference/grid-text-green-margin-no-collapse-ref.htm
+grid-minimun-size-grid-items-001.htm == reference/ref-filled-green-100px-square.htm
+grid-minimun-size-grid-items-002.htm == reference/ref-filled-green-100px-square.htm
+grid-minimun-size-grid-items-003.htm == reference/ref-filled-green-100px-square.htm
+grid-minimun-size-grid-items-004.htm == reference/ref-filled-green-100px-square.htm
+grid-minimun-size-grid-items-005.htm == reference/ref-filled-green-100px-square.htm
+grid-minimun-size-grid-items-006.htm == reference/ref-filled-green-100px-square.htm
+grid-minimun-size-grid-items-007.htm == reference/ref-filled-green-100px-square.htm
+grid-minimun-size-grid-items-008.htm == reference/ref-filled-green-100px-square.htm
+grid-minimun-size-grid-items-009.htm == reference/ref-filled-green-100px-square.htm
+grid-multicol-001.htm == reference/ref-filled-green-100px-square.htm
+grid-order-property-auto-placement-001.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm
+grid-order-property-auto-placement-002.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm
+grid-order-property-auto-placement-003.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm
+grid-order-property-auto-placement-004.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm
+grid-order-property-auto-placement-005.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm
+grid-order-property-painting-001.htm == reference/ref-filled-green-100px-square.htm
+grid-order-property-painting-002.htm == reference/ref-filled-green-100px-square.htm
+grid-order-property-painting-003.htm == reference/ref-filled-green-100px-square.htm
+grid-order-property-painting-004.htm == reference/ref-filled-green-100px-square.htm
+grid-order-property-painting-005.htm == reference/ref-filled-green-100px-square.htm
 grid-vertical-align-001.htm == reference/ref-filled-green-100px-square.htm
+grid-z-axis-ordering-001.htm == reference/ref-filled-green-100px-square.htm
+grid-z-axis-ordering-002.htm == reference/ref-filled-green-100px-square.htm
+grid-z-axis-ordering-003.htm == reference/ref-filled-green-100px-square.htm
+grid-z-axis-ordering-004.htm == reference/ref-filled-green-100px-square.htm
+grid-z-axis-ordering-005.htm == reference/ref-filled-green-100px-square.htm
+grid-z-axis-ordering-overlapped-items-001.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-z-axis-ordering-overlapped-items-002.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-z-axis-ordering-overlapped-items-003.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-z-axis-ordering-overlapped-items-004.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-z-axis-ordering-overlapped-items-005.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
+grid-z-axis-ordering-overlapped-items-006.htm == reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/support/100x100-green.png b/tests/wpt/css-tests/css-grid-1_dev/html/support/100x100-green.png
new file mode 100644
index 00000000000..3883542392f
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/support/100x100-green.png
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/support/200x200-green.png b/tests/wpt/css-tests/css-grid-1_dev/html/support/200x200-green.png
new file mode 100644
index 00000000000..7a47c0e5e7a
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/support/200x200-green.png
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/support/60x60-green.png b/tests/wpt/css-tests/css-grid-1_dev/html/support/60x60-green.png
new file mode 100644
index 00000000000..b3c8cf3eb4c
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/support/60x60-green.png
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/support/testing-utils.js b/tests/wpt/css-tests/css-grid-1_dev/html/support/testing-utils.js
new file mode 100644
index 00000000000..c4ceec3a805
--- /dev/null
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/support/testing-utils.js
@@ -0,0 +1,33 @@
+var TestingUtils = (function() {
+
+    function checkGridTemplateColumns(element, value) {
+        assert_in_array(getComputedStyle(element).gridTemplateColumns, value, "gridTemplateColumns");
+    }
+
+    function checkGridTemplateRows(element, value) {
+        assert_in_array(getComputedStyle(element).gridTemplateRows, value, "gridTemplateRows");
+    }
+
+    function testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue) {
+        test(function() {
+            var grid = document.getElementById(gridId);
+            grid.style.gridTemplateColumns = columnsStyle;
+            grid.style.gridTemplateRows = rowsStyle;
+            checkGridTemplateColumns(grid, columnsComputedValue);
+            checkGridTemplateRows(grid, rowsComputedValue);
+        }, "'" + gridId + "' with: grid-template-columns: " + columnsStyle  + "; and grid-template-rows: " + rowsStyle + ";");
+    }
+
+    function testGridTemplateAreas(gridId, style, value) {
+        test(function() {
+            var grid = document.getElementById(gridId);
+            grid.style.gridTemplateAreas = style;
+            assert_equals(getComputedStyle(grid).gridTemplateAreas, value, "gridTemplateAreas");
+        }, "'" + gridId + "' with: grid-template-areas: " + style + ";");
+    }
+
+    return {
+        testGridTemplateColumnsRows: testGridTemplateColumnsRows,
+        testGridTemplateAreas: testGridTemplateAreas
+    }
+})();
diff --git a/tests/wpt/css-tests/css-grid-1_dev/html/toc.htm b/tests/wpt/css-tests/css-grid-1_dev/html/toc.htm
index 73950b6266e..8be4bc6e1f3 100644
--- a/tests/wpt/css-tests/css-grid-1_dev/html/toc.htm
+++ b/tests/wpt/css-tests/css-grid-1_dev/html/toc.htm
@@ -27,27 +27,27 @@
     <tbody id="s2">
       <tr><th><a href="chapter-2.htm">Chapter 2 - 
         Grid Layout Concepts and Terminology</a></th>
-      <td>(2 Tests)</td></tr>
+      <td>(0 Tests)</td></tr>
     </tbody>
     <tbody id="s3">
       <tr><th><a href="chapter-3.htm">Chapter 3 - 
         Grid Containers</a></th>
-      <td>(9 Tests)</td></tr>
+      <td>(28 Tests)</td></tr>
     </tbody>
     <tbody id="s4">
       <tr><th><a href="chapter-4.htm">Chapter 4 - 
         Grid Items</a></th>
-      <td>(2 Tests)</td></tr>
+      <td>(52 Tests)</td></tr>
     </tbody>
     <tbody id="s5">
       <tr><th><a href="chapter-5.htm">Chapter 5 - 
         The Explicit Grid</a></th>
-      <td>(4 Tests)</td></tr>
+      <td>(17 Tests)</td></tr>
     </tbody>
     <tbody id="s6">
       <tr><th><a href="chapter-6.htm">Chapter 6 - 
         The Implicit Grid</a></th>
-      <td>(1 Tests)</td></tr>
+      <td>(0 Tests)</td></tr>
     </tbody>
     <tbody id="s7">
       <tr><th><a href="chapter-7.htm">Chapter 7 - 
@@ -62,7 +62,7 @@
     <tbody id="s9">
       <tr><th><a href="chapter-9.htm">Chapter 9 - 
         Placing Grid Items</a></th>
-      <td>(2 Tests)</td></tr>
+      <td>(4 Tests)</td></tr>
     </tbody>
     <tbody id="s10">
       <tr><th><a href="chapter-10.htm">Chapter 10 -
author	James Graham <james@hoppipolla.co.uk>	2015-07-27 17:47:31 +0100
committer	James Graham <james@hoppipolla.co.uk>	2015-07-27 17:47:31 +0100
commit	df03062d626f485dd896ce9c4374dfce447dc657 (patch)
tree	a96bdde06c6cd88dd68bc5ef4de8277fc6250a60 /tests/wpt/css-tests/css-grid-1_dev/html
parent	662c00a8109c49d4c57343156b774441f4f48640 (diff)
download	servo-df03062d626f485dd896ce9c4374dfce447dc657.tar.gz servo-df03062d626f485dd896ce9c4374dfce447dc657.zip