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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

Issue 146773002: [CSS Grid Layout] Rename grid-definition-{columns|rows} to match the new syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fixed renaming issues with some tests. Created 6 years, 10 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 | « LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-rows.html ('k') | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <html> 2 <html>
3 <head> 3 <head>
4 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <style> 5 <style>
6 .grid { 6 .grid {
7 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ 7 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */
8 width: 800px; 8 width: 800px;
9 height: 600px; 9 height: 600px;
10 } 10 }
11 .gridItem { 11 .gridItem {
12 grid-column: 1; 12 grid-column: 1;
13 grid-row: 1; 13 grid-row: 1;
14 height: 22px; 14 height: 22px;
15 width: 77px; 15 width: 77px;
16 } 16 }
17 .gridWithFixed { 17 .gridWithFixed {
18 grid-definition-columns: (first) 10px; 18 grid-template-columns: (first) 10px;
19 grid-definition-rows: (first) 15px; 19 grid-template-rows: (first) 15px;
20 } 20 }
21 .gridWithPercent { 21 .gridWithPercent {
22 grid-definition-columns: 53% (last); 22 grid-template-columns: 53% (last);
23 grid-definition-rows: 27% (last); 23 grid-template-rows: 27% (last);
24 } 24 }
25 .gridWithAuto { 25 .gridWithAuto {
26 grid-definition-columns: (first) auto; 26 grid-template-columns: (first) auto;
27 grid-definition-rows: auto (last); 27 grid-template-rows: auto (last);
28 } 28 }
29 .gridWithMinMax { 29 .gridWithMinMax {
30 grid-definition-columns: (first) minmax(10%, 15px); 30 grid-template-columns: (first) minmax(10%, 15px);
31 grid-definition-rows: minmax(20px, 50%) (last); 31 grid-template-rows: minmax(20px, 50%) (last);
32 } 32 }
33 .gridWithFixedMultiple { 33 .gridWithFixedMultiple {
34 grid-definition-columns: (first nav) 10px (last); 34 grid-template-columns: (first nav) 10px (last);
35 grid-definition-rows: (first nav) 15px (last); 35 grid-template-rows: (first nav) 15px (last);
36 } 36 }
37 .gridWithPercentageSameStringMultipleTimes { 37 .gridWithPercentageSameStringMultipleTimes {
38 grid-definition-columns: (first nav) 10% (nav) 15% (last); 38 grid-template-columns: (first nav) 10% (nav) 15% (last);
39 grid-definition-rows: (first nav2) 25% (nav2) 75% (last); 39 grid-template-rows: (first nav2) 25% (nav2) 75% (last);
40 } 40 }
41 .gridWithRepeat { 41 .gridWithRepeat {
42 grid-definition-columns: (first) 10px repeat(2, (nav nav2) 50%); 42 grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%);
43 grid-definition-rows: 100px repeat(2, (nav nav2) 25%) (last); 43 grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last);
44 } 44 }
45 .gridWithEmptyParentheses { 45 .gridWithEmptyParentheses {
46 grid-definition-columns: () 10px; 46 grid-template-columns: () 10px;
47 grid-definition-rows: 20px ( ) 50px (); 47 grid-template-rows: 20px ( ) 50px ();
48 } 48 }
49 .gridWithoutParentheses { 49 .gridWithoutParentheses {
50 grid-definition-columns: first nav 10px; 50 grid-template-columns: first nav 10px;
51 grid-definition-rows: first 50% last; 51 grid-template-rows: first 50% last;
52 } 52 }
53 .gridWithInvalidNestedParentheses { 53 .gridWithInvalidNestedParentheses {
54 grid-definition-columns: (first (nav)) 10px (last); 54 grid-template-columns: (first (nav)) 10px (last);
55 grid-definition-rows: (first) 50% (last (nav) nav2); 55 grid-template-rows: (first) 50% (last (nav) nav2);
56 } 56 }
57 .gridWithUnbalancedParentheses { 57 .gridWithUnbalancedParentheses {
58 grid-definition-columns: (first nav 10px; 58 grid-template-columns: (first nav 10px;
59 grid-definition-rows: (first) 50% last); 59 grid-template-rows: (first) 50% last);
60 } 60 }
61 .gridWithMisplacedParentheses { 61 .gridWithMisplacedParentheses {
62 grid-definition-columns: (first 10px) 50%; 62 grid-template-columns: (first 10px) 50%;
63 grid-definition-rows: (first) (nav 50%); 63 grid-template-rows: (first) (nav 50%);
64 } 64 }
65 .gridWithContiguousParentheses { 65 .gridWithContiguousParentheses {
66 grid-definition-columns: (first) (nav) 10px; 66 grid-template-columns: (first) (nav) 10px;
67 grid-definition-rows: 50px (nav nav2) (middle) 10px; 67 grid-template-rows: 50px (nav nav2) (middle) 10px;
68 } 68 }
69 </style> 69 </style>
70 <script src="../../resources/js-test.js"></script> 70 <script src="../../resources/js-test.js"></script>
71 </head> 71 </head>
72 <body> 72 <body>
73 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> 73 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
74 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> 74 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
75 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> </div> 75 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> </div>
76 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi thChildren"> 76 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi thChildren">
77 <div class="gridItem"></div> 77 <div class="gridItem"></div>
78 </div> 78 </div>
79 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> 79 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
80 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement"> 80 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
81 <div class="gridItem"></div> 81 <div class="gridItem"></div>
82 </div> 82 </div>
83 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> 83 <div class="grid gridWithMinMax" id="gridWithMinMax"></div>
84 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> 84 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
85 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div> 85 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div>
86 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div> 86 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div>
87 <div class="grid gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> 87 <div class="grid gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div>
88 <div class="grid gridWithoutParentheses" id="gridWithoutParentheses"></div> 88 <div class="grid gridWithoutParentheses" id="gridWithoutParentheses"></div>
89 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare ntheses"></div> 89 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare ntheses"></div>
90 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese s"></div> 90 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese s"></div>
91 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParentheses" ></div> 91 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParentheses" ></div>
92 <div class="grid gridWithContiguousParentheses" id="gridWithContiguousParenthese s"></div> 92 <div class="grid gridWithContiguousParentheses" id="gridWithContiguousParenthese s"></div>
93 93
94 <script src="resources/grid-definitions-parsing-utils.js"></script> 94 <script src="resources/grid-definitions-parsing-utils.js"></script>
95 <script> 95 <script>
96 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected'); 96 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected');
97 97
98 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS"); 98 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
99 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " (first) 10px", "(first) 15px"); 99 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " (first) 10px", "(first) 15px");
100 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px (last)", "162px (last)"); 100 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px (last)", "162px (last)");
101 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz e"), "0px (last)", "0px (last)"); 101 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz e"), "0px (last)", "0px (last)");
102 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz eWithChildren"), "77px (last)", "22px (last)"); 102 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz eWithChildren"), "77px (last)", "22px (last)");
103 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "( first) 0px", "0px (last)"); 103 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "( first) 0px", "0px (last)");
104 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "(first) 77px", "22px (last)"); 104 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "(first) 77px", "22px (last)");
105 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first ) 80px", "300px (last)"); 105 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first ) 80px", "300px (last)");
106 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)"); 106 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)");
107 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "(first nav) 80px (nav) 120px (last)", "(first nav2) 150px ( nav2) 450px (last)"); 107 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "(first nav) 80px (nav) 120px (last)", "(first nav2) 150px ( nav2) 450px (last)");
108 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "(first) 10px (nav nav2) 400px (nav nav2) 400px", "100px (nav nav2) 150px (nav n av2) 150px (last)"); 108 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "(first) 10px (nav nav2) 400px (nav nav2) 400px", "100px (nav nav2) 150px (nav n av2) 150px (last)");
109 testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses" ), "10px", "20px 50px"); 109 testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses" ), "10px", "20px 50px");
110 110
111 debug(""); 111 debug("");
112 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS"); 112 debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
113 testGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "(first) 18px" , "66px (last)", "(first) 18px", "66px (last)"); 113 testGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "(first) 18px" , "66px (last)", "(first) 18px", "66px (last)");
114 testGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "(first) 440px", "240px (last)", "(first) 55%", "40% (last)"); 114 testGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "(first) 440px", "240px (last)", "(first) 55%", "40% (last)");
115 testGridDefinitionsSetJSValues("(first) auto", "auto (last)", "(first) 0px", "0px (last)", "(first) auto", "auto (last)"); 115 testGridDefinitionsSetJSValues("(first) auto", "auto (last)", "(first) 0px", "0px (last)", "(first) auto", "auto (last)");
116 testGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "(first) 0px", "0px (last)", "(first) min-content", "min-content (last)"); 116 testGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "(first) 0px", "0px (last)", "(first) min-content", "min-content (last)");
117 testGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "(first) 0px", "0px (last)", "(first) max-content", "max-content (last)"); 117 testGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "(first) 0px", "0px (last)", "(first) max-content", "max-content (last)");
118 testGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40 %) (last)", "(first) 440px", "240px (last)", "(first) minmax(55%, 45px)", "minma x(30px, 40%) (last)"); 118 testGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40 %) (last)", "(first) 440px", "240px (last)", "(first) minmax(55%, 45px)", "minma x(30px, 40%) (last)");
119 testGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minmax( max-content, 5em) (last)", "(first) 220px", "50px (last)", "(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)"); 119 testGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minmax( max-content, 5em) (last)", "(first) 220px", "50px (last)", "(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)");
120 testGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minmax( min-content, 5em) (last)", "(first) 220px", "50px (last)", "(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)"); 120 testGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minmax( min-content, 5em) (last)", "(first) 220px", "50px (last)", "(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)");
121 testGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)", " minmax(max-content, min-content) (last)", "(first) 0px", "0px (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)"); 121 testGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)", " minmax(max-content, min-content) (last)", "(first) 0px", "0px (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)");
122 testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) 0p x (last)", "(first nav) 0px (last)", "(first nav) minmax(min-content, max-conten t) (last)", "(first nav) minmax(max-content, min-content) (last)"); 122 testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) 0p x (last)", "(first nav) 0px (last)", "(first nav) minmax(min-content, max-conten t) (last)", "(first nav) minmax(max-content, min-content) (last)");
123 testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minma x(10px, 15px) (last)", "(first nav) 0px (nav) 0px (last)", "(first nav2) 0px (na v2) 15px (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last )", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (la st)"); 123 testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minma x(10px, 15px) (last)", "(first nav) 0px (nav) 0px (last)", "(first nav2) 0px (na v2) 15px (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last )", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (la st)");
124 testGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) 0px (foo) 0px (bar)", "(foo bar) 0px (foo) 0 px (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)") ; 124 testGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) 0px (foo) 0px (bar)", "(foo bar) 0px (foo) 0 px (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)") ;
125 testGridDefinitionsSetJSValues("(first) auto repeat(2, (foo bar) 20px)", "22 0px (foo) repeat(1, 50% (baz)", "(first) 0px (foo bar) 20px (foo bar) 20px", "22 0px (foo) 300px (baz)", "(first) auto (foo bar) 20px (foo bar) 20px", "220px (fo o) 50% (baz)"); 125 testGridDefinitionsSetJSValues("(first) auto repeat(2, (foo bar) 20px)", "22 0px (foo) repeat(1, 50% (baz)", "(first) 0px (foo bar) 20px (foo bar) 20px", "22 0px (foo) 300px (baz)", "(first) auto (foo bar) 20px (foo bar) 20px", "220px (fo o) 50% (baz)");
126 126
127 debug(""); 127 debug("");
128 debug("Test getting invalid grid-definition-columns and grid-definition-rows set through CSS"); 128 debug("Test getting invalid grid-template-columns and grid-template-rows set through CSS");
129 testGridDefinitionsValues(document.getElementById("gridWithoutParentheses"), "none", "none"); 129 testGridDefinitionsValues(document.getElementById("gridWithoutParentheses"), "none", "none");
130 testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedPare ntheses"), "none", "none"); 130 testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedPare ntheses"), "none", "none");
131 testGridDefinitionsValues(document.getElementById("gridWithUnbalancedParenth eses"), "none", "none"); 131 testGridDefinitionsValues(document.getElementById("gridWithUnbalancedParenth eses"), "none", "none");
132 testGridDefinitionsValues(document.getElementById("gridWithMisplacedParenthe ses"), "none", "none"); 132 testGridDefinitionsValues(document.getElementById("gridWithMisplacedParenthe ses"), "none", "none");
133 testGridDefinitionsValues(document.getElementById("gridWithContiguousParenth eses"), "none", "none"); 133 testGridDefinitionsValues(document.getElementById("gridWithContiguousParenth eses"), "none", "none");
134 134
135 debug(""); 135 debug("");
136 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS"); 136 debug("Test getting and setting invalid grid-template-columns and grid-templ ate-rows through JS");
137 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); 137 testGridDefinitionsSetBadJSValues("(foo)", "(bar");
138 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); 138 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)");
139 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); 139 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
140 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2 em"); 140 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2 em");
141 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em") ; 141 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em") ;
142 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); 142 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)");
143 </script> 143 </script>
144 </body> 144 </body>
145 </html> 145 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-rows.html ('k') | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698