summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-grid/parsing
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/parsing')
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html66
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-area-invalid.html47
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html99
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-area-valid.html87
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html58
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html39
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-valid.html57
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html25
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-invalid.html20
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-valid.html24
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html58
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html38
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-valid.html57
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html322
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-content-sized-columns-resolution.html386
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-invalid.html54
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html124
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-valid.html71
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-shorthand.html126
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html27
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-invalid.html28
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-one-cell.html34
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-valid.html28
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html59
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-nogrid.html43
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html99
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed.html43
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html31
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html80
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html57
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html85
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html59
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-nogrid.html43
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html93
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed.html43
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html31
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html76
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-areas-valid.html38
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-invalid.html51
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-valid.html60
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html62
41 files changed, 2928 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html
new file mode 100644
index 0000000000..2ffd499069
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridArea</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#placement">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+// auto
+test_computed_value("grid-area", "auto / auto / auto / auto",
+ ["auto", "auto / auto / auto / auto"]);
+test_computed_value("grid-row", "auto / auto", ["auto", "auto / auto"]);
+test_computed_value("grid-column-end", "auto");
+
+// <custom-ident>
+test_computed_value("grid-row", "-zπ", [ "-zπ", "-zπ / -zπ"]);
+test_computed_value("grid-row-start", "AZ");
+test_computed_value("grid-column-start", "-_π");
+test_computed_value("grid-row-end", "_9");
+
+
+// <integer> && <custom-ident>?
+test_computed_value("grid-area", "1 / 90 -a- / auto / auto",
+ ["1 / 90 -a-", "1 / 90 -a- / auto / auto"]);
+test_computed_value("grid-row", "2 az / auto", ["2 az", "2 az / auto"]);
+test_computed_value("grid-column", "9 / -19 zA");
+test_computed_value("grid-row-start", "-19");
+test_computed_value("grid-row-start", "9 -Z_");
+test_computed_value("grid-column-start", "-44 Z");
+test_computed_value("grid-row-end", "1 -πA");
+test_computed_value("grid-column-end", "5 π_");
+
+// span && [ <integer> || <custom-ident> ]
+test_computed_value("grid-area", "span 2 i / auto / auto / auto",
+ ["span 2 i", "span 2 i / auto / auto / auto"]);
+test_computed_value("grid-row", "span 2 / auto", ["span 2", "span 2 / auto"]);
+test_computed_value("grid-column-start", "span 1 i", "span i");
+test_computed_value("grid-row-end", "span 2 i");
+test_computed_value("grid-column-end", "span 2");
+
+// https://github.com/w3c/csswg-drafts/issues/3448
+test_computed_value("grid-row-start", "span i");
+test_computed_value("grid-row", "span i / auto", ["span i", "span i / auto"]);
+
+// <grid-line> [ / <grid-line> ]{0,3}
+test_computed_value("grid-area", "auto / i / auto / i",
+ ["auto / i", "auto / i / auto / i"]);
+test_computed_value("grid-area", "auto / i / 2 j",
+ ["auto / i / 2 j", "auto / i / 2 j / i"]);
+test_computed_value("grid-area", "auto / i / 2 j / span 3 k");
+test_computed_value("grid-row", "auto / i");
+test_computed_value("grid-column", "2 j / span 3 k");
+
+
+// https://github.com/w3c/csswg-drafts/issues/2858
+test_computed_value("grid-column-end", "\\31st", "\\31 st");
+test_computed_value("grid-column-end", "\\31 st", "\\31 st");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-invalid.html
new file mode 100644
index 0000000000..c7d35ebf09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-invalid.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-area with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
+<meta name="assert" content="grid-area supports only the grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("grid-area", "'string'");
+test_invalid_value("grid-row", "1.0");
+test_invalid_value("grid-column", "1 2");
+test_invalid_value("grid-row-start", "+-3");
+test_invalid_value("grid-column-start", "0");
+test_invalid_value("grid-row-end", "span");
+test_invalid_value("grid-column-end", "sPaN");
+test_invalid_value("grid-column-end", '"1st"');
+test_invalid_value("grid-column-end", "1st");
+test_invalid_value("grid-column-start", "auto 1");
+test_invalid_value("grid-row-start", "1 auto");
+
+test_invalid_value("grid-area", "auto / initial");
+test_invalid_value("grid-row", "auto / inherit");
+test_invalid_value("grid-column", "auto / unset");
+
+test_invalid_value("grid-area", "auto / auto / auto / auto / auto");
+test_invalid_value("grid-row", "1 / 2 / 3")
+test_invalid_value("grid-column", "a / b / c");
+test_invalid_value("grid-row-end", "span 1 / span 2");
+test_invalid_value("grid-area", "auto 2 auto 4");
+test_invalid_value("grid-row", "33 -A0 auto");
+test_invalid_value("grid-row", "auto i 2 j span 3 k");
+
+
+// https://github.com/w3c/csswg-drafts/issues/2856
+test_invalid_value("grid-row-end", "1 auto");
+test_invalid_value("grid-row-end", "span 1 auto");
+test_invalid_value("grid-row-end", "span auto 1");
+test_invalid_value("grid-row-end", "1 auto span");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html
new file mode 100644
index 0000000000..9a265502d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid-area sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
+<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('grid-area', 'auto', {
+ 'grid-row-start': 'auto',
+ 'grid-column-start': 'auto',
+ 'grid-row-end': 'auto',
+ 'grid-column-end': 'auto'
+});
+
+// <custom-ident>
+test_shorthand_value('grid-area', '--a', {
+ 'grid-row-start': '--a',
+ 'grid-column-start': '--a',
+ 'grid-row-end': '--a',
+ 'grid-column-end': '--a'
+});
+
+test_shorthand_value('grid-area', 'a / b', {
+ 'grid-row-start': 'a',
+ 'grid-column-start': 'b',
+ 'grid-row-end': 'a',
+ 'grid-column-end': 'b'
+});
+
+test_shorthand_value('grid-area', 'a / b / c', {
+ 'grid-row-start': 'a',
+ 'grid-column-start': 'b',
+ 'grid-row-end': 'c',
+ 'grid-column-end': 'b'
+});
+
+test_shorthand_value('grid-area', 'a / b / c / d', {
+ 'grid-row-start': 'a',
+ 'grid-column-start': 'b',
+ 'grid-row-end': 'c',
+ 'grid-column-end': 'd'
+});
+
+// <integer> && <custom-ident>?
+// span && [ <integer> || <custom-ident> ]
+test_shorthand_value('grid-area', '+90 -a- / 2 i span', {
+ 'grid-row-start': '90 -a-',
+ 'grid-column-start': 'span 2 i',
+ 'grid-row-end': 'auto',
+ 'grid-column-end': 'auto'
+});
+
+test_shorthand_value('grid-area', '1 / 2 / 3 / 4', {
+ 'grid-row-start': '1',
+ 'grid-column-start': '2',
+ 'grid-row-end': '3',
+ 'grid-column-end': '4'
+});
+
+
+test_shorthand_value('grid-row', 'auto', {
+ 'grid-row-start': 'auto',
+ 'grid-row-end': 'auto'
+});
+
+test_shorthand_value('grid-row', 'one / 2', {
+ 'grid-row-start': 'one',
+ 'grid-row-end': '2'
+});
+
+test_shorthand_value('grid-row', '1 two / four 3', {
+ 'grid-row-start': '1 two',
+ 'grid-row-end': '3 four'
+});
+
+
+test_shorthand_value('grid-column', '5 span', {
+ 'grid-column-start': 'span 5',
+ 'grid-column-end': 'auto'
+});
+
+test_shorthand_value('grid-column', '1 / two', {
+ 'grid-column-start': '1',
+ 'grid-column-end': 'two'
+});
+
+test_shorthand_value('grid-column', 'span 1 two / four 3 span', {
+ 'grid-column-start': 'span 1 two',
+ 'grid-column-end': 'span 3 four'
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-valid.html
new file mode 100644
index 0000000000..9f93e6325b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-valid.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-area with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
+<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// auto
+test_valid_value("grid-area", "auto");
+test_valid_value("grid-area", "auto / auto", "auto");
+test_valid_value("grid-area", "auto / auto / auto", "auto");
+test_valid_value("grid-area", "auto / auto / auto / auto", "auto");
+test_valid_value("grid-area", "AuTo", "auto");
+test_valid_value("grid-row", "auto");
+test_valid_value("grid-row", "auto/auto", "auto");
+test_valid_value("grid-column-end", "AuTo", "auto");
+
+// <custom-ident>
+test_valid_value("grid-area", "--a");
+test_valid_value("grid-row", "-zπ");
+test_valid_value("grid-row", "-zπ/-zπ", "-zπ");
+test_valid_value("grid-row", "i / i", "i");
+test_valid_value("grid-row-start", "AZ");
+test_valid_value("grid-column-start", "-_π");
+test_valid_value("grid-row-end", "_9");
+
+
+// <integer> && <custom-ident>?
+test_valid_value("grid-area", "1");
+test_valid_value("grid-area", "+90 -a-", "90 -a-");
+test_valid_value("grid-row", "az 2", "2 az");
+test_valid_value("grid-column", "9");
+test_valid_value("grid-column", "-19 zA");
+test_valid_value("grid-column", "-A0 33", "33 -A0");
+test_valid_value("grid-row-start", "-19");
+test_valid_value("grid-row-start", "9 -Z_");
+test_valid_value("grid-column-start", "+90", "90");
+test_valid_value("grid-column-start", "Z -44", "-44 Z");
+test_valid_value("grid-row-end", "1 -πA");
+test_valid_value("grid-column-end", "π_ +5", "5 π_");
+
+// span && [ <integer> || <custom-ident> ]
+test_valid_value("grid-area", "span 2 i");
+test_valid_value("grid-area", "i 2 SpAn", "span 2 i");
+test_valid_value("grid-row", "span 2");
+test_valid_value("grid-column", "i SpAn", "span i");
+test_valid_value("grid-row-start", "span i");
+test_valid_value("grid-column-start", "SpAn i 2", "span 2 i");
+test_valid_value("grid-row-end", "2 i span", "span 2 i");
+test_valid_value("grid-column-end", "2 SpAn", "span 2");
+
+// <grid-line> [ / <grid-line> ]{0,3}
+test_valid_value("grid-area", "auto / i");
+test_valid_value("grid-area", "auto / i / auto / i", "auto / i");
+test_valid_value("grid-area", "auto / i / auto / 2 i");
+test_valid_value("grid-area", "1 / i / auto / i", "1 / i");
+test_valid_value("grid-area", "1 / auto / auto / auto", "1");
+test_valid_value("grid-area", "1 / auto / i / auto", "1 / auto / i");
+test_valid_value("grid-area", "1 / j / i / k");
+test_valid_value("grid-area", "1 / auto / 2 / auto", "1 / auto / 2");
+test_valid_value("grid-area", "1 / i / 2 / auto");
+test_valid_value("grid-area", "i / i / auto / auto");
+test_valid_value("grid-area", "i / auto / i / auto", "i / auto");
+test_valid_value("grid-area", "auto / i / 2 j");
+test_valid_value("grid-area", "auto / i / 2 j / span 3 k");
+test_valid_value("grid-row", "auto / i");
+test_valid_value("grid-row", "i / auto");
+test_valid_value("grid-row", "2 i / auto", "2 i");
+test_valid_value("grid-row", "1 / auto", "1");
+test_valid_value("grid-column", "2 j / span 3 k");
+
+// https://github.com/w3c/csswg-drafts/issues/2858
+// '\\31 st' in Blink, Firefox, EdgeHTML and Safari serialize invalid values.
+test_valid_value("grid-column-end", "\\31st", ["\\31 st", "\\31st"]);
+test_valid_value("grid-column-end", "\\31 st", ["\\31 st", "\\31st"]);
+test_valid_value("grid-column", "\\31st / \\31 st", ["\\31 st", "\\31st"]);
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html
new file mode 100644
index 0000000000..ac8a9fb4ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridAutoColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+ #target {
+ font-size: 40px;
+ }
+</style>
+<script>
+// <track-breadth>
+// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-auto-columns", "1px");
+test_computed_value("grid-auto-columns", "calc(10px + 0.5em)", "30px");
+test_computed_value("grid-auto-columns", "calc(10px - 0.5em)", "0px");
+test_computed_value("grid-auto-columns", "4%");
+test_computed_value("grid-auto-columns", "5fr");
+test_computed_value("grid-auto-columns", "min-content");
+test_computed_value("grid-auto-columns", "max-content");
+test_computed_value("grid-auto-columns", "auto");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
+test_computed_value("grid-auto-columns", "minmax(1px, 5fr)");
+test_computed_value("grid-auto-columns", "minmax(calc(10px + 0.5em), max-content)", "minmax(30px, max-content)");
+test_computed_value("grid-auto-columns", "minmax(calc(10px - 0.5em), max-content)", "minmax(0px, max-content)");
+test_computed_value("grid-auto-columns", "minmax(4%, auto)");
+test_computed_value("grid-auto-columns", "minmax(min-content, calc(10px + 0.5em))", "minmax(min-content, 30px)");
+test_computed_value("grid-auto-columns", "minmax(auto, 4%)");
+
+// fit-content( <length-percentage> )
+test_computed_value("grid-auto-columns", "fit-content(1px)");
+test_computed_value("grid-auto-columns", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
+test_computed_value("grid-auto-columns", "fit-content(calc(10px - 0.5em))", "fit-content(0px)");
+test_computed_value("grid-auto-columns", "fit-content(4%)");
+
+// 0
+test_computed_value("grid-auto-columns", "0px");
+test_computed_value("grid-auto-columns", "0%");
+test_computed_value("grid-auto-columns", "0fr");
+test_computed_value("grid-auto-columns", "minmax(auto, 0%)");
+test_computed_value("grid-auto-columns", "fit-content(0px)");
+
+// <track-size>+
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1339672
+test_computed_value("grid-auto-columns", "1px 2px 3px 0px");
+test_computed_value("grid-auto-columns", "fit-content(1px) minmax(2px, 3px) 4px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html
new file mode 100644
index 0000000000..04e0fadf0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-columns with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<meta name="assert" content="grid-auto-columns supports only the grammar '<track-size>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <track-breadth>
+test_invalid_value("grid-auto-columns", "none");
+test_invalid_value("grid-auto-columns", "-1px");
+test_invalid_value("grid-auto-columns", "-4%");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+test_invalid_value("grid-auto-columns", "minmax(1px)");
+test_invalid_value("grid-auto-columns", "minmax(1px, 2px, 3px)");
+test_invalid_value("grid-auto-columns", "minmax(5fr, 1px)");
+test_invalid_value("grid-auto-columns", "minmax(6px, -7%)");
+test_invalid_value("grid-auto-columns", "minmax(8px, -9fr)");
+
+// fit-content( <length-percentage> )
+test_invalid_value("grid-auto-columns", "fit-content(-1px)");
+test_invalid_value("grid-auto-columns", "fit-content(1px, 2px)");
+test_invalid_value("grid-auto-columns", "fit-content(1px auto)");
+
+// <track-size>+
+test_invalid_value("grid-auto-columns", "2em / 3em");
+test_invalid_value("grid-auto-columns", "auto, 10%");
+test_invalid_value("grid-auto-columns", "1px [a] 1px");
+test_invalid_value("grid-auto-columns", "[] 1px []");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-valid.html
new file mode 100644
index 0000000000..e26d085a2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-valid.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-columns with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<meta name="assert" content="grid-auto-columns supports the full grammar '<track-size>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <track-breadth>
+// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_valid_value("grid-auto-columns", "1px");
+test_valid_value("grid-auto-columns", "2em");
+test_valid_value("grid-auto-columns", "calc(2em + 3ex)");
+test_valid_value("grid-auto-columns", "4%");
+test_valid_value("grid-auto-columns", "5fr");
+test_valid_value("grid-auto-columns", "min-content");
+test_valid_value("grid-auto-columns", "max-content");
+test_valid_value("grid-auto-columns", "auto");
+test_valid_value("grid-auto-columns", "auto /**/", "auto");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
+test_valid_value("grid-auto-columns", "minmax(1px, 5fr)");
+test_valid_value("grid-auto-columns", "minmax(2em, min-content)");
+test_valid_value("grid-auto-columns", "minmax(calc(2em + 3ex), max-content)");
+test_valid_value("grid-auto-columns", "minmax(4%, auto)");
+test_valid_value("grid-auto-columns", "minmax(5vmin, 1px)");
+test_valid_value("grid-auto-columns", "minmax(min-content, 2em)");
+test_valid_value("grid-auto-columns", "minmax(max-content, calc(2em + 3ex))");
+test_valid_value("grid-auto-columns", "minmax(auto, 4%)");
+
+// fit-content( <length-percentage> )
+test_valid_value("grid-auto-columns", "fit-content(1px)");
+test_valid_value("grid-auto-columns", "fit-content(2em)");
+test_valid_value("grid-auto-columns", "fit-content(calc(2em + 3ex))");
+test_valid_value("grid-auto-columns", "fit-content(4%)");
+
+test_valid_value("grid-auto-columns", "0px");
+test_valid_value("grid-auto-columns", "0%");
+test_valid_value("grid-auto-columns", "0fr");
+test_valid_value("grid-auto-columns", "minmax(auto, 0%)");
+test_valid_value("grid-auto-columns", "fit-content(0px)");
+
+// <track-size>+
+test_valid_value("grid-auto-columns", "auto auto");
+test_valid_value("grid-auto-columns", "auto 10px");
+test_valid_value("grid-auto-columns", "1px 2px 3px 0px");
+test_valid_value("grid-auto-columns", "fit-content(1px) minmax(2px, 3px) 4px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html
new file mode 100644
index 0000000000..330956c493
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridAutoFlow</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("grid-auto-flow", "row");
+test_computed_value("grid-auto-flow", "column");
+test_computed_value("grid-auto-flow", "row dense", "dense");
+test_computed_value("grid-auto-flow", "column dense");
+
+test_computed_value("grid-auto-flow", "dense row", "dense");
+test_computed_value("grid-auto-flow", "dense column", "column dense");
+
+test_computed_value("grid-auto-flow", "dense", "dense");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-invalid.html
new file mode 100644
index 0000000000..a261e8eba1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-flow with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
+<meta name="assert" content="grid-auto-flow supports only the grammar '[ row | column ] || dense'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("grid-auto-flow", "auto");
+test_invalid_value("grid-auto-flow", "row dense column");
+test_invalid_value("grid-auto-flow", "dense row dense");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-valid.html
new file mode 100644
index 0000000000..7db8b189a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-valid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-flow with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
+<meta name="assert" content="grid-auto-flow supports the full grammar '[ row | column ] || dense'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("grid-auto-flow", "row");
+test_valid_value("grid-auto-flow", "column");
+test_valid_value("grid-auto-flow", "row dense", "dense");
+test_valid_value("grid-auto-flow", "dense row", "dense");
+test_valid_value("grid-auto-flow", "dense");
+test_valid_value("grid-auto-flow", "column dense");
+test_valid_value("grid-auto-flow", "dense column", "column dense");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html
new file mode 100644
index 0000000000..761c5d785d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridAutoRows</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+ #target {
+ font-size: 40px;
+ }
+</style>
+<script>
+// <track-breadth>
+// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-auto-rows", "1px");
+test_computed_value("grid-auto-rows", "calc(10px + 0.5em)", "30px");
+test_computed_value("grid-auto-rows", "calc(10px - 0.5em)", "0px");
+test_computed_value("grid-auto-rows", "4%");
+test_computed_value("grid-auto-rows", "5fr");
+test_computed_value("grid-auto-rows", "min-content");
+test_computed_value("grid-auto-rows", "max-content");
+test_computed_value("grid-auto-rows", "auto");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
+test_computed_value("grid-auto-rows", "minmax(1px, 5fr)");
+test_computed_value("grid-auto-rows", "minmax(calc(10px + 0.5em), max-content)", "minmax(30px, max-content)");
+test_computed_value("grid-auto-rows", "minmax(calc(10px - 0.5em), max-content)", "minmax(0px, max-content)");
+test_computed_value("grid-auto-rows", "minmax(4%, auto)");
+test_computed_value("grid-auto-rows", "minmax(min-content, calc(10px + 0.5em))", "minmax(min-content, 30px)");
+test_computed_value("grid-auto-rows", "minmax(auto, 4%)");
+
+// fit-content( <length-percentage> )
+test_computed_value("grid-auto-rows", "fit-content(1px)");
+test_computed_value("grid-auto-rows", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
+test_computed_value("grid-auto-rows", "fit-content(calc(10px - 0.5em))", "fit-content(0px)");
+test_computed_value("grid-auto-rows", "fit-content(4%)");
+
+// 0
+test_computed_value("grid-auto-rows", "0px");
+test_computed_value("grid-auto-rows", "0%");
+test_computed_value("grid-auto-rows", "0fr");
+test_computed_value("grid-auto-rows", "minmax(auto, 0%)");
+test_computed_value("grid-auto-rows", "fit-content(0px)");
+
+// <track-size>+
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1339672
+test_computed_value("grid-auto-rows", "1px 2px 3px 0px");
+test_computed_value("grid-auto-rows", "fit-content(1px) minmax(2px, 3px) 4px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html
new file mode 100644
index 0000000000..1b61479f3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-rows with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<meta name="assert" content="grid-auto-rows supports only the grammar '<track-size>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <track-breadth>
+test_invalid_value("grid-auto-rows", "none");
+test_invalid_value("grid-auto-rows", "-1px");
+test_invalid_value("grid-auto-rows", "-4%");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+test_invalid_value("grid-auto-rows", "minmax(1px)");
+test_invalid_value("grid-auto-rows", "minmax(1px, 2px, 3px)");
+test_invalid_value("grid-auto-rows", "minmax(5fr, 1px)");
+test_invalid_value("grid-auto-rows", "minmax(6px, -7%)");
+
+// fit-content( <length-percentage> )
+test_invalid_value("grid-auto-rows", "fit-content(-1px)");
+test_invalid_value("grid-auto-rows", "fit-content(1px, 2px)");
+test_invalid_value("grid-auto-rows", "fit-content(1px auto)");
+
+// <track-size>+
+test_invalid_value("grid-auto-rows", "2em / 3em");
+test_invalid_value("grid-auto-rows", "auto, 10%");
+test_invalid_value("grid-auto-rows", "1px [a] 1px");
+test_invalid_value("grid-auto-rows", "[] 1px []");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-valid.html
new file mode 100644
index 0000000000..d4dcdb12b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-valid.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-rows with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<meta name="assert" content="grid-auto-rows supports the full grammar '<track-size>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <track-breadth>
+// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_valid_value("grid-auto-rows", "1px");
+test_valid_value("grid-auto-rows", "2em");
+test_valid_value("grid-auto-rows", "calc(2em + 3ex)");
+test_valid_value("grid-auto-rows", "4%");
+test_valid_value("grid-auto-rows", "5fr");
+test_valid_value("grid-auto-rows", "min-content");
+test_valid_value("grid-auto-rows", "max-content");
+test_valid_value("grid-auto-rows", "auto");
+test_valid_value("grid-auto-rows", "auto /**/", "auto");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
+test_valid_value("grid-auto-rows", "minmax(1px, 5fr)");
+test_valid_value("grid-auto-rows", "minmax(2em, min-content)");
+test_valid_value("grid-auto-rows", "minmax(calc(2em + 3ex), max-content)");
+test_valid_value("grid-auto-rows", "minmax(4%, auto)");
+test_valid_value("grid-auto-rows", "minmax(5vmin, 1px)");
+test_valid_value("grid-auto-rows", "minmax(min-content, 2em)");
+test_valid_value("grid-auto-rows", "minmax(max-content, calc(2em + 3ex))");
+test_valid_value("grid-auto-rows", "minmax(auto, 4%)");
+
+// fit-content( <length-percentage> )
+test_valid_value("grid-auto-rows", "fit-content(1px)");
+test_valid_value("grid-auto-rows", "fit-content(2em)");
+test_valid_value("grid-auto-rows", "fit-content(calc(2em + 3ex))");
+test_valid_value("grid-auto-rows", "fit-content(4%)");
+
+test_valid_value("grid-auto-rows", "0px");
+test_valid_value("grid-auto-rows", "0%");
+test_valid_value("grid-auto-rows", "0fr");
+test_valid_value("grid-auto-rows", "minmax(auto, 0%)");
+test_valid_value("grid-auto-rows", "fit-content(0px)");
+
+// <track-size>+
+test_valid_value("grid-auto-rows", "auto auto");
+test_valid_value("grid-auto-rows", "auto 10px");
+test_valid_value("grid-auto-rows", "1px 2px 3px 0px");
+test_valid_value("grid-auto-rows", "fit-content(1px) minmax(2px, 3px) 4px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html b/testing/web-platform/tests/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html
new file mode 100644
index 0000000000..99af0110be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html
@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=73272">
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/alignment.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+<meta name="assert" content="Test that setting and getting multiple grid-template-columns and grid-template-rows works as expected">
+<style>
+/* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution. */
+.definite {
+ width: 800px;
+ height: 600px;
+}
+
+.gridItem {
+ grid-column: 1;
+ grid-row: 1;
+ width: 7px;
+ height: 16px;
+}
+
+.gridItem2 {
+ grid-column: 2;
+ grid-row: 2;
+ width: 17px;
+ height: 3px;
+}
+
+.gridWithFixed {
+ grid-template-columns: 7px 11px;
+ grid-template-rows: 17px 2px;
+}
+
+.gridWithPercent {
+ grid-template-columns: 50% 100%;
+ grid-template-rows: 25% 75%;
+}
+.gridWithAuto {
+ grid-template-columns: auto auto;
+ grid-template-rows: auto auto;
+}
+.gridWithEM {
+ grid-template-columns: 10em 12em;
+ grid-template-rows: 15em 17em;
+ font: 10px Ahem;
+}
+.gridWithNoneAndAuto {
+ grid-template-columns: none auto;
+ grid-template-rows: none auto;
+}
+.gridNoneWithAndFixed {
+ grid-template-columns: none 15px;
+ grid-template-rows: none 22px;
+}
+.gridWithThreeItems {
+ grid-template-columns: 15px auto 10em;
+ grid-template-rows: 12em 18px auto;
+ font: 10px Ahem;
+}
+.gridWithFitContentAndFitAvailable {
+ grid-template-columns: -webkit-content-available;
+ grid-template-rows: -webkit-fit-content -webkit-fit-available;
+}
+.gridWithMinMaxContent {
+ grid-template-columns: min-content max-content;
+ grid-template-rows: max-content min-content;
+}
+.gridWithMinMaxAndFixed {
+ grid-template-columns: minmax(45px, 30%) 15px;
+ grid-template-rows: 12em minmax(35%, 10px);
+ font: 10px Ahem;
+}
+.gridWithMinMaxAndMinMaxContent {
+ grid-template-columns: minmax(min-content, 30%) 15px;
+ grid-template-rows: 12em minmax(35%, max-content);
+ font: 10px Ahem;
+}
+.gridWithFractionFraction {
+ grid-template-columns: 2fr 3fr;
+ grid-template-rows: 3fr 5fr;
+}
+.gridWithFractionMinMax {
+ grid-template-columns: minmax(min-content, 45px) 2fr;
+ grid-template-rows: 3fr minmax(14px, max-content);
+}
+.gridWithCalcCalc {
+ grid-template-columns: calc(200px) calc(10em);
+ grid-template-rows: calc(15em) calc(75px);
+ font: 10px Ahem;
+}
+.gridWithCalcAndFixed {
+ grid-template-columns: calc(50%) 8em;
+ grid-template-rows: 88px calc(25%);
+ font: 10px Ahem;
+}
+.gridWithCalcAndMinMax {
+ grid-template-columns: calc(30px + 20%) minmax(min-content, 80px);
+ grid-template-rows: minmax(25%, max-content) calc(10% - 7px);
+}
+.gridWithCalcInsideMinMax {
+ grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
+ grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
+ font: 10px Ahem;
+}
+.gridWithAutoInsideMinMax {
+ grid-template-columns: minmax(auto, min-content) 30px;
+ grid-template-rows: calc(100px + 2em) minmax(10%, auto);
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
+<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize">
+ <div class="gridItem"></div>
+</div>
+<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement">
+ <div class="gridItem2"></div>
+</div>
+<div class="grid definite gridWithEM" id="gridWithEMElement"></div>
+<div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
+<div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
+<div class="grid definite gridWithThreeItems contentStart" id="gridWithThreeItems"></div>
+<div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
+<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
+<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement">
+ <div class="gridItem"></div>
+ <div class="gridItem2"></div>
+</div>
+<div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
+<div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
+<div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction"></div>
+<div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
+<div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div>
+<div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
+<div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
+<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
+<div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMax"></div>
+
+<script>
+function testGridDefinitionsValues(id, columnValue, rowValue)
+{
+ test(function(){
+ var element = document.getElementById(id);
+ var readColumnValue = getComputedStyle(element).gridTemplateColumns;
+ var readRowValue = getComputedStyle(element).gridTemplateRows;
+ assert_equals(readColumnValue, columnValue);
+ assert_equals(readRowValue, rowValue);
+ }, `Test getting grid-template-columns and grid-template-rows set through CSS for element '${id}' : grid-template-columns = '${columnValue}', grid-template-rows = '${rowValue}'`);
+}
+
+function testGridDefinitionsSetJSValues(
+ columnValue,
+ rowValue,
+ computedColumnValue = columnValue,
+ computedRowValue = rowValue,
+ jsColumnValue = columnValue,
+ jsRowValue = rowValue)
+{
+ test(function(){
+ window.element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.display = "grid";
+ element.style.width = "800px";
+ element.style.height = "600px";
+ element.style.justifyContent = "start";
+ element.style.alignContent = "start";
+ element.style.font = "10px Ahem"; // Used to resolve em font consistently.
+ element.style.gridTemplateColumns = columnValue;
+ element.style.gridTemplateRows = rowValue;
+ assert_equals(getComputedStyle(element).gridTemplateColumns, computedColumnValue);
+ assert_equals(element.style.gridTemplateColumns, jsColumnValue);
+ assert_equals(getComputedStyle(element).gridTemplateRows, computedRowValue);
+ assert_equals(element.style.gridTemplateRows, jsRowValue);
+ document.body.removeChild(element);
+ }, `Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '${computedColumnValue}', element.style.gridTemplateColumns = '${columnValue}', grid-template-rows = '${computedRowValue}', element.style.gridTemplateRows = '${rowValue}'`);
+}
+
+function testGridDefinitionsSetBadJSValues(columnValue, rowValue)
+{
+ test(function(){
+ window.element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.gridTemplateColumns = columnValue;
+ element.style.gridTemplateRows = rowValue;
+ assert_equals(getComputedStyle(element).gridTemplateColumns, "none");
+ assert_equals(getComputedStyle(element).gridTemplateRows, "none");
+ document.body.removeChild(element);
+ }, `Test setting bad JS values: grid-template-columns = '${columnValue}', grid-template-rows = '${rowValue}'`);
+}
+
+function testDefaultValue()
+{
+ test(function(){
+ var element = document.createElement("div");
+ document.body.appendChild(element);
+ assert_equals(getComputedStyle(element).gridTemplateColumns, "none");
+ assert_equals(getComputedStyle(element).gridTemplateRows, "none");
+ document.body.removeChild(element);
+ }, `Test the default value`);
+}
+
+function testWrongCSSValue()
+{
+ test(function(){
+ var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto");
+ assert_equals(getComputedStyle(gridWithNoneAndAuto).gridTemplateColumns, "none");
+ assert_equals(getComputedStyle(gridWithNoneAndAuto).gridTemplateRows, "none");
+
+ var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed");
+ assert_equals(getComputedStyle(gridWithNoneAndFixed).gridTemplateColumns, "none");
+ assert_equals(getComputedStyle(gridWithNoneAndFixed).gridTemplateRows, "none");
+ }, `Test setting wrong/invalid values through CSS`);
+}
+
+function testInherit()
+{
+ test(function(){
+ var parentElement = document.createElement("div");
+ document.body.appendChild(parentElement);
+ parentElement.style.display = "grid";
+ parentElement.style.width = "800px";
+ parentElement.style.height = "600px";
+ parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently.
+ parentElement.style.gridTemplateColumns = "50px 1fr [last]";
+ parentElement.style.gridTemplateRows = "2em [middle] 45px";
+ assert_equals(getComputedStyle(parentElement).gridTemplateColumns, "50px 750px [last]");
+ assert_equals(getComputedStyle(parentElement).gridTemplateRows, "20px [middle] 45px");
+
+ element = document.createElement("div");
+ parentElement.appendChild(element);
+ element.style.display = "grid";
+ element.style.gridTemplateColumns = "inherit";
+ element.style.gridTemplateRows = "inherit";
+ assert_equals(getComputedStyle(element).gridTemplateColumns, "50px 0px [last]");
+ assert_equals(getComputedStyle(element).gridTemplateRows, "20px [middle] 45px");
+
+ document.body.removeChild(parentElement);
+ }, `Test setting grid-template-columns and grid-template-rows to 'inherit' through JS`);
+}
+
+function testInitial()
+{
+ test(function(){
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.display = "grid";
+ element.style.width = "800px";
+ element.style.height = "600px";
+ element.style.gridTemplateColumns = "150% [middle] 55px";
+ element.style.gridTemplateRows = "1fr [line] 2fr [line]";
+ assert_equals(getComputedStyle(element).gridTemplateColumns, "1200px [middle] 55px");
+ assert_equals(getComputedStyle(element).gridTemplateRows, "200px [line] 400px [line]");
+
+ element.style.gridTemplateColumns = "initial";
+ element.style.gridTemplateRows = "initial";
+ assert_equals(getComputedStyle(element).gridTemplateColumns, "none");
+ assert_equals(getComputedStyle(element).gridTemplateRows, "none");
+
+ document.body.removeChild(element);
+ }, `Test setting grid-template-columns and grid-template-rows to 'initial' through JS`);
+}
+
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+ testGridDefinitionsValues("gridWithFixedElement", "7px 11px", "17px 2px");
+ testGridDefinitionsValues("gridWithPercentElement", "400px 800px", "150px 450px");
+ // This test failing in Firefox is caused by https://bugzilla.mozilla.org/show_bug.cgi?id=1481876
+ testGridDefinitionsValues("gridWithPercentWithoutSize", "3.5px 7px", "4px 12px");
+ testGridDefinitionsValues("gridWithAutoElement", "0px 17px", "0px 3px");
+ testGridDefinitionsValues("gridWithEMElement", "100px 120px", "150px 170px");
+ testGridDefinitionsValues("gridWithThreeItems", "15px 0px 100px", "120px 18px 0px");
+ testGridDefinitionsValues("gridWithFitContentAndFitAvailable", "none", "none");
+ testGridDefinitionsValues("gridWithMinMaxContent", "0px 0px", "0px 0px");
+ testGridDefinitionsValues("gridWithMinMaxContentWithChildrenElement", "7px 17px", "16px 3px");
+ testGridDefinitionsValues("gridWithMinMaxAndFixed", "240px 15px", "120px 210px");
+ testGridDefinitionsValues("gridWithMinMaxAndMinMaxContent", "240px 15px", "120px 210px");
+ testGridDefinitionsValues("gridWithFractionFraction", "320px 480px", "225px 375px");
+ testGridDefinitionsValues("gridWithFractionMinMax", "45px 755px", "586px 14px");
+ testGridDefinitionsValues("gridWithCalcCalc", "200px 100px", "150px 75px");
+ testGridDefinitionsValues("gridWithCalcAndFixed", "400px 80px", "88px 150px");
+ testGridDefinitionsValues("gridWithCalcAndMinMax", "190px 80px", "150px 53px");
+ testGridDefinitionsValues("gridWithCalcInsideMinMax", "400px 120px", "150px 175px");
+ testGridDefinitionsValues("gridWithAutoInsideMinMax", "0px 30px", "132px 60px");
+
+ testGridDefinitionsSetJSValues("18px 22px", "66px 70px");
+ testGridDefinitionsSetJSValues("55% 80%", "40% 63%", "440px 640px", "240px 378px");
+ testGridDefinitionsSetJSValues("auto auto", "auto auto", "0px 0px", "0px 0px");
+ testGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "0px 160px 22px", "336px 100px 0px");
+ testGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) auto", "160px 20px", "90px 0px");
+ testGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 640px", "600px 0px");
+ testGridDefinitionsSetJSValues("calc(25px) calc(2em)", "auto calc(10%)", "25px 20px", "0px 60px", "calc(25px) calc(2em)", "auto calc(10%)");
+ // This test failing in Chromium is caused by https://bugs.chromium.org/p/chromium/issues/detail?id=1050968
+ testGridDefinitionsSetJSValues("calc(25px + 40%) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto", "345px 92px", "100px 0px", "calc(40% + 25px) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto");
+
+ testWrongCSSValue();
+
+ testGridDefinitionsSetBadJSValues("none auto", "none auto");
+ testGridDefinitionsSetBadJSValues("none 16em", "none 56%");
+ testGridDefinitionsSetBadJSValues("none none", "none none");
+ testGridDefinitionsSetBadJSValues("auto none", "auto none");
+ testGridDefinitionsSetBadJSValues("auto none 16em", "auto 18em none");
+ testGridDefinitionsSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available");
+ // Negative values are not allowed.
+ testGridDefinitionsSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%) -10vw");
+ testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 10vw");
+ // Invalid expressions with calc
+ testGridDefinitionsSetBadJSValues("10px calc(16px 30px)", "calc(25px + auto) 2em");
+ testGridDefinitionsSetBadJSValues("minmax(min-content, calc() 250px", "calc(2em(");
+
+ testInherit();
+
+ testDefaultValue()
+
+ testInitial();
+
+ done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-content-sized-columns-resolution.html b/testing/web-platform/tests/css/css-grid/parsing/grid-content-sized-columns-resolution.html
new file mode 100644
index 0000000000..411687abdb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-content-sized-columns-resolution.html
@@ -0,0 +1,386 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=392200">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/alignment.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+<meta name="assert" content="Checks resolution of content sized grid columns and verifies that items are processed by ascending span to compute column breadths">
+<style>
+.grid {
+ font: 10px/1 Ahem;
+ }
+.gridWidth300 {
+ width: 300px;
+}
+.gridMinContentFixedAndAuto {
+ grid-template-columns: minmax(min-content, 15px) auto;
+}
+.gridMaxContentFixedAndAuto {
+ grid-template-columns: minmax(max-content, 15px) auto;
+}
+.gridAutoAndAuto {
+ grid-template-columns: auto auto;
+}
+.gridMinContentAndMinContentFixed {
+ grid-template-columns: min-content minmax(min-content, 30px);
+}
+.gridMinContentAndMaxContentFixed {
+ grid-template-columns: min-content minmax(max-content, 30px);
+}
+.gridMaxContentAndMinContent {
+ grid-template-columns: max-content min-content;
+}
+.gridFixedMinContentAndMaxContent {
+ grid-template-columns: minmax(10px, min-content) max-content;
+}
+.gridFixedMaxContentAndMinContent {
+ grid-template-columns: minmax(10px, max-content) min-content;
+}
+.gridAutoMinContent {
+ grid-template-columns: auto min-content;
+}
+.gridAutoMaxContent {
+ grid-template-columns: auto max-content;
+}
+.gridMaxContentAndMinContentFixed {
+ grid-template-columns: max-content minmax(min-content, 35px);
+}
+.gridMaxContentAndMaxContentFixed {
+ grid-template-columns: max-content minmax(max-content, 35px);
+}
+.gridMinContentFixedAndFixedFixedAndAuto {
+ grid-template-columns: minmax(min-content, 20px) minmax(20px, 30px) auto;
+}
+.gridAutoAndFixedFixedAndMaxContentFixed {
+ grid-template-columns: auto minmax(20px, 30px) minmax(max-content, 20px);
+}
+.gridMaxContentAndMaxContentFixedAndMaxContent {
+ grid-template-columns: max-content minmax(max-content, 20px) max-content;
+}
+.gridAutoAndMinContentFixedAndMinContent {
+ grid-template-columns: auto minmax(min-content, 30px) min-content;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAuto">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixed">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContent">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContent">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContent">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixed">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAuto">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ </div>
+</div>
+
+<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContent">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContent">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixed">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ </div>
+</div>
+
+<div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixed">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<!-- Check that items are processed by ascending span instead of going track by track forbidding extra space distribution. -->
+<div class="constrainedContainer">
+ <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoUnsortedConstrained">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowSecondColumn">XXXX XXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridAutoAndAuto" id="gridAutoAndAutoUnsortedConstrained">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowSecondColumn">XXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixedUnsortedConstrained">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XXXX XXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUnsortedConstrained">
+ <div class="firstRowBothColumn">XXX XXX</div>
+ <div class="firstRowSecondColumn">XXXXXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContentUnsortedConstrained">
+ <div class="firstRowBothColumn">XXXXX XX</div>
+ <div class="firstRowSecondColumn">XXX</div>
+ <div class="firstRowSecondColumn">XXXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContentUnsortedConstrained">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">X X</div>
+ <div class="firstRowSecondColumn">XXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixedUnsortedConstrained">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowSecondColumn">XXXX XXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoUnsortedConstrained">
+ <div class="firstRowBothColumn">XX XX</div>
+ <div class="firstRowSecondColumn">XXXX</div>
+ <div class="firstRowSecondColumn">XXX XXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridAutoMinContent" id="gridAutoMinContentUnsortedConstrained">
+ <div class="firstRowBothColumn">XX XX XX XX</div>
+ <div class="firstRowSecondColumn">XXXXXX XXXXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridAutoMaxContent" id="gridAutoMaxContentUnsortedConstrained">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">XXX XXX</div>
+ <div class="firstRowSecondColumn">XXXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixedUnsortedConstrained">
+ <div class="firstRowBothColumn">XXX XXX</div>
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowSecondColumn">XXXX XXXX</div>
+ <div class="firstRowSecondColumn">XX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixedUnsortedConstrained">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">XX XX XX XX</div>
+ <div class="firstRowSecondColumn">XXXXXXX</div>
+ </div>
+</div>
+
+<!-- Check that items are processed by ascending span instead of going track by track allowing extra space distribution. -->
+<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoUnsorted">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowSecondColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoUnsorted">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowSecondColumn">XXX</div>
+</div>
+
+<div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixedUnsorted">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">XX XX XX XX</div>
+ <div class="firstRowSecondColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUnsorted">
+ <div class="firstRowBothColumn">XXX XXX</div>
+ <div class="firstRowSecondColumn">XXXXXXX</div>
+</div>
+
+<div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContentUnsorted">
+ <div class="firstRowBothColumn">XXXXX XX</div>
+ <div class="firstRowSecondColumn">XXX</div>
+ <div class="firstRowSecondColumn">XXXXX</div>
+</div>
+
+<div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContentUnsorted">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">X X</div>
+ <div class="firstRowSecondColumn">XXXX</div>
+</div>
+
+<div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixedUnsorted">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowSecondColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridMaxContentFixedAndAuto justifyContentStart" id="gridMaxContentFixedAndAutoUnsorted">
+ <div class="firstRowBothColumn">XX XX</div>
+ <div class="firstRowSecondColumn">XXXX</div>
+ <div class="firstRowSecondColumn">XXX XXX</div>
+</div>
+
+<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContentUnsorted">
+ <div class="firstRowBothColumn">XX XX XX XX</div>
+ <div class="firstRowSecondColumn">XXXXXX XXXXXX</div>
+</div>
+
+<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContentUnsorted">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">XXX XXX</div>
+ <div class="firstRowSecondColumn">XXXXX</div>
+</div>
+
+<div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixedUnsorted">
+ <div class="firstRowBothColumn">XXX XXX</div>
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowSecondColumn">XXXX XXXX</div>
+ <div class="firstRowSecondColumn">XX</div>
+</div>
+
+<div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixedUnsorted">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">XX XX XX XX</div>
+ <div class="firstRowSecondColumn">XXXXXXX</div>
+</div>
+
+<!-- The next four force the grid to grow only a particular subset of tracks above the limits -->
+<div class="constrainedContainer">
+ <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoAboveLimits">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">XXXXXXXXXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoAboveLimits">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMinContentFixedAndFixedFixedAndAuto" id="gridMinContentFixedAndFixedFixedAndAuto">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">XXXXXXXXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridAutoAndFixedFixedAndMaxContentFixed" id="gridAutoAndFixedFixedAndMaxContentFixed">
+ <div class="firstRowBothColumn">XXXX XXXX</div>
+ <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
+ </div>
+</div>
+
+<div class="grid gridMaxContentAndMaxContentFixedAndMaxContent" id="gridMaxContentAndMaxContentFixedAndMaxContent">
+ <div style="grid-row: 1; grid-column: 1;">X X X</div>
+ <div style="grid-row: 1; grid-column: 3;">X X</div>
+ <div style="grid-row: 1; grid-column: 1 / -1;">XX XX XX XX XX</div>
+</div>
+
+<div class="grid gridAutoAndMinContentFixedAndMinContent justifyContentStart" id="gridAutoAndMinContentFixedAndMinContent">
+ <div style="grid-row: 1; grid-column: 1;">XX</div>
+ <div style="grid-row: 1; grid-column: 1 / -1;">XXXXXXXXXXXXXXX</div>
+ <div style="grid-row: 1; grid-column: 3;">XXX XXX</div>
+</div>
+
+<script>
+function testGridColumnsValues(id, computedColumnValue) {
+ test(function(){
+ var div = document.getElementById(id);
+ var readValue = getComputedStyle(div).gridTemplateColumns;
+ assert_equals(readValue, computedColumnValue);
+ }, `Element '${id}' grid-template-columns value computes to '${computedColumnValue}'`);
+}
+
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+ testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px");
+ testGridColumnsValues("gridAutoAndAuto", "45px 45px");
+ testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px");
+ testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px");
+ testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px");
+ testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px");
+ testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px");
+ testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px");
+ testGridColumnsValues("gridAutoMinContent", "70px 20px");
+ testGridColumnsValues("gridAutoMaxContent", "20px 70px");
+ testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px");
+ testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px");
+
+ // Check that items are processed by ascending span to compute track breadths forbidding extra space distribution.
+ testGridColumnsValues("gridMinContentFixedAndAutoUnsortedConstrained", "0px 40px");
+ testGridColumnsValues("gridAutoAndAutoUnsortedConstrained", "10px 30px");
+ testGridColumnsValues("gridMinContentAndMinContentFixedUnsortedConstrained", "0px 40px");
+ testGridColumnsValues("gridMaxContentAndMinContentUnsortedConstrained", "0px 70px");
+ testGridColumnsValues("gridFixedMinContentAndMaxContentUnsortedConstrained", "10px 70px");
+ testGridColumnsValues("gridFixedMaxContentAndMinContentUnsortedConstrained", "10px 40px");
+ testGridColumnsValues("gridMinContentAndMaxContentFixedUnsortedConstrained", "0px 90px");
+ testGridColumnsValues("gridMaxContentFixedAndAutoUnsortedConstrained", "10px 40px");
+ testGridColumnsValues("gridAutoMinContentUnsortedConstrained", "0px 60px");
+ testGridColumnsValues("gridAutoMaxContentUnsortedConstrained", "0px 90px");
+ testGridColumnsValues("gridMaxContentAndMinContentFixedUnsortedConstrained", "50px 40px");
+ testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsortedConstrained", "40px 70px");
+
+ // Check that items are processed by ascending span to compute track breadths allowing extra space distribution.
+ testGridColumnsValues("gridMinContentFixedAndAutoUnsorted", "15px 90px");
+ testGridColumnsValues("gridAutoAndAutoUnsorted", "60px 30px");
+ testGridColumnsValues("gridMinContentAndMinContentFixedUnsorted", "0px 40px");
+ testGridColumnsValues("gridMaxContentAndMinContentUnsorted", "0px 70px");
+ testGridColumnsValues("gridFixedMinContentAndMaxContentUnsorted", "10px 70px");
+ testGridColumnsValues("gridFixedMaxContentAndMinContentUnsorted", "50px 40px");
+ testGridColumnsValues("gridMinContentAndMaxContentFixedUnsorted", "0px 90px");
+ testGridColumnsValues("gridMaxContentFixedAndAutoUnsorted", "15px 70px");
+ testGridColumnsValues("gridAutoMinContentUnsorted", "50px 60px");
+ testGridColumnsValues("gridAutoMaxContentUnsorted", "0px 90px");
+ testGridColumnsValues("gridMaxContentAndMinContentFixedUnsorted", "50px 40px");
+ testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsorted", "40px 70px");
+
+ // Check that only a subset of tracks grow above track limits.
+ testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px");
+ testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "15px 135px");
+ testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 60px");
+ testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "110px 20px 20px");
+ testGridColumnsValues("gridMaxContentAndMaxContentFixedAndMaxContent", "70px 20px 50px");
+ testGridColumnsValues("gridAutoAndMinContentFixedAndMinContent", "55px 30px 65px");
+
+ done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-invalid.html
new file mode 100644
index 0000000000..e5dbe7821c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-invalid.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing 'grid' with invalid values</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid">
+<meta name="assert" content="grid-template supports only the grammar `<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+test_invalid_value("grid", 'none none');
+test_invalid_value("grid", 'none []');
+test_invalid_value("grid", '10px');
+test_invalid_value("grid", '20%');
+test_invalid_value("grid", '5fr');
+test_invalid_value("grid", '[a]');
+test_invalid_value("grid", '[a] 10px');
+test_invalid_value("grid", '[a] 10px []');
+test_invalid_value("grid", '[]');
+test_invalid_value("grid", '10px "a"');
+test_invalid_value("grid", '[] 10px "a"');
+test_invalid_value("grid", '10px [] "a"');
+test_invalid_value("grid", '[] [] "a"');
+test_invalid_value("grid", '"a" none');
+test_invalid_value("grid", '"a" 10px 10px');
+test_invalid_value("grid", '"a" [a] 10px');
+test_invalid_value("grid", '"a" [a] 10px [a]');
+test_invalid_value("grid", '"a" [a] [a] 10px');
+test_invalid_value("grid", '"a" 10px [a] [a]');
+test_invalid_value("grid", '"a" [a] [a]');
+test_invalid_value("grid", '[a] "a" [a] [a]');
+test_invalid_value("grid", '"a" "a" [a] [a]');
+test_invalid_value("grid", '"a" [a] [a] / none');
+test_invalid_value("grid", '"a" "a" [a] [a] / none');
+test_invalid_value("grid", 'none / "a"');
+test_invalid_value("grid", '"a" / none');
+test_invalid_value("grid", 'none / [] "a"');
+test_invalid_value("grid", 'none / "a" []');
+test_invalid_value("grid", 'none / "a" [] 10px');
+test_invalid_value("grid", 'auto-flow 100px');
+test_invalid_value("grid", 'auto-flow / auto-flow');
+test_invalid_value("grid", 'auto-flow 1fr / auto-flow 1fr');
+test_invalid_value("grid", 'dense auto-flow / dense auto-flow');
+test_invalid_value("grid", 'auto / auto-flow foo()');
+// FIXME: add more values to test full syntax
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html
new file mode 100644
index 0000000000..3cd48cff4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: only serialize 'grid' when the value can roundtrip</title>
+<link rel="author" title="Daniel Libby" href="mailto:dlibby@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid">
+<meta name="assert" content="grid shorthand must not serialize when the value cannot roundtrip.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<script>
+ function test_shorthand_roundtrip(cssText, properties, declarations) {
+ var div = document.createElement('div');
+ div.style.cssText = cssText;
+
+ for (let property of Object.keys(properties).sort()) {
+ test(function(){
+ const readValue = div.style[property];
+ if (Array.isArray(properties[property])) {
+ assert_in_array(readValue, properties[property], property + " serialization should be sound");
+ } else {
+ assert_equals(readValue, properties[property], property + " serialization should be canonical");
+ }
+
+ if (readValue != "") {
+ div.style[property] = "";
+ div.style[property] = readValue;
+ assert_equals(div.style[property], readValue, "serialization should round-trip");
+ }
+ }, "e.style.cssText = " + cssText + " should set " + property);
+ }
+
+ if (declarations) {
+ let cssText = div.style.cssText;
+ declarations.forEach(decl => {
+ test(function(){
+ assert_true(cssText.indexOf(decl) !== -1, `cssText ('${cssText}') must contain '${decl}'`);
+ }, `cssText ('${cssText}') must contain '${decl}'`);
+ });
+ }
+ }
+
+ test_shorthand_roundtrip('grid: auto-flow auto / 100px 100px',
+ {
+ 'grid': ['auto-flow / 100px 100px', 'none / 100px 100px'],
+ 'grid-template-areas': 'none'
+ });
+
+ test_shorthand_roundtrip('grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four"',
+ {
+ 'grid': '',
+ 'grid-template-areas': '"one two" "three four"',
+ 'grid-auto-flow': 'row',
+ 'grid-auto-rows': 'auto'
+ });
+
+ test_shorthand_roundtrip('grid: 30px 40px / 50px 60px; grid-auto-flow: column',
+ {
+ 'grid': '',
+ 'grid-template': '30px 40px / 50px 60px',
+ 'grid-auto-flow': 'column',
+ }, [
+ 'grid-template: 30px 40px / 50px 60px;',
+ 'grid-auto-rows: auto;',
+ 'grid-auto-columns: auto;',
+ 'grid-auto-flow: column;'
+ ]);
+
+ test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: 20px',
+ {
+ 'grid': '20px / 10px',
+ 'grid-template': '20px / 10px'
+ }, [
+ 'grid: 20px / 10px;'
+ ]);
+
+ test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-flow: inherit', { 'grid': '' });
+ test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-flow: row', { 'grid': '1px / 2px' });
+ test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-columns: auto', { 'grid': '1px / 2px' });
+ test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-rows: auto', { 'grid': '1px / 2px' });
+ test_shorthand_roundtrip('grid: 1px / auto-flow 2px; grid-auto-rows: auto', { 'grid': '1px / auto-flow 2px' });
+ test_shorthand_roundtrip('grid: 1px / auto-flow; grid-auto-columns: auto', { 'grid': '1px / auto-flow' });
+ test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-columns: auto', { 'grid': 'auto-flow 1px / 2px' });
+ test_shorthand_roundtrip('grid: auto-flow dense / 2px; grid-auto-rows: auto', { 'grid': 'auto-flow dense / 2px' });
+
+ test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-columns: 3px',
+ {
+ 'grid': '',
+ 'grid-auto-columns': '3px',
+ 'grid-auto-rows': '1px',
+ 'grid-auto-flow': 'row',
+ 'grid-template-columns': '2px',
+ 'grid-template-rows': 'none'
+ });
+ test_shorthand_roundtrip('grid: 1px / auto-flow 2px; grid-auto-rows: 3px',
+ {
+ 'grid': '',
+ 'grid-auto-columns': '2px',
+ 'grid-auto-rows': '3px',
+ 'grid-auto-flow': 'column',
+ 'grid-template-columns': 'none',
+ 'grid-template-rows': '1px'
+ });
+ test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: 3px',
+ {
+ 'grid': '',
+ 'grid-auto-columns': '1px',
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-flow': 'column',
+ 'grid-template-columns': '3px',
+ 'grid-template-rows': 'none'
+ });
+ test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: 3px',
+ {
+ 'grid': '',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-rows': '1px',
+ 'grid-auto-flow': 'row',
+ 'grid-template-columns': 'none',
+ 'grid-template-rows': '3px'
+ });
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-valid.html
new file mode 100644
index 0000000000..8d546a8212
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-valid.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing 'grid' with valid values</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid">
+<meta name="assert" content="grid-template supports the grammar `<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+// <'grid-template'> values
+test_valid_value("grid", 'none');
+test_valid_value("grid", 'none / none', 'none');
+test_valid_value("grid", 'auto / auto');
+test_valid_value("grid", 'none / [a] 0px');
+test_valid_value("grid", 'none / [] 0px', 'none / 0px');
+test_valid_value("grid", '[a] 10px / auto');
+test_valid_value("grid", '[a] 10px / none');
+test_valid_value("grid", '[] 10px [] / [] auto []', '10px / auto');
+test_valid_value("grid", '[a] "a" 10px');
+test_valid_value("grid", '[a] "a" 10px []', '[a] "a" 10px');
+test_valid_value("grid", '"a" 10px');
+test_valid_value("grid", '[] "a" 10px', '"a" 10px');
+test_valid_value("grid", '[a] "a" 10px [a]');
+test_valid_value("grid", '"a"');
+test_valid_value("grid", '"a" auto', '"a"');
+test_valid_value("grid", '"a a a"', '"a a a"');
+test_valid_value("grid", '"a" / 10px');
+test_valid_value("grid", '"a" / 20%');
+test_valid_value("grid", '"a" / 5fr');
+test_valid_value("grid", '[a] "a"');
+test_valid_value("grid", '[a] "a" [a]');
+test_valid_value("grid", '[] "a"', '"a"');
+test_valid_value("grid", '"a" [] [] "b"', '"a" "b"');
+test_valid_value("grid", '"a" [] "b"', '"a" "b"');
+test_valid_value("grid", '"a" [a] [b] "b"', '"a" [a b] "b"');
+test_valid_value("grid", '"a" [a] "b"');
+test_valid_value("grid", '"a" / 0', '"a" / 0px');
+test_valid_value("grid", '"a" 10px / 10px');
+test_valid_value("grid", '"a" [a] "b" 10px');
+test_valid_value("grid", '"a" [a] "b" 10px [a]');
+test_valid_value("grid", '"a" [a] [a] "b" 10px', '"a" [a a] "b" 10px');
+test_valid_value("grid", '"a" [a] [] "b" 10px', '"a" [a] "b" 10px');
+test_valid_value("grid", '"a" 10px [a] "b" [a]');
+test_valid_value("grid", '"a" [a] "b" [a]');
+test_valid_value("grid", '[a] "a" [a] "b" [a]');
+test_valid_value("grid", '"a" "a" [a] "b" [a]');
+test_valid_value("grid", '"a" [a] "b" [a] / 0', '"a" [a] "b" [a] / 0px');
+test_valid_value("grid", '"a" "a" [a] [a] "b" / auto', '"a" "a" [a a] "b" / auto');
+test_valid_value("grid", '100px / auto-flow dense 100px');
+test_valid_value("grid", 'auto-flow dense 1fr / 100px');
+test_valid_value("grid", '100px / dense auto-flow 100px', '100px / auto-flow dense 100px');
+test_valid_value("grid", 'dense auto-flow 1fr / 100px', 'auto-flow dense 1fr / 100px');
+test_valid_value("grid", '100px / auto-flow 100px');
+test_valid_value("grid", 'auto-flow 1fr / 100px');
+test_valid_value("grid", 'none / auto-flow 100px');
+test_valid_value("grid", 'auto-flow 1fr / none');
+test_valid_value("grid", 'auto / auto-flow 100px');
+test_valid_value("grid", 'auto-flow 1fr / auto');
+test_valid_value("grid", '1fr / 1fr');
+
+// FIXME: add more values to test full syntax
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand.html
new file mode 100644
index 0000000000..9293d27631
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-shorthand">
+<meta name="assert" content="grid supports the full grammar '<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <grid-template>
+test_shorthand_value('grid', 'none', {
+ 'grid-template-rows': 'none',
+ 'grid-template-columns': 'none',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid', '10px / 20%', {
+ 'grid-template-rows': '10px',
+ 'grid-template-columns': '20%',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+// This could theoretically be serialized as "auto-flow / 10px",
+// but spec mandates the 'grid-template-*' form when the
+// 'grid-auto-*' properties are all initial.
+test_shorthand_value('grid', 'none / 10px', {
+ 'grid-template-rows': 'none',
+ 'grid-template-columns': '10px',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', {
+ 'grid-template-rows': 'fit-content(calc(-0.5em + 10px))',
+ 'grid-template-columns': 'fit-content(calc(0.5em + 10px))',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid',
+ '[header-top] "a a a" [header-bottom]' +
+ ' [main-top] "b b b" 1fr [main-bottom]' +
+ ' / auto 1fr auto', {
+ 'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]',
+ 'grid-template-columns': 'auto 1fr auto',
+ 'grid-template-areas': '"a a a" "b b b"',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid',
+ ' "a a a"' +
+ ' "b b b" 1fr' +
+ '/ auto 1fr auto', {
+ 'grid-template-rows': 'auto 1fr',
+ 'grid-template-columns': 'auto 1fr auto',
+ 'grid-template-areas': '"a a a" "b b b"',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid',
+ ' [] "a a a" []' +
+ ' [] "b b b" 1fr []' +
+ ' / [] auto 1fr [] auto []', {
+ 'grid-template-rows': 'auto 1fr',
+ 'grid-template-columns': 'auto 1fr auto',
+ 'grid-template-areas': '"a a a" "b b b"',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'row'
+});
+
+// <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
+test_shorthand_value('grid',
+ '10px' +
+ ' / auto-flow dense' +
+ ' 20px', {
+ 'grid-template-rows': '10px',
+ 'grid-template-columns': 'none',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': 'auto',
+ 'grid-auto-columns': '20px',
+ 'grid-auto-flow': 'column dense'
+});
+
+// [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+test_shorthand_value('grid',
+ 'auto-flow dense' +
+ ' 30px /' +
+ ' 40px', {
+ 'grid-template-rows': 'none',
+ 'grid-template-columns': '40px',
+ 'grid-template-areas': 'none',
+
+ 'grid-auto-rows': '30px',
+ 'grid-auto-columns': 'auto',
+ 'grid-auto-flow': 'dense'
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html
new file mode 100644
index 0000000000..8290a40088
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateAreas</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("grid-template-areas", "none");
+test_computed_value("grid-template-areas", '"first"');
+test_computed_value("grid-template-areas", '"first second"');
+test_computed_value("grid-template-areas", '"1st 2nd 3rd"');
+test_computed_value("grid-template-areas", '"first second" "third fourth"');
+test_computed_value("grid-template-areas", '"first second" "third ." "1st 2nd" "3rd 4th"');
+
+// https://github.com/w3c/csswg-drafts/issues/3261
+test_computed_value("grid-template-areas", '" a \t b "', '"a b"');
+test_computed_value("grid-template-areas", '"c\td"', '"c d"');
+test_computed_value("grid-template-areas", '"first ..."', '"first ."');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-invalid.html
new file mode 100644
index 0000000000..b0e60962cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-invalid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-areas with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
+<meta name="assert" content="grid-template-areas supports only the grammar 'none | <string>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("grid-template-areas", "auto");
+test_invalid_value("grid-template-areas", 'none "first"');
+test_invalid_value("grid-template-areas", '"first" none');
+test_invalid_value("grid-template-areas", '""');
+test_invalid_value("grid-template-areas", '" "');
+test_invalid_value("grid-template-areas", '"." ""');
+test_invalid_value("grid-template-areas", '"." " "');
+test_invalid_value("grid-template-areas", '"first" ""');
+test_invalid_value("grid-template-areas", '"first" "" "second"');
+test_invalid_value("grid-template-areas", '"first" " "');
+test_invalid_value("grid-template-areas", '"" none');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-one-cell.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-one-cell.html
new file mode 100644
index 0000000000..dc341bc35d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-one-cell.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>grid-template-areas must define at least one cell</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/">
+<link rel=help href="https://www.w3.org/TR/css-grid-1/#grid-template-areas-property">
+<meta name=assert content="grid-template-areas must define at least one cell to be valid.">
+
+<script>
+function testValidGta(val) {
+ test(()=>{
+ const root = document.children[0];
+ root.style.gridTemplateAreas = "";
+ root.style.gridTemplateAreas = val;
+ assert_not_equals(root.style.gridTemplateAreas, "");
+ }, `"grid-template-areas: ${val};" should be valid.`);
+}
+function testInvalidGta(val) {
+ test(()=>{
+ const root = document.children[0];
+ root.style.gridTemplateAreas = "";
+ root.style.gridTemplateAreas = val;
+ assert_equals(root.style.gridTemplateAreas, "");
+ }, `"grid-template-areas: ${val};" should be invalid.`);
+}
+
+testValidGta("'a'");
+testValidGta("'.'");
+
+testInvalidGta("''");
+testInvalidGta("'' ''");
+testInvalidGta("'$'");
+testInvalidGta("' '");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-valid.html
new file mode 100644
index 0000000000..9c9bd47ec8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-valid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-areas with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
+<meta name="assert" content="grid-template-areas supports the full grammar 'none | <string>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("grid-template-areas", "none");
+test_valid_value("grid-template-areas", '"first"');
+test_valid_value("grid-template-areas", '"first second"');
+test_valid_value("grid-template-areas", '"1st 2nd 3rd"');
+test_valid_value("grid-template-areas", '"first second" "third fourth"');
+test_valid_value("grid-template-areas", '"first second" "third ." "1st 2nd" "3rd 4th"');
+
+// https://github.com/w3c/csswg-drafts/issues/3261
+test_valid_value("grid-template-areas", '" a \t b "', '"a b"');
+test_valid_value("grid-template-areas", '"c\td"', '"c d"');
+test_valid_value("grid-template-areas", '"first ..."', '"first ."');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html
new file mode 100644
index 0000000000..98d9efa573
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-columns on a grid container with a leading implicit track.">
+<style>
+#target {
+ display: grid;
+ width: 1px;
+ font-size: 1px;
+}
+#item {
+ grid-column: auto / 1;
+ width: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="target">
+ <div id="item"></div>
+</div>
+<script>
+// Can't use the test_computed_value from computed-testcommon.js
+// because grid-template-columns doesn't round-trip in this test.
+function grid_template_columns(specified, computed) {
+ test(() => {
+ const target = document.getElementById('target');
+ target.style.gridTemplateColumns = '';
+ target.style.gridTemplateColumns = specified;
+ assert_equals(getComputedStyle(target).gridTemplateColumns, computed);
+ }, `Property grid-template-columns value '${specified}' computes to '${computed}'`);
+}
+
+grid_template_columns("none", "10px");
+grid_template_columns("1px", "10px 1px");
+grid_template_columns("1px [a]", "10px 1px [a]");
+grid_template_columns("1px [a] 2px", "10px 1px [a] 2px");
+grid_template_columns("[a] 1px", "10px [a] 1px");
+grid_template_columns("[a] 1px [b]", "10px [a] 1px [b]");
+grid_template_columns("1px repeat(1, 2px) 3px", "10px 1px 2px 3px");
+grid_template_columns("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px");
+grid_template_columns("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px");
+grid_template_columns("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_columns("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_columns("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px");
+grid_template_columns("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px");
+grid_template_columns("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+grid_template_columns("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px");
+grid_template_columns("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-nogrid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-nogrid.html
new file mode 100644
index 0000000000..11b0393a67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-nogrid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-columns on an element which is not a grid container.">
+<style>
+#target {
+ display: block;
+ height: 1px;
+ font-size: 1px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_computed_value("grid-template-columns", "none");
+test_computed_value("grid-template-columns", "1px");
+test_computed_value("grid-template-columns", "1px [a]");
+test_computed_value("grid-template-columns", "1px [a] 2px");
+test_computed_value("grid-template-columns", "[a] 1px");
+test_computed_value("grid-template-columns", "[a] 1px [b]");
+test_computed_value("grid-template-columns", "1px repeat(1, 2px) 3px");
+test_computed_value("grid-template-columns", "1px repeat(auto-fill, 2px) 3px");
+test_computed_value("grid-template-columns", "1px repeat(auto-fit, 2px) 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(1, 2px 3px) [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(1, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-columns", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-columns", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html
new file mode 100644
index 0000000000..a550b84e05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+ #target {
+ display: grid;
+ font-size: 40px;
+ min-width: 200px;
+ width: 300px;
+ max-width: 400px;
+ min-height: 500px;
+ height: 600px;
+ max-height: 700px;
+ }
+ #child {
+ min-width: 20px;
+ width: 30px;
+ max-width: 40px;
+ min-height: 50px;
+ height: 60px;
+ max-height: 70px;
+ }
+</style>
+</head>
+<body>
+<div id="container">
+ <div id="target">
+ <div id="child"></div>
+ </div>
+</div>
+<script>
+test_computed_value("grid-template-columns", 'none', '300px'); // "none" without #child
+
+// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width
+test_computed_value("grid-template-columns", 'calc(-0.5em + 10px)', '0px');
+test_computed_value("grid-template-columns", 'calc(0.5em + 10px)', '30px');
+test_computed_value("grid-template-columns", 'calc(30% + 40px)', '130px'); // 30% * width + 40px
+test_computed_value("grid-template-columns", '5fr', '300px'); // width
+test_computed_value("grid-template-columns", 'min-content', '30px');
+test_computed_value("grid-template-columns", 'max-content', '30px');
+test_computed_value("grid-template-columns", 'auto', '300px'); // width
+
+// track-size minmax( <inflexible-breadth> , <track-breadth> )
+test_computed_value("grid-template-columns", 'minmax(10px, auto)', '300px'); // width
+test_computed_value("grid-template-columns", 'minmax(20%, max-content)', '60px'); // 20% * width
+test_computed_value("grid-template-columns", 'minmax(min-content, calc(-0.5em + 10px))', '30px');
+test_computed_value("grid-template-columns", 'minmax(auto, 0)', '30px');
+
+// track-size fit-content( <length-percentage> )
+test_computed_value("grid-template-columns", 'fit-content(70px)', '30px');
+test_computed_value("grid-template-columns", 'fit-content(20%)', '30px');
+test_computed_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))', '30px');
+
+// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
+test_computed_value("grid-template-columns", 'repeat(1, 10px)', '10px');
+test_computed_value("grid-template-columns", 'repeat(1, [one two] 20%)', '[one two] 60px');
+test_computed_value("grid-template-columns", 'repeat(2, minmax(10px, auto))', '160px 140px');
+
+test_computed_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])',
+ '30px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]');
+
+// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
+test_computed_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))',
+ '30px 54px 54px 54px 54px 54px');
+test_computed_value("grid-template-columns", '[] 150px [] 1fr []', '150px 150px');
+
+// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
+test_computed_value("grid-template-columns", 'repeat(auto-fill, 200px)', '200px');
+test_computed_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)',
+ '[one] 60px [one] 0px [one] 0px [one] 0px [one] 0px');
+test_computed_value("grid-template-columns", 'repeat(auto-fill, minmax(100px, 5fr) [two])',
+ '100px [two] 100px [two] 100px [two]');
+test_computed_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])',
+ '[three] 240px [four]');
+test_computed_value('grid-template-columns', '[a] 21px [b] repeat(auto-fill, [c] 22px [d] 23px [e]) [f] 24px [g]',
+ '[a] 21px [b c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e f] 24px [g]');
+test_computed_value('grid-template-columns', '[a] 21px [b c] repeat(auto-fill, [d e] 22px [f g h] 23px [i j k l]) [m n] 24px [o]',
+ '[a] 21px [b c d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l m n] 24px [o]');
+test_computed_value('grid-template-columns', '[a] repeat(2, [b] 20px [c d] 21px [e f g]) [h i] repeat(auto-fit, [j] 22px [k l m] 23px [n o p q]) [r s]',
+ '[a b] 20px [c d] 21px [e f g b] 20px [c d] 21px [e f g h i j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q r s]');
+
+// <auto-track-list> =
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+// <auto-repeat>
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+
+test_computed_value("grid-template-columns", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]',
+ '[one] 50px 50px [two] 30px [three] 10px 40px [four five] 200px 200px [six]');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed.html
new file mode 100644
index 0000000000..54380ef455
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-columns on a grid container.">
+<style>
+#target {
+ display: grid;
+ width: 1px;
+ font-size: 1px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_computed_value("grid-template-columns", "none");
+test_computed_value("grid-template-columns", "1px");
+test_computed_value("grid-template-columns", "1px [a]");
+test_computed_value("grid-template-columns", "1px [a] 2px");
+test_computed_value("grid-template-columns", "[a] 1px");
+test_computed_value("grid-template-columns", "[a] 1px [b]");
+test_computed_value("grid-template-columns", "1px repeat(1, 2px) 3px", "1px 2px 3px");
+test_computed_value("grid-template-columns", "1px repeat(auto-fill, 2px) 3px", "1px 2px 3px");
+test_computed_value("grid-template-columns", "1px repeat(auto-fit, 2px) 3px", "1px 0px 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(1, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "1px [a] 0px 0px [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(1, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "1px [a b] 0px [c d] 3px");
+test_computed_value("grid-template-columns", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "[a] 1px 0px [b] 0px 4px [d]");
+test_computed_value("grid-template-columns", "100% [a] repeat(1, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-columns", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-columns", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "1px [a b] 0px [c d] 3px");
+test_computed_value("grid-template-columns", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px 0px [b] 0px 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html
new file mode 100644
index 0000000000..5a79ea13d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-columns with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns supports only the grammar 'none | <track-list> | <auto-track-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("grid-template-columns", '-10px');
+test_invalid_value("grid-template-columns", '-20%');
+test_invalid_value("grid-template-columns", '-5fr');
+test_invalid_value("grid-template-columns", 'minmax(5fr, calc(0.5em + 10px))');
+test_invalid_value("grid-template-columns", 'minmax(-10px, auto)');
+test_invalid_value("grid-template-columns", 'minmax(-20%, max-content)');
+test_invalid_value("grid-template-columns", 'minmax(min-content, -20%)');
+test_invalid_value("grid-template-columns", 'fit-content(-10px)');
+test_invalid_value("grid-template-columns", 'fit-content(-20%)');
+test_invalid_value("grid-template-columns", '[one] 10px [two three] repeat(20%) [four five six] 3fr [seven]');
+test_invalid_value("grid-template-columns", '[one]');
+test_invalid_value("grid-template-columns", '[one] 10px [two] [three]');
+test_invalid_value("grid-template-columns", 'repeat(auto-fill, -10px)');
+test_invalid_value("grid-template-columns", 'repeat(auto-fill, 10px) repeat(auto-fit, 20%)');
+test_invalid_value("grid-template-columns", '[auto] 1px');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html
new file mode 100644
index 0000000000..6bf2e7bce6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-columns with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns supports the full grammar 'none | <track-list> | <auto-track-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("grid-template-columns", "none");
+
+// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_valid_value("grid-template-columns", '10px');
+test_valid_value("grid-template-columns", '20%');
+test_valid_value("grid-template-columns", 'calc(-0.5em + 10px)');
+test_valid_value("grid-template-columns", 'calc(0.5em + 10px)');
+test_valid_value("grid-template-columns", 'calc(30% + 40vw)');
+test_valid_value("grid-template-columns", '5fr');
+test_valid_value("grid-template-columns", 'min-content');
+test_valid_value("grid-template-columns", 'max-content');
+test_valid_value("grid-template-columns", 'auto');
+
+// track-size minmax( <inflexible-breadth> , <track-breadth> )
+test_valid_value("grid-template-columns", 'minmax(10px, auto)');
+test_valid_value("grid-template-columns", 'minmax(20%, max-content)');
+test_valid_value("grid-template-columns", 'minmax(calc(-0.5em + 10px), min-content)');
+test_valid_value("grid-template-columns", 'minmax(calc(0.5em + 10px), 5fr)');
+test_valid_value("grid-template-columns", 'minmax(calc(30% + 40vw), 10px)');
+test_valid_value("grid-template-columns", 'minmax(min-content, 20%)');
+test_valid_value("grid-template-columns", 'minmax(max-content, calc(-0.5em + 10px))');
+test_valid_value("grid-template-columns", 'minmax(auto, calc(0.5em + 10px))');
+
+// track-size fit-content( <length-percentage> )
+test_valid_value("grid-template-columns", 'fit-content(10px)');
+test_valid_value("grid-template-columns", 'fit-content(20%)');
+test_valid_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))');
+test_valid_value("grid-template-columns", 'fit-content(calc(0.5em + 10px))');
+test_valid_value("grid-template-columns", 'fit-content(calc(30% + 40vw))');
+
+// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
+
+// 'repeat(1, [] 10px)' in Blink
+// 'repeat(1, 10px)' in Firefox
+// '[] 10px' in Safari
+// '10px' in Edge 18
+test_valid_value("grid-template-columns", 'repeat(1, [] 10px [])', 'repeat(1, 10px)');
+
+// 'repeat(1, [one two] 20%)' in Blink, Firefox
+// '[one two] 20%' in Safari, Edge 18
+test_valid_value("grid-template-columns", 'repeat(1, [one two] 20%)');
+
+// 'repeat(2, minmax(10px, auto))' in Blink, Firefox, Edge 18
+// 'minmax(10px, auto) minmax(10px, auto)' in Safari
+test_valid_value("grid-template-columns", 'repeat(2, minmax(10px, auto))');
+
+test_valid_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])');
+
+// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
+test_valid_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))');
+test_valid_value("grid-template-columns", '[] 150px [] 1fr []', '150px 1fr');
+
+// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
+test_valid_value("grid-template-columns", 'repeat(auto-fill, 10px)');
+test_valid_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)');
+test_valid_value("grid-template-columns", 'repeat(auto-fill, minmax(30px, 5fr) [two])');
+test_valid_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])');
+
+// <auto-track-list> =
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+// <auto-repeat>
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+
+test_valid_value("grid-template-columns", '[one] repeat(2, minmax(10px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(10px, auto)) [six]');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html
new file mode 100644
index 0000000000..c18f296abc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<script src="/css/css-grid/support/grid-child-utils.js"></script>
+<style>
+
+#target {
+ display: grid;
+ width: 32px;
+ height: 10px;
+};
+
+</style>
+</head>
+<body>
+<div id="container">
+ <div id="target">
+ <div></div>
+ <div></div>
+ <div id="child"></div>
+ <div style="grid-column: 7"></div>
+ <div></div>
+ </div>
+</div>
+<script>
+
+let autoFitTester = new GridChildHelper(gridChildHelperCol,
+ "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ");
+
+let autoFillTester = new GridChildHelper(gridChildHelperCol,
+ "[a] 1px [b] 2px [c d] repeat(auto-fill, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ");
+
+// Auto-fit
+autoFitTester.runTest(3, "[a] 1px [b] 2px [c d e f] 3px [g] 0px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest(4, "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest(5, "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest(6, "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h e f] 0px [g] 4px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest("4 / 5", "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest("4 / 6", "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest("3 / 6", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]");
+// Auto-fill. These tests are semi-redundant, but should still pass.
+autoFillTester.runTest(3, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
+autoFillTester.runTest(4, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
+autoFillTester.runTest(5, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
+autoFillTester.runTest("4 / 7", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
+autoFillTester.runTest("3 / 6", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html
new file mode 100644
index 0000000000..8cb9209cee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<script src="/css/css-grid/support/grid-child-utils.js"></script>
+<style>
+
+#target {
+ display: grid;
+ width: 54px;
+ height: 32px;
+};
+
+</style>
+</head>
+<body>
+<div id="container">
+ <div id="target">
+ <div></div>
+ <div></div>
+ <div style="grid-column: 4"></div>
+ <div id="child"></div>
+ <div style="grid-column: 10"></div>
+ <div></div>
+ </div>
+</div>
+<script>
+
+// Style with 3 repeat tracks.
+let style3 =
+ "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]";
+let col3Tester = new GridChildHelper(gridChildHelperCol, style3);
+let rowTester = new GridChildHelper(gridChildHelperRow, style3);
+
+// Style with 2 repeat tracks.
+let style2 =
+ "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]";
+let col2Tester = new GridChildHelper(gridChildHelperCol, style2);
+
+rowTester.runTest(3,
+ "[a] 1px [b] 2px [c d e f] 3px [g] 0px [h] 0px [i j k] 7px [k] 8px [l m]");
+rowTester.runTest(5,
+ "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h] 5px [i j k] 7px [k] 8px [l m]");
+rowTester.runTest("3 / 8",
+ "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+rowTester.runTest("4 / span 2",
+ "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+rowTester.runTest("4 / 5",
+ "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j k] 7px [k] 8px [l m]");
+
+col3Tester.runTest(3,
+ "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest(6,
+ "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest("3 / 8",
+ "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest("5 / span 2",
+ "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest("7 / span 2",
+ "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest("5 / 8",
+ "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest("8 / 10",
+ "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 5px [i j e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+
+col2Tester.runTest(3,
+ "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
+col2Tester.runTest(6,
+ "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
+col2Tester.runTest("3 / 8",
+ "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
+col2Tester.runTest("6 / span 2",
+ "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
+col2Tester.runTest("5 / 10",
+ "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html
new file mode 100644
index 0000000000..7ed3110c76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-rows on a grid container with a leading implicit track.">
+<style>
+#target {
+ display: grid;
+ height: 1px;
+ font-size: 1px;
+}
+#item {
+ grid-row: auto / 1;
+ height: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="target">
+ <div id="item"></div>
+</div>
+<script>
+// Can't use the test_computed_value from computed-testcommon.js
+// because grid-template-rows doesn't round-trip in this test.
+function grid_template_rows(specified, computed) {
+ test(() => {
+ const target = document.getElementById('target');
+ target.style.gridTemplateRows = '';
+ target.style.gridTemplateRows = specified;
+ assert_equals(getComputedStyle(target).gridTemplateRows, computed);
+ }, `Property grid-template-rows value '${specified}' computes to '${computed}'`);
+}
+
+grid_template_rows("none", "10px");
+grid_template_rows("1px", "10px 1px");
+grid_template_rows("1px [a]", "10px 1px [a]");
+grid_template_rows("1px [a] 2px", "10px 1px [a] 2px");
+grid_template_rows("[a] 1px", "10px [a] 1px");
+grid_template_rows("[a] 1px [b]", "10px [a] 1px [b]");
+grid_template_rows("1px repeat(1, 2px) 3px", "10px 1px 2px 3px");
+grid_template_rows("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px");
+grid_template_rows("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px");
+grid_template_rows("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_rows("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_rows("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px");
+grid_template_rows("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px");
+grid_template_rows("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+grid_template_rows("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px");
+grid_template_rows("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-nogrid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-nogrid.html
new file mode 100644
index 0000000000..057a7fa061
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-nogrid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-rows on an element which is not a grid container.">
+<style>
+#target {
+ display: block;
+ height: 1px;
+ font-size: 1px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_computed_value("grid-template-rows", "none");
+test_computed_value("grid-template-rows", "1px");
+test_computed_value("grid-template-rows", "1px [a]");
+test_computed_value("grid-template-rows", "1px [a] 2px");
+test_computed_value("grid-template-rows", "[a] 1px");
+test_computed_value("grid-template-rows", "[a] 1px [b]");
+test_computed_value("grid-template-rows", "1px repeat(1, 2px) 3px");
+test_computed_value("grid-template-rows", "1px repeat(auto-fill, 2px) 3px");
+test_computed_value("grid-template-rows", "1px repeat(auto-fit, 2px) 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(1, 2px 3px) [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(1, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-rows", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-rows", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html
new file mode 100644
index 0000000000..693cf338c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
+<meta name="assert" content="grid-template-rows computed value is the keyword none or a computed track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+ #target {
+ display: grid;
+ font-size: 40px;
+ min-width: 200px;
+ width: 300px;
+ max-width: 400px;
+ min-height: 500px;
+ height: 600px;
+ max-height: 700px;
+ }
+ #child {
+ min-width: 20px;
+ width: 30px;
+ max-width: 40px;
+ min-height: 50px;
+ height: 60px;
+ max-height: 70px;
+ }
+</style>
+</head>
+<body>
+<div id="container">
+ <div id="target">
+ <div id="child"></div>
+ </div>
+</div>
+<script>
+test_computed_value("grid-template-rows", 'none', '600px'); // "none" without #child
+
+// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-template-rows", '20%', '120px'); // 20% * height
+test_computed_value("grid-template-rows", 'calc(-0.5em + 10px)', '0px');
+test_computed_value("grid-template-rows", 'calc(0.5em + 10px)', '30px');
+test_computed_value("grid-template-rows", 'calc(30% + 40px)', '220px'); // 30% * height + 40px
+test_computed_value("grid-template-rows", '5fr', '600px'); // height
+test_computed_value("grid-template-rows", 'min-content', '60px');
+test_computed_value("grid-template-rows", 'max-content', '60px');
+test_computed_value("grid-template-rows", 'auto', '600px'); // height
+
+// track-size minmax( <inflexible-breadth> , <track-breadth> )
+test_computed_value("grid-template-rows", 'minmax(10px, auto)', '600px'); // height
+test_computed_value("grid-template-rows", 'minmax(20%, max-content)', '120px'); // 20% * height
+test_computed_value("grid-template-rows", 'minmax(min-content, calc(-0.5em + 10px))', '60px');
+test_computed_value("grid-template-rows", 'minmax(auto, 0)', '60px');
+
+// track-size fit-content( <length-percentage> )
+test_computed_value("grid-template-rows", 'fit-content(70px)', '60px');
+test_computed_value("grid-template-rows", 'fit-content(20%)', '60px');
+test_computed_value("grid-template-rows", 'fit-content(calc(-0.5em + 10px))', '60px');
+
+// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
+test_computed_value("grid-template-rows", 'repeat(1, 10px)', '10px');
+test_computed_value("grid-template-rows", 'repeat(1, [one two] 20%)', '[one two] 120px');
+test_computed_value("grid-template-rows", 'repeat(2, minmax(10px, auto))', '325px 275px');
+
+test_computed_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])',
+ '60px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]');
+
+// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
+test_computed_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))',
+ '60px 108px 108px 108px 108px 108px');
+test_computed_value("grid-template-rows", '[] 150px [] 1fr []', '150px 450px');
+
+// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
+test_computed_value("grid-template-rows", 'repeat(auto-fill, 200px)', '200px 200px 200px');
+test_computed_value("grid-template-rows", 'repeat(auto-fit, [one] 20%)',
+ '[one] 120px [one] 0px [one] 0px [one] 0px [one] 0px');
+test_computed_value("grid-template-rows", 'repeat(auto-fill, minmax(100px, 5fr) [two])',
+ '100px [two] 100px [two] 100px [two] 100px [two] 100px [two] 100px [two]');
+test_computed_value("grid-template-rows", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])',
+ '[three] 240px [four three] 0px [four]');
+
+// <auto-track-list> =
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+// <auto-repeat>
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+
+test_computed_value("grid-template-rows", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]',
+ '[one] 50px 50px [two] 30px [three] 10px 10px 10px 40px [four five] 200px 200px [six]');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed.html
new file mode 100644
index 0000000000..b7584e1954
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-rows on a grid container.">
+<style>
+#target {
+ display: grid;
+ height: 1px;
+ font-size: 1px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_computed_value("grid-template-rows", "none");
+test_computed_value("grid-template-rows", "1px");
+test_computed_value("grid-template-rows", "1px [a]");
+test_computed_value("grid-template-rows", "1px [a] 2px");
+test_computed_value("grid-template-rows", "[a] 1px");
+test_computed_value("grid-template-rows", "[a] 1px [b]");
+test_computed_value("grid-template-rows", "1px repeat(1, 2px) 3px", "1px 2px 3px");
+test_computed_value("grid-template-rows", "1px repeat(auto-fill, 2px) 3px", "1px 2px 3px");
+test_computed_value("grid-template-rows", "1px repeat(auto-fit, 2px) 3px", "1px 0px 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(1, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "1px [a] 0px 0px [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(1, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "1px [a b] 0px [c d] 3px");
+test_computed_value("grid-template-rows", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "[a] 1px 0px [b] 0px 4px [d]");
+test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "1px [a b] 0px [c d] 3px");
+test_computed_value("grid-template-rows", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px 0px [b] 0px 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html
new file mode 100644
index 0000000000..24008e65e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-rows with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
+<meta name="assert" content="grid-template-rows supports only the grammar 'none | <track-list> | <auto-track-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("grid-template-rows", '-10px');
+test_invalid_value("grid-template-rows", '-20%');
+test_invalid_value("grid-template-rows", '-5fr');
+test_invalid_value("grid-template-rows", 'minmax(5fr, calc(0.5em + 10px))');
+test_invalid_value("grid-template-rows", 'minmax(-10px, auto)');
+test_invalid_value("grid-template-rows", 'minmax(-20%, max-content)');
+test_invalid_value("grid-template-rows", 'minmax(min-content, -20%)');
+test_invalid_value("grid-template-rows", 'fit-content(-10px)');
+test_invalid_value("grid-template-rows", 'fit-content(-20%)');
+test_invalid_value("grid-template-rows", '[one] 10px [two three] repeat(20%) [four five six] 3fr [seven]');
+test_invalid_value("grid-template-rows", '[one]');
+test_invalid_value("grid-template-rows", '[one] 10px [two] [three]');
+test_invalid_value("grid-template-rows", 'repeat(auto-fill, -10px)');
+test_invalid_value("grid-template-rows", 'repeat(auto-fill, 10px) repeat(auto-fit, 20%)');
+test_invalid_value("grid-template-rows", '[auto] 1px');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html
new file mode 100644
index 0000000000..2d3a1ed804
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-rows with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
+<meta name="assert" content="grid-template-rows supports the full grammar 'none | <track-list> | <auto-track-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("grid-template-rows", "none");
+
+// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_valid_value("grid-template-rows", '10px');
+test_valid_value("grid-template-rows", '20%');
+test_valid_value("grid-template-rows", 'calc(-0.5em + 10px)');
+test_valid_value("grid-template-rows", 'calc(0.5em + 10px)');
+test_valid_value("grid-template-rows", 'calc(30% + 40vw)');
+test_valid_value("grid-template-rows", '5fr');
+test_valid_value("grid-template-rows", 'min-content');
+test_valid_value("grid-template-rows", 'max-content');
+test_valid_value("grid-template-rows", 'auto');
+
+// track-size minmax( <inflexible-breadth> , <track-breadth> )
+test_valid_value("grid-template-rows", 'minmax(10px, auto)');
+test_valid_value("grid-template-rows", 'minmax(20%, max-content)');
+test_valid_value("grid-template-rows", 'minmax(calc(-0.5em + 10px), min-content)');
+test_valid_value("grid-template-rows", 'minmax(calc(0.5em + 10px), 5fr)');
+test_valid_value("grid-template-rows", 'minmax(calc(30% + 40vw), 10px)');
+test_valid_value("grid-template-rows", 'minmax(min-content, 20%)');
+test_valid_value("grid-template-rows", 'minmax(max-content, calc(-0.5em + 10px))');
+test_valid_value("grid-template-rows", 'minmax(auto, calc(0.5em + 10px))');
+
+// track-size fit-content( <length-percentage> )
+test_valid_value("grid-template-rows", 'fit-content(10px)');
+test_valid_value("grid-template-rows", 'fit-content(20%)');
+test_valid_value("grid-template-rows", 'fit-content(calc(-0.5em + 10px))');
+test_valid_value("grid-template-rows", 'fit-content(calc(0.5em + 10px))');
+test_valid_value("grid-template-rows", 'fit-content(calc(30% + 40vw))');
+
+// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
+
+test_valid_value("grid-template-rows", 'repeat(1, [] 10px [])', 'repeat(1, 10px)');
+
+// 'repeat(1, [one two] 20%)' in Blink, Firefox
+// '[one two] 20%' in Safari, Edge 18
+test_valid_value("grid-template-rows", 'repeat(1, [one two] 20%)');
+
+// 'repeat(2, minmax(10px, auto))' in Blink, Firefox, Edge 18
+// 'minmax(10px, auto) minmax(10px, auto)' in Safari
+test_valid_value("grid-template-rows", 'repeat(2, minmax(10px, auto))');
+
+test_valid_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])');
+
+// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
+test_valid_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))');
+test_valid_value("grid-template-rows", '[] 150px [] 1fr []', '150px 1fr');
+
+// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
+test_valid_value("grid-template-rows", 'repeat(auto-fill, 10px)');
+test_valid_value("grid-template-rows", 'repeat(auto-fit, [one] 20%)');
+test_valid_value("grid-template-rows", 'repeat(auto-fill, minmax(30px, 5fr) [two])');
+test_valid_value("grid-template-rows", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])');
+
+// <auto-track-list> =
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+// <auto-repeat>
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+
+test_valid_value("grid-template-rows", '[one] repeat(2, minmax(10px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(10px, auto)) [six]');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-areas-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-areas-valid.html
new file mode 100644
index 0000000000..4a22784332
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-areas-valid.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid-template and grid-template-areas</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template">
+<meta name=assert content="grid-template and grid-template-areas parsing is valid.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<script>
+
+function testValidGridTemplate(valueGridTemplate, valueGridAreas, serializedGridTemplateValue) {
+ if (arguments.length < 3)
+ serializedGridTemplateValue = valueGridTemplate;
+
+ test(()=>{
+ const root = document.children[0];
+ root.style.gridTemplate = "";
+ root.style.gridTemplate = valueGridTemplate;
+ root.style.gridTemplateAreas = "";
+ root.style.gridTemplateAreas = valueGridAreas;
+ assert_equals(root.style.gridTemplate, serializedGridTemplateValue);
+ assert_equals(root.style.gridTemplateAreas, valueGridAreas);
+ }, `grid-template: ${valueGridTemplate} and "grid-template-areas: ${valueGridAreas};" should be valid.`);
+}
+
+testValidGridTemplate("none / 1px", "\"a\"");
+testValidGridTemplate("none / none", "\"a\"", "none");
+testValidGridTemplate("auto / 1px", "\"a a a\"", "\"a a a\" / 1px");
+testValidGridTemplate("auto / auto", "\"a a a\"", "\"a a a\" / auto");
+testValidGridTemplate("10px 20px 30px / 40px 50px 60px 70px",
+ "\"a . b .\" \"c d . e\" \"f g h .\"",
+ "\"a . b .\" 10px \"c d . e\" 20px \"f g h .\" 30px / 40px 50px 60px 70px");
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-invalid.html
new file mode 100644
index 0000000000..366cdf4d88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-invalid.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template with invalid values</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-template">
+<meta name="assert" content="grid-template supports only the grammar `none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+test_invalid_value("grid-template", 'auto');
+test_invalid_value("grid-template", 'none none');
+test_invalid_value("grid-template", 'none []');
+test_invalid_value("grid-template", '10px');
+test_invalid_value("grid-template", '20%');
+test_invalid_value("grid-template", '5fr');
+test_invalid_value("grid-template", '[a]');
+test_invalid_value("grid-template", '[a] 10px');
+test_invalid_value("grid-template", '[a] 10px []');
+test_invalid_value("grid-template", '[]');
+test_invalid_value("grid-template", '10px "a"');
+test_invalid_value("grid-template", '[] 10px "a"');
+test_invalid_value("grid-template", '10px [] "a"');
+test_invalid_value("grid-template", '[] [] "a"');
+test_invalid_value("grid-template", '"a" none');
+test_invalid_value("grid-template", '"a" 10px 10px');
+test_invalid_value("grid-template", '"a" [a] 10px');
+test_invalid_value("grid-template", '"a" [a] 10px [a]');
+test_invalid_value("grid-template", '"a" [a] [a] 10px');
+test_invalid_value("grid-template", '"a" 10px [a] [a]');
+test_invalid_value("grid-template", '"a" [a] [a]');
+test_invalid_value("grid-template", '[a] "a" [a] [a]');
+test_invalid_value("grid-template", '"a" "a" [a] [a]');
+test_invalid_value("grid-template", '"a" [a] [a] / none');
+test_invalid_value("grid-template", '"a" "a" [a] [a] / none');
+test_invalid_value("grid-template", 'none / "a"');
+test_invalid_value("grid-template", '"a" / none');
+test_invalid_value("grid-template", 'none / [] "a"');
+test_invalid_value("grid-template", 'none / "a" []');
+test_invalid_value("grid-template", 'none / "a" [] 10px');
+
+// FIXME: add more values to test full syntax
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-valid.html
new file mode 100644
index 0000000000..d5ae75e74e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-valid.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template with valid values</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-template">
+<meta name="assert" content="grid-template supports the grammar `none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+test_valid_value("grid-template", 'none');
+test_valid_value("grid-template", 'none / none', 'none');
+test_valid_value("grid-template", 'auto / auto');
+test_valid_value("grid-template", 'none / [a] 0px');
+test_valid_value("grid-template", 'none / [] 0px', 'none / 0px');
+test_valid_value("grid-template", '[a] 10px / auto');
+test_valid_value("grid-template", '[a] 10px / none');
+test_valid_value("grid-template", '[] 10px [] / [] auto []', '10px / auto');
+test_valid_value("grid-template", '[a] "a" 10px');
+test_valid_value("grid-template", '[a] "a" 10px []', '[a] "a" 10px');
+test_valid_value("grid-template", '"a" 10px');
+test_valid_value("grid-template", '[] "a" 10px', '"a" 10px');
+test_valid_value("grid-template", '[a] "a" 10px [a]');
+test_valid_value("grid-template", '"a"');
+test_valid_value("grid-template", '"a" auto', '"a"');
+test_valid_value("grid-template", '"a a a"', '"a a a"');
+test_valid_value("grid-template", '"a" / 10px');
+test_valid_value("grid-template", '"a" / 20%');
+test_valid_value("grid-template", '"a" / 5fr');
+test_valid_value("grid-template", '[a] "a"');
+test_valid_value("grid-template", '[a] "a" [a]');
+test_valid_value("grid-template", '[] "a"', '"a"');
+test_valid_value("grid-template", '"a" [] [] "b"', '"a" "b"');
+test_valid_value("grid-template", '"a" [] "b"', '"a" "b"');
+test_valid_value("grid-template", '"a" [a] [b] "b"', '"a" [a b] "b"');
+test_valid_value("grid-template", '"a" [a] "b"');
+test_valid_value("grid-template", '"a" / 0', '"a" / 0px');
+test_valid_value("grid-template", '"a" 10px / 10px');
+test_valid_value("grid-template", '"a" [a] "b" 10px');
+test_valid_value("grid-template", '"a" [a] "b" 10px [a]');
+test_valid_value("grid-template", '"a" [a] [a] "b" 10px', '"a" [a a] "b" 10px');
+test_valid_value("grid-template", '"a" [a] [] "b" 10px', '"a" [a] "b" 10px');
+test_valid_value("grid-template", '"a" 10px [a] "b" [a]');
+test_valid_value("grid-template", '"a" [a] "b" [a]');
+test_valid_value("grid-template", '[a] "a" [a] "b" [a]');
+test_valid_value("grid-template", '"a" "a" [a] "b" [a]');
+test_valid_value("grid-template", '"a" [a] "b" [a] / 0', '"a" [a] "b" [a] / 0px');
+test_valid_value("grid-template", '"a" "a" [a] [a] "b" / auto', '"a" "a" [a a] "b" / auto');
+test_valid_value("grid-template", '"a" auto [a] "b" auto [b] / 10px');
+
+// FIXME: add more values to test full syntax
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html
new file mode 100644
index 0000000000..b9165359a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid-template sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template">
+<meta name="assert" content="grid-template supports the full grammar 'none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('grid-template', 'none', {
+ 'grid-template-rows': 'none',
+ 'grid-template-columns': 'none',
+ 'grid-template-areas': 'none'
+});
+
+// <grid-template-rows> / <grid-template-columns>
+test_shorthand_value('grid-template', '10px / 20%', {
+ 'grid-template-rows': '10px',
+ 'grid-template-columns': '20%',
+ 'grid-template-areas': 'none'
+});
+
+test_shorthand_value('grid-template', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', {
+ 'grid-template-rows': 'fit-content(calc(-0.5em + 10px))',
+ 'grid-template-columns': 'fit-content(calc(0.5em + 10px))',
+ 'grid-template-areas': 'none'
+});
+
+// [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
+test_shorthand_value('grid-template',
+ '[header-top] "a a a" [header-bottom]' +
+ ' [main-top] "b b b" 1fr [main-bottom]' +
+ ' / auto 1fr auto', {
+ 'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]',
+ 'grid-template-columns': 'auto 1fr auto',
+ 'grid-template-areas': '"a a a" "b b b"'
+});
+
+test_shorthand_value('grid-template',
+ ' "a a a"' +
+ ' "b b b" 1fr' +
+ '/ auto 1fr auto', {
+ 'grid-template-rows': 'auto 1fr',
+ 'grid-template-columns': 'auto 1fr auto',
+ 'grid-template-areas': '"a a a" "b b b"'
+});
+
+test_shorthand_value('grid-template',
+ ' [] "a a a" []' +
+ ' [] "b b b" 1fr []' +
+ ' / [] auto 1fr [] auto []', {
+ 'grid-template-rows': 'auto 1fr',
+ 'grid-template-columns': 'auto 1fr auto',
+ 'grid-template-areas': '"a a a" "b b b"'
+});
+</script>
+</body>
+</html>