third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html - Issue 2161003003: [css-grid] repeat() syntax should take a <track-list> argument

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

Issue 2161003003: [css-grid] repeat() syntax should take a <track-list> argument (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 5 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

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt » ('j') | third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

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

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

4 <style>	4 <style>

5 body { font-size: 10px; }	5 body { font-size: 10px; }

6 </style>	6 </style>

7	7

8 <body style="width: 800px; height: 600px;">	8 <body style="width: 800px; height: 600px;">

9 </body>	9 </body>

10 <script>	10 <script>

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

12	12

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

14 testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] 200px)", "repeat (auto-fill, 20em [foo bar])", "[foo bar] 200px [foo bar] 200px [foo bar] 200px [ foo bar] 200px", "200px [foo bar] 200px [foo bar] 200px [foo bar]");	14 testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] 200px)", "repeat (auto-fill, 20em [foo bar])", "[foo bar] 200px [foo bar] 200px [foo bar] 200px [ foo bar] 200px", "200px [foo bar] 200px [foo bar] 200px [foo bar]");

15 testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] minmax(300px, 1f r))", "repeat(auto-fill, [foo] minmax(175px, max-content) [bar])", "[foo bar] 40 0px [foo bar] 400px", "[foo] 175px [bar foo] 175px [bar foo] 175px [bar]");	15 testGridDefinitionsSetJSValues("repeat(auto-fill, [foo bar] minmax(300px, 1f r))", "repeat(auto-fill, [foo] minmax(175px, max-content) [bar])", "[foo bar] 40 0px [foo bar] 400px", "[foo] 175px [bar foo] 175px [bar foo] 175px [bar]");

16 testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(50px, 100px)) repea t(2, 250px)", "repeat(1, 450px) repeat(auto-fill, minmax(max-content, 5em) [bar] ) repeat(2, [foo] 1em)", "100px 100px 100px 250px 250px", "450px 50px [bar] 50px [bar foo] 10px [foo] 10px", "repeat(auto-fill, minmax(50px, 100px)) 250px 250px ", "450px repeat(auto-fill, minmax(max-content, 5em) [bar]) [foo] 1em [foo] 1em" );	16 testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(50px, 100px)) repea t(2, 250px)", "repeat(1, 450px) repeat(auto-fill, minmax(max-content, 5em) [bar] ) repeat(2, [foo] 1em)", "100px 100px 100px 250px 250px", "450px 50px [bar] 50px [bar foo] 10px [foo] 10px", "repeat(auto-fill, minmax(50px, 100px)) 250px 250px ", "450px repeat(auto-fill, minmax(max-content, 5em) [bar]) [foo] 1em [foo] 1em" );

17 testGridDefinitionsSetJSValues("[start] 10% repeat(auto-fill, [foo bar] 200p x) [end]", "75px [prev] repeat(auto-fill, 20em [foo bar]) [next] 15em [last end] ", "[start] 80px [foo bar] 200px [foo bar] 200px [foo bar] 200px [end]", "75px [ prev] 200px [foo bar next] 150px [last end]");	17 testGridDefinitionsSetJSValues("[start] 10% repeat(auto-fill, [foo bar] 200p x) [end]", "75px [prev] repeat(auto-fill, 20em [foo bar]) [next] 15em [last end] ", "[start] 80px [foo bar] 200px [foo bar] 200px [foo bar] 200px [end]", "75px [ prev] 200px [foo bar next] 150px [last end]");

18 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat( auto-fit, 24em [foo bar])", "[foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px", "0px [foo bar] 0px [foo bar]");	18 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat( auto-fit, 24em [foo bar])", "[foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px", "0px [foo bar] 0px [foo bar]");

	19 testGridDefinitionsSetJSValues("repeat(auto-fill, [start] 200px 100px [end]) ", "100px [foo] repeat(auto-fill, [a] 2em [b] 10% [c]) [bar] 3em", "[start] 200p x 100px [end start] 200px 100px [end]", "100px [foo a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c bar] 30p x");

19 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr ))", "repeat(auto-fit, [foo] minmax(20em, max-content) [bar])", "[foo bar] 0px [ foo bar] 0px", "[foo] 0px [bar foo] 0px [bar foo] 0px [bar]");	20 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr ))", "repeat(auto-fit, [foo] minmax(20em, max-content) [bar])", "[foo bar] 0px [ foo bar] 0px", "[foo] 0px [bar foo] 0px [bar foo] 0px [bar]");

20 testGridDefinitionsSetJSValues("repeat(auto-fit, minmax(300px, min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(30em, max-content) [b ar]) repeat(2, [foo] 1em)", "0px 0px 20px 20px", "60px 0px [bar foo] 10px [foo] 10px", "repeat(auto-fit, minmax(300px, min-content)) 20px 20px", "10% repeat(aut o-fit, minmax(30em, max-content) [bar]) [foo] 1em [foo] 1em");	21 testGridDefinitionsSetJSValues("repeat(auto-fit, minmax(300px, min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(30em, max-content) [b ar]) repeat(2, [foo] 1em)", "0px 0px 20px 20px", "60px 0px [bar foo] 10px [foo] 10px", "repeat(auto-fit, minmax(300px, min-content)) 20px 20px", "10% repeat(aut o-fit, minmax(30em, max-content) [bar]) [foo] 1em [foo] 1em");

21 testGridDefinitionsSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c d] 20px [e]", "repeat(auto-fit, [z] 100px [y]) [a b] 30px [c d] 20px [e]", " [a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c d] 20px [e]", "[z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y a b] 30px [c d] 20px [e]");	22 testGridDefinitionsSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c d] 20px [e]", "repeat(auto-fit, [z] 100px [y]) [a b] 30px [c d] 20px [e]", " [a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c d] 20px [e]", "[z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y a b] 30px [c d] 20px [e]");

22 testGridDefinitionsSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) repeat(1 , [b] 30px [c]) 20px [e]", "[a b] 30px [c d] 20px [e] repeat(auto-fit, [z] 100px [y])", "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [ y b] 30px [c] 20px [e]", "[a b] 30px [c d] 20px [e z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y]", "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c] 20px [ e]");	23 testGridDefinitionsSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) repeat(1 , [b] 30px [c]) 20px [e]", "[a b] 30px [c d] 20px [e] repeat(auto-fit, [z] 100px [y])", "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [ y b] 30px [c] 20px [e]", "[a b] 30px [c d] 20px [e z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y]", "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c] 20px [ e]");

	24 testGridDefinitionsSetJSValues("repeat(auto-fit, [start] 200px 100px [end])" , "100px [foo] repeat(auto-fit, [a] 2em [b] 10% [c]) [bar] 3em", "[start] 0px 0p x [end start] 0px 0px [end]", "100px [foo a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c bar] 30px");

23	25

24 debug("");	26 debug("");

25 debug("Test invalid repeat syntax.");	27 debug("Test invalid repeat syntax.");

26 function testInvalidSyntax(gridColumn) {	28 function testInvalidSyntax(gridColumn) {

27 element = document.createElement("div");	29 element = document.createElement("div");

28 document.body.appendChild(element);	30 document.body.appendChild(element);

29 element.style.gridTemplateColumns = gridColumn;	31 element.style.gridTemplateColumns = gridColumn;

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

31 document.body.removeChild(element);	33 document.body.removeChild(element);

32 }	34 }

33	35

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

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

36 testInvalidSyntax("repeat(auto-fill, 20px 10px)");	38 testInvalidSyntax("repeat(auto-fill, 20px min-content)");

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

38 testInvalidSyntax("repeat(auto-fill,)");	40 testInvalidSyntax("repeat(auto-fill,)");

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

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

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

42 testInvalidSyntax("repeat(auto-fit, 20px 10px)");	44 testInvalidSyntax("repeat(auto-fit, minmax(20px, 30px) auto)");

43 testInvalidSyntax("repeat(auto-fit, 20px [foo bar] 10px)");	45 testInvalidSyntax("repeat(auto-fit, max-content 2em)");

44 testInvalidSyntax("repeat(auto-fit,)");	46 testInvalidSyntax("repeat(auto-fit,)");

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

46	48

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

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

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

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

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

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

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

54	56

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

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

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

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

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

60 </script>	62 </script>

OLD	NEW