third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html - Issue 1895443002: [css-grid] Implement auto-repeat computation

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

Issue 1895443002: [css-grid] Implement auto-repeat computation (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 8 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 | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

2 <link href="resources/grid.css" rel="stylesheet">	2 <link href="resources/grid.css" rel="stylesheet">
	Manuel Rego 2016/04/18 21:31:41 This is unrelated to this patch, but it seems we d This is unrelated to this patch, but it seems we don't use grid.css in this test. svillar 2016/04/19 08:09:35 Acknowledged. Show quoted text On 2016/04/18 21:31:41, Manuel Rego wrote: > This is unrelated to this patch, but it seems we don't use grid.css in this > test. Acknowledged.
3 <script src="../../resources/js-test.js"></script>	3 <script src="../../resources/js-test.js"></script>

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

5	5

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

7 </body>	7 </body>

8 <script>	8 <script>

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

10	10

11 debug("Test auto-repeat syntax.");	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]", "repeat(auto-fil l, [foo bar] 10px)", "repeat(auto-fill, 2em [foo bar])");	12 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]");
	Manuel Rego 2016/04/18 21:31:41 Generic comment, I'm not sure if using "em" unit i Generic comment, I'm not sure if using "em" unit is a good idea, isn't the size of 1em relative to the font size? svillar 2016/04/19 08:09:35 It is, and we use it in many cases. What I could d Show quoted text On 2016/04/18 21:31:41, Manuel Rego wrote: > Generic comment, I'm not sure if using "em" unit is a good idea, > isn't the size of 1em relative to the font size? It is, and we use it in many cases. What I could do is to explicitly define the size of the font. Manuel Rego 2016/04/19 11:37:30 Ok, that would be nice. Show quoted text On 2016/04/19 08:09:35, svillar wrote: > On 2016/04/18 21:31:41, Manuel Rego wrote: > > Generic comment, I'm not sure if using "em" unit is a good idea, > > isn't the size of 1em relative to the font size? > > It is, and we use it in many cases. What I could do is to explicitly define the > size of the font. Ok, that would be nice.
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]", "repeat(auto-fill, [foo bar] minmax(10px, 1fr))", "repeat (auto-fill, [foo] minmax(2em, max-content) [bar])");	13 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]");

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", "repeat(auto-fill, minmax(10px, 100px)) 20px 20px", "70px repeat(auto-fill, min max(2em, max-content) [bar]) [foo] 1em [foo] 1em");	14 testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(50px, 100px)) repea t(2, 250px)", "repeat(1, 450px) repeat(auto-fill, minmax(5em, max-content) [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(5em, 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]", "repeat(auto-fit, [foo bar] 10px)", "repeat(auto-fit, 2em [foo bar])");	15 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat( auto-fit, 24em [foo bar])", "none", "none");

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]", "repeat(auto-fit, [foo bar] minmax(10px, 1fr))", "repeat(au to-fit, [foo] minmax(2em, max-content) [bar])");	16 testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr ))", "repeat(auto-fit, [foo] minmax(20em, max-content) [bar])", "none", "none");

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 ", "repeat(auto-fit, minmax(10px, min-content)) 20px 20px", "10% repeat(auto-fit , minmax(2em, max-content) [bar]) [foo] 1em [foo] 1em");	17 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)", "20px 20px", "60px [foo] 10px [foo] 10px", "repeat(a uto-fit, minmax(300px, min-content)) 20px 20px", "10% repeat(auto-fit, minmax(30 em, max-content) [bar]) [foo] 1em [foo] 1em");

18	18

19 debug("");	19 debug("");

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

21 function testInvalidSyntax(gridColumn) {	21 function testInvalidSyntax(gridColumn) {

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

23 document.body.appendChild(element);	23 document.body.appendChild(element);

24 element.style.gridTemplateColumns = gridColumn;	24 element.style.gridTemplateColumns = gridColumn;

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

26 document.body.removeChild(element);	26 document.body.removeChild(element);

27 }	27 }

(...skipping 20 matching lines...) Expand all Loading...
48 testInvalidSyntax("repeat(auto-fit, 10em [bar]) auto 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)");	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)");	50 testInvalidSyntax("repeat(auto-fill, 1em [bar]) repeat(3, max-content [last] ) repeat(auto-fit, 32px)");

51	51

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

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

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

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

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

57 </script>	57 </script>

OLD	NEW