Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(149)

Issues Search
    My Issues | Starred     Open | Closed | All

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: Patch for landing 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') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments 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..94f18a54090b4cf632ae30761ca09eafd7c276ba
--- /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/getting grid-template-{columns|rows} with repeat(auto-fill|auto-fit,) works as expected');
+
+ 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>
« 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') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698