Bug 1571197 [wpt PR 18271] - [css-grid] Parsing grid-template-rows/columns, a=testonly
authorEric Willigers <ewilligers@users.noreply.github.com>
Wed, 28 Aug 2019 09:50:35 +0000
changeset 554472 8a48ca1e3378031c8f33fdf60e7158a961939ab8
parent 554325 23824765c6aa026ccc3e3aea1c851c07ab8937ee
child 554473 ab0df4902c62a9c9b5a6a6038fd0c3a521b637d9
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1571197, 18271
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1571197 [wpt PR 18271] - [css-grid] Parsing grid-template-rows/columns, a=testonly Automatic update from web-platform-tests [css-grid] Parsing grid-template-rows/columns (#18271) Test parsing of valid and invalid values for grid-template-rows and grid-template-columns Value: none | <track-list> | <auto-track-list> https://drafts.csswg.org/css-grid/#track-sizing -- wpt-commits: eec73456c88a03b12d566b2a2f4dcfd1f4138b55 wpt-pr: 18271
testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html
testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html
testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html
testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html
@@ -0,0 +1,30 @@
+<!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%)');
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html
@@ -0,0 +1,79 @@
+<!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, [] 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))');
+
+// <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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html
@@ -0,0 +1,30 @@
+<!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%)');
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html
@@ -0,0 +1,79 @@
+<!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>? )
+
+// 'repeat(1, [] 10px)' in Blink
+// 'repeat(1, 10px)' in Firefox
+// '[] 10px' in Safari
+// '10px' in Edge 18
+test_valid_value("grid-template-rows", 'repeat(1, [] 10px)', ['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))');
+
+// <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>