third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html - Issue 1582793002: [css-grid] Add parsing support for <auto-repeat> syntax

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html

Issue 1582793002: [css-grid] Add parsing support for <auto-repeat> syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt » ('j') | third_party/WebKit/Source/core/css/parser/LegacyCSSPropertyParser.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html

diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html

new file mode 100644

index 0000000000000000000000000000000000000000..72a942d68a853d911b1311fb100a3b9c561b67b8

--- /dev/null

+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html

@@ -0,0 +1,57 @@

+<!DOCTYPE html>

+<link href="resources/grid.css" rel="stylesheet">

+<script src="../../resources/js-test.js"></script>

+<script src="resources/grid-definitions-parsing-utils.js"></script>

+<body>

+</body>

+<script>

+ description('Test that setting and getting grid-template-columns and grid-template-rows with repeat() works as expected');

Manuel Rego 2016/01/19 16:37:47 Nit: I'd mention "auto repeat" here.

svillar 2016/01/21 12:25:15 Yeah, the description was likely copypasted :)

+ debug("Test auto-repeat syntax.");

+ testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] 10px)", "repeat(auto-fill, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "[foo bar] 10px", "2em [foo bar]");

+ testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] minmax(10px, 1fr))", "repeat(auto-fill, [foo] minmax(2em, max-content) [bar])", "[foo bar] 800px", "[foo] 20px [bar]", "[foo bar] minmax(10px, 1fr)", "[foo] minmax(2em, max-content) [bar]");

+ testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(10px, 100px)) repeat(2, 20px)", "repeat(1, 70px) repeat(auto-fill, minmax(2em, max-content) [bar]) repeat(2, [foo] 1em)", "100px 20px 20px", "70px 20px [bar foo] 10px [foo] 10px", "minmax(10px, 100px) 20px 20px", "70px minmax(2em, max-content) [bar] [foo] 1em [foo] 1em");

+ testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 10px)", "repeat(auto-fit, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "[foo bar] 10px", "2em [foo bar]");

+ testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] minmax(10px, 1fr))", "repeat(auto-fit, [foo] minmax(2em, max-content) [bar])", "[foo bar] 800px", "[foo] 20px [bar]", "[foo bar] minmax(10px, 1fr)", "[foo] minmax(2em, max-content) [bar]");

+ testGridDefinitionsSetJSValues("repeat(auto-fit, minmax(10px, min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(2em, max-content) [bar]) repeat(2, [foo] 1em)", "10px 20px 20px", "60px 20px [bar foo] 10px [foo] 10px", "minmax(10px, min-content) 20px 20px", "10% minmax(2em, max-content) [bar] [foo] 1em [foo] 1em");

+ debug("");

+ debug("Test invalid repeat syntax.");

+ function testInvalidSyntax(gridColumn) {

+ element = document.createElement("div");

+ document.body.appendChild(element);

+ element.style.gridTemplateColumns = gridColumn;

+ shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");

+ document.body.removeChild(element);

+ }

+ testInvalidSyntax("repeat(auto-fill, 1fr)");

+ testInvalidSyntax("repeat(auto-fill, minmax(min-content, 20px))");

+ testInvalidSyntax("repeat(auto-fill, [bar] auto)");

+ testInvalidSyntax("repeat(auto-fill, 20px 10px)");

+ testInvalidSyntax("repeat(auto-fill, 20px [foo bar] 10px)");

+ testInvalidSyntax("repeat(auto-fill,)");

+ testInvalidSyntax("repeat(auto-fill, [foo])");

+ testInvalidSyntax("repeat(auto-fit, 1fr)");

+ testInvalidSyntax("repeat(auto-fit, minmax(min-content, 20px))");

+ testInvalidSyntax("repeat(auto-fit, [bar] auto)");

+ testInvalidSyntax("repeat(auto-fit, 20px 10px)");

+ testInvalidSyntax("repeat(auto-fit, 20px [foo bar] 10px)");

+ testInvalidSyntax("repeat(auto-fit,)");

+ testInvalidSyntax("repeat(auto-fit, [foo])");

+ // <auto-repeat> can only be used once in a <track-list>.

+ testInvalidSyntax("repeat(auto-fill, 10px) repeat(auto-fill, [foo] 2em)");

+ testInvalidSyntax("repeat(auto-fill, 10em [bar]) auto repeat(auto-fill, [foo] 2em)");

+ testInvalidSyntax("repeat(auto-fit, 10px) repeat(auto-fit, [foo] 2em)");

+ testInvalidSyntax("repeat(auto-fit, 10em [bar]) auto repeat(auto-fit, [foo] 2em)");

+ testInvalidSyntax("repeat(auto-fill, [foo] 1em [bar]) auto repeat(auto-fit, [foo] 32px)");

+ testInvalidSyntax("repeat(auto-fill, 1em [bar]) repeat(3, max-content [last]) repeat(auto-fit, 32px)");

+ // <auto-repeat> requires definite minimum track sizes.

+ testInvalidSyntax("repeat(auto-fill, 10px) repeat(10, minmax(min-content, auto))");

+ testInvalidSyntax("auto repeat(auto-fit, [foo] 10px)");

+ testInvalidSyntax("10% repeat(auto-fit, [foo] 10px) min-content");

+ testInvalidSyntax("20px [bar] repeat(4, auto) [foo] repeat(auto-fill, 3em)");

+</script>