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

Side by Side 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 unified diff | Download patch

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

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

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

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

	5

	6 <body>

	7 </body>

	8 <script>

	9 description('Test that setting/getting grid-template-{columns\|rows} with rep eat(auto-fill\|auto-fit,) works as expected');

	10

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

	12 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]");

	13 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-con tent) [bar]");

	14 testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(10px, 100px)) repea t(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");

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

	16 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-conte nt) [bar]");

	17 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] [f oo] 1em [foo] 1em");

	18

	19 debug("");

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

	21 function testInvalidSyntax(gridColumn) {

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

	23 document.body.appendChild(element);

	24 element.style.gridTemplateColumns = gridColumn;

	25 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-template-columns')", "none");

	26 document.body.removeChild(element);

	27 }

	28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	43

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

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

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

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

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

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

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

	51

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

	53 testInvalidSyntax("repeat(auto-fill, 10px) repeat(10, minmax(min-content, au to))");

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

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

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

	57 </script>

OLD	NEW

« 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 »