[css-grid] Import W3C Test Suite
This patch imports the CSS Grid Layout test suite from csswg-test repository.
Currently we're passing most of the but:
* grid-layout-properties.html: An old known bug (crbug.com/511177).
* grid-support-grid-template-areas-001.xht &
grid-inline-support-grid-template-areas-001.xht: Because of an issue
with testharness.js (crbug.com/687492).
Additionally I'm skipping the tests related to "Implied Minimum Size
of Grid Items" (https://drafts.csswg.org/css-grid/#min-size-auto),
because the test suite needs to be updated after the CSS WG resolves
the following issue: https://github.com/w3c/csswg-drafts/issues/283
See crbug.com/666940 for more details.
BUG=687494
Review-Url: https://codereview.chromium.org/2670473003
Cr-Commit-Position: refs/heads/master@{#447562}
diff --git a/third_party/WebKit/LayoutTests/TestExpectations b/third_party/WebKit/LayoutTests/TestExpectations
index f2659351..7f807f2 100644
--- a/third_party/WebKit/LayoutTests/TestExpectations
+++ b/third_party/WebKit/LayoutTests/TestExpectations
@@ -2065,9 +2065,25 @@
crbug.com/660295 inspector/elements/elements-panel-restore-selection-when-node-comes-later.html [ Pass Failure ]
+# [css-grid]
crbug.com/659610 fast/css-grid-layout/grid-baseline.html [ Failure ]
crbug.com/659610 fast/css-grid-layout/grid-baseline-margins.html [ Failure ]
-
+crbug.com/687492 external/csswg-test/css-grid-1/grid-definition/grid-inline-support-grid-template-areas-001.xht [ Failure ]
+crbug.com/687492 external/csswg-test/css-grid-1/grid-definition/grid-support-grid-template-areas-001.xht [ Failure ]
+crbug.com/511177 external/csswg-test/css-grid-1/grid-layout-properties.html [ Failure ]
+# TODO(rego): Skipping tests related to "Implied Minimum Size of Grid Items"
+# because the test suite needs to be updated after the CSS WG resolves
+# the following issue: https://github.com/w3c/csswg-drafts/issues/283
+# See crbug.com/666940 for more details.
+crbug.com/666940 external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-001.xht [ Skip ]
+crbug.com/666940 external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-002.xht [ Skip ]
+crbug.com/666940 external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-003.xht [ Skip ]
+crbug.com/666940 external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-004.xht [ Skip ]
+crbug.com/666940 external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-005.xht [ Skip ]
+crbug.com/666940 external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-006.xht [ Skip ]
+crbug.com/666940 external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-007.xht [ Skip ]
+crbug.com/666940 external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-008.xht [ Skip ]
+crbug.com/666940 external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-009.xht [ Skip ]
# TODO(chrishall): this is a temporary mediation step as part of the P0 issue crbug.com/657646
# this is not meant to be here for more than a few days (from 2016-11-03 SYD)
diff --git a/third_party/WebKit/LayoutTests/W3CImportExpectations b/third_party/WebKit/LayoutTests/W3CImportExpectations
index ac50f964..15caad1 100644
--- a/third_party/WebKit/LayoutTests/W3CImportExpectations
+++ b/third_party/WebKit/LayoutTests/W3CImportExpectations
@@ -29,7 +29,8 @@
# external/csswg-test/css-flexbox-1 [ Pass ]
external/csswg-test/css-fonts-3 [ Skip ]
external/csswg-test/css-gcpm-3 [ Skip ]
-external/csswg-test/css-grid-1 [ Skip ]
+## Owners: rego@igalia.com
+# external/csswg-test/css-grid-1 [ Pass ]
external/csswg-test/css-images-3 [ Skip ]
external/csswg-test/css-lists-3 [ Skip ]
external/csswg-test/css-masking-1 [ Skip ]
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/README.md b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/README.md
new file mode 100644
index 0000000..59e9c081
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/README.md
@@ -0,0 +1,36 @@
+CSS Grid Layout Module Level 1 Test Suite
+-----------------------------------------
+
+Directory containing the CSS Grid Layout spec test suite.
+
+This suite is structured in different folders for each section of the spec
+(the name of the folders corresponds to the "id" of each section):
+
+* [3 Grid Containers](https://drafts.csswg.org/css-grid-1/#grid-model):
+ `grid-model`
+* [4 Grid Items](https://drafts.csswg.org/css-grid-1/#grid-items):
+ `grid-items`
+* [5 The Explicit Grid](https://drafts.csswg.org/css-grid-1/#grid-definition):
+ `grid-definition`
+* [6 The Implicit Grid](https://drafts.csswg.org/css-grid-1/#implicit-grids):
+ `implicit-grids`
+* [7 Grid Definition Shorthand](https://drafts.csswg.org/css-grid-1/#grid-shorthand):
+ `grid-shorthand`
+* [8 Clamping Overlarge Grids](https://drafts.csswg.org/css-grid-1/#overlarge-grids):
+ `overlarge-grids`
+* [9 Placing Grid Items](https://drafts.csswg.org/css-grid-1/#placement):
+ `placement`
+* [10 Absolute Positioning](https://drafts.csswg.org/css-grid-1/#abspos):
+ `abspos`
+* [11 Alignment and Spacing](https://drafts.csswg.org/css-grid-1/#alignment):
+ `alignment`
+* [12 Grid Sizing](https://drafts.csswg.org/css-grid-1/#layout-algorithm):
+ `layout-algorithm`
+* [13 Fragmenting Grid Layout](https://drafts.csswg.org/css-grid-1/#pagination):
+ `pagination`
+
+Links:
+
+* [Spec Editor's Draft](https://drafts.csswg.org/css-grid-1/)
+* [Test Plan](http://test.csswg.org/source/css-grid-1/test-plan/)
+* [Test Suite](http://test.csswg.org/suites/css-grid-1_dev/nightly-unstable/)
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit-expected.html
new file mode 100644
index 0000000..e7999ae
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit-expected.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS3 Grid Layout: Reference File</title>
+ <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+ <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 -->
+ <style type="text/css">
+ #container {
+ position:relative;
+ width:400px;
+ height:100px;
+ }
+
+ .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:first-child td {
+ height:30px;
+ }
+ </style>
+</head>
+<body>
+<p>Test passes if there is a green square and no red.</p>
+
+<div id="container">
+ <div class="error">
+ <table id="table">
+ <tbody>
+ <tr>
+ <td>cell1</td>
+ <td>cell2</td>
+ </tr>
+ <tr>
+ <td>cell3</td>
+ <td style="background-color:green">cell4</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+</body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit-with-percentage-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit-with-percentage-expected.html
new file mode 100644
index 0000000..e7999ae
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit-with-percentage-expected.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS3 Grid Layout: Reference File</title>
+ <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+ <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 -->
+ <style type="text/css">
+ #container {
+ position:relative;
+ width:400px;
+ height:100px;
+ }
+
+ .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:first-child td {
+ height:30px;
+ }
+ </style>
+</head>
+<body>
+<p>Test passes if there is a green square and no red.</p>
+
+<div id="container">
+ <div class="error">
+ <table id="table">
+ <tbody>
+ <tr>
+ <td>cell1</td>
+ <td>cell2</td>
+ </tr>
+ <tr>
+ <td>cell3</td>
+ <td style="background-color:green">cell4</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+</body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit-with-percentage.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit-with-percentage.html
new file mode 100644
index 0000000..9e6ec9f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit-with-percentage.html
@@ -0,0 +1,102 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS3 Grid Layout: Flexible Lenght</title>
+ <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+ <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 -->
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit"/>
+ <link rel="match" href="../reference/fr-unit-with-percentage-ref.html">
+ <style type="text/css">
+ #container {
+ position:relative;
+ width:400px;
+ height:100px;
+ }
+
+ #grid {
+ display:grid;
+ grid-template-columns:1fr 75%;
+ grid-template-rows:1fr 70%;
+ width:100%;
+ height:100%;
+ }
+
+ #cell1 {
+ grid-column:1;
+ grid-row:1;
+ }
+
+ #cell2 {
+ grid-column:2;
+ grid-row:1;
+ }
+
+ #cell3 {
+ grid-column:1;
+ grid-row:2;
+ height:100%;
+ }
+
+ #cell4 {
+ grid-column:2;
+ grid-row:2;
+ background-color:green;
+ height:100%;
+ }
+
+ .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:first-child td {
+ height:30px;
+ }
+ </style>
+</head>
+<body>
+<p>Test passes if there is a green square 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> </td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td> </td>
+ <td style="background-color:red"> </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+</body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit.html
new file mode 100644
index 0000000..00ef5a5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/fr-unit.html
@@ -0,0 +1,105 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS3 Grid Layout: Flexible Length</title>
+ <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+ <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 -->
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit"/>
+ <link rel="match" href="../reference/fr-unit-ref.html">
+ <meta name="assert" content="'fr' unit represents a fraction of the free space in the grid container."/>
+ <style type="text/css">
+ #container {
+ position:relative;
+ width:400px;
+ height:100px;
+ }
+
+ #grid {
+ display:grid;
+ grid-template-columns:100px 1fr;
+ grid-template-rows:30px 1fr;
+ width:100%;
+ height:100%;
+ }
+
+ #cell1 {
+ grid-column:1;
+ grid-row:1;
+ height:30px;
+ }
+
+ #cell2 {
+ grid-column:2;
+ grid-row:1;
+ height:30px;
+ }
+
+ #cell3 {
+ grid-column:1;
+ grid-row:2;
+ height:100%;
+ }
+
+ #cell4 {
+ grid-column:2;
+ grid-row:2;
+ background-color:green;
+ height:100%;
+ }
+
+ .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:first-child td {
+ height:30px;
+ }
+ </style>
+</head>
+<body>
+<p>Test passes if there is a green square 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> </td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td> </td>
+ <td style="background-color:red"> </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+</body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-flexible-lengths-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-flexible-lengths-001.xht
new file mode 100644
index 0000000..5251e2a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-flexible-lengths-001.xht
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit) within an inline grid, so you can use it to represent a fraction of the free space in the grid container." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ width: 800px;
+ height: 600px;
+ font: 10px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="emptyGrid" class="inline-grid"></div>
+ <div id="grid" class="inline-grid">
+ <div>GRID ITEM</div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ // Valid values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "400px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "400px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "400px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "400px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+
+ // Reset values.
+ document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+ document.getElementById("emptyGrid").style.gridTemplateRows = "";
+ document.getElementById("grid").style.gridTemplateColumns = "";
+ document.getElementById("grid").style.gridTemplateRows = "";
+
+ // Wrong values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-grid-template-areas-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-grid-template-areas-001.xht
new file mode 100644
index 0000000..0e119db
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-grid-template-areas-001.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Support for 'grid-template-ares' property within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that 'grid-template-areas' is supported in an inline grid. So you can define the grid structure." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: inline-grid;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="inline-grid"></div>
+
+ <script type="text/javascript"><![CDATA[
+ // Single values.
+ TestingUtils.testGridTemplateAreas('inline-grid', 'none', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a"', '"a"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"."', '"."');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b"', '"a b"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', '"a b" "c d"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', ['"a b" "c d"', '"a b" "c d"']);
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b""c d"', '"a b" "c d"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\t"c d"', '"a b" "c d"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\n"c d"', '"a b" "c d"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "a b"', '"a b" "a b"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a a" "b b"', '"a a" "b b"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '". a ." "b a c"', '". a ." "b a c"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '".. a ..." "b a c"', ['". a ." "b a c"', '".. a ..." "b a c"']);
+ TestingUtils.testGridTemplateAreas('inline-grid', '".a..." "b a c"', ['". a ." "b a c"', '".a..." "b a c"']);
+ TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ...."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot ...."']);
+ TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot."']);
+ TestingUtils.testGridTemplateAreas('inline-grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"... header header ...." "nav main main main" "nav footer footer ...."', ['". header header ." "nav main main main" "nav footer footer ."', '"... header header ...." "nav main main main" "nav footer footer ...."']);
+ TestingUtils.testGridTemplateAreas('inline-grid', '"...header header...." "nav main main main" "nav footer footer...."', ['". header header ." "nav main main main" "nav footer footer ."', '"...header header...." "nav main main main" "nav footer footer...."']);
+ TestingUtils.testGridTemplateAreas('inline-grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '".. a" "b a" "... a"', ['". a" "b a" ". a"', '".. a" "b a" "... a"']);
+ TestingUtils.testGridTemplateAreas('inline-grid', '"..a" "b a" ".a"', ['". a" "b a" ". a"', '"..a" "b a" ".a"']);
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a a a" "b b b"', '"a a a" "b b b"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '". ." "a a"', '". ." "a a"');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"... ...." "a a"', ['". ." "a a"', '"... ...." "a a"']);
+
+ // Reset values.
+ document.getElementById('inline-grid').style.gridTemplateAreas = '';
+
+ // Wrong values.
+ TestingUtils.testGridTemplateAreas('inline-grid', 'a', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b c"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c" "d e"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b c" "d e"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b"-"c d"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b" - "c d"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b" . "c d"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b a"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b" "a"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b b"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"b a" "b b"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b a"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"a ." ". a"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '","', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"10%"', 'none');
+ TestingUtils.testGridTemplateAreas('inline-grid', '"USD$"', 'none');
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-grid-template-columns-rows-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-grid-template-columns-rows-001.xht
new file mode 100644
index 0000000..8f1f153
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-grid-template-columns-rows-001.xht
@@ -0,0 +1,89 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in an inline grid. So you can use the different syntax options to define the trak list." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ width: 800px;
+ height: 600px;
+ font: 10px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="emptyGrid" class="inline-grid"></div>
+ <div id="grid" class="inline-grid">
+ <div id="item">GRID ITEM</div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ // Single values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+
+ // Multiple values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
+
+ // Reset values.
+ document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+ document.getElementById("emptyGrid").style.gridTemplateRows = "";
+ document.getElementById("grid").style.gridTemplateColumns = "";
+ document.getElementById("grid").style.gridTemplateRows = "";
+
+ // Wrong values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-named-grid-lines-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-named-grid-lines-001.xht
new file mode 100644
index 0000000..e1b273d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-named-grid-lines-001.xht
@@ -0,0 +1,123 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ width: 800px;
+ height: 600px;
+ font: 10px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="emptyGrid" class="inline-grid"></div>
+ <div id="grid" class="inline-grid">
+ <div id="item">GRID ITEM</div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ // Valid values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
+
+ // Reset values.
+ document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+ document.getElementById("emptyGrid").style.gridTemplateRows = "";
+ document.getElementById("grid").style.gridTemplateColumns = "";
+ document.getElementById("grid").style.gridTemplateRows = "";
+
+ // Wrong values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-repeat-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-repeat-001.xht
new file mode 100644
index 0000000..c0ae0de
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-repeat-001.xht
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation within an inline grid, so you can use it to represents a repeated fragment of the track list." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ width: 800px;
+ height: 600px;
+ font: 10px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="emptyGrid" class="inline-grid"></div>
+ <div id="grid" class="inline-grid">
+ <div id="item">GRID ITEM</div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ // Valid values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
+
+ // Reset values.
+ document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+ document.getElementById("emptyGrid").style.gridTemplateRows = "";
+ document.getElementById("grid").style.gridTemplateColumns = "";
+ document.getElementById("grid").style.gridTemplateRows = "";
+
+ // Wrong values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-template-columns-rows-resolved-values-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-template-columns-rows-resolved-values-001.xht
new file mode 100644
index 0000000..39ab983e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-template-columns-rows-resolved-values-001.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created in an inline grid." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ width: 800px;
+ height: 600px;
+ font: 10px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+
+ .fifthColumn {
+ grid-column: 5;
+ }
+
+ .fourthRow {
+ grid-row: 4;
+ }
+
+ .gridAutoFlowColumn {
+ grid-auto-flow: column;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="grid" class="inline-grid">
+ <div>FIRST ITEM</div>
+ <div>SECOND ITEM</div>
+ <div>THIRD<br />ITEM</div>
+ </div>
+
+ <div id="gridItemsPositions" class="inline-grid">
+ <div class="fifthColumn">FIRST ITEM</div>
+ <div class="fourthRow">SECOND ITEM</div>
+ <div>THIRD<br />ITEM</div>
+ </div>
+
+ <div id="gridAutoFlowColumn" class="inline-grid gridAutoFlowColumn">
+ <div>FIRST ITEM</div>
+ <div>SECOND ITEM</div>
+ <div>THIRD<br />ITEM</div>
+ </div>
+
+ <div id="gridAutoFlowColumnItemsPositions" class="inline-grid gridAutoFlowColumn">
+ <div class="fifthColumn">FIRST ITEM</div>
+ <div class="fourthRow">SECOND ITEM</div>
+ <div>THIRD<br />ITEM</div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ // Valid values.
+ TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
+
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-auto-tracks-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-auto-tracks-expected.html
new file mode 100644
index 0000000..9f2f91c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-auto-tracks-expected.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ margin: 0;
+ width: 300px;
+ }
+ .a {
+ background: blue;
+ width: 100px;
+ float: left;
+ }
+ .b {
+ background: yellow;
+ width: 50px;
+ float: left;
+ }
+ .c {
+ background: pink;
+ width: 100px;
+ clear: both;
+ float: left;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ <div class="c"> </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-auto-tracks.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-auto-tracks.html
new file mode 100644
index 0000000..2cc3614
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-auto-tracks.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: auto tracks</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing">
+ <link rel="match" href="../reference/grid-layout-auto-tracks-ref.html">
+ <meta name="assert" content="the layout should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ height: auto;
+ width: 100px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: 100px;
+ grid-template-rows: auto;
+ }
+ .a {
+ background: blue;
+ grid-column: 1;
+ grid-row: 1;
+ }
+ .b {
+ background: yellow;
+ grid-column: 2;
+ grid-row: 1;
+ }
+ .c {
+ background: pink;
+ grid-column: 1;
+ grid-row: 2;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"><div style="width:50px"> </div></div>
+ <div class="c"> </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-basic-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-basic-expected.html
new file mode 100644
index 0000000..39a84ca4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-basic-expected.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ margin: 0;
+ width: 150px;
+ }
+ .a {
+ background: blue;
+ width: 100px;
+ float:left
+ }
+ .b {
+ background: yellow;
+ width: 50px;
+ float:left;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-basic.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-basic.html
new file mode 100644
index 0000000..578f701
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-basic.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: basic</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing">
+ <link rel="match" href="../reference/grid-layout-basic-ref.html">
+ <meta name="assert" content="the layout should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ width: 150px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: 100px 50px;
+ }
+ .a {
+ background: blue;
+ grid-column: 1;
+ grid-row: 1;
+ }
+ .b {
+ background: yellow;
+ grid-column: 2;
+ grid-row: 1;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-repeat-notation-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-repeat-notation-expected.html
new file mode 100644
index 0000000..b52074169
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-repeat-notation-expected.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ width: 450px;
+ position: relative;
+ }
+ .a {
+ background: blue;
+ width: 100px;
+ float:left
+ }
+ .b {
+ background: yellow;
+ width: 100px;
+ float:left
+ }
+ .c {
+ background: orange;
+ width: 100px;
+ float:left
+ }
+ .d {
+ background: cyan;
+ width: 100px;
+ float:left
+ }
+ .e {
+ background: pink;
+ width: 50px;
+ float:left
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ <div class="c"> </div>
+ <div class="d"> </div>
+ <div class="e"> </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-repeat-notation.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-repeat-notation.html
new file mode 100644
index 0000000..ac0273f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-layout-repeat-notation.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: repeat notation</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation">
+ <link rel="match" href="../reference/grid-layout-repeat-notation-ref.html">
+ <meta name="assert" content="the subgrid layout should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ width: 450px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: repeat(4, 100px) 50px;
+ }
+ .a {
+ background: blue;
+ grid-column: 1;
+ }
+ .b {
+ background: yellow;
+ grid-column: 2;
+ }
+ .c {
+ background: orange;
+ grid-column: 3;
+ }
+ .d {
+ background: cyan;
+ grid-column: 4;
+ }
+ .e {
+ background: pink;
+ grid-column: 5;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ <div class="c"> </div>
+ <div class="d"> </div>
+ <div class="e"> </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-flexible-lengths-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-flexible-lengths-001.xht
new file mode 100644
index 0000000..dff2511
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-flexible-lengths-001.xht
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit), so you can use it to represent a fraction of the free space in the grid container." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ width: 800px;
+ height: 600px;
+ font: 10px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="emptyGrid" class="grid"></div>
+ <div id="grid" class="grid">
+ <div>GRID ITEM</div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ // Valid values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "400px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "400px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "400px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "400px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+
+ // Reset values.
+ document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+ document.getElementById("emptyGrid").style.gridTemplateRows = "";
+ document.getElementById("grid").style.gridTemplateColumns = "";
+ document.getElementById("grid").style.gridTemplateRows = "";
+
+ // Wrong values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-grid-template-areas-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-grid-template-areas-001.xht
new file mode 100644
index 0000000..2f88e747
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-grid-template-areas-001.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Support for 'grid-template-ares' property</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="grid"></div>
+
+ <script type="text/javascript"><![CDATA[
+ // Single values.
+ TestingUtils.testGridTemplateAreas('grid', 'none', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a"', '"a"');
+ TestingUtils.testGridTemplateAreas('grid', '"."', '"."');
+ TestingUtils.testGridTemplateAreas('grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
+ TestingUtils.testGridTemplateAreas('grid', '"a b"', '"a b"');
+ TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"');
+ TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', ['"a b" "c d"', '"a b" "c d"']);
+ TestingUtils.testGridTemplateAreas('grid', '"a b""c d"', '"a b" "c d"');
+ TestingUtils.testGridTemplateAreas('grid', '"a b"\t"c d"', '"a b" "c d"');
+ TestingUtils.testGridTemplateAreas('grid', '"a b"\n"c d"', '"a b" "c d"');
+ TestingUtils.testGridTemplateAreas('grid', '"a b" "a b"', '"a b" "a b"');
+ TestingUtils.testGridTemplateAreas('grid', '"a a" "b b"', '"a a" "b b"');
+ TestingUtils.testGridTemplateAreas('grid', '". a ." "b a c"', '". a ." "b a c"');
+ TestingUtils.testGridTemplateAreas('grid', '".. a ..." "b a c"', ['". a ." "b a c"', '".. a ..." "b a c"']);
+ TestingUtils.testGridTemplateAreas('grid', '".a..." "b a c"', ['". a ." "b a c"', '".a..." "b a c"']);
+ TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
+ TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ...."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot ...."']);
+ TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot."']);
+ TestingUtils.testGridTemplateAreas('grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
+ TestingUtils.testGridTemplateAreas('grid', '"... header header ...." "nav main main main" "nav footer footer ...."', ['". header header ." "nav main main main" "nav footer footer ."', '"... header header ...." "nav main main main" "nav footer footer ...."']);
+ TestingUtils.testGridTemplateAreas('grid', '"...header header...." "nav main main main" "nav footer footer...."', ['". header header ." "nav main main main" "nav footer footer ."', '"...header header...." "nav main main main" "nav footer footer...."']);
+ TestingUtils.testGridTemplateAreas('grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
+ TestingUtils.testGridTemplateAreas('grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
+ TestingUtils.testGridTemplateAreas('grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
+ TestingUtils.testGridTemplateAreas('grid', '".. a" "b a" "... a"', ['". a" "b a" ". a"', '".. a" "b a" "... a"']);
+ TestingUtils.testGridTemplateAreas('grid', '"..a" "b a" ".a"', ['". a" "b a" ". a"', '"..a" "b a" ".a"']);
+ TestingUtils.testGridTemplateAreas('grid', '"a a a" "b b b"', '"a a a" "b b b"');
+ TestingUtils.testGridTemplateAreas('grid', '". ." "a a"', '". ." "a a"');
+ TestingUtils.testGridTemplateAreas('grid', '"... ...." "a a"', ['". ." "a a"', '"... ...." "a a"']);
+
+ // Reset values.
+ document.getElementById('grid').style.gridTemplateAreas = '';
+
+ // Wrong values.
+ TestingUtils.testGridTemplateAreas('grid', 'a', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a" "b c"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a b" "c" "d e"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a b c" "d e"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a b"-"c d"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a b" - "c d"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a b" . "c d"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a b a"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a" "b" "a"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a b" "b b"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"b a" "b b"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a b" "b a"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"a ." ". a"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '","', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"10%"', 'none');
+ TestingUtils.testGridTemplateAreas('grid', '"USD$"', 'none');
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-grid-template-columns-rows-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-grid-template-columns-rows-001.xht
new file mode 100644
index 0000000..f10c42d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-grid-template-columns-rows-001.xht
@@ -0,0 +1,89 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in a grid. So you can use the different syntax options to define the trak list." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ width: 800px;
+ height: 600px;
+ font: 10px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="emptyGrid" class="grid"></div>
+ <div id="grid" class="grid">
+ <div id="item">GRID ITEM</div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ // Single values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+
+ // Multiple values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
+
+ // Reset values.
+ document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+ document.getElementById("emptyGrid").style.gridTemplateRows = "";
+ document.getElementById("grid").style.gridTemplateColumns = "";
+ document.getElementById("grid").style.gridTemplateRows = "";
+
+ // Wrong values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-named-grid-lines-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-named-grid-lines-001.xht
new file mode 100644
index 0000000..fe99827
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-named-grid-lines-001.xht
@@ -0,0 +1,123 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ width: 800px;
+ height: 600px;
+ font: 10px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="emptyGrid" class="grid"></div>
+ <div id="grid" class="grid">
+ <div id="item">GRID ITEM</div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ // Valid values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
+
+ // Reset values.
+ document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+ document.getElementById("emptyGrid").style.gridTemplateRows = "";
+ document.getElementById("grid").style.gridTemplateColumns = "";
+ document.getElementById("grid").style.gridTemplateRows = "";
+
+ // Wrong values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-repeat-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-repeat-001.xht
new file mode 100644
index 0000000..1ab2fa4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-repeat-001.xht
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, so you can use it to represents a repeated fragment of the track list." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ width: 800px;
+ height: 600px;
+ font: 10px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="emptyGrid" class="grid"></div>
+ <div id="grid" class="grid">
+ <div id="item">GRID ITEM</div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ // Valid values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
+
+ // Reset values.
+ document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+ document.getElementById("emptyGrid").style.gridTemplateRows = "";
+ document.getElementById("grid").style.gridTemplateColumns = "";
+ document.getElementById("grid").style.gridTemplateRows = "";
+
+ // Wrong values.
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
+ TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-template-columns-rows-resolved-values-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-template-columns-rows-resolved-values-001.xht
new file mode 100644
index 0000000..176e93ab
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-template-columns-rows-resolved-values-001.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values" />
+ <meta name="flags" content="ahem dom" />
+ <meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created." />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <script src="support/testing-utils.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ width: 800px;
+ height: 600px;
+ font: 10px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+
+ .fifthColumn {
+ grid-column: 5;
+ }
+
+ .fourthRow {
+ grid-row: 4;
+ }
+
+ .gridAutoFlowColumn {
+ grid-auto-flow: column;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="grid" class="grid">
+ <div>FIRST ITEM</div>
+ <div>SECOND ITEM</div>
+ <div>THIRD<br />ITEM</div>
+ </div>
+
+ <div id="gridItemsPositions" class="grid">
+ <div class="fifthColumn">FIRST ITEM</div>
+ <div class="fourthRow">SECOND ITEM</div>
+ <div>THIRD<br />ITEM</div>
+ </div>
+
+ <div id="gridAutoFlowColumn" class="grid gridAutoFlowColumn">
+ <div>FIRST ITEM</div>
+ <div>SECOND ITEM</div>
+ <div>THIRD<br />ITEM</div>
+ </div>
+
+ <div id="gridAutoFlowColumnItemsPositions" class="grid gridAutoFlowColumn">
+ <div class="fifthColumn">FIRST ITEM</div>
+ <div class="fourthRow">SECOND ITEM</div>
+ <div>THIRD<br />ITEM</div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ // Valid values.
+ TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
+ TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
+ TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
+
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+ TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/support/testing-utils.js b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/support/testing-utils.js
new file mode 100644
index 0000000..202c865
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/support/testing-utils.js
@@ -0,0 +1,37 @@
+var TestingUtils = (function() {
+
+ function checkGridTemplateColumns(element, value) {
+ assert_in_array(getComputedStyle(element).gridTemplateColumns, value, "gridTemplateColumns");
+ }
+
+ function checkGridTemplateRows(element, value) {
+ assert_in_array(getComputedStyle(element).gridTemplateRows, value, "gridTemplateRows");
+ }
+
+ function testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue) {
+ test(function() {
+ var grid = document.getElementById(gridId);
+ grid.style.gridTemplateColumns = columnsStyle;
+ grid.style.gridTemplateRows = rowsStyle;
+ checkGridTemplateColumns(grid, columnsComputedValue);
+ checkGridTemplateRows(grid, rowsComputedValue);
+ }, "'" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";");
+ }
+
+ function checkGridTemplateAreas(element, value) {
+ assert_in_array(getComputedStyle(element).gridTemplateAreas, value, "gridTemplateAreas");
+ }
+
+ function testGridTemplateAreas(gridId, style, value) {
+ test(function() {
+ var grid = document.getElementById(gridId);
+ grid.style.gridTemplateAreas = style;
+ checkGridTemplateAreas(grid, value);
+ }, "'" + gridId + "' with: grid-template-areas: " + style + ";");
+ }
+
+ return {
+ testGridTemplateColumnsRows: testGridTemplateColumnsRows,
+ testGridTemplateAreas: testGridTemplateAreas
+ }
+})();
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-001.xht
new file mode 100644
index 0000000..970c8ce3
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-001.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Regular and anonymous grid items within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="Checks that inline grid container children become grid items, and text that is directly contained inside the inline grid is wrapped in an anonymous grid item." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ .test-inline-grid-overlapping-green {
+ display: inline-grid;
+ font: 25px/1 Ahem;
+ color: green;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div class="test-inline-grid-overlapping-green">
+ <div>it</div>
+ em
+ <div>it</div>
+ em
+ </div><div class="test-inline-grid-overlapping-green">
+ it
+ <span>em</span>
+ it
+ <span>em</span>
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-002-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-002-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-002.xht
new file mode 100644
index 0000000..d914bc69
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-002.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Children of grid items do not create new items within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="Checks that the grid items do not split around blocks creating extra items within an inline grid." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ .test-inline-grid-overlapping-green {
+ display: inline-grid;
+ font: 25px/1 Ahem;
+ color: green;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div class="test-inline-grid-overlapping-green">
+ <div>
+ <div>it</div>
+ em
+ </div>
+ <div>
+ it
+ <div>em</div>
+ </div>
+ </div><div class="test-inline-grid-overlapping-green">
+ <span>
+ <span>i</span>t
+ </span>
+ <span>
+ e<span>m</span>
+ </span>
+ <span>
+ <span>i</span>t
+ </span>
+ <span>
+ e<span>m</span>
+ </span>
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-003-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-003-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-003.xht
new file mode 100644
index 0000000..1afc346
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-003.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ .test-inline-grid-overlapping-green {
+ display: inline-grid;
+ font: 50px/1 Ahem;
+ color: green;
+ }
+
+ .display-none-red {
+ display: none;
+ color: red;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div class="test-inline-grid-overlapping-green two-columns">
+ <span>it</span>
+ <span class="display-none-red">hidden</span>
+ <span>em</span>
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-inline-blocks-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-inline-blocks-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-inline-blocks-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-inline-blocks-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-inline-blocks-001.xht
new file mode 100644
index 0000000..d545ccc9
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-items-inline-blocks-001.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Paint order of grid items within an inline grid is the same as inline blocks</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property" />
+ <link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ }
+
+ #reference-overlapped-red {
+ color: red;
+ font: 100px/1 Ahem;
+ grid-row: 1;
+ grid-column: 1;
+ }
+
+ #test-overlapping-green {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ grid-row: 1;
+ grid-column: 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="reference-overlapped-red">R</div>
+ <div id="test-overlapping-green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-001-expected.xht
new file mode 100644
index 0000000..a541654c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-001-expected.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ div {
+ font: 50px/1 Ahem;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div>
+ <span id="blue">B</span><span id="yellow">Y</span>
+ <br />
+ <span id="lime">L</span><span id="magenta">M</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-001.xht
new file mode 100644
index 0000000..a6b4844
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-001.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #inline-grid {
+ display: inline-grid;
+ font: 50px/1 Ahem;
+ grid-template-columns: auto auto;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ order: 1;
+ }
+
+ #lime {
+ color: lime;
+ order: 5;
+ }
+
+ #magenta {
+ color: magenta;
+ order: 10;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="inline-grid">
+ <div id="magenta">M</div>
+ <div id="lime">L</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-002-expected.xht
new file mode 100644
index 0000000..a541654c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-002-expected.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ div {
+ font: 50px/1 Ahem;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div>
+ <span id="blue">B</span><span id="yellow">Y</span>
+ <br />
+ <span id="lime">L</span><span id="magenta">M</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-002.xht
new file mode 100644
index 0000000..eaec647f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-002.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #inline-grid {
+ display: inline-grid;
+ font: 50px/1 Ahem;
+ grid-template-columns: auto auto;
+ }
+
+ #blue {
+ color: blue;
+ order: -10;
+ }
+
+ #yellow {
+ color: yellow;
+ order: -5;
+ }
+
+ #lime {
+ color: lime;
+ order: -1;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="inline-grid">
+ <div id="magenta">M</div>
+ <div id="lime">L</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-003-expected.xht
new file mode 100644
index 0000000..a541654c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-003-expected.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ div {
+ font: 50px/1 Ahem;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div>
+ <span id="blue">B</span><span id="yellow">Y</span>
+ <br />
+ <span id="lime">L</span><span id="magenta">M</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-003.xht
new file mode 100644
index 0000000..ae85ee0
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-003.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #inline-grid {
+ display: inline-grid;
+ font: 50px/1 Ahem;
+ grid-template-columns: auto auto;
+ }
+
+ #blue {
+ color: blue;
+ order: -5;
+ }
+
+ #yellow {
+ color: yellow;
+ order: -5;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ order: 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="inline-grid">
+ <div id="lime">L</div>
+ <div id="magenta">M</div>
+ <div id="blue">B</div>
+ <div id="yellow">Y</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-004-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-004-expected.xht
new file mode 100644
index 0000000..a541654c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-004-expected.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ div {
+ font: 50px/1 Ahem;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div>
+ <span id="blue">B</span><span id="yellow">Y</span>
+ <br />
+ <span id="lime">L</span><span id="magenta">M</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-004.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-004.xht
new file mode 100644
index 0000000..f7469f56
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-004.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #inline-grid {
+ display: inline-grid;
+ font: 50px/1 Ahem;
+ grid-template-columns: auto auto;
+ }
+
+ #blue {
+ color: blue;
+ order: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ order: 1;
+ }
+
+ #lime {
+ color: lime;
+ order: 5;
+ }
+
+ #magenta {
+ color: magenta;
+ order: 5;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="inline-grid">
+ <div id="blue">B</div>
+ <div id="lime">L</div>
+ <div id="magenta">M</div>
+ <div id="yellow">Y</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-005-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-005-expected.xht
new file mode 100644
index 0000000..a541654c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-005-expected.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ div {
+ font: 50px/1 Ahem;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div>
+ <span id="blue">B</span><span id="yellow">Y</span>
+ <br />
+ <span id="lime">L</span><span id="magenta">M</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-005.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-005.xht
new file mode 100644
index 0000000..ef19449
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-auto-placement-005.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #inline-grid {
+ display: inline-grid;
+ font: 50px/1 Ahem;
+ grid-template-columns: auto auto;
+ }
+
+ #blue {
+ color: blue;
+ order: -5;
+ }
+
+ #yellow {
+ color: yellow;
+ order: -1;
+ }
+
+ #lime {
+ color: lime;
+ order: 1;
+ }
+
+ #magenta {
+ color: magenta;
+ order: 5;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="inline-grid">
+ <div id="yellow">Y</div>
+ <div id="magenta">M</div>
+ <div id="blue">B</div>
+ <div id="lime">L</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-001.xht
new file mode 100644
index 0000000..cad88f50
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-001.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ order: 1;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-002-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-002-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-002.xht
new file mode 100644
index 0000000..52354d1
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-002.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ order: -1;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-003-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-003-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-003.xht
new file mode 100644
index 0000000..3d76994
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-003.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ order: 10;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ order: 5;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-004-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-004-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-004-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-004.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-004.xht
new file mode 100644
index 0000000..ba595a13
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-004.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ order: -5;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ order: -10;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-005-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-005-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-005-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-005.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-005.xht
new file mode 100644
index 0000000..cc4c7a52
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-order-property-painting-005.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ order: 1;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ order: -1;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-001.xht
new file mode 100644
index 0000000..6780d54
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-001.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ z-index: 1;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-002-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-002-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-002.xht
new file mode 100644
index 0000000..4b396bc2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-002.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ z-index: -1;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-003-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-003-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-003.xht
new file mode 100644
index 0000000..bb340c4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-003.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ z-index: 10;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ z-index: 5;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-004-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-004-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-004-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-004.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-004.xht
new file mode 100644
index 0000000..a32b271
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-004.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ z-index: -5;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ z-index: -10;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-005-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-005-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-005-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-005.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-005.xht
new file mode 100644
index 0000000..c179705
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-005.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ z-index: 1;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ z-index: -1;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-001-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-001-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.xht
new file mode 100644
index 0000000..2b49808
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ z-index: -1;
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ #green {
+ color: green;
+ z-index: 1;
+ grid-column: 3;
+ grid-row: 3;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-002-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-002-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.xht
new file mode 100644
index 0000000..d71ca194
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ z-index: 1;
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ z-index: 5;
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ #green {
+ color: green;
+ z-index: 10;
+ grid-column: 3;
+ grid-row: 3;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-003-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-003-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.xht
new file mode 100644
index 0000000..0847114
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ z-index: -10;
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ z-index: -5;
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ #green {
+ color: green;
+ z-index: -1;
+ grid-column: 3;
+ grid-row: 3;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-004-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-004-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-004-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.xht
new file mode 100644
index 0000000..56d5c18a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ z-index: 1;
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ #green {
+ color: green;
+ z-index: 5;
+ grid-column: 3;
+ grid-row: 3;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-005-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-005-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-005-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.xht
new file mode 100644
index 0000000..724b738
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ z-index: -5;
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ z-index: -1;
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ #green {
+ color: green;
+ grid-column: 3;
+ grid-row: 3;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-006-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-006-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-006-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.xht
new file mode 100644
index 0000000..3d340dd
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #inline-grid {
+ display: inline-grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ z-index: -1;
+ grid-column: 2;
+ grid-row: 2;
+ margin-top: -25px;
+ margin-left: -25px;
+ }
+
+ #yellow {
+ color: yellow;
+ grid-column: 4;
+ grid-row: 4;
+ margin-top: -50px;
+ margin-left: -50px;
+ }
+
+ #green {
+ color: green;
+ z-index: 1;
+ grid-column: 1;
+ grid-row: 1;
+ margin-top: 50px;
+ margin-left: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="inline-grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-001.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-001.html
new file mode 100644
index 0000000..e6274e6c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item sizing</title>
+<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
+<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
+<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
+<style>
+ #grid {
+ display: grid;
+ width: 200px;
+ height: 200px;
+ grid-template-rows: 100px;
+ grid-template-columns: 100px;
+ }
+
+ #test-overlapped-red {
+ background-color: red;
+ width: 100%;
+ height: 100%;
+ }
+
+ #test-overlapping-green {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-overlapped-red">
+ <div id="test-overlapping-green"></div>
+ </div>
+ </div>
+</body>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-002-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-002-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-002.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-002.html
new file mode 100644
index 0000000..11c9415
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-002.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item sizing</title>
+<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
+<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
+<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
+<style>
+ #grid {
+ display: grid;
+ width: 200px;
+ height: 200px;
+ grid-template-rows: 50%;
+ grid-template-columns: 50%;
+ }
+
+ #test-overlapped-red {
+ background-color: red;
+ width: 100%;
+ height: 100%;
+ }
+
+ #test-overlapping-green {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-overlapped-red">
+ <div id="test-overlapping-green"></div>
+ </div>
+ </div>
+</body>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-003-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-003-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-003.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-003.html
new file mode 100644
index 0000000..63adea88
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-003.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item sizing</title>
+<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
+<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
+<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
+<style>
+ #grid {
+ display: grid;
+ width: 200px;
+ height: 200px;
+ grid-template-rows: 1fr 1fr;
+ grid-template-columns: 1fr 1fr;
+ }
+
+ #test-overlapped-red {
+ background-color: red;
+ width: 100%;
+ height: 100%;
+ }
+
+ #test-overlapping-green {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-overlapped-red">
+ <div id="test-overlapping-green"></div>
+ </div>
+ </div>
+</body>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-004-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-004-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-004-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-004.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-004.html
new file mode 100644
index 0000000..3734612
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-item-containing-block-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item sizing in a positioned grid container</title>
+<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
+<meta name="assert" content="A grid item is sized within the containing block defined by its grid area that intersects flexible tracks">
+<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
+<style>
+ #grid {
+ display: grid;
+ position: absolute;
+ height: 200px;
+ width: 200px;
+ grid-template-rows: 1fr 1fr;
+ grid-template-columns: 1fr 1fr;
+ }
+
+ #test-item-overlapped-red {
+ background-color: red;
+ width: 100%;
+ height: 100%;
+ }
+ #reference-overlapping-green{
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div id="grid">
+ <div id="test-item-overlapped-red">
+ <div id="reference-overlapping-green">
+ </div>
+ </div>
+ </div>
+</body>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-001.xht
new file mode 100644
index 0000000..be479ed96
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-001.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Regular and anonymous grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="Checks that grid container children become grid items, and text that is directly contained inside the grid is wrapped in an anonymous grid item." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ .test-grid-overlapping-green {
+ display: grid;
+ font: 25px/1 Ahem;
+ color: green;
+ grid-template-columns: auto auto;
+ justify-content: start;
+ align-content: start;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div class="test-grid-overlapping-green">
+ <div>it</div>
+ em
+ <div>it</div>
+ em
+ </div>
+ <div class="test-grid-overlapping-green">
+ it
+ <span>em</span>
+ it
+ <span>em</span>
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-002-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-002-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-002.xht
new file mode 100644
index 0000000..392a363
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-002.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Children of grid items do not create new items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="Checks that the grid items do not split around blocks creating extra items." />
+ <style type="text/css"><![CDATA[
+ #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;
+ justify-content: start;
+ align-content: start;
+ }
+
+ .two-columns {
+ grid-template-columns: auto auto;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div class="test-grid-overlapping-green two-columns">
+ <div>
+ <div>it</div>
+ em
+ </div>
+ <div>
+ it
+ <div>em</div>
+ </div>
+ </div>
+ <div class="test-grid-overlapping-green">
+ <span>
+ <span>it</span>em
+ </span>
+ <span>
+ it<span>em</span>
+ </span>
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-003-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-003-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-003.xht
new file mode 100644
index 0000000..e288f317
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-003.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ .test-grid-overlapping-green {
+ display: grid;
+ font: 50px/1 Ahem;
+ color: green;
+ }
+
+ .display-none-red {
+ display: none;
+ color: red;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div class="test-grid-overlapping-green two-columns">
+ <span>it</span>
+ <span class="display-none-red">hidden</span>
+ <span>em</span>
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-inline-blocks-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-inline-blocks-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-inline-blocks-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-inline-blocks-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-inline-blocks-001.xht
new file mode 100644
index 0000000..416192e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-items-inline-blocks-001.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Paint order of grid items is the same as inline blocks</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property" />
+ <link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ }
+
+ #reference-overlapped-red {
+ color: red;
+ font: 100px/1 Ahem;
+ grid-row: 1;
+ grid-column: 1;
+ }
+
+ #test-overlapping-green {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ grid-row: 1;
+ grid-column: 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="reference-overlapped-red">R</div>
+ <div id="test-overlapping-green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-grid-in-grid-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-grid-in-grid-expected.html
new file mode 100644
index 0000000..bd6ebd7
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-grid-in-grid-expected.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ margin: 0;
+ height: 150px;
+ width: 150px;
+ background: yellow;
+ position: relative;
+ }
+ .a {
+ background: blue;
+ height: 100px;
+ width: 50px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .b1 {
+ background: orange;
+ width: 50px;
+ height: 50px;
+ position: absolute;
+ top: 0;
+ left: 50px;
+ }
+ .b2 {
+ background: cyan;
+ width: 50px;
+ height: 50px;
+ position: absolute;
+ top: 50px;
+ left: 100px;
+ }
+ .c {
+ background: pink;
+ width: 100px;
+ height: 50px;
+ position: absolute;
+ top: 100px;
+ left: 50px;
+ }
+ .d {
+ background: #eee;
+ width: 50px;
+ height: 50px;
+ position: absolute;
+ top: 100px;
+ left: 0
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"></div>
+
+ <div class="b1"></div>
+ <div class="b2"></div>
+ <div class="c"></div>
+ <div class="d"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-grid-in-grid.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-grid-in-grid.html
new file mode 100644
index 0000000..605494d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-grid-in-grid.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: grid in grid</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
+ <link rel="match" href="../reference/grid-layout-grid-in-grid-ref.html">
+ <meta name="assert" content="the nested grid should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ height: 150px;
+ width: 150px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: 50px 100px;
+ grid-template-rows: 100px 50px;
+ }
+ .a {
+ background: blue;
+ grid-column: 1;
+ grid-row: 1;
+ }
+ .b {
+ background: yellow;
+ grid-column: 2;
+ grid-row: 1;
+ display: grid;
+ grid-template-columns: 50px 50px;
+ grid-template-rows: 50px 50px;
+ }
+ .b1 {
+ background: orange;
+ grid-column: 1;
+ grid-row: 1;
+ }
+ .b2 {
+ background: cyan;
+ grid-column: 2;
+ grid-row: 2;
+ }
+ .c {
+ background: pink;
+ grid-column: 2;
+ grid-row: 2;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"><div style="height:100px;"> </div></div>
+ <div class="b">
+ <div class="b1"><div style="height:50px;"> </div></div>
+ <div class="b2"><div style="height:50px;"> </div></div>
+ </div>
+ <div class="c"><div style="height:50px;"> </div></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-a-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-a-expected.html
new file mode 100644
index 0000000..0b2bc0c8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-a-expected.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ margin: 0;
+ width: 150px;
+ color:white;
+ }
+ .a {
+ background: blue;
+ width: 100px;
+ float:left
+ }
+ .b {
+ background: yellow;
+ width: 50px;
+ float:left;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a">up</div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-a.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-a.html
new file mode 100644
index 0000000..b5e1dec6
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-a.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: z order</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order">
+ <link rel="match" href="../reference/grid-layout-z-order-ref.html">
+ <meta name="assert" content="the layout should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ width: 150px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: 50px 50px 50px;
+ color:white;
+ }
+ .a {
+ background: blue;
+ grid-row: 1;
+ grid-column: 1 / span 2;
+ z-index:10
+ }
+ .b {
+ background: yellow;
+ grid-row: 1;
+ grid-column: 2 / span 2;
+ z-index:1
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="b">down</div>
+ <div class="a">up</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-b-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-b-expected.html
new file mode 100644
index 0000000..0b2bc0c8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-b-expected.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ margin: 0;
+ width: 150px;
+ color:white;
+ }
+ .a {
+ background: blue;
+ width: 100px;
+ float:left
+ }
+ .b {
+ background: yellow;
+ width: 50px;
+ float:left;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a">up</div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-b.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-b.html
new file mode 100644
index 0000000..e4fdc89
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-layout-z-order-b.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: z order</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order">
+ <link rel="match" href="../reference/grid-layout-z-order-ref.html">
+ <meta name="assert" content="the layout should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ width: 150px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: 50px 50px 50px;
+ color:white;
+ }
+ .a {
+ background: blue;
+ grid-row: 1;
+ grid-column: 1 / 3;
+ z-index:10
+ }
+ .b {
+ background: yellow;
+ grid-row: 1;
+ grid-column: 2 / 4;
+ z-index:1
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="b">down</div>
+ <div class="a">up</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-001.xht
new file mode 100644
index 0000000..4a7c8f5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-001.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Minimum size of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <meta name="assert" content="Checks that minimum size for grid items is the content size." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #constrained-grid {
+ display: grid;
+ grid: 10px / 10px;
+ }
+
+ #test-grid-item-overlapping-green {
+ color: green;
+ background-color: green;
+ font: 50px/1 Ahem;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="constrained-grid">
+ <div id="test-grid-item-overlapping-green">IT E</div>
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-002-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-002-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-002.xht
new file mode 100644
index 0000000..4bc1fa8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-002.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Minimum size of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="assert" content="Checks that minimum size for grid items is the content size." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #constrained-grid {
+ display: grid;
+ grid: 10px / 10px;
+ }
+
+ #test-grid-item-overlapping-green {
+ background-color: green;
+ }
+
+ #content-100x100 {
+ width: 100px;
+ height: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="constrained-grid">
+ <div id="test-grid-item-overlapping-green">
+ <div id="content-100x100"></div>
+ </div>
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-003-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-003-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-003.xht
new file mode 100644
index 0000000..c42b6f6
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-003.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Minimum size of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="assert" content="Checks that minimum size for grid items is the specified size regardless of the content size." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #constrained-grid {
+ display: grid;
+ grid: 10px / 10px;
+ }
+
+ #test-grid-item-overlapping-green {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ }
+
+ #content-500x500 {
+ width: 500px;
+ height: 500px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="constrained-grid">
+ <div id="test-grid-item-overlapping-green">
+ <div id="content-500x500"></div>
+ </div>
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-004-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-004-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-004-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-004.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-004.xht
new file mode 100644
index 0000000..d635941
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-004.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Minimum size of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="assert" content="Checks that minimum size for grid items is the specified size regardless of the content size." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #constrained-grid {
+ display: grid;
+ grid: 10px / 10px;
+ }
+
+ #test-grid-item-overlapping-green {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ }
+
+ #content-50x50 {
+ width: 50px;
+ height: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="constrained-grid">
+ <div id="test-grid-item-overlapping-green">
+ <div id="content-50x50"></div>
+ </div>
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-005-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-005-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-005-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-005.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-005.xht
new file mode 100644
index 0000000..907ac72
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-005.xht
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Minimum size of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="image" />
+ <meta name="assert" content="Checks that minimum size for grid items is the content size." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #constrained-grid {
+ display: grid;
+ grid: 10px / 10px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="constrained-grid">
+ <img src="support/100x100-green.png" alt="Image download support must be enabled" />
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-006-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-006-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-006-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-006.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-006.xht
new file mode 100644
index 0000000..8c3a001
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-006.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Minimum size of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="image" />
+ <meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size for height (as it's smaller than the content size of the image)." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #constrained-grid {
+ display: grid;
+ grid: 10px / 10px;
+ }
+
+ #test-grid-item-overlapping-green {
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="constrained-grid">
+ <img id="test-grid-item-overlapping-green" src="support/200x200-green.png" alt="Image download support must be enabled" />
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-007-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-007-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-007-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-007.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-007.xht
new file mode 100644
index 0000000..036eeef
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-007.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Minimum size of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="image" />
+ <meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the content size for height (as it's smaller than the transferred size of the image)." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #constrained-grid {
+ display: grid;
+ grid: 10px / 10px;
+ }
+
+ #test-grid-item-overlapping-green {
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="constrained-grid">
+ <img id="test-grid-item-overlapping-green" src="support/50x100-green.png" alt="Image download support must be enabled" />
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-008-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-008-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-008-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-008.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-008.xht
new file mode 100644
index 0000000..0751854
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-008.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Minimum size of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="image" />
+ <meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size for width (as it's smaller than the content size of the image)." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #constrained-grid {
+ display: grid;
+ grid: 10px / 10px;
+ }
+
+ #test-grid-item-overlapping-green {
+ height: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="constrained-grid">
+ <img id="test-grid-item-overlapping-green" src="support/200x200-green.png" alt="Image download support must be enabled" />
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-009-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-009-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-009-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-009.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-009.xht
new file mode 100644
index 0000000..00f06b2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-minimum-size-grid-items-009.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Minimum size of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="image" />
+ <meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the content size for width (as it's smaller than the transferred size of the image)." />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #constrained-grid {
+ display: grid;
+ grid: 10px / 10px;
+ }
+
+ #test-grid-item-overlapping-green {
+ height: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="constrained-grid">
+ <img id="test-grid-item-overlapping-green" src="support/100x50-green.png" alt="Image download support must be enabled" />
+ </div>
+
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-001-expected.xht
new file mode 100644
index 0000000..a541654c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-001-expected.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ div {
+ font: 50px/1 Ahem;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div>
+ <span id="blue">B</span><span id="yellow">Y</span>
+ <br />
+ <span id="lime">L</span><span id="magenta">M</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-001.xht
new file mode 100644
index 0000000..138668f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-001.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #grid {
+ display: grid;
+ font: 50px/1 Ahem;
+ grid-template-columns: auto auto;
+ justify-content: start;
+ align-content: start;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ order: 1;
+ }
+
+ #lime {
+ color: lime;
+ order: 5;
+ }
+
+ #magenta {
+ color: magenta;
+ order: 10;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="grid">
+ <div id="magenta">M</div>
+ <div id="lime">L</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-002-expected.xht
new file mode 100644
index 0000000..a541654c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-002-expected.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ div {
+ font: 50px/1 Ahem;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div>
+ <span id="blue">B</span><span id="yellow">Y</span>
+ <br />
+ <span id="lime">L</span><span id="magenta">M</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-002.xht
new file mode 100644
index 0000000..a3948fa
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-002.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #grid {
+ display: grid;
+ font: 50px/1 Ahem;
+ grid-template-columns: auto auto;
+ justify-content: start;
+ align-content: start;
+ }
+
+ #blue {
+ color: blue;
+ order: -10;
+ }
+
+ #yellow {
+ color: yellow;
+ order: -5;
+ }
+
+ #lime {
+ color: lime;
+ order: -1;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="grid">
+ <div id="magenta">M</div>
+ <div id="lime">L</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-003-expected.xht
new file mode 100644
index 0000000..a541654c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-003-expected.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ div {
+ font: 50px/1 Ahem;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div>
+ <span id="blue">B</span><span id="yellow">Y</span>
+ <br />
+ <span id="lime">L</span><span id="magenta">M</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-003.xht
new file mode 100644
index 0000000..20adcda
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-003.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #grid {
+ display: grid;
+ font: 50px/1 Ahem;
+ grid-template-columns: auto auto;
+ justify-content: start;
+ align-content: start;
+ }
+
+ #blue {
+ color: blue;
+ order: -5;
+ }
+
+ #yellow {
+ color: yellow;
+ order: -5;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ order: 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="grid">
+ <div id="lime">L</div>
+ <div id="magenta">M</div>
+ <div id="blue">B</div>
+ <div id="yellow">Y</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-004-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-004-expected.xht
new file mode 100644
index 0000000..a541654c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-004-expected.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ div {
+ font: 50px/1 Ahem;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div>
+ <span id="blue">B</span><span id="yellow">Y</span>
+ <br />
+ <span id="lime">L</span><span id="magenta">M</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-004.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-004.xht
new file mode 100644
index 0000000..283e5d72
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-004.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #grid {
+ display: grid;
+ font: 50px/1 Ahem;
+ grid-template-columns: auto auto;
+ justify-content: start;
+ align-content: start;
+ }
+
+ #blue {
+ color: blue;
+ order: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ order: 1;
+ }
+
+ #lime {
+ color: lime;
+ order: 5;
+ }
+
+ #magenta {
+ color: magenta;
+ order: 5;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="grid">
+ <div id="blue">B</div>
+ <div id="lime">L</div>
+ <div id="magenta">M</div>
+ <div id="yellow">Y</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-005-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-005-expected.xht
new file mode 100644
index 0000000..a541654c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-005-expected.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ div {
+ font: 50px/1 Ahem;
+ }
+
+ #blue {
+ color: blue;
+ }
+
+ #yellow {
+ color: yellow;
+ }
+
+ #lime {
+ color: lime;
+ }
+
+ #magenta {
+ color: magenta;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div>
+ <span id="blue">B</span><span id="yellow">Y</span>
+ <br />
+ <span id="lime">L</span><span id="magenta">M</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-005.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-005.xht
new file mode 100644
index 0000000..9b624b3ec
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-auto-placement-005.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ #grid {
+ display: grid;
+ font: 50px/1 Ahem;
+ grid-template-columns: auto auto;
+ justify-content: start;
+ align-content: start;
+ }
+
+ #blue {
+ color: blue;
+ order: -5;
+ }
+
+ #yellow {
+ color: yellow;
+ order: -1;
+ }
+
+ #lime {
+ color: lime;
+ order: 1;
+ }
+
+ #magenta {
+ color: magenta;
+ order: 5;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+ <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div id="grid">
+ <div id="yellow">Y</div>
+ <div id="magenta">M</div>
+ <div id="blue">B</div>
+ <div id="lime">L</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-001.xht
new file mode 100644
index 0000000..255c07d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-001.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ order: 1;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-002-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-002-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-002.xht
new file mode 100644
index 0000000..9763c37c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-002.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ order: -1;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-003-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-003-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-003.xht
new file mode 100644
index 0000000..43ddc280
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-003.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ order: 10;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ order: 5;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-004-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-004-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-004-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-004.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-004.xht
new file mode 100644
index 0000000..96f2dda6
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-004.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ order: -5;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ order: -10;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-005-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-005-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-005-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-005.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-005.xht
new file mode 100644
index 0000000..191ddf3
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-order-property-painting-005.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ order: 1;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ order: -1;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-001.xht
new file mode 100644
index 0000000..6cefa441
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-001.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ z-index: 1;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-002-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-002-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-002.xht
new file mode 100644
index 0000000..9b79817
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-002.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ z-index: -1;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-003-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-003-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-003.xht
new file mode 100644
index 0000000..11ac1d70
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-003.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ z-index: 10;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ z-index: 5;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-004-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-004-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-004-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-004.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-004.xht
new file mode 100644
index 0000000..f89df1c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-004.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ z-index: -5;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ z-index: -10;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-005-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-005-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-005-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-005.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-005.xht
new file mode 100644
index 0000000..086100af
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-005.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ }
+
+ #test-item-overlapping-green {
+ color: green;
+ z-index: 1;
+ }
+
+ #reference-item-overlapped-red {
+ color: red;
+ z-index: -1;
+ }
+
+ .first-row-first-column {
+ grid-area: 1 / 1;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="grid">
+ <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+ <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-001-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-001-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-001.xht
new file mode 100644
index 0000000..c44dda44
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-001.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ z-index: -1;
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ #green {
+ color: green;
+ z-index: 1;
+ grid-column: 3;
+ grid-row: 3;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-002-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-002-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-002.xht
new file mode 100644
index 0000000..f630f7f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-002.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ z-index: 1;
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ z-index: 5;
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ #green {
+ color: green;
+ z-index: 10;
+ grid-column: 3;
+ grid-row: 3;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-003-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-003-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-003.xht
new file mode 100644
index 0000000..357945a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-003.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ z-index: -10;
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ z-index: -5;
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ #green {
+ color: green;
+ z-index: -1;
+ grid-column: 3;
+ grid-row: 3;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-004-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-004-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-004-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-004.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-004.xht
new file mode 100644
index 0000000..1186d26
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-004.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ z-index: 1;
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ #green {
+ color: green;
+ z-index: 5;
+ grid-column: 3;
+ grid-row: 3;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-005-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-005-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-005-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-005.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-005.xht
new file mode 100644
index 0000000..4873c05
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-005.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ z-index: -5;
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #yellow {
+ color: yellow;
+ z-index: -1;
+ grid-column: 2;
+ grid-row: 2;
+ }
+
+ #green {
+ color: green;
+ grid-column: 3;
+ grid-row: 3;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-006-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-006-expected.xht
new file mode 100644
index 0000000..990cfb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-006-expected.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ #main {
+ position: relative;
+ }
+
+ #main div {
+ width: 100px;
+ height: 100px;
+ }
+
+ .blue {
+ background-color: blue;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+
+ .yellow {
+ background-color: yellow;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ }
+
+ .green {
+ background-color: green;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="main">
+ <div class="blue"></div>
+ <div class="yellow"></div>
+ <div class="green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-006.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-006.xht
new file mode 100644
index 0000000..6f69f102
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-006.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
+ <link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ font: 100px/1 Ahem;
+ grid-template-columns: 25px 25px 25px 25px;
+ grid-template-rows: 25px 25px 25px 25px;
+ }
+
+ #blue {
+ color: blue;
+ z-index: -1;
+ grid-column: 2;
+ grid-row: 2;
+ margin-top: -25px;
+ margin-left: -25px;
+ }
+
+ #yellow {
+ color: yellow;
+ grid-column: 4;
+ grid-row: 4;
+ margin-top: -50px;
+ margin-left: -50px;
+ }
+
+ #green {
+ color: green;
+ z-index: 1;
+ grid-column: 1;
+ grid-row: 1;
+ margin-top: 50px;
+ margin-left: 50px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+ <div id="grid">
+ <div id="green">G</div>
+ <div id="yellow">Y</div>
+ <div id="blue">B</div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/100x100-green.png b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/100x100-green.png
new file mode 100644
index 0000000..3883542
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/100x100-green.png
Binary files differ
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/100x50-green.png b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/100x50-green.png
new file mode 100644
index 0000000..9dae3116
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/100x50-green.png
Binary files differ
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/200x200-green.png b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/200x200-green.png
new file mode 100644
index 0000000..7a47c0e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/200x200-green.png
Binary files differ
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/50x100-green.png b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/50x100-green.png
new file mode 100644
index 0000000..2854698
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/50x100-green.png
Binary files differ
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-layout-properties.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-layout-properties.html
new file mode 100644
index 0000000..2e66fb2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-layout-properties.html
@@ -0,0 +1,233 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: Grid Layout - Properties exist</title>
+ <link rel="author" title="贺师俊" href="mailto:johnhax@gmail.com">
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-30 -->
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#property-index">
+ <meta name="flags" content="ahem dom">
+ <meta name="assert" content="Test checks that css properties of grid layout exist.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <style>
+ #container {
+ width: 800px;
+ height: 600px;
+ }
+ #myDiv {
+ font: 50px/1 Ahem;
+ justify-content: start;
+ align-content: start;
+ }
+ </style>
+</head>
+<body>
+ <div id="log"></div>
+ <div id="container">
+ <div id="myDiv">
+ <div>I T</div>
+ <div>IT</div>
+ <div>I</div>
+ </div>
+ </div>
+
+ <script>
+ var myDiv = document.getElementById('myDiv')
+
+ test(function(){
+ myDiv.style.display = 'grid'
+ assert_equals(myDiv.style.display, 'grid',
+ 'display should be "grid"')
+ }, 'display: grid')
+
+ test(function(){
+ myDiv.style.display = 'inline-grid'
+ assert_equals(myDiv.style.display, 'inline-grid',
+ 'display should be "inline-grid"')
+ }, 'display: inline-grid')
+
+ void function(data){
+
+ myDiv.style.display = 'grid'
+
+ Object.keys(data).forEach(function(prop){
+ test(function(){
+ assert_own_property(myDiv.style, prop)
+ }, prop)
+
+ if ('initial' in data[prop]) test(function(){
+ var initial = data[prop].initial
+ delete data[prop].initial
+ assert_equals(getComputedStyle(myDiv)[prop], initial, 'initial value of ' + prop + ' should be ' + initial)
+ }, prop + '.initial')
+
+ var syntaxTests = data[prop]
+ Object.keys(syntaxTests).forEach(function(testcase){
+ test(function(){
+ assert_own_property(myDiv.style, prop)
+ myDiv.style[prop] = syntaxTests[testcase][0]
+ assert_equals(myDiv.style[prop], syntaxTests[testcase][0], testcase)
+ assert_equals(getComputedStyle(myDiv)[prop], syntaxTests[testcase][1], testcase)
+ }, prop + '.' + testcase)
+ })
+ })
+
+ }({
+ 'grid-template-columns': { // named 'grid-definition-columns' in last draft
+ initial: '150px',
+ 'none': ['none', '150px'],
+ '<line-names>': ['[a] auto [b] auto [c]', '[a] 150px [b] 100px [c]'],
+ '<track-size>.auto': ['auto', '150px'],
+ '<track-size>.<track-breadth>.<length>': ['100px', '100px'],
+ '<track-size>.<track-breadth>.<percentage>': ['100%', '800px'],
+ '<track-size>.<track-breadth>.<flex>': ['1fr', '800px'],
+ '<track-size>.<track-breadth>.min-content': ['min-content', '100px'],
+ '<track-size>.<track-breadth>.max-content': ['max-content', '150px'],
+ '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', '200px'],
+ 'reset': ['none', '150px'],
+ },
+ 'grid-template-rows': { // named 'grid-definition-rows' in last draft
+ initial: '50px 50px 50px',
+ 'none': ['none', '50px 50px 50px'],
+ '<line-names>': ['[a] auto [b] auto [c]', '[a] 50px [b] 50px [c] 50px'],
+ '<track-size>.auto': ['auto', '50px 50px 50px'],
+ '<track-size>.<track-breadth>.<length>': ['100px', '100px 50px 50px'],
+ '<track-size>.<track-breadth>.<percentage>': ['100%', '50px 50px 50px'],
+ '<track-size>.<track-breadth>.<flex>': ['1fr', '50px 50px 50px'],
+ '<track-size>.<track-breadth>.min-content': ['min-content', '50px 50px 50px'],
+ '<track-size>.<track-breadth>.max-content': ['max-content', '50px 50px 50px'],
+ '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', '200px 50px 50px'],
+ 'reset': ['none', '50px 50px 50px'],
+ },
+ 'grid-template-areas': {
+ initial: 'none',
+ 'none': ['none', 'none'],
+ '<string>+': ['"a"', '"a"'],
+ 'reset': ['none', 'none'],
+ },
+ 'grid-template': {
+ initial: '150px / 50px 50px 50px',
+ 'none': ['', '150px / 50px 50px 50px'],
+ '<grid-template-rows> / <grid-template-columns>': ['100px 100px / 200px 200px', '100px 100px / 200px 200px'],
+ '<line-names>': ['[a] auto [b] auto [c] / [d] auto [e] auto [f]', '[a] auto [b] auto [c] / [d] auto [e] auto [f]'],
+ '<string>+': ['"a b" "a b"', '"a b" "a b"'],
+ '<string><track-size>+': ['100px / "a b" 50px', '100px / "a b" 50px'],
+ 'reset': ['', '150px / 50px 50px 50px'],
+ },
+ 'grid-auto-columns': {
+ initial: 'auto',
+ '<track-size>.auto': ['auto', 'auto'],
+ '<track-size>.<track-breadth>.<length>': ['100px', '100px'],
+ '<track-size>.<track-breadth>.<percentage>': ['100%', '100%'],
+ '<track-size>.<track-breadth>.<flex>': ['1fr', '1fr'],
+ '<track-size>.<track-breadth>.min-content': ['min-content', 'min-content'],
+ '<track-size>.<track-breadth>.max-content': ['max-content', 'max-content'],
+ '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', 'minmax(100px, 200px)'],
+ 'reset': ['auto', 'auto'],
+ },
+ 'grid-auto-rows': {
+ initial: 'auto',
+ '<track-size>.auto': ['auto', 'auto'],
+ '<track-size>.<track-breadth>.<length>': ['100px', '100px'],
+ '<track-size>.<track-breadth>.<percentage>': ['100%', '100%'],
+ '<track-size>.<track-breadth>.<flex>': ['1fr', '1fr'],
+ '<track-size>.<track-breadth>.min-content': ['min-content', 'min-content'],
+ '<track-size>.<track-breadth>.max-content': ['max-content', 'max-content'],
+ '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', 'minmax(100px, 200px)'],
+ 'reset': ['auto', 'auto'],
+ },
+ 'grid-auto-flow': {
+ initial: 'row',
+ 'row': ['row', 'row'],
+ 'column': ['column', 'column'],
+ 'dense': ['dense', 'row dense'],
+ 'row dense': ['row dense', 'row dense'],
+ 'column dense': ['column dense', 'column dense'],
+ 'reset': ['row', 'row'],
+ },
+ 'grid-row-start': {
+ initial: 'auto',
+ 'auto': ['auto', 'auto'],
+ '<custom-ident>': ['a', 'a'],
+ '<integer>': ['1', '1'],
+ '<integer> <ident>': ['1 a', '1 a'],
+ 'span <integer>': ['span 1', 'span 1'],
+ 'span <custom-ident>': ['span a', 'span 1 a'],
+ 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+ 'reset': ['auto', 'auto'],
+ },
+ 'grid-column-start': {
+ initial: 'auto',
+ 'auto': ['auto', 'auto'],
+ '<custom-ident>': ['a', 'a'],
+ '<integer>': ['1', '1'],
+ '<integer> <ident>': ['1 a', '1 a'],
+ 'span <integer>': ['span 1', 'span 1'],
+ 'span <custom-ident>': ['span a', 'span 1 a'],
+ 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+ 'reset': ['auto', 'auto'],
+ },
+ 'grid-row-end': {
+ initial: 'auto',
+ 'auto': ['auto', 'auto'],
+ '<custom-ident>': ['a', 'a'],
+ '<integer>': ['1', '1'],
+ '<integer> <ident>': ['1 a', '1 a'],
+ 'span <integer>': ['span 1', 'span 1'],
+ 'span <custom-ident>': ['span a', 'span 1 a'],
+ 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+ 'reset': ['auto', 'auto'],
+ },
+ 'grid-column-end': {
+ initial: 'auto',
+ 'auto': ['auto', 'auto'],
+ '<custom-ident>': ['a', 'a'],
+ '<integer>': ['1', '1'],
+ '<integer> <ident>': ['1 a', '1 a'],
+ 'span <integer>': ['span 1', 'span 1'],
+ 'span <custom-ident>': ['span a', 'span 1 a'],
+ 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+ 'reset': ['auto', 'auto'],
+ },
+ 'grid-column': {
+ initial: 'auto',
+ 'auto': ['auto', 'auto'],
+ '<custom-ident>': ['a / b', 'a / b'],
+ '<integer> start': ['1', '1'],
+ '<integer>': ['1 / 3', '1 / 3'],
+ '<integer> <ident>': ['1 a / 2 b', '1 a / 2 b'],
+ 'span <integer>': ['span 1 / span 2', 'span 1 / span 2'],
+ 'span <custom-ident>': ['span a / span b', 'span 1 a / span 1 b'],
+ 'span <integer> <custom-ident>': ['span 2 a / span 3 b', 'span 2 a / span 3 b'],
+ 'reset': ['auto', 'auto'],
+ },
+ 'grid-row': {
+ initial: 'auto',
+ 'auto': ['auto', 'auto'],
+ '<custom-ident>': ['a / b', 'a / b'],
+ '<integer> start': ['1', '1'],
+ '<integer>': ['1 / 3', '1 / 3'],
+ '<integer> <ident>': ['1 a / 2 b', '1 a / 2 b'],
+ 'span <integer>': ['span 1 / span 2', 'span 1 / span 2'],
+ 'span <custom-ident>': ['span a / span b', 'span 1 a / span 1 b'],
+ 'span <integer> <custom-ident>': ['span 2 a / span 3 b', 'span 2 a / span 3 b'],
+ 'reset': ['auto', 'auto'],
+ },
+ 'grid-area': {
+ initial: 'auto',
+ 'auto': ['auto', 'auto'],
+ '<custom-ident>': ['a / b / c / d', 'a / b / c / d'],
+ '<integer> start': ['1 / 2', '1 / 2'],
+ '<integer>': ['1 / 2 / 3 / 4', '1 / 2 / 3 / 4'],
+ '<integer> <ident>': ['1 a / 2 b / 3 c / 4 d', '1 a / 2 b / 3 c / 4 d'],
+ 'span <integer>': ['span 1 / span 2 / span 3 / span 4', 'span 1 / span 2 / span 3 / span 4'],
+ 'span <custom-ident>': ['span a / span b / span c / span d', 'span 1 a / span 1 b / span 1 c / span 1 d'],
+ 'span <integer> <custom-ident>': ['span 2 a / span 3 b / span 4 c / span 5 d', 'span 2 a / span 3 b / span 4 c / span 5 d'],
+ 'reset': ['auto', 'auto'],
+ },
+ })
+ </script>
+</body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/display-grid-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/display-grid-expected.html
new file mode 100644
index 0000000..8008359a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/display-grid-expected.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS Grid Layout: Reference File</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 -->
+ <style type="text/css">
+ #container {
+ position:relative;
+ width:400px;
+ height:100px;
+ }
+
+ .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 class="error">
+ <table id="table">
+ <tbody>
+ <tr>
+ <td style="background-color:green">cell1</td>
+ <td style="background-color:limegreen">cell2</td>
+ </tr>
+ <tr>
+ <td style="background-color:limegreen">cell3</td>
+ <td style="background-color:green">cell4</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/display-grid.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/display-grid.html
new file mode 100644
index 0000000..7c6b743
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/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/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/display-inline-grid-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/display-inline-grid-expected.html
new file mode 100644
index 0000000..422185a8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/display-inline-grid-expected.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS Grid Layout: Reference File</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 -->
+ <style type="text/css">
+ #container {
+ position:relative;
+ }
+
+ #table {
+ width:400px;
+ height:100px;
+ border-collapse:collapse;
+ }
+
+ #table td {
+ padding:0;
+ vertical-align:top;
+ }
+
+ #table td:first-child {
+ width:100px;
+ }
+
+ #table tr:last-child td {
+ height:30px;
+ }
+
+ #table-wrapper {
+ display:inline-block;
+ clear:right;
+ }
+
+ 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="table-wrapper">
+ <table id="table">
+ <tbody>
+ <tr>
+ <td style="background-color:green">cell1</td>
+ <td style="background-color:limegreen">cell2</td>
+ </tr>
+ <tr>
+ <td style="background-color:limegreen">cell3</td>
+ <td style="background-color:green">cell4</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <span>Inline</span>
+</div>
+</body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/display-inline-grid.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/display-inline-grid.html
new file mode 100644
index 0000000..e080ed8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/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/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-computed-value-display-floated-items-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-computed-value-display-floated-items-001.xht
new file mode 100644
index 0000000..861a15f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-computed-value-display-floated-items-001.xht
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'float' affects to the computed value of 'display' on grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo" title="9.7 Relationships between 'display', 'position', and 'float'" />
+ <meta name="flags" content="dom" />
+ <script src="/resources/testharness.js" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ #grid {
+ display: grid;
+ }
+
+ #inline-grid {
+ display: inline-grid;
+ }
+
+ .inline-table {
+ display: inline-table;
+ }
+
+ .inline {
+ display: inline;
+ }
+
+ .flex {
+ display: flex;
+ }
+
+ .float {
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div id="log"></div>
+
+ <div id="grid">
+ <div id="grid-inline-table" class="float inline-table"></div>
+ <div id="grid-inline" class="float inline"></div>
+ <div id="grid-flex" class="float flex"></div>
+ </div>
+ <div id="inline-grid">
+ <div id="inline-grid-inline-table" class="float inline-table"></div>
+ <div id="inline-grid-inline" class="float inline"></div>
+ <div id="inline-grid-flex" class="float flex"></div>
+ </div>
+
+ <script type="text/javascript"><![CDATA[
+ function testComputedStyleDisplay(element, value) {
+ assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'");
+ }
+
+ var gridInlineTable = document.getElementById("grid-inline-table");
+ test(function() {
+ testComputedStyleDisplay(gridInlineTable, "table");
+ }, "Test display floated 'inline-table' grid item");
+
+ var gridInline = document.getElementById("grid-inline");
+ test(function() {
+ testComputedStyleDisplay(gridInline, "block");
+ }, "Test display floated 'inline' grid item");
+
+ var gridFlex = document.getElementById("grid-flex");
+ test(function() {
+ testComputedStyleDisplay(gridFlex, "flex");
+ }, "Test display floated 'flex' grid item");
+
+ var inlineGridInlineTable = document.getElementById("inline-grid-inline-table");
+ test(function() {
+ testComputedStyleDisplay(inlineGridInlineTable, "table");
+ }, "Test display floated 'inline-table' grid item within an inline grid");
+
+ var inlineGridInline = document.getElementById("inline-grid-inline");
+ test(function() {
+ testComputedStyleDisplay(inlineGridInline, "block");
+ }, "Test display floated 'inline' grid item within an inline grid");
+
+ var inlineGridFlex = document.getElementById("inline-grid-flex");
+ test(function() {
+ testComputedStyleDisplay(inlineGridFlex, "flex");
+ }, "Test display floated 'flex' grid item within an inline grid");
+ ]]></script>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-grid-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-grid-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-grid-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-grid-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-grid-001.xht
new file mode 100644
index 0000000..5c8de21
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-grid-001.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <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="../../css21/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." />
+ <style type="text/css"><![CDATA[
+ #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>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div class="test-grid-overlapping-green">
+ <span>firs</span>
+ <span>seco</span>
+ </div>
+ <div class="test-grid-overlapping-green">
+ <span>firs</span>
+ <span>seco</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-inline-grid-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-inline-grid-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-inline-grid-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-inline-grid-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-inline-grid-001.xht
new file mode 100644
index 0000000..fef9e86
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-display-inline-grid-001.xht
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <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="../../css21/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 type="text/css"><![CDATA[
+ #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>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+ <div class="test-inline-grid-overlapping-green"></div><div class="test-inline-grid-overlapping-green"></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-001-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-001-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-001.xht
new file mode 100644
index 0000000..06c8293
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-001.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-letter' from grid container does not apply to grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container." />
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ color: green;
+ }
+
+ .grid::first-letter {
+ color: red;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="grid">
+ <div>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-002-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-002-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-002.xht
new file mode 100644
index 0000000..078f3ef
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-002.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-letter' from grid container ancestors does not apply to grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container ancestors." />
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ color: green;
+ }
+
+ body::first-letter {
+ color: red;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="grid">
+ <div>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-003-expected.xht
new file mode 100644
index 0000000..ba4abac
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-003-expected.xht
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text first letter should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+
+ .green {
+ color: green;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>
+ <span class="green">T</span>he <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
+ In addition, body and paragraph margins should <strong>not collapse</strong>.
+ </p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-003.xht
new file mode 100644
index 0000000..01f9a29
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-letter-003.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-letter' works on grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
+ <link rel="match" href="../reference/grid-first-letter-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item." />
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ }
+
+ .item::first-letter {
+ color: green;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="grid">
+ <div class="item">
+ <p>
+ The <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
+ In addition, body and paragraph margins should <strong>not collapse</strong>.
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-001-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-001-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-001.xht
new file mode 100644
index 0000000..ea8f991
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-001.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-line' from grid container does not apply to grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container." />
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ color: green;
+ }
+
+ .grid::first-line {
+ color: red;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="grid">
+ <div>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-002-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-002-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-002.xht
new file mode 100644
index 0000000..09f3cf8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-002.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-line' from grid container ancestors does not apply to grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container ancestors." />
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ color: green;
+ }
+
+ body::first-line {
+ color: red;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="grid">
+ <div>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-003-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-003-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-003.xht
new file mode 100644
index 0000000..b97aeb6
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-first-line-003.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-line' works on grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item." />
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ color: red;
+ }
+
+ .item::first-line {
+ color: green;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="grid">
+ <div class="item">
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-float-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-float-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-float-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-float-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-float-001.xht
new file mode 100644
index 0000000..d0dc708
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-float-001.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <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="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <style type="text/css"><![CDATA[
+ #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>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+
+ <div class="grid">
+ <div class="test-overlapping-green float-left"></div>
+ <div class="test-overlapping-green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-floats-no-intrude-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-floats-no-intrude-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-floats-no-intrude-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-floats-no-intrude-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-floats-no-intrude-001.xht
new file mode 100644
index 0000000..49f779c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-floats-no-intrude-001.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: floats do not intrude into a grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ .test-overlapping-green {
+ background-color: green;
+ width: 50px;
+ height: 100px;
+ }
+
+ .float {
+ float: left;
+ }
+
+ .grid {
+ display: grid;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+
+ <div class="float test-overlapping-green"></div>
+ <div class="grid test-overlapping-green"></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-001-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-001-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-001.xht
new file mode 100644
index 0000000..7b84207
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-001.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-letter' from inline grid container does not apply to grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container." />
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ color: green;
+ }
+
+ .grid::first-letter {
+ color: red;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="inline-grid">
+ <div>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-002-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-002-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-002.xht
new file mode 100644
index 0000000..e360d90
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-002.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-letter' from inline grid container ancestors does not apply to grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container ancestors." />
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ color: green;
+ }
+
+ body::first-letter {
+ color: red;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="inline-grid">
+ <div>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-003-expected.xht
new file mode 100644
index 0000000..ba4abac
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-003-expected.xht
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text first letter should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+
+ .green {
+ color: green;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>
+ <span class="green">T</span>he <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
+ In addition, body and paragraph margins should <strong>not collapse</strong>.
+ </p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-003.xht
new file mode 100644
index 0000000..069489c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-letter-003.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-letter' works on grid items within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
+ <link rel="match" href="../reference/grid-first-letter-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item within an inline grid." />
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ }
+
+ .item::first-letter {
+ color: green;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="inline-grid">
+ <div class="item">
+ <p>
+ The <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
+ In addition, body and paragraph margins should <strong>not collapse</strong>.
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-001-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-001-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-001.xht
new file mode 100644
index 0000000..dfadc2d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-001.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-line' from inline grid container does not apply to grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to an inline grid container." />
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ color: green;
+ }
+
+ .inline-grid::first-line {
+ color: red;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="inline-grid">
+ <div>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-002-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-002-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-002-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-002.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-002.xht
new file mode 100644
index 0000000..ba176bc
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-002.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-line' from inline grid container ancestors does not apply to grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in anonymous grid items when applied to an inline grid container ancestors." />
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ color: green;
+ }
+
+ body::first-line {
+ color: red;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="inline-grid">
+ <div>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-003-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-003-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-003-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-003.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-003.xht
new file mode 100644
index 0000000..13a29cbb
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-first-line-003.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: '::first-line' works on grid items within an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item within an inline grid." />
+ <style type="text/css"><![CDATA[
+ .inline-grid {
+ display: inline-grid;
+ color: red;
+ }
+
+ .item::first-line {
+ color: green;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <div class="inline-grid">
+ <div class="item">
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-float-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-float-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-float-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-float-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-float-001.xht
new file mode 100644
index 0000000..a9389dc
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-float-001.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <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="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <style type="text/css"><![CDATA[
+ #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>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+
+ <div class="inline-grid">
+ <div class="test-overlapping-green float-left"></div>
+ <div class="test-overlapping-green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-floats-no-intrude-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-floats-no-intrude-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-floats-no-intrude-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-floats-no-intrude-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-floats-no-intrude-001.xht
new file mode 100644
index 0000000..015012e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-floats-no-intrude-001.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: floats do not intrude into an inline grid</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <style type="text/css"><![CDATA[
+ #reference-overlapped-red {
+ position: absolute;
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ z-index: -1;
+ }
+
+ .test-overlapping-green {
+ background-color: green;
+ width: 50px;
+ height: 100px;
+ }
+
+ .float {
+ float: left;
+ }
+
+ .inline-grid {
+ display: inline-grid;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+
+ <div class="float test-overlapping-green"></div>
+ <div class="inline-grid test-overlapping-green"></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-margins-no-collapse-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-margins-no-collapse-001-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-margins-no-collapse-001-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-margins-no-collapse-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-margins-no-collapse-001.xht
new file mode 100644
index 0000000..cbfeee0
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-margins-no-collapse-001.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: inline grid's margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that inline grid's margin (body) do not collapse with the marings of the grid item (a paragraph)." />
+ <style type="text/css"><![CDATA[
+ body {
+ display: inline-grid;
+ }
+
+ p {
+ color: green;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-multicol-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-multicol-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-multicol-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-multicol-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-multicol-001.xht
new file mode 100644
index 0000000..4eba9c9
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-multicol-001.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'column-*' properties from inline grid container does not apply to grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
+ <link rel="match" href="../../css21/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 type="text/css"><![CDATA[
+ #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>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+
+ <div class="inline-grid">
+ <div class="test-overlapping-green"></div>
+ <div class="test-overlapping-green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-vertical-align-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-vertical-align-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-vertical-align-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-vertical-align-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-vertical-align-001.xht
new file mode 100644
index 0000000..4e4ca35
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-inline-vertical-align-001.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <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="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #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>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+
+ <div id="test-inline-grid-overlapping-green">
+ <span>1s</span>
+ <span id="vertical-align">2n</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-margins-no-collapse-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-margins-no-collapse-001-expected.xht
new file mode 100644
index 0000000..5feb9630
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-margins-no-collapse-001-expected.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <style type="text/css"><![CDATA[
+ p {
+ color: green;
+ /* Prevent collapsing body and paragraph margins. */
+ float: left;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-margins-no-collapse-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-margins-no-collapse-001.xht
new file mode 100644
index 0000000..cbfe32bd
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-margins-no-collapse-001.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: grid's margins do not collapse</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.xht" />
+ <meta name="assert" content="This test checks that grid's margin (body) do not collapse with the marings of the grid item (a paragraph)." />
+ <style type="text/css"><![CDATA[
+ body {
+ display: grid;
+ }
+
+ p {
+ color: green;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-multicol-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-multicol-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-multicol-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-multicol-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-multicol-001.xht
new file mode 100644
index 0000000..7612731
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-multicol-001.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Grid Layout Test: 'column-*' properties from grid container does not apply to grid items</title>
+ <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
+ <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
+ <link rel="match" href="../../css21/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 type="text/css"><![CDATA[
+ #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>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+
+ <div class="grid">
+ <div class="test-overlapping-green"></div>
+ <div class="test-overlapping-green"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-support-display-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-support-display-001.xht
new file mode 100644
index 0000000..eb318d14
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-support-display-001.xht
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <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" type="text/javascript"></script>
+ <script src="/resources/testharnessreport.js" type="text/javascript"></script>
+ <style type="text/css"><![CDATA[
+ .grid {
+ display: grid;
+ }
+
+ .inline-grid {
+ display: inline-grid;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <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 type="text/javascript"><![CDATA[
+ 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>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-vertical-align-001-expected.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-vertical-align-001-expected.xht
new file mode 100644
index 0000000..05a1379
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-vertical-align-001-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-vertical-align-001.xht b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-vertical-align-001.xht
new file mode 100644
index 0000000..dd382b0
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-model/grid-vertical-align-001.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <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="../../css21/reference/ref-filled-green-100px-square.xht" />
+ <meta name="flags" content="ahem" />
+ <style type="text/css"><![CDATA[
+ #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>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ <div id="reference-overlapped-red"></div>
+
+ <div id="test-grid-overlapping-green">
+ <span>1s</span>
+ <span id="vertical-align">2n</span>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/implicit-grids/grid-support-grid-auto-columns-rows-001-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/implicit-grids/grid-support-grid-auto-columns-rows-001-expected.html
new file mode 100644
index 0000000..7e4e3d26
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/implicit-grids/grid-support-grid-auto-columns-rows-001-expected.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties</title>
+ <link rel="author" title="Joao Oliveira" href="mailto:hello@jxs.pt"/>
+ <style>
+ #grid {
+ position: relative;
+ }
+ .position {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #first-column-first-row {
+ width: 30px;
+ height: 30px;
+ background-color: purple;
+ }
+ #third-column-first-and-second-rows {
+ left: 60px;
+ width: 30px;
+ height: 60px;
+ background-color: orange
+ }
+ #first-and-second-columns-second-row {
+ top: 30px;
+ width: 60px;
+ height: 30px;
+ background-color: blue;
+ }
+ </style>
+ </head>
+ <body>
+ <p>The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="position" id="first-column-first-row"></div>
+ <div class="position" id="third-column-first-and-second-rows"></div>
+ <div class="position" id="first-and-second-columns-second-row"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/implicit-grids/grid-support-grid-auto-columns-rows-001.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/implicit-grids/grid-support-grid-auto-columns-rows-001.html
new file mode 100644
index 0000000..e61ced3
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/implicit-grids/grid-support-grid-auto-columns-rows-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties</title>
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#auto-tracks">
+ <link rel="match" href="../reference/grid-support-grid-auto-columns-rows-001-ref.html">
+ <link rel="author" title="Joao Oliveira" href="mailto:hello@jxs.pt"/>
+ <style>
+ #grid {
+ display: grid;
+ grid-auto-columns: 30px;
+ grid-auto-rows: 30px;
+ }
+ #first-column-first-row {
+ grid-column: 1;
+ grid-row: 1;
+ background-color: purple;
+ }
+ #third-column-first-and-second-rows {
+ grid-column: 3;
+ grid-row: 1 / span 2;
+ background-color: orange
+ }
+ #first-and-second-columns-second-row {
+ grid-column: 1 / span 2;
+ grid-row: 2;
+ background-color: blue;
+ }
+ </style>
+ </head>
+ <body>
+ <p>The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div id="first-column-first-row"></div>
+ <div id="third-column-first-and-second-rows"></div>
+ <div id="first-and-second-columns-second-row"></div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/layout-algorithm/grid-layout-free-space-unit-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/layout-algorithm/grid-layout-free-space-unit-expected.html
new file mode 100644
index 0000000..39a84ca4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/layout-algorithm/grid-layout-free-space-unit-expected.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ margin: 0;
+ width: 150px;
+ }
+ .a {
+ background: blue;
+ width: 100px;
+ float:left
+ }
+ .b {
+ background: yellow;
+ width: 50px;
+ float:left;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/layout-algorithm/grid-layout-free-space-unit.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/layout-algorithm/grid-layout-free-space-unit.html
new file mode 100644
index 0000000..10649a96
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/layout-algorithm/grid-layout-free-space-unit.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: free space unit</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#free-space">
+ <link rel="match" href="../reference/grid-layout-basic-ref.html">
+ <meta name="assert" content="the layout should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ width: 150px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: 1fr 50px;
+ }
+ .a {
+ background: blue;
+ grid-column: 1;
+ grid-row: 1;
+ }
+ .b {
+ background: yellow;
+ grid-column: 2;
+ grid-row: 1;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-grid-span-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-grid-span-expected.html
new file mode 100644
index 0000000..39a84ca4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-grid-span-expected.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ margin: 0;
+ width: 150px;
+ }
+ .a {
+ background: blue;
+ width: 100px;
+ float:left
+ }
+ .b {
+ background: yellow;
+ width: 50px;
+ float:left;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-grid-span.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-grid-span.html
new file mode 100644
index 0000000..21aad99
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-grid-span.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: grid span</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-span">
+ <link rel="match" href="../reference/grid-layout-basic-ref.html">
+ <meta name="assert" content="the layout should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ width: 150px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: 50px 50px 50px;
+ }
+ .a {
+ background: blue;
+ grid-column: 1 / span 2;
+ grid-row: 1;
+ }
+ .b {
+ background: yellow;
+ grid-column: 3;
+ grid-row: 1;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines-expected.html
new file mode 100644
index 0000000..39a84ca4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines-expected.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ margin: 0;
+ width: 150px;
+ }
+ .a {
+ background: blue;
+ width: 100px;
+ float:left
+ }
+ .b {
+ background: yellow;
+ width: 50px;
+ float:left;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines-shorthands-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines-shorthands-expected.html
new file mode 100644
index 0000000..39a84ca4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines-shorthands-expected.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ margin: 0;
+ width: 150px;
+ }
+ .a {
+ background: blue;
+ width: 100px;
+ float:left
+ }
+ .b {
+ background: yellow;
+ width: 50px;
+ float:left;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines-shorthands.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines-shorthands.html
new file mode 100644
index 0000000..756e08c4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines-shorthands.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: grid lines shorthands</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#common-uses-named-lines">
+ <link rel="match" href="../reference/grid-layout-basic-ref.html">
+ <meta name="assert" content="the layout should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ width: 150px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: [left] 100px [center] 50px [right];
+ }
+ .a {
+ background: blue;
+ grid-column: left / center;
+ }
+ .b {
+ background: yellow;
+ grid-column: center / right;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines.html
new file mode 100644
index 0000000..62bfc8d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-lines.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: grid lines</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#common-uses-named-lines">
+ <link rel="match" href="../reference/grid-layout-basic-ref.html">
+ <meta name="assert" content="the layout should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ width: 150px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: [left] 100px [center] 50px [right];
+ }
+ .a {
+ background: blue;
+ grid-column-start: left;
+ grid-column-end: center;
+ }
+ .b {
+ background: yellow;
+ grid-column-start: center;
+ grid-column-end: right;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-placement-shorthands-expected.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-placement-shorthands-expected.html
new file mode 100644
index 0000000..39a84ca4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-placement-shorthands-expected.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Reference</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ border: 0 none;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ margin: 0;
+ width: 150px;
+ }
+ .a {
+ background: blue;
+ width: 100px;
+ float:left
+ }
+ .b {
+ background: yellow;
+ width: 50px;
+ float:left;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-placement-shorthands.html b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-placement-shorthands.html
new file mode 100644
index 0000000..be986798
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/placement/grid-layout-placement-shorthands.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Grid Layout Test: placement shorthand</title>
+ <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-grid-1/#placement-shorthands">
+ <link rel="match" href="../reference/grid-layout-basic-ref.html">
+ <meta name="assert" content="the layout should behave the same as reference.">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #caseTitle {
+ margin: 10px;
+ height: 40px;
+ }
+ #grid {
+ width: 150px;
+ background: #eee;
+ display: grid;
+ grid-template-columns: 50px 50px 50px;
+ }
+ .a {
+ background: blue;
+ grid-column: 1 / span 2;
+ grid-row: 1;
+ }
+ .b {
+ background: yellow;
+ grid-column: 3;
+ grid-row: 1;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+ <div id="grid">
+ <div class="a"> </div>
+ <div class="b"> </div>
+ </div>
+ </body>
+</html>
