Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-grid/grid-model
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
80 files changed, 3794 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/column-property-should-not-apply-on-grid-container-001.html b/testing/web-platform/tests/css/css-grid/grid-model/column-property-should-not-apply-on-grid-container-001.html
new file mode 100644
index 0000000000..a795362586
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/column-property-should-not-apply-on-grid-container-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: column-* properties are ignored.</title>
+<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-model">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1364">
+<link rel="match" href="reference/column-property-should-not-apply-on-grid-container-001-ref.html">
+<meta name="assert" content="This test ensures the column-* properties (in the Multicol module) have no effect on a grid container."/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<style>
+.grid, .inline-grid
+{
+  width: 20em;
+  column-count: 2;
+  column-gap: 100px;
+  font-kerning: none;
+}
+</style>
+
+<body>
+
+<div class='grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+<div class='inline-grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/compute-intrinsic-widths-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/compute-intrinsic-widths-scrollbar-001.html
new file mode 100644
index 0000000000..d61f7ad14e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/compute-intrinsic-widths-scrollbar-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>CSS Grid: width of grid container with scrollbar.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow">
+<meta name="assert" content="This test ensures that a grid container scrollbar is computed properly during intrinsic width calculation."/>
+
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
+<style>
+  .grid {
+    overflow-y: scroll;
+    grid-template-columns: repeat(4, 50px);
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+  <div class="grid min-content" data-expected-client-width="200">
+    item
+  </div>
+  <div class="grid max-content" data-expected-client-width="200">
+    item
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/display-grid.html b/testing/web-platform/tests/css/css-grid/grid-model/display-grid.html
new file mode 100644
index 0000000000..7c6b743327
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/display-grid.html
@@ -0,0 +1,107 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Grid Layout: display: grid</title>
+  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 -->
+  <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers"/>
+  <link rel="match" href="../reference/display-grid-ref.html">
+  <meta name="assert" content="'display: grid' causes an element to generate a block-level grid container box."/>
+  <style type="text/css">
+    #container {
+      position:relative;
+      width:400px;
+      height:100px;
+    }
+
+    #grid {
+      display:grid;
+      grid-template-columns:100px 300px;
+      grid-template-rows:70px 30px;
+      height:100%;
+    }
+
+    #cell1 {
+      grid-column:1;
+      grid-row:1;
+      background-color:green;
+      height:70px;
+    }
+
+    #cell2 {
+      grid-column:2;
+      grid-row:1;
+      background-color:limegreen;
+      height:70px;
+    }
+
+    #cell3 {
+      grid-column:1;
+      grid-row:2;
+      background-color:limegreen;
+      height:30px;
+    }
+
+    #cell4 {
+      grid-column:2;
+      grid-row:2;
+      background-color:green;
+      height:30px;
+    }
+
+    .error {
+      position:absolute;
+      top:0;
+      left:0;
+      height:100%;
+      width:100%;
+      z-index:-1;
+    }
+
+    #table {
+      width:100%;
+      height:100%;
+      border-collapse:collapse;
+    }
+
+    #table td {
+      padding:0;
+      vertical-align:top;
+    }
+
+    #table td:first-child {
+      width:100px;
+    }
+
+    #table tr:last-child td {
+      height:30px;
+    }
+  </style>
+</head>
+<body>
+<p>Test passes if there are 4 green rectangles and no red.</p>
+
+<div id="container">
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+    <div id="cell4">cell4</div>
+  </div>
+  <div class="error">
+    <table id="table">
+      <tbody>
+      <tr>
+        <td style="background-color:#f00">cell1</td>
+        <td style="background-color:#e00">cell2</td>
+      </tr>
+      <tr>
+        <td style="background-color:#e00">cell3</td>
+        <td style="background-color:#f00">cell4</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/display-inline-grid.html b/testing/web-platform/tests/css/css-grid/grid-model/display-inline-grid.html
new file mode 100644
index 0000000000..e080ed8c95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/display-inline-grid.html
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Grid Layout: display: inline-grid</title>
+  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 -->
+  <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers"/>
+  <link rel="match" href="../reference/display-inline-grid-ref.html">
+  <meta name="assert" content="'display: inline-grid' causes an element to generate an inline-level grid container box." />
+  <style type="text/css">
+    #container {
+      position:relative;
+    }
+
+    #grid {
+      display:inline-grid;
+      grid-template-columns:100px 300px;
+      grid-template-rows:70px 30px;
+      width:400px;
+      height:100px;
+    }
+
+    #cell1 {
+      grid-column:1;
+      grid-row:1;
+      background-color:green;
+      height:70px;
+    }
+
+    #cell2 {
+      grid-column:2;
+      grid-row:1;
+      background-color:limegreen;
+      height:70px;
+    }
+
+    #cell3 {
+      grid-column:1;
+      grid-row:2;
+      background-color:limegreen;
+      height:30px;
+    }
+
+    #cell4 {
+      grid-column:2;
+      grid-row:2;
+      background-color:green;
+      height:30px;
+    }
+
+    .error {
+      position:absolute;
+      top:0;
+      left:0;
+      height:100px;
+      width:400px;
+      z-index:-1;
+    }
+
+    #table {
+      width:100%;
+      height:100%;
+      border-collapse:collapse;
+    }
+
+    #table td {
+      padding:0;
+      vertical-align:top;
+    }
+
+    #table td:first-child {
+      width:100px;
+    }
+
+    #table tr:last-child td {
+      height:30px;
+    }
+
+    span {
+      vertical-align:top;
+    }
+  </style>
+</head>
+<body>
+<p>Test passes if there are 4 green rectangles and no red.</p>
+
+<div id="container">
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+    <div id="cell4">cell4</div>
+  </div>
+  <span>Inline</span>
+  <div class="error">
+    <table id="table">
+      <tbody>
+      <tr>
+        <td style="background-color:#f00">cell1</td>
+        <td style="background-color:#e00">cell2</td>
+      </tr>
+      <tr>
+        <td style="background-color:#e00">cell3</td>
+        <td style="background-color:#f00">cell4</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/fixed-width-intrinsic-width-should-exclude-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/fixed-width-intrinsic-width-should-exclude-scrollbar-001.html
new file mode 100644
index 0000000000..26b8f5e01d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/fixed-width-intrinsic-width-should-exclude-scrollbar-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: intrinsic width of fixed-width grid items.</title>
+<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow"/>
+<meta name="assert" content="This test ensures that scrollbar width is not accounted for fixed-width grid items' intrinsic width."/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<style>
+.grid {
+    grid-template-columns: 400px 500px;
+    grid-template-rows: 200px 300px;
+}
+
+.gridItemScrollOverflow {
+    width: 50px;
+    height: 50px;
+    overflow: scroll;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<div class="grid">
+    <div class="firstRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+    <div class="firstRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+    <div class="secondRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+    <!-- Grid item itself being a grid container-->
+    <div class="grid secondRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html
new file mode 100644
index 0000000000..6ee8231c93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on an empty grid if there are grid areas which exceed the grid container size, since the grid itself can cause overflow.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 150px / 150px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html
new file mode 100644
index 0000000000..1abc446e22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item placed inside the boundaries of the grid container, if there are grid areas which exceed the grid container size.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 150px / 150px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       width: 100px;
+       height: 100px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html
new file mode 100644
index 0000000000..aaba4f9244
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item placed inside the boundaries of the grid container, if there are grid areas which exceed the grid container size.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 50px / 100px 50px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       grid-column: 1;
+       grid-row: 1;
+       width: 100px;
+       height: 100px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html
new file mode 100644
index 0000000000..707056feb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-vertical-scrollbar.html">
+<meta name="assert" content="This test verifies that the vertical scrollbar is shown on a grid with an item placed below the bottom of the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px / 100%;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       grid-column: 1;
+       grid-row: 1;
+       margin-top: 100px;
+       width: 50px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the vertical scrollbar is visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html
new file mode 100644
index 0000000000..0184b399b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-horizontal-scrollbar.html">
+<meta name="assert" content="This test verifies that the horizontal scrollbar is shown on a grid with an item placed behind the right edge of the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100% / 100px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       grid-column: 1;
+       grid-row: 1;
+       margin-left: 100px;
+       width: 50px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the horizontal scrollbar is visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html
new file mode 100644
index 0000000000..248fc425fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item placed outside the boundaries of the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px / 100px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       grid-column: 1;
+       grid-row: 1;
+       margin: 100px 0 0 100px;
+       width: 50px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html
new file mode 100644
index 0000000000..0a7d3aa28a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box.html">
+<meta name="assert" content="This test verifies that the scrollbars are not shown on a grid with an item with 0px width even when it's placed in a grid area outside the boundaries of the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 100px / 100px 100px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       grid-column: 2;
+       grid-row: 2;
+       width: 0px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html
new file mode 100644
index 0000000000..df39ed8262
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box.html">
+<meta name="assert" content="This test verifies that the scrollbars are not shown on a grid with an item with 0px height even when it's placed in a grid area outside the boundaries of the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 100px / 100px 100px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       grid-column: 2;
+       grid-row: 2;
+       width: 50px;
+       height: 0px;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html
new file mode 100644
index 0000000000..d1ab96e4c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item that has large margins placed inside the boundaries of the grid container, if there are grid areas which exceed the grid container size.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 120px / 120px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       width: 100px;
+       height: 100px;
+       margin-right: 50px;
+       margin-bottom: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-box-sizing-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-box-sizing-001.html
new file mode 100644
index 0000000000..b990292934
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-box-sizing-001.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container and tracks sizes with box-sizing property</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#intrinsic-sizes">
+<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
+<meta name="assert" content="The test checks the sizes of a grid container and its track depending on min-size constraints and the box-sizing property.">
+<style>
+.wrapper {
+  position: relative;
+  width: 200px;
+  height: 100px;
+}
+
+.grid {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: grid;
+  border-style: solid;
+  border-width: 5px 10px 15px 20px;
+  padding: 17px 13px 7px 3px;
+}
+
+.wholeWidth {
+  right: 0;
+}
+
+.wholeHeight {
+  bottom: 0;
+}
+.item {
+  background: cyan;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="height: 100px;" data-expected-width="200" data-expected-height="144">
+    <div class="item" data-expected-width="154" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="min-height: 100px;" data-expected-width="200" data-expected-height="144">
+    <div class="item" data-expected-width="154" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="height: 100px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="min-height: 100px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="bottom: 0;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="bottom: 0;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="height: 100px; bottom: 0;" data-expected-width="200" data-expected-height="144">
+    <div class="item" data-expected-width="154" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="min-height: 100px; bottom: 0;" data-expected-width="200" data-expected-height="144">
+    <div class="item" data-expected-width="154" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="height: 100px; bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="min-height: 100px; bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="width: 200px;" data-expected-width="246" data-expected-height="100">
+    <div class="item" data-expected-width="200" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="min-width: 200px;" data-expected-width="246" data-expected-height="100">
+    <div class="item" data-expected-width="200" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="width: 200px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="min-width: 200px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="right: 0;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="right: 0;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="width: 200px; right: 0;" data-expected-width="246" data-expected-height="100">
+    <div class="item" data-expected-width="200" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="min-width: 200px; right: 0;" data-expected-width="246" data-expected-height="100">
+    <div class="item" data-expected-width="200" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="width: 200px; right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="min-width: 200px; right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-button-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-button-001.html
new file mode 100644
index 0000000000..b84c10fcab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-button-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Grid items work inside a button</title>
+<meta name="assert" content="When a button is set to display: grid, its children should flow into its grid cells">
+<link rel="author" title="Bryan Robinson" href="bryanlrobinson@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
+<style>
+  .grid { display: grid; grid-template-columns: 100px 200px; border: 2px solid purple; box-sizing: border-box; }
+  span { border: 1px dashed green; box-sizing: border-box; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<button class="grid" ><span class="item1" data-expected-width="100">item 1</span> <span class="item2" data-expected-width="200">item 2</span></button>
+
+<script>
+  checkLayout("[data-expected-width]")
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-computed-value-display-floated-items-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-computed-value-display-floated-items-001.html
new file mode 100644
index 0000000000..17c0fbd1b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-computed-value-display-floated-items-001.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #grid {
+    display: grid;
+  }
+
+  #inline-grid {
+    display: inline-grid;
+  }
+
+  .inline-table {
+    display: inline-table;
+  }
+
+  .inline {
+    display: inline;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .float {
+    float: left;
+  }
+</style>
+<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>
+  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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html
new file mode 100644
index 0000000000..8e322fe38e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' is ignored in grid containers</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">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter">
+<meta name="assert" content="The test checks that grid item should ignore grid container's first-letter pseudo-element.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+  body { line-height: 20px; }
+  .grid-first-letter::first-letter { line-height: 100px; color: red; }
+  .container-first-letter::first-letter { line-height: 200px; color: green; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.container');">
+
+<div id="log"></div>
+
+<div class="container">
+  <div class="grid grid-first-letter">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid grid-first-letter">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid grid-first-letter" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid grid-first-letter" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="grid grid-first-letter">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+  <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="inline-grid grid-first-letter">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+  <div data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="grid grid-first-letter" data-expected-height=20>
+    Anonymous item.
+  </div>
+  <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="inline-grid grid-first-letter" data-expected-height=20>
+    Anonymous item.
+  </div>
+  <div data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="grid">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+  <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="inline-grid">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+  <div data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="grid" data-expected-height=20>
+    Anonymous item.
+  </div>
+  <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="inline-grid" data-expected-height=20>
+    Anonymous item.
+  </div>
+  <div data-expected-height=20>Out of grid.</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002-ref.html
new file mode 100644
index 0000000000..1d89a21278
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test Reference</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
+<button style="display:grid">
+  First letter should not be red
+</button>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html
new file mode 100644
index 0000000000..42014addf0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' is ignored in button grid containers</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter">
+<link rel="match" href="grid-container-ignores-first-letter-002-ref.html">
+<style>
+  /* The combination of button, grid, nested inlines, and ::first-letter crashes Blink */
+  button { display: grid }
+  button::first-letter { color: red }
+</style>
+<button>
+  <span>
+    <span>First letter should not be red</span>
+  </span>
+</button>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-line-001.html
new file mode 100644
index 0000000000..b19eee76a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-line-001.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-line' is ignored in grid containers</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">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line">
+<meta name="assert" content="The test checks that grid item should ignore grid container's first-line pseudo-element.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+  body { line-height: 20px; }
+  .grid-first-line::first-line { line-height: 100px; }
+  .container::first-line { line-height: 200px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid,.inline-grid');">
+
+<div id="log"></div>
+
+<div class="grid grid-first-line">
+  <div class="item" data-expected-height=20>The first item.</div>
+  <div class="item" data-expected-height=20>The second item.</div>
+</div>
+
+<div class="inline-grid grid-first-line">
+  <div class="item" data-expected-height=20>The first item.</div>
+  <div class="item" data-expected-height=20>The second item.</div>
+</div>
+
+<div class="grid grid-first-line" data-expected-height=20>
+  Anonymous item.
+</div>
+
+<div class="inline-grid grid-first-line" data-expected-height=20>
+  Anonymous item.
+</div>
+
+<div class="container">
+  <div class="grid grid-first-line">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid grid-first-line">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid grid-first-line" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid grid-first-line" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html
new file mode 100644
index 0000000000..bad3f89b53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid: grid container's size includes border, padding and scrollbar.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow"/>
+<meta name="assert" content="This test checks that grid container size includes border, padding and scrollbar; ignoring margin as expected."/>
+<link rel="issue" href="https://crbug.com/532032"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+<link href="/css/support/height-keyword-classes.css" rel="stylesheet">
+<style>
+.margin {
+    margin: 10px;
+}
+
+.border {
+    border: 5px solid black;
+}
+
+.padding {
+    padding: 20px;
+}
+
+.scroll {
+    overflow: scroll;
+}
+
+.item {
+    width: 100px;
+    height: 100px;
+    background: lime;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+<body>
+    <div class="grid min-content" data-expected-width="100" data-expected-height="100">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin" data-expected-width="100" data-expected-height="100">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content border" data-expected-width="110" data-expected-height="110">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content padding" data-expected-width="140" data-expected-height="140">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content scroll" data-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin border" data-expected-width="110" data-expected-height="110">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin padding" data-expected-width="140" data-expected-height="140">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin scroll" data-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content border padding" data-expected-width="150" data-expected-height="150">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content border scroll" data-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin border padding" data-expected-width="150" data-expected-height="150">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin border scroll" data-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <!-- This div is only for measuring scrollbar size -->
+    <div id="measure" style="overflow: scroll;">
+        <div style="min-height: 300px;"></div>
+    </div>
+
+<script>
+    var measure = document.getElementById('measure');
+    var scrollbarWidth = measure.offsetWidth - measure.clientWidth;
+    var scrollbarHeight = measure.offsetHeight - measure.clientHeight;
+
+    // Here are the data-test-width-without-scrollbar (and height) attributes of all
+    // elements that have the "scroll" class. Things that contribute to the expected
+    // sizes are:
+    //
+    // - width:
+    //  padding{Left,Right}, border{Left,Right}, element width and its scrollbarWidth.
+    //
+    // - height:
+    //  padding{Top,Bottom}, border{Top, Bottom}, element width and its scrollbarHeight.
+    //
+    // The data-expected-width (and height) attributes are dynamically set to the elements
+    // so that we can ensure the scrollbar sizes are calculated in an engine-agnostic way.
+    var elements = document.getElementsByClassName("scroll");
+    for (var i = 0; i < elements.length; i++) {
+      const expectedWidth = parseInt(elements[i].getAttribute("data-test-width-without-scrollbar"));
+      const expectedHeight = parseInt(elements[i].getAttribute("data-test-height-without-scrollbar"));
+      elements[i].setAttribute("data-expected-width", expectedWidth + scrollbarWidth);
+      elements[i].setAttribute("data-expected-height", expectedHeight + scrollbarHeight);
+    }
+
+    checkLayout('.grid');
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html
new file mode 100644
index 0000000000..a40a1ea25c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS container Layout Test Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 10px/1 Ahem;
+    margin: 10px;
+    background: grey;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .container > div {
+    background: cyan;
+    width: 100%;
+    height: 100%;
+  }
+
+  .directionRTL {
+    direction: rtl;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html
new file mode 100644
index 0000000000..848ed7d909
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container with scrollbars</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="match" href="grid-container-scrollbar-001-ref.html">
+<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    font: 10px/1 Ahem;
+    margin: 10px;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .grid > div {
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html
new file mode 100644
index 0000000000..778c97be1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS container Layout Test Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 10px/1 Ahem;
+    margin: 10px;
+    background: grey;
+    writing-mode: vertical-lr;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .container > div {
+    background: cyan;
+    width: 100%;
+    height: 100%;
+  }
+
+  .directionRTL {
+    direction: rtl;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html
new file mode 100644
index 0000000000..aed5d0cf49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container with scrollbars</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="match" href="grid-container-scrollbar-vertical-lr-001-ref.html">
+<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    font: 10px/1 Ahem;
+    margin: 10px;
+    writing-mode: vertical-lr;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .grid > div {
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html
new file mode 100644
index 0000000000..a511347516
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS container Layout Test Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 10px/1 Ahem;
+    margin: 10px;
+    background: grey;
+    writing-mode: vertical-rl;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .container > div {
+    background: cyan;
+    width: 100%;
+    height: 100%;
+  }
+
+  .directionRTL {
+    direction: rtl;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html
new file mode 100644
index 0000000000..e07223df2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container with scrollbars</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="match" href="grid-container-scrollbar-vertical-rl-001-ref.html">
+<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    font: 10px/1 Ahem;
+    margin: 10px;
+    writing-mode: vertical-rl;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .grid > div {
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-001.html
new file mode 100644
index 0000000000..43b62a9316
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: Grid container's height with scrollbars</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#overflow"/>
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=583743"/>
+<link rel="match" href="../reference/grid-container-scrollbars-sizing-001-ref.html">
+<meta name="assert" content="This test ensures that the grid container considers the scrollbar when computing the logical height."/>
+<style>
+html {
+  overflow-x: scroll;
+}
+.grid {
+  display: grid;
+  float: left;
+  overflow-y: scroll;
+  overflow-x: scroll;
+}
+.item {
+  background: lime;
+  width: 100px;
+  height: 100px;
+}
+</style>
+<p>This test passes if you see a 100x100px green box and scrollbars are disabled.</p>
+<div class="grid">
+    <div class="item">item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-002.html
new file mode 100644
index 0000000000..99cc5ee771
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: Intrinsic logical width with scrollbars</title>
+<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com">
+<link rel="issue" href="https://codereview.chromium.org/535913002"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#overflow"/>
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="match" href="../reference/grid-container-scrollbars-sizing-002-ref.html">
+<meta name="assert" content="This test ensures that the grid container considers the scrollbars when computing the intrinsic logical widths."/>
+
+<style>
+.grid, .inline-grid {
+  overflow: scroll;
+}
+.gridItem {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+<div class='grid fit-content'>
+  <span class='gridItem'></span>
+</div>
+<div class='grid fit-content' style='overflow-y: hidden'>
+  <span class='gridItem'></span>
+</div>
+<div class='inline-grid fit-content'>
+  <span class='gridItem'></span>
+</div>
+<div class='inline-grid fit-content' style='overflow-y: hidden'>
+  <span class='gridItem'></span>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html
new file mode 100644
index 0000000000..38759c2c61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: min|max-content sizing constraints on grid containers</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#intrinsic-sizes">
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#sizing-values">
+<meta name="assert" content="The test checks the intrinsic size of a grid container when sized under different constraints. In inline axis min|max-content have some effect, however in block axis they behave as auto.">
+<style>
+  .grid {
+    display: grid;
+    float: left;
+    background: lime;
+  }
+
+  .grid-columns-minmax-50-100 {
+    grid-template-columns: minmax(50px, 100px);
+  }
+
+  .grid-columns-minmax-100-200 {
+    grid-template-columns: minmax(100px, 200px);
+  }
+
+  .grid-rows-minmax-50-100 {
+    grid-template-rows: minmax(50px, 100px);
+  }
+
+  .min-content {
+    width: min-content;
+    height: min-content;
+  }
+
+  .max-content {
+    width: max-content;
+    height: max-content;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid');">
+
+  <div id="log"></div>
+
+  <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+    data-expected-width="100" data-expected-height="100"></div>
+
+  <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+    data-expected-width="100" data-expected-height="100"></div>
+
+  <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+    data-expected-width="100" data-expected-height="100"></div>
+
+  <div class="min-content">
+    <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+  </div>
+
+  <div class="max-content">
+    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+  </div>
+
+  <div style="writing-mode: vertical-lr;">
+
+    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="min-content">
+      <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="max-content">
+      <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+  </div>
+
+  <div style="writing-mode: vertical-rl;">
+
+    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="min-content">
+      <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="max-content">
+      <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+  </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-display-grid-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-grid-001.html
new file mode 100644
index 0000000000..3599aa9604
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-grid-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'grid' value for 'display' property</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-18 -->
+<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.xht">
+<meta name="flags" content="ahem">
+<meta name="assert" content="This test checks that 'grid' value for 'display' property generates a block level containing box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #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;
+  }
+</style>
+<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">
+  <span>firs</span>
+  <span>seco</span>
+</div>
+<div class="test-grid-overlapping-green">
+  <span>firs</span>
+  <span>seco</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-display-inline-grid-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-inline-grid-001.html
new file mode 100644
index 0000000000..30104e4220
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-inline-grid-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'inline-grid' value for 'display' property</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-18 -->
+<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.xht">
+<meta name="assert" content="This test checks that 'inline-grid' value for 'display' property generates an inline level containing box.">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-inline-grid-overlapping-green {
+    display: inline-grid;
+    background-color: green;
+    width: 50px;
+    height: 100px;
+  }
+</style>
+<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><div class="test-inline-grid-overlapping-green"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-001.html
new file mode 100644
index 0000000000..66eb427cfb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container.">
+<style>
+  .grid {
+    display: grid;
+    color: green;
+  }
+
+  .grid::first-letter {
+    color: red;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-002.html
new file mode 100644
index 0000000000..27aa0256da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  .grid {
+    display: grid;
+    color: green;
+  }
+
+  body::first-letter {
+    color: red;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-003.html
new file mode 100644
index 0000000000..9d9a0c7589
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  .grid {
+    display: grid;
+  }
+
+  .item::first-letter {
+    color: green;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-001.html
new file mode 100644
index 0000000000..9f154eee27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container.">
+<style>
+  .grid {
+    display: grid;
+    color: green;
+  }
+
+  .grid::first-line {
+    color: red;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-002.html
new file mode 100644
index 0000000000..ea87c875fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  .grid {
+    display: grid;
+    color: green;
+  }
+
+  body::first-line {
+    color: red;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-003.html
new file mode 100644
index 0000000000..ede9901e8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  .grid {
+    display: grid;
+    color: red;
+  }
+
+  .item::first-line {
+    color: green;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-float-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-001.html
new file mode 100644
index 0000000000..521a3bd6cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'float' has no effect on grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-01-03 -->
+<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/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .test-overlapping-green {
+    background-color: green;
+    width: 100px;
+    height: 50px;
+  }
+
+  .float-left {
+    float: left;
+  }
+</style>
+<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 float-left"></div>
+  <div class="test-overlapping-green"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-float-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-002.html
new file mode 100644
index 0000000000..2a849df25c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-002.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid Layout Test: 'float' and 'clear' have no effect on a grid item.</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-containers"/>
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=79180"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/alignment.css" rel="stylesheet"/>
+<meta name="assert" content="This test ensures that the grid's items are not affected by the 'float' and 'clear' properties."/>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+.container {
+  background-color:grey;
+}
+
+.gridItem {
+  width: 50px;
+  height: 50px;
+}
+</style>
+<body onload="checkLayout('.container')">
+
+<div style="position: relative">
+  <div class="container grid justifyContentStart">
+    <div style="float: right;" class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    <div class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    <div style="float: left;" class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    <div style="float: left;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+    <div style="clear: both;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+    <div style="float: left;" class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-001.html
new file mode 100644
index 0000000000..31eab4ba69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.xht">
+<style>
+  #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>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002-ref.html
new file mode 100644
index 0000000000..070980ed27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.cell {
+  width: 50px;
+  height: auto;
+  min-height: 50px
+}
+
+.invisibleFont {
+  color: lime;
+}
+
+.floatLeft {
+  float: left;
+}
+
+.clearLeft {
+  clear: left;
+}
+
+.relative {
+  position: relative;
+}
+</style>
+</head>
+
+<body>
+
+<div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div>
+
+<div>
+  <div class="cell relative floatLeft firstRowFirstColumn">
+    <div>Float</div>
+    <div>Float</div>
+    <div>Float</div>
+    <div>Float</div>
+  </div>
+  <div class="cell floatLeft firstRowSecondColumn">
+    <div class="invisibleFont">Float</div>
+    <div class="invisibleFont">Float</div>
+    <div class="invisibleFont">Float</div>
+    <div class="invisibleFont">Float</div>
+  </div>
+  <div class="cell floatLeft clearLeft secondRowFirstColumn"></div>
+  <div class="cell floatLeft secondRowSecondColumn"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002.html
new file mode 100644
index 0000000000..9c26e02105
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: floats do not protrude content onto grid items</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=430100">
+<link rel="match" href="grid-floats-no-intrude-002-ref.html">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<meta name="assert" content="Test that a grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item." />
+
+<style>
+.grid {
+  grid-auto-columns: minmax(50px, max-content);
+  grid-auto-rows: minmax(50px, max-content);
+}
+
+.floatChild {
+  float: left;
+  clear: both;
+}
+</style>
+</head>
+
+<body>
+
+<div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div>
+
+<div class="grid fit-content">
+  <div class="firstRowFirstColumn">
+    <div class="floatChild">Float</div>
+    <div class="floatChild">Float</div>
+    <div class="floatChild">Float</div>
+    <div class="floatChild">Float</div>
+  </div>
+  <div class="firstRowSecondColumn"></div>
+  <div class="secondRowFirstColumn"></div>
+  <div class="secondRowSecondColumn"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-flex-content-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-flex-content-001.html
new file mode 100644
index 0000000000..99b04e062f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-flex-content-001.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<title>CSS Grid: grid gutters and flex content.</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/>
+<meta name="assert" content="Check that gutters do not interfere with flex content resolution for columns or with content sized tracks."/>
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/>
+<style>
+.gridPercentAndFlexContent { grid-template: 50px / 50% minmax(30px, 2fr); }
+.gridTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
+.gridIgnoreSecondGridItem { grid-template: 50px / minmax(300px, 3fr) minmax(150px, 1fr); }
+
+.gridRowsPercentAndFlexContent { grid-template: minmax(30px, 2fr) 50% / 50px; }
+.gridRowsTwoMaxFlexContent { grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; }
+.gridRowsTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
+
+.gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: min-content minmax(20px, min-content) 2fr; }
+.gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: max-content minmax(20px, max-content) 1fr; }
+
+div.grid > div { font: 10px/1 Ahem; }
+
+.gridRowColumnGaps {
+    grid-row-gap: 33px;
+    grid-column-gap: 19px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+    setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<!-- Check that gutters do not interfere with flex content resolution for columns -->
+
+<div style="width: 120px; height: 10px;">
+    <div class="grid gridTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="81" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="width: 570px; height: 10px;">
+    <div class="grid gridIgnoreSecondGridItem gridRowColumnGaps" data-expected-width="570" data-expected-height="50">
+        <div class="firstRowFirstColumn" data-expected-width="401" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="width: 120px; height: 10px;">
+    <div class="grid gridPercentAndFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn" data-expected-width="41" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with flex content resolution for rows -->
+
+<div style="width: 10px; height: 60px">
+    <div class="grid gridRowsTwoMaxFlexContent gridRowColumnGaps" style="height: 100%" data-expected-width="10" data-expected-height="60">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="17"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 60px">
+    <div class="grid gridRowsTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="10" data-expected-height="63">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="width: 10px;">
+    <div class="grid gridRowsPercentAndFlexContent gridRowColumnGaps" style="height: 150px" data-expected-width="10" data-expected-height="150">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="42"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with flex content resolution with content sized tracks -->
+
+<div style="position: relative; width: 100px;">
+    <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149">
+    <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div>
+    <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100">XXX XXX XXX</div>
+    <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="40">XXXX XXXX</div>
+        <div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-expected-height="0"></div>
+    </div>
+</div>
+
+<div style="position: relative; width: 100px;">
+    <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="139">
+    <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div>
+    <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109">XXX XXX XXX</div>
+    <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="90">XXXX XXXX</div>
+        <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data-expected-height="0"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-tracks-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-tracks-001.html
new file mode 100644
index 0000000000..caa83e1d8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-tracks-001.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<title>CSS Grid: grid gutters and tracks.</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/>
+<meta name="assert" content="Check that gutters contribute to the size of the grid containers and spanning items, and do not alter grid items positioning, margin computation and track sizing."/>
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
+<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/>
+<style>
+body { margin: 0px; }
+
+.grid { padding: 3px 7px 5px 1px; border: solid yellow 1px; }
+
+.normalGap { grid-gap: normal; }
+
+.gridGap { grid-gap: 16px; }
+
+.gridRowColumnGaps {
+    grid-row-gap: 12px;
+    grid-column-gap: 23px;
+}
+
+.gridMultipleCols { grid-template-columns: 30px minmax(10px, 50px) 80px; }
+.gridMultipleRows { grid-template-rows: 90px 70px min-content; }
+.gridAutoAuto { grid-template: auto auto / auto auto; }
+.gridMultipleFixed { grid-template: [first] 37px [foo] 57px [bar] 77px [last] / [first] 15px [foo] 25px [bar] 35px [last]; }
+.gridFixed100 { grid-template: repeat(2, 100px) / repeat(2, 100px); }
+.gridWithPercent { grid-template-columns: 10px 20% repeat(2, 30px); }
+.gridWithDoublePercent { grid-template-columns: 60% 40%; }
+.gridWithRowPercent { grid-template: 10px 20% 30px / 20px; }
+.gridWithRowDoublePercent { grid-template: 60% 40% / 20px; }
+
+.width220 { width: 220px; }
+.height100 { height: 100px; }
+.gridAutoRows20 { grid-auto-rows: 20px; }
+
+.thirdRowThirdColumn { grid-area: 3 / 3; }
+.firstRowThirdColumn { grid-area: 1 / 3; }
+
+div.grid > div { font: 10px/1 Ahem; }
+
+.gridItemMargins {
+    margin: 20px 30px 40px 50px;
+    width: 20px;
+    height: 40px;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+    setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<!-- Check that gutters contribute to the size of the grid containers. -->
+
+<div style="position: relative;">
+    <div class="grid normalGap gridMultipleCols fit-content" data-expected-width="170" data-expected-height="10"></div>
+    <div class="grid normalGap gridMultipleRows" style="width: 400px" data-expected-width="410" data-expected-height="170"></div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridRowColumnGaps fit-content" data-expected-width="103" data-expected-height="62">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="10">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="26" data-expected-width="50" data-expected-height="30">XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleCols gridRowColumnGaps fit-content" data-expected-width="216" data-expected-height="94">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="30" data-expected-height="10">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="26" data-expected-width="50" data-expected-height="20">XX<br>XX XX</div>
+        <div class="thirdRowThirdColumn" data-offset-x="128" data-offset-y="58" data-expected-width="80" data-expected-height="30">XXXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleRows gridRowColumnGaps fit-content" data-expected-width="196" data-expected-height="224">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="90">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="106" data-expected-width="50" data-expected-height="70">XX<br>XX XX</div>
+        <div class="thirdRowThirdColumn" data-offset-x="118" data-offset-y="188" data-expected-width="70" data-expected-height="30">XXXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<!-- Check that gutters do not alter grid items positioning. -->
+<div style="position: relative">
+    <div class="grid gridMultipleFixed gridRowColumnGaps">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="15" data-expected-height="37">X X X</div>
+        <div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="53" data-expected-width="25" data-expected-height="57">X X</div>
+        <div class="thirdRowThirdColumn" data-offset-x="88" data-offset-y="122" data-expected-width="35" data-expected-height="77">XXX XX X XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleFixed gridRowColumnGaps">
+        <div style="grid-row: 2; grid-column: -2 / -1;" data-offset-x="88" data-offset-y="53" data-expected-width="35" data-expected-height="57">X X X</div>
+        <div style="grid-row: 1 / bar; grid-column: bar" data-offset-x="88" data-offset-y="4" data-expected-width="35" data-expected-height="106">X XX X XX XX XX X</div>
+        <div style="grid-row: -2; grid-column-end: foo" data-offset-x="2" data-offset-y="122" data-expected-width="15" data-expected-height="77">X X</div>
+    </div>
+</div>
+
+<!-- Check that gutters do not alter track sizing. -->
+<div style="position: relative">
+    <div class="grid gridRowColumnGaps fit-content" data-expected-width="166" data-expected-height="94">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="10">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="26" data-expected-width="30" data-expected-height="20">X X<br>X X</div>
+        <div class="thirdRowThirdColumn" data-offset-x="98" data-offset-y="58" data-expected-width="60" data-expected-height="30">XXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridRowColumnGaps gridMultipleCols gridMultipleRows fit-content" data-expected-width="216" data-expected-height="224">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="30" data-expected-height="90">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="106" data-expected-width="50" data-expected-height="70">X X<br>X X</div>
+        <div class="thirdRowThirdColumn" data-offset-x="128" data-offset-y="188" data-expected-width="80" data-expected-height="30">XXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridWithPercent width220 gridRowColumnGaps gridAutoRows20" data-expected-width="230" data-expected-height="94">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="10" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="35" data-offset-y="36" data-expected-width="44" data-expected-height="20"></div>
+        <div class="thirdRowThirdColumn" data-offset-x="102" data-offset-y="68" data-expected-width="30" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridWithRowPercent gridRowColumnGaps width220 height100" data-expected-width="230" data-expected-height="110">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="10"></div>
+        <div class="secondRowFirstColumn" data-offset-x="2" data-offset-y="26" data-expected-width="20" data-expected-height="20"></div>
+        <div class="thirdRowAutoColumn" data-offset-x="2" data-offset-y="58" data-expected-width="20" data-expected-height="30"></div>
+    </div>
+</div>
+
+<!-- Check that gutters contribute to the size of spanning items. -->
+<div style="position: relative">
+    <div class="grid gridGap gridAutoAuto constrainedContainer">
+        <div class="secondRowBothColumn" data-offset-x="2" data-offset-y="30" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="17" data-expected-height="10">X</div>
+        <div class="firstRowSecondColumn" data-offset-x="35" data-offset-y="4" data-expected-width="17" data-expected-height="10">X</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleFixed gridRowColumnGaps">
+        <div style="grid-row: 2; grid-column: 1 / -1;" data-offset-x="2" data-offset-y="53" data-expected-width="121" data-expected-height="57">XXXX X XXXX</div>
+        <div style="grid-row: first / last; grid-column-start: 2" data-offset-x="40" data-offset-y="4" data-expected-width="25" data-expected-height="195">X XX X XX X</div>
+        <div style="grid-row: 1 / 3; grid-column: first / bar" data-offset-x="2" data-offset-y="4" data-expected-width="63" data-expected-height="106">XXX XX<br>XX<br>XXXXX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridWithDoublePercent width220 gridRowColumnGaps gridAutoRows20" data-expected-width="230" data-expected-height="62">
+        <div class="firstRowFirstColumn sizedToGridArea" data-offset-x="2" data-offset-y="4" data-expected-width="132" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn sizedToGridArea" data-offset-x="157" data-offset-y="36" data-expected-width="88" data-expected-height="20"></div>
+        <div class="secondRowBothColumn sizedToGridArea" data-offset-x="2" data-offset-y="36" data-expected-width="243" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridWithRowDoublePercent gridRowColumnGaps width220 height100" data-expected-width="230" data-expected-height="110">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="60"></div>
+        <div class="secondRowFirstColumn" data-offset-x="2" data-offset-y="76" data-expected-width="20" data-expected-height="40"></div>
+        <div class="bothRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="112"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with margins computation. -->
+<div style="position: relative">
+    <div class="grid gridFixed100 gridGap">
+        <div class="gridItemMargins firstRowFirstColumn" data-offset-x="52" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins firstRowSecondColumn" data-offset-x="168" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowFirstColumn" data-offset-x="52" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowSecondColumn" data-offset-x="168" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridFixed100 verticalRL directionRTL gridGap">
+        <div class="gridItemMargins firstRowFirstColumn" data-offset-x="168" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins firstRowSecondColumn" data-offset-x="168" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowFirstColumn" data-offset-x="52" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowSecondColumn" data-offset-x="52" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-as-percentage-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-as-percentage-001.html
new file mode 100644
index 0000000000..651f4278f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-as-percentage-001.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<title>CSS Grid: grid gutters as percentage.</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/>
+<meta name="assert" content="Check that when 'height' is indefinite, row gaps should be based on grid's 'auto' height."/>
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
+<link rel="stylesheet" href="/css/support/height-keyword-classes.css"/>
+<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/>
+<style>
+body { margin: 0; }
+.grid { font: 10px/1 Ahem; position: relative; }
+.widthAuto { width: auto; }
+.heightAuto { height: auto; }
+.width400 { width: 400px; }
+.width200 { width: 200px; }
+.height200 { height: 200px; }
+.height100 { height: 100px; }
+.columns100-100 { grid-template-columns: 100px 100px; }
+.rows50-50 { grid-template-rows: 50px 50px; }
+.autoRepeat { grid-template: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); }
+.columnGap10Percent { grid-column-gap: 10% }
+.rowGap20Percent { grid-row-gap: 20% }
+.positioned { position: absolute; width: 100%; height: 100%; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+    setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div id="log"></div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
+<div class="width400">
+    <div class="grid columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="20">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="180" data-expected-height="10">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="220" data-offset-y="0"  data-expected-width="180" data-expected-height="10">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="14" data-expected-width="180" data-expected-height="10">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="14" data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p>
+<div class="width400">
+    <div class="grid fit-content heightAuto columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="80"  data-expected-height="20">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="20">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="28" data-expected-width="80"  data-expected-height="20">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="28" data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
+<div class="width400">
+    <div class="grid fit-content widthAuto columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="20">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="180" data-expected-height="10">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="220" data-offset-y="0"  data-expected-width="180" data-expected-height="10">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="14" data-expected-width="180" data-expected-height="10">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="14" data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p>
+<div class="width400">
+    <div class="grid fit-content columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="80"  data-expected-height="20">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="20">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="28" data-expected-width="80"  data-expected-height="20">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="28" data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
+<div class="width400">
+     <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
+         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+         <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+         <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+     </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'intrinsic' width, which reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
+<div class="width400">
+     <div class="grid fit-content heightAuto columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
+         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+         <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+         <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+     </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
+<div class="width400">
+     <div class="grid fit-content widthAuto columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
+         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+         <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+         <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+     </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, but they will reduce the available space for tracks; however, since the container's specified inline size is not enough, first column's width is reduced and height increased to let its content to fit.</p>
+<div class="width400">
+    <div class="grid width200 height100 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="80"  data-expected-height="40">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="40">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="60" data-expected-width="80"  data-expected-height="40">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="60" data-expected-width="100" data-expected-height="40">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, but they will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
+<div class="width400">
+    <div class="grid width400 height200 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"   data-expected-width="180" data-expected-height="80">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="220" data-offset-y="0"   data-expected-width="180" data-expected-height="80">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="120" data-expected-width="180" data-expected-height="80">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="120" data-expected-width="180" data-expected-height="80">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
+<div class="width400">
+    <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and fit.</p>
+<div class="width400">
+    <div class="grid width400 height200 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="90" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, only 1 repeteation is allowed, so tracks are adjusted to fit in the intrinsic size reduced by the gaps.</p>
+<div class="width400">
+    <div class="grid fit-content autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="70">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="80" data-expected-height="50">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="64" data-expected-width="100" data-expected-height="20">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="64" data-expected-width="80" data-expected-height="20">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, repeat auto-fill allows all of them to fit.</p>
+<div class="">
+    <div class="grid width400 height200 autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="firstRowThirdColumn"  data-offset-x="280" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="90" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+        <div class="secondRowThirdColumn" data-offset-x="280" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, repeat auto-fill allows only 1 repetition.</p>
+<div class="">
+    <div class="grid width200 height100 autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="80" data-expected-height="50">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="30">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="80" data-expected-height="30">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Grid with positioned items. Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
+<div class="width400">
+    <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
+        <div class="positioned onlyFirstRowOnlyFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="positioned onlyFirstRowOnlySecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="positioned onlySecondRowOnlyFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+        <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Grid with positioned items. Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
+<div class="">
+    <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
+        <div class="positioned onlyFirstRowOnlyFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="positioned onlyFirstRowOnlySecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="positioned onlySecondRowOnlyFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+        <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-001.html
new file mode 100644
index 0000000000..bc62c1770d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  .inline-grid {
+    display: inline-grid;
+    color: green;
+  }
+
+  .grid::first-letter {
+    color: red;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-002.html
new file mode 100644
index 0000000000..afdc0de9a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  .inline-grid {
+    display: inline-grid;
+    color: green;
+  }
+
+  body::first-letter {
+    color: red;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-003.html
new file mode 100644
index 0000000000..e3efd51007
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  .inline-grid {
+    display: inline-grid;
+  }
+
+  .item::first-letter {
+    color: green;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-001.html
new file mode 100644
index 0000000000..2df3d559c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  .inline-grid {
+    display: inline-grid;
+    color: green;
+  }
+
+  .inline-grid::first-line {
+    color: red;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-002.html
new file mode 100644
index 0000000000..efdee52d3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  .inline-grid {
+    display: inline-grid;
+    color: green;
+  }
+
+  body::first-line {
+    color: red;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-003.html
new file mode 100644
index 0000000000..2b9c3ca0f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  .inline-grid {
+    display: inline-grid;
+    color: red;
+  }
+
+  .item::first-line {
+    color: green;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-float-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-float-001.html
new file mode 100644
index 0000000000..8222897e4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-float-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'float' has no effect on grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-01-03 -->
+<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/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .inline-grid {
+    display: inline-grid;
+  }
+
+  .test-overlapping-green {
+    background-color: green;
+    width: 100px;
+    height: 50px;
+  }
+
+  .float-left {
+    float: left;
+  }
+</style>
+<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 float-left"></div>
+  <div class="test-overlapping-green"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-floats-no-intrude-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-floats-no-intrude-001.html
new file mode 100644
index 0000000000..b15aabab06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-floats-no-intrude-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.xht">
+<style>
+  #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>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-margins-no-collapse-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-margins-no-collapse-001.html
new file mode 100644
index 0000000000..4260fe89f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-margins-no-collapse-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  body {
+    display: inline-grid;
+  }
+
+  p {
+    color: green;
+  }
+</style>
+<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-multicol-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-multicol-001.html
new file mode 100644
index 0000000000..3e51b16f5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-multicol-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.xht">
+<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>
+  #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;
+    column-width: 50px;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-vertical-align-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-vertical-align-001.html
new file mode 100644
index 0000000000..7dbf11c7ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-vertical-align-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'vertical-align' has no effect on grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-12-10 -->
+<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/CSS21/visudet.html#propdef-vertical-align" title="10.8.1 Leading and half-leading">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #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;
+  }
+
+  #vertical-align {
+    vertical-align: 125px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div id="test-inline-grid-overlapping-green">
+  <span>1s</span>
+  <span id="vertical-align">2n</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-letter-001.html
new file mode 100644
index 0000000000..32206794c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-letter-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' is valid in 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">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter">
+<meta name="assert" content="The test checks that grid items accept first-letter pseudo-element.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+  .item::first-letter { line-height: 100px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid,.inline-grid');">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="item" data-expected-height=100>The first item.</div>
+  <div class="item" data-expected-height=100>The second item.</div>
+</div>
+
+<div class="inline-grid">
+  <div class="item" data-expected-height=100>The first item.</div>
+  <div class="item" data-expected-height=100>The second item.</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-line-001.html
new file mode 100644
index 0000000000..a6c8d2df45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-line-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-line' is valid in 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">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line">
+<meta name="assert" content="The test checks that grid items accept first-line pseudo-element.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+  .item::first-line { line-height: 100px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid,.inline-grid');">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="item" data-expected-height=100>The first item.</div>
+  <div class="item" data-expected-height=100>The second item.</div>
+</div>
+
+<div class="inline-grid">
+  <div class="item" data-expected-height=100>The first item.</div>
+  <div class="item" data-expected-height=100>The second item.</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-item-hit-test.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-hit-test.html
new file mode 100644
index 0000000000..6d1ae5bf0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-hit-test.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1029371">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div style="display: grid;">
+  <div style="height: 100px;">
+    <div style="float: left; width: 50%; height: 400px; background: hotpink;"></div>
+  </div>
+  <div id="target" style="height: 100px; background: cyan;"></div>
+</div>
+<script>
+test(() => {
+  assert_equals(document.elementFromPoint(150, 150), document.getElementById('target'));
+});
+</script>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-001.html
new file mode 100644
index 0000000000..bb81546678
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-001.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<title>CSS Grid: Do not add non-children of the grid into the grid container</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://crbug.com/313293">
+<link rel="match" href="reference/grid-layout-stale-001-ref.html">
+<meta name="assert" content="Check that we do not add non-children of the grid into the grid representation."/>
+
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+  embed { position: absolute; }
+  .c1 { animation-delay: 45762s; }
+</style>
+
+<p>This test passes if it doesn't crash and it matches the reference.</p>
+<div style="display: grid;">
+    <embed type="something-not-js">
+</div>
+
+<script>
+function keyPress(key) {
+  let actions = new test_driver.Actions()
+    .keyDown(key)
+    .keyUp(key);
+
+  return actions.send();
+}
+function crash() {
+  var highlight = document.createElementNS("http://www.w3.org/1999/xhtml", "highlight");
+  highlight.setAttribute("class", "c1");
+  document.body.appendChild(highlight);
+
+  for (i=0; i != 8; i++)
+    keyPress("\t");
+  keyPress("X");
+}
+
+document.addEventListener("DOMContentLoaded", crash, false);
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-002.html
new file mode 100644
index 0000000000..ea11cd5c5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-002.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSS Grid: Do not leave stale pointers into the grid container</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://crbug.com/313293">
+<link rel="match" href="reference/grid-layout-stale-002-ref.html">
+<meta name="assert" content="Check that we don't leave stale pointers into the internal grid representation."/>
+
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<p>This test passes if it doesn't crash and it matches the reference.</p>
+<span style="display: grid" contenteditable=plaintext-only></span>
+<script>
+function keyPress(key) {
+  let actions = new test_driver.Actions()
+    .keyDown(key)
+    .keyUp(key);
+
+  return actions.send();
+}
+function crash() {
+    keyPress("\t");
+    keyPress("X");
+    document.designMode = 'on';
+    document.execCommand("InsertHTML", false, "<div>");
+}
+document.addEventListener("DOMContentLoaded", crash, false);
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-001.html
new file mode 100644
index 0000000000..764cca9ced
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.html">
+<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>
+  body {
+    display: grid;
+  }
+
+  p {
+    color: green;
+  }
+</style>
+<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002-ref.html
new file mode 100644
index 0000000000..ce56a56645
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/css/support/grid.css">
+
+<div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div>
+
+<div style="float: left">
+  <div><p>XXXXX</p></div>
+  <div style="float:left; margin:20px 0px;">XXXXX</div>
+  <div><p style="float:left; clear:both;">XXXXX</p></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002.html
new file mode 100644
index 0000000000..f644a6fb53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: grid items not collapsing</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=430100">
+<link rel="match" href="grid-margins-no-collapse-002-ref.html">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that grid item's margins do not collapse with its content's margins." />
+
+<div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div>
+
+<div style="display: grid;">
+  <div><p>XXXXX</p></div>
+  <div style="margin:20px 0px;">XXXXX</div>
+  <div><p>XXXXX</p></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-min-max-height-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-min-max-height-001.html
new file mode 100644
index 0000000000..28950e4973
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-min-max-height-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: min-height and max-height</title>
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="This test checks that min-height and max-height are accounted for when computing the grid container's height.">
+<style>
+.minHeightGrid {
+    min-height: 100px;
+    grid-template-columns: 40px;
+    grid-template-rows: 50px;
+}
+.maxHeightGrid {
+    max-height: 100px;
+    grid-template-columns: 40px;
+    grid-template-rows: 150px 50px;
+}
+
+.minHeightAutoGrid {
+    min-height: 100px;
+}
+
+.maxHeightAutoGrid {
+    max-height: 100px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<div class="constrainedContainer">
+    <div class="grid minHeightGrid" data-expected-height="100" data-expected-width="10"></div>
+    <div class="grid maxHeightGrid" data-expected-height="100" data-expected-width="10"></div>
+    <div class="grid minHeightAutoGrid" data-expected-height="100" data-expected-width="10"></div>
+    <div class="grid maxHeightAutoGrid" data-expected-height="0" data-expected-width="10"></div>
+
+    <div class="grid minHeightAutoGrid" data-expected-height="150" data-expected-width="10">
+        <div style="height: 150px"></div>
+    </div>
+    <div class="grid maxHeightAutoGrid" data-expected-height="100" data-expected-width="10">
+        <div style="height: 300px"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid minHeightGrid" data-expected-height="100" data-expected-width="1000"></div>
+    <div class="grid maxHeightGrid" data-expected-height="100" data-expected-width="1000"></div>
+    <div class="grid minHeightAutoGrid" data-expected-height="100" data-expected-width="1000"></div>
+    <div class="grid maxHeightAutoGrid" data-expected-height="0" data-expected-width="1000"></div>
+
+    <div class="grid minHeightAutoGrid" data-expected-height="150" data-expected-width="1000">
+        <div style="height: 150px"></div>
+    </div>
+    <div class="grid maxHeightAutoGrid" data-expected-height="100" data-expected-width="1000">
+        <div style="height: 300px"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-multicol-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-multicol-001.html
new file mode 100644
index 0000000000..553a33e6a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-multicol-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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.xht">
+<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>
+  #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;
+    column-width: 50px;
+  }
+</style>
+<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>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-001.html
new file mode 100644
index 0000000000..6c4a71031f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid padding 'overflowing' the grid container size</title>
+<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
+<link rel="author" title="Elika J Etemad" href="http://inkedblade.org/contact">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that scrollbars are shown when end-edge padding overflows the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px / 100px;
+       width: 100px;
+       height: 100px;
+       box-sizing: border-box;
+       padding: 0 50px 50px 0;
+       overflow: auto;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-002.html
new file mode 100644
index 0000000000..88bce26a98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas and padding 'overflowing' the grid container size</title>
+<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
+<link rel="author" title="Elika J Etemad" href="http://inkedblade.org/contact">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that scrollbars are shown when a combination of padding and the grid overflows the grid container, and that the padding is not applied to abspos positioning.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 120px / 120px;
+       width: 100px;
+       height: 100px;
+       box-sizing: border-box;
+       padding: 10px 20px 20px 10px;
+       overflow: auto;
+    }
+    .abspos {
+    	position: absolute;
+    	width: 10px;
+    	height: 10px;
+    	top: 140px;
+    	left: 140px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class=abspos></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-size-shrink-to-fit-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-size-shrink-to-fit-001.html
new file mode 100644
index 0000000000..4209af55fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-size-shrink-to-fit-001.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: shrink-to-fit behavior on grid containers</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes">
+<link rel="help" href="https://crbug.com/234204">
+<meta name="assert" content="This test checks that the shrink-to-fit behavior is applied to the float and out-of-flow positioned grid containers.">
+<style>
+.grid {
+    display: grid;
+    grid-template-columns: 200px 200px;
+    grid-template-rows: 200px 200px;
+}
+.container {
+    width: 600px;
+    height: 600px;
+}
+
+#absolutePos {
+   position: absolute;
+}
+
+#fixedPos {
+   position: fixed;
+}
+
+#floatPos {
+   float: left;
+}
+
+#one {
+    color: blue;
+    background: red;
+    grid-column: 1;
+    grid-row: 1;
+}
+
+#two {
+    color: yellow;
+    background: green;
+    grid-column: 2;
+    grid-row: 1;
+}
+#three {
+    color: gray;
+    background: pink;
+    grid-column: 1;
+    grid-row: 2;
+}
+#four {
+    color: orange;
+    background: brown;
+    grid-column: 2;
+    grid-row: 2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>The following grids should be 400px * 400px, except the first one which uses 'relative' positioning.</p>
+
+<div class="container">
+    <div class="grid" id="regularGrid" data-expected-height="400" data-expected-width="600">
+        <div id="one"></div>
+        <div id="two"></div>
+        <div id="three"></div>
+        <div id="four"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid" id="absolutePos" data-expected-height="400" data-expected-width="400">
+        <div id="one"></div>
+        <div id="two"></div>
+        <div id="three"></div>
+        <div id="four"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid" id="fixedPos" data-expected-height="400" data-expected-width="400">
+        <div id="one"></div>
+        <div id="two"></div>
+        <div id="three"></div>
+        <div id="four"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid" id="floatPos" data-expected-height="400" data-expected-width="400">
+        <div id="one"></div>
+        <div id="two"></div>
+        <div id="three"></div>
+        <div id="four"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-support-display-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-support-display-001.html
new file mode 100644
index 0000000000..c69d0e31b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-support-display-001.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: DOM support for 'grid' and 'inline-grid' 'display' values</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-18 -->
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<meta name="flags" content="dom">
+<meta name="assert" content="This test checks that 'grid' and 'inline-grid' values for 'display' property are supported so that DOM methods, specifically getComputedValue(), and its associated CSS2Properties interface, can fetch such 'display' values.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .grid {
+    display: grid;
+  }
+
+  .inline-grid {
+    display: inline-grid;
+  }
+</style>
+<div id="log"></div>
+
+<div id="style-grid" style="display: grid;"></div>
+<div id="style-inline-grid" style="display: inline-grid;"></div>
+
+<div id="css-grid" class="grid"></div>
+<div id="css-inline-grid" class="inline-grid"></div>
+
+<div id="js-grid"></div>
+<div id="js-inline-grid"></div>
+
+<script>
+  function testStyleDisplay(element, value) {
+    assert_equals(element.style.display, value, "Style display should be '" + value + "'");
+  }
+
+  function testComputedStyleDisplay(element, value) {
+    assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'");
+  }
+
+  var styleGrid = document.getElementById("style-grid");
+  test(function() {
+      testStyleDisplay(styleGrid, "grid");
+      testComputedStyleDisplay(styleGrid, "grid");
+    }, "Test style display 'grid'");
+
+  var styleInlineGrid = document.getElementById("style-inline-grid");
+  test(function() {
+      testStyleDisplay(styleInlineGrid, "inline-grid");
+      testComputedStyleDisplay(styleInlineGrid, "inline-grid");
+    }, "Test style display 'inline-grid'");
+
+  var cssGrid = document.getElementById("css-grid");
+  test(function() {
+      testComputedStyleDisplay(cssGrid, "grid");
+    }, "Test CSS display 'grid'");
+
+  var cssInlineGrid = document.getElementById("css-inline-grid");
+  test(function() {
+      testComputedStyleDisplay(cssInlineGrid, "inline-grid");
+    }, "Test CSS display 'inline-grid'");
+
+  var jsGrid = document.getElementById("js-grid");
+  jsGrid.style.display = "grid";
+  test(function() {
+      testStyleDisplay(jsGrid, "grid");
+      testComputedStyleDisplay(jsGrid, "grid");
+    }, "Test JavaScript display 'grid'");
+
+  var jsInlineGrid = document.getElementById("js-inline-grid");
+  jsInlineGrid.style.display = "inline-grid";
+  test(function() {
+      testStyleDisplay(jsInlineGrid, "inline-grid");
+      testComputedStyleDisplay(jsInlineGrid, "inline-grid");
+    }, "Test JavaScript display 'inline-grid'");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-vertical-align-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-vertical-align-001.html
new file mode 100644
index 0000000000..3536b3a8a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-vertical-align-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'vertical-align' has no effect on grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-12-10 -->
+<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/CSS21/visudet.html#propdef-vertical-align" title="10.8.1 Leading and half-leading">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #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;
+  }
+
+  #vertical-align {
+    vertical-align: 125px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div id="test-grid-overlapping-green">
+  <span>1s</span>
+  <span id="vertical-align">2n</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html
new file mode 100644
index 0000000000..ba8335873d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+       overflow: auto;
+    }
+    .item {
+       width: 150px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the horizontal scrollbar is visible.</p>
+<div class="box"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html
new file mode 100644
index 0000000000..61a346fe36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+       overflow: auto;
+    }
+    .item {
+       width: 150px;
+       height: 150px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="box"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html
new file mode 100644
index 0000000000..59fff1b955
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+       overflow: auto;
+    }
+    .item {
+       width: 50px;
+       height: 150px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the vertical scrollbar is visible.</p>
+<div class="box"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html
new file mode 100644
index 0000000000..0592f6d2ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="box"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/column-property-should-not-apply-on-grid-container-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/column-property-should-not-apply-on-grid-container-001-ref.html
new file mode 100644
index 0000000000..154cf02290
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/column-property-should-not-apply-on-grid-container-001-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+.grid, .inline-grid
+{
+  width: 20em;
+  font-kerning: none;
+}
+</style>
+
+<body>
+
+<div class='grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+<div class='inline-grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-001-ref.html
new file mode 100644
index 0000000000..3ade075c99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-001-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>CSS Grid: Do not add non-children of the grid into the grid container</title>
+
+<style>
+  embed { position: absolute; }
+  .c1 { animation-delay: 45762s; }
+</style>
+
+<p>This test passes if it doesn't crash and it matches the reference.</p>
+<div style="display: grid;">
+  <embed type="something-not-js">
+</div>
+<highlight class="c1"></highlight>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-002-ref.html
new file mode 100644
index 0000000000..5d4d996106
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-002-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<title>CSS Grid: Do not leave stale pointers into the grid container</title>
+<p>This test passes if it doesn't crash and it matches the reference.</p>
+<span style="display: grid" contenteditable=plaintext-only></span>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-grid/grid-model
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip