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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 23528004: [CSS Grid Layout] Update named grid lines syntax to the last version of the specs (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@named
Patch Set: Added some new tests Created 7 years, 3 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/grid-item-position-changed-dynamic.html ('k') | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | Source/core/css/CSSGrammar.y.in » ('J')
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 <script> 4 <script>
5 if (window.testRunner) 5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script> 7 </script>
8 <link href="resources/grid.css" rel="stylesheet"> 8 <link href="resources/grid.css" rel="stylesheet">
9 <style> 9 <style>
10 .gridWithFixed { 10 .gridWithFixed {
11 grid-definition-columns: "first" 10px; 11 grid-definition-columns: (first) 10px;
12 grid-definition-rows: "first" 15px; 12 grid-definition-rows: (first) 15px;
13 } 13 }
14 .gridWithPercent { 14 .gridWithPercent {
15 grid-definition-columns: 53% "last"; 15 grid-definition-columns: 53% (last);
16 grid-definition-rows: 27% "last"; 16 grid-definition-rows: 27% (last);
17 } 17 }
18 .gridWithAuto { 18 .gridWithAuto {
19 grid-definition-columns: "first" auto; 19 grid-definition-columns: (first) auto;
20 grid-definition-rows: auto "last"; 20 grid-definition-rows: auto (last);
21 } 21 }
22 .gridWithMinMax { 22 .gridWithMinMax {
23 grid-definition-columns: "first" minmax(10%, 15px); 23 grid-definition-columns: (first) minmax(10%, 15px);
24 grid-definition-rows: minmax(20px, 50%) "last"; 24 grid-definition-rows: minmax(20px, 50%) (last);
25 } 25 }
26 .gridWithFixedMultiple { 26 .gridWithFixedMultiple {
27 grid-definition-columns: "first" "nav" 10px "last"; 27 grid-definition-columns: (first nav) 10px (last);
28 grid-definition-rows: "first" "nav" 15px "last"; 28 grid-definition-rows: (first nav) 15px (last);
29 } 29 }
30 .gridWithPercentageSameStringMultipleTimes { 30 .gridWithPercentageSameStringMultipleTimes {
31 grid-definition-columns: "first" "nav" 10% "nav" 15% "last"; 31 grid-definition-columns: (first nav) 10% (nav) 15% (last);
32 grid-definition-rows: "first" "nav2" 25% "nav2" 75% "last"; 32 grid-definition-rows: (first nav2) 25% (nav2) 75% (last);
33 }
34 .gridWithRepeat {
35 grid-definition-columns: (first) 10px repeat(2, (nav nav2) 50%);
36 grid-definition-rows: 100px repeat(2, (nav nav2) 25%) (last);
37 }
38 .gridWithoutParentheses {
39 grid-definition-columns: first nav 10px;
40 grid-definition-rows: first 50% last;
41 }
42 .gridWithInvalidNestedParentheses {
43 grid-definition-columns: (first (nav)) 10px (last);
44 grid-definition-rows: (first) 50% (last (nav) nav2);
45 }
46 .gridWithUnbalancedParentheses {
47 grid-definition-columns: (first nav 10px;
48 grid-definition-rows: (first) 50% last);
49 }
50 .gridWithMisplacedParentheses {
51 grid-definition-columns: (first 10px) 50%;
52 grid-definition-rows: (first) (nav 50%);
33 } 53 }
34 </style> 54 </style>
35 <script src="../js/resources/js-test-pre.js"></script> 55 <script src="../js/resources/js-test-pre.js"></script>
36 </head> 56 </head>
37 <body> 57 <body>
38 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> 58 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
39 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> 59 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
40 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> 60 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
41 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> 61 <div class="grid gridWithMinMax" id="gridWithMinMax"></div>
42 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> 62 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
43 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div> 63 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div>
64 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div>
65 <div class="grid gridWithoutParentheses" id="gridWithoutParenthesesElement"></di v>
66 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare nthesesElement"></div>
67 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese sElement"></div>
68 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParenthesesE lement"></div>
44 <script> 69 <script>
45 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected'); 70 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected');
46 71
47 function testValue(gridElement, namedGridDefinitionColumns, namedGridDefinit ionRows) 72 function testValue(gridElement, namedGridDefinitionColumns, namedGridDefinit ionRows)
48 { 73 {
49 this.gridElement = gridElement; 74 this.gridElement = gridElement;
50 shouldBeEqualToString("getComputedStyle(gridElement, '').getPropertyValu e('grid-definition-columns')", namedGridDefinitionColumns); 75 shouldBeEqualToString("getComputedStyle(gridElement, '').getPropertyValu e('grid-definition-columns')", namedGridDefinitionColumns);
51 shouldBeEqualToString("getComputedStyle(gridElement, '').getPropertyValu e('grid-definition-rows')", namedGridDefinitionRows); 76 shouldBeEqualToString("getComputedStyle(gridElement, '').getPropertyValu e('grid-definition-rows')", namedGridDefinitionRows);
52 } 77 }
53 78
54 function testCSSValue(gridElementId, namedGridDefinitionColumns, namedGridDe finitionRows) 79 function testCSSValue(gridElementId, namedGridDefinitionColumns, namedGridDe finitionRows)
55 { 80 {
56 testValue(document.getElementById(gridElementId), namedGridDefinitionCol umns, namedGridDefinitionRows); 81 testValue(document.getElementById(gridElementId), namedGridDefinitionCol umns, namedGridDefinitionRows);
57 } 82 }
58 83
59 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS"); 84 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS");
60 testCSSValue("gridWithFixedElement", "first 10px", "first 15px"); 85 testCSSValue("gridWithFixedElement", "first 10px", "first 15px");
61 testCSSValue("gridWithPercentElement", "53% last", "27% last"); 86 testCSSValue("gridWithPercentElement", "53% last", "27% last");
62 testCSSValue("gridWithAutoElement", "first auto", "auto last"); 87 testCSSValue("gridWithAutoElement", "first auto", "auto last");
63 testCSSValue("gridWithMinMax", "first minmax(10%, 15px)", "minmax(20px, 50%) last"); 88 testCSSValue("gridWithMinMax", "first minmax(10%, 15px)", "minmax(20px, 50%) last");
64 testCSSValue("gridWithFixedMultiple", "first nav 10px last", "first nav 15px last"); 89 testCSSValue("gridWithFixedMultiple", "first nav 10px last", "first nav 15px last");
65 testCSSValue("gridWithPercentageSameStringMultipleTimes", "first nav 10% nav 15% last", "first nav2 25% nav2 75% last"); 90 testCSSValue("gridWithPercentageSameStringMultipleTimes", "first nav 10% nav 15% last", "first nav2 25% nav2 75% last");
91 testCSSValue("gridWithRepeatElement", "first 10px nav nav2 50% nav nav2 50%" , "100px nav nav2 25% nav nav2 25% last");
92
93 debug("");
94 debug("Test getting invalid grid-definition-columns and grid-definition-rows set through CSS");
95 testCSSValue("gridWithoutParenthesesElement", "none", "none");
96 testCSSValue("gridWithInvalidNestedParenthesesElement", "none", "none");
97 testCSSValue("gridWithUnbalancedParenthesesElement", "none", "none");
98 testCSSValue("gridWithMisplacedParenthesesElement", "none", "none");
66 99
67 debug(""); 100 debug("");
68 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS"); 101 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS");
69 var element = document.createElement("div"); 102 var element = document.createElement("div");
70 document.body.appendChild(element); 103 document.body.appendChild(element);
71 element.style.gridDefinitionColumns = "'first' 18px"; 104 element.style.gridDefinitionColumns = "(first) 18px";
72 element.style.gridDefinitionRows = "66px 'last'"; 105 element.style.gridDefinitionRows = "66px (last)";
73 testValue(element, "first 18px", "66px last"); 106 testValue(element, "first 18px", "66px last");
74 107
75 element = document.createElement("div"); 108 element = document.createElement("div");
76 document.body.appendChild(element); 109 document.body.appendChild(element);
77 element.style.gridDefinitionColumns = "'first' 55%"; 110 element.style.gridDefinitionColumns = "(first) 55%";
78 element.style.gridDefinitionRows = "40% 'last'"; 111 element.style.gridDefinitionRows = "40% (last)";
79 testValue(element, "first 55%", "40% last"); 112 testValue(element, "first 55%", "40% last");
80 113
81 element = document.createElement("div"); 114 element = document.createElement("div");
82 document.body.appendChild(element); 115 document.body.appendChild(element);
83 element.style.gridDefinitionColumns = "'first' auto"; 116 element.style.gridDefinitionColumns = "(first) auto";
84 element.style.gridDefinitionRows = "auto 'last'"; 117 element.style.gridDefinitionRows = "auto (last)";
85 testValue(element, "first auto", "auto last"); 118 testValue(element, "first auto", "auto last");
86 119
87 element = document.createElement("div"); 120 element = document.createElement("div");
88 document.body.appendChild(element); 121 document.body.appendChild(element);
89 element.style.gridDefinitionColumns = "'first' min-content"; 122 element.style.gridDefinitionColumns = "(first) min-content";
90 element.style.gridDefinitionRows = "min-content 'last'"; 123 element.style.gridDefinitionRows = "min-content (last)";
91 testValue(element, "first min-content", "min-content last"); 124 testValue(element, "first min-content", "min-content last");
92 125
93 element = document.createElement("div"); 126 element = document.createElement("div");
94 document.body.appendChild(element); 127 document.body.appendChild(element);
95 element.style.gridDefinitionColumns = "'first' max-content"; 128 element.style.gridDefinitionColumns = "(first) max-content";
96 element.style.gridDefinitionRows = "max-content 'last'"; 129 element.style.gridDefinitionRows = "max-content (last)";
97 testValue(element, "first max-content", "max-content last"); 130 testValue(element, "first max-content", "max-content last");
98 131
99 element = document.createElement("div"); 132 element = document.createElement("div");
100 document.body.appendChild(element); 133 document.body.appendChild(element);
101 element.style.gridDefinitionColumns = "'first' minmax(55%, 45px)"; 134 element.style.gridDefinitionColumns = "(first) minmax(55%, 45px)";
102 element.style.gridDefinitionRows = "minmax(30px, 40%) 'last'"; 135 element.style.gridDefinitionRows = "minmax(30px, 40%) (last)";
103 testValue(element, "first minmax(55%, 45px)", "minmax(30px, 40%) last"); 136 testValue(element, "first minmax(55%, 45px)", "minmax(30px, 40%) last");
104 137
105 element = document.createElement("div"); 138 element = document.createElement("div");
106 document.body.appendChild(element); 139 document.body.appendChild(element);
107 element.style.font = "10px Ahem"; 140 element.style.font = "10px Ahem";
108 element.style.gridDefinitionColumns = "'first' minmax(22em, max-content)"; 141 element.style.gridDefinitionColumns = "(first) minmax(22em, max-content)";
109 element.style.gridDefinitionRows = "minmax(max-content, 5em) 'last'"; 142 element.style.gridDefinitionRows = "minmax(max-content, 5em) (last)";
110 testValue(element, "first minmax(220px, max-content)", "minmax(max-content, 50px) last"); 143 testValue(element, "first minmax(220px, max-content)", "minmax(max-content, 50px) last");
111 144
112 element = document.createElement("div"); 145 element = document.createElement("div");
113 document.body.appendChild(element); 146 document.body.appendChild(element);
114 element.style.font = "10px Ahem"; 147 element.style.font = "10px Ahem";
115 element.style.gridDefinitionColumns = "'first' minmax(22em, max-content)"; 148 element.style.gridDefinitionColumns = "(first) minmax(22em, max-content)";
116 element.style.gridDefinitionRows = "minmax(max-content, 5em) 'last'"; 149 element.style.gridDefinitionRows = "minmax(max-content, 5em) (last)";
117 testValue(element, "first minmax(220px, max-content)", "minmax(max-content, 50px) last"); 150 testValue(element, "first minmax(220px, max-content)", "minmax(max-content, 50px) last");
118 151
119 element = document.createElement("div"); 152 element = document.createElement("div");
120 document.body.appendChild(element); 153 document.body.appendChild(element);
121 element.style.gridDefinitionColumns = "'first' minmax(min-content, max-conte nt)"; 154 element.style.gridDefinitionColumns = "(first) minmax(min-content, max-conte nt)";
122 element.style.gridDefinitionRows = "minmax(max-content, min-content) 'last'" ; 155 element.style.gridDefinitionRows = "minmax(max-content, min-content) (last)" ;
123 testValue(element, "first minmax(min-content, max-content)", "minmax(max-con tent, min-content) last"); 156 testValue(element, "first minmax(min-content, max-content)", "minmax(max-con tent, min-content) last");
124 157
125 element = document.createElement("div"); 158 element = document.createElement("div");
126 document.body.appendChild(element); 159 document.body.appendChild(element);
127 element.style.gridDefinitionColumns = "'first' 'nav' minmax(min-content, max -content) 'last'"; 160 element.style.gridDefinitionColumns = "(first nav) minmax(min-content, max-c ontent) (last)";
128 element.style.gridDefinitionRows = "'first' 'nav' minmax(max-content, min-co ntent) 'last'"; 161 element.style.gridDefinitionRows = "(first nav) minmax(max-content, min-cont ent) (last)";
129 testValue(element, "first nav minmax(min-content, max-content) last", "first nav minmax(max-content, min-content) last"); 162 testValue(element, "first nav minmax(min-content, max-content) last", "first nav minmax(max-content, min-content) last");
130 163
131 element = document.createElement("div"); 164 element = document.createElement("div");
132 document.body.appendChild(element); 165 document.body.appendChild(element);
133 element.style.gridDefinitionColumns = "'first' 'nav' minmax(min-content, max -content) 'nav' auto 'last'"; 166 element.style.gridDefinitionColumns = "(first nav) minmax(min-content, max-c ontent) (nav) auto (last)";
134 element.style.gridDefinitionRows = "'first' 'nav2' minmax(max-content, min-c ontent) 'nav2' minmax(10px, 15px) 'last'"; 167 element.style.gridDefinitionRows = "(first nav2) minmax(max-content, min-con tent) (nav2) minmax(10px, 15px) (last)";
135 testValue(element, "first nav minmax(min-content, max-content) nav auto last ", "first nav2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last"); 168 testValue(element, "first nav minmax(min-content, max-content) nav auto last ", "first nav2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last");
136 169
137 element = document.createElement("div"); 170 element = document.createElement("div");
138 document.body.appendChild(element); 171 document.body.appendChild(element);
139 element.style.gridDefinitionColumns = "'foo' 'bar' auto 'foo' auto 'bar'"; 172 element.style.gridDefinitionColumns = "(foo bar) auto (foo) auto (bar)";
140 element.style.gridDefinitionRows = "'foo' 'bar' auto 'foo' auto 'bar'"; 173 element.style.gridDefinitionRows = "(foo bar) auto (foo) auto (bar)";
141 testValue(element, "foo bar auto foo auto bar", "foo bar auto foo auto bar") ; 174 testValue(element, "foo bar auto foo auto bar", "foo bar auto foo auto bar") ;
142 175
176 element = document.createElement("div");
177 document.body.appendChild(element);
178 element.style.gridDefinitionColumns = "(first) auto repeat(2, (foo bar) 20px )";
179 element.style.gridDefinitionRows = "220px (foo) repeat(1, 50% (baz)";
180 testValue(element, "first auto foo bar 20px foo bar 20px", "220px foo 50% ba z");
181
143 debug(""); 182 debug("");
144 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS"); 183 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS");
145 element = document.createElement("div"); 184 element = document.createElement("div");
146 document.body.appendChild(element); 185 document.body.appendChild(element);
147 element.style.gridDefinitionColumns = "'foo'"; 186 element.style.gridDefinitionColumns = "(foo)";
148 element.style.gridDefinitionRows = "'bar"; 187 element.style.gridDefinitionRows = "(bar";
149 testValue(element, "none", "none"); 188 testValue(element, "none", "none");
150 189
151 element = document.createElement("div"); 190 element = document.createElement("div");
152 document.body.appendChild(element); 191 document.body.appendChild(element);
153 element.style.gridDefinitionColumns = "'foo' 'bar'"; 192 element.style.gridDefinitionColumns = "(foo bar)";
154 element.style.gridDefinitionRows = "'bar' 'foo'"; 193 element.style.gridDefinitionRows = "(bar foo)";
194 testValue(element, "none", "none");
195
196 element = document.createElement("div");
197 document.body.appendChild(element);
198 element.style.gridDefinitionColumns = "foo bar 10px";
199 element.style.gridDefinitionRows = "50% baz bar foo 2em";
200 testValue(element, "none", "none");
201
202 element = document.createElement("div");
203 document.body.appendChild(element);
204 element.style.gridDefinitionColumns = "(foo (bar)) 10px";
205 element.style.gridDefinitionRows = "50% ((baz bar) foo) 2em";
206 testValue(element, "none", "none");
207
208 element = document.createElement("div");
209 document.body.appendChild(element);
210 element.style.gridDefinitionColumns = "(foo bar 10px";
211 element.style.gridDefinitionRows = "50% (baz bar) foo) 2em";
212 testValue(element, "none", "none");
213
214 element = document.createElement("div");
215 document.body.appendChild(element);
216 element.style.gridDefinitionColumns = "(foo 10px) 2em";
217 element.style.gridDefinitionRows = "(50% bar) (foo)";
155 testValue(element, "none", "none"); 218 testValue(element, "none", "none");
156 </script> 219 </script>
157 <script src="../js/resources/js-test-post.js"></script> 220 <script src="../js/resources/js-test-post.js"></script>
158 </body> 221 </body>
159 </html> 222 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html ('k') | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | Source/core/css/CSSGrammar.y.in » ('J')

Powered by Google App Engine
This is Rietveld 408576698