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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html

Issue 1172683002: [CSS Grid Layout] Refactor grid-template-areas-get-set.html test (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 5 years, 6 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 | LayoutTests/fast/css-grid-layout/grid-template-areas-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 #gridWithSingleStringTemplate { 6 #gridWithSingleStringTemplate {
7 grid-template-areas: "area"; 7 grid-template-areas: "area";
8 } 8 }
9 9
10 #gridWithTwoColumnsTemplate { 10 #gridWithTwoColumnsTemplate {
(...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after
102 <div class="grid" id="gridWithDotCells"></div> 102 <div class="grid" id="gridWithDotCells"></div>
103 <div class="grid" id="gridWithDotsCells"></div> 103 <div class="grid" id="gridWithDotsCells"></div>
104 <div class="grid" id="gridWithComplexDotAreas"></div> 104 <div class="grid" id="gridWithComplexDotAreas"></div>
105 <div class="grid" id="gridWithComplexDotsAreas"></div> 105 <div class="grid" id="gridWithComplexDotsAreas"></div>
106 <div class="grid" id="gridWithMixedDotAndDotsAreas"></div> 106 <div class="grid" id="gridWithMixedDotAndDotsAreas"></div>
107 <div class="grid" id="gridWithHorizontalRectangle"></div> 107 <div class="grid" id="gridWithHorizontalRectangle"></div>
108 <div class="grid" id="gridWithVerticalRectangle"></div> 108 <div class="grid" id="gridWithVerticalRectangle"></div>
109 <script> 109 <script>
110 description("This test checks that grid-template-areas is properly parsed.") ; 110 description("This test checks that grid-template-areas is properly parsed.") ;
111 111
112 function testGridTemplateAreas(gridItemID, expectedResult) {
113 shouldBeEqualToString("window.getComputedStyle(" + gridItemID + ").getPr opertyValue('grid-template-areas')", expectedResult);
114 }
115
116 function testJSGridTemplateAreas(element, expectedResult) {
117 this.element = element;
118 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue ('grid-template-areas')", expectedResult);
119 }
120
112 debug("Test getting grid-template-areas set through CSS."); 121 debug("Test getting grid-template-areas set through CSS.");
113 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla te"); 122 testGridTemplateAreas("gridWithDefaultTemplate", "none");
114 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP ropertyValue('grid-template-areas')", "none") 123 testGridTemplateAreas("gridWithSingleStringTemplate", '"area"');
115 124 testGridTemplateAreas("gridWithTwoColumnsTemplate", '"first second"');
116 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt ringTemplate"); 125 testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"');
117 shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate) .getPropertyValue('grid-template-areas')", '"area"') 126 testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"');
118 127 testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."');
119 var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumns Template"); 128 testGridTemplateAreas("gridWithSpanningRowsDotsTemplate", '"span" "."');
120 shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).g etPropertyValue('grid-template-areas')", '"first second"') 129 testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."');
121 130 testGridTemplateAreas("gridWithDotsColumn", '"header ." "footer ."');
122 var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTempla te"); 131 testGridTemplateAreas("gridWithDotCells", '"first ." ". second"');
123 shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getP ropertyValue('grid-template-areas')", '"first" "second"') 132 testGridTemplateAreas("gridWithDotsCells", '"first ." ". second"');
124 133 testGridTemplateAreas("gridWithComplexDotAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer a side"');
125 var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpann ingColumnsTemplate"); 134 testGridTemplateAreas("gridWithComplexDotsAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
126 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTempla te).getPropertyValue('grid-template-areas')", '"span span"') 135 testGridTemplateAreas("gridWithMixedDotAndDotsAreas", '". title ." ". main m ain" "nav . aside" ". footer ."');
127 136 testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"');
128 var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpann ingRowsDotTemplate"); 137 testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"');
svillar 2015/06/10 07:22:37 I think these changes are great but...
129 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTempla te).getPropertyValue('grid-template-areas')", '"span" "."')
130
131 var gridWithSpanningRowsDotsTemplate = document.getElementById("gridWithSpan ningRowsDotsTemplate");
132 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotsTempl ate).getPropertyValue('grid-template-areas')", '"span" "."')
133
134 var gridWithDotColumn = document.getElementById("gridWithDotColumn");
135 shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropert yValue('grid-template-areas')", '"header ." "footer ."')
136
137 var gridWithDotsColumn = document.getElementById("gridWithDotsColumn");
138 shouldBeEqualToString("window.getComputedStyle(gridWithDotsColumn).getProper tyValue('grid-template-areas')", '"header ." "footer ."')
139
140 var gridWithDotCells = document.getElementById("gridWithDotCells");
141 shouldBeEqualToString("window.getComputedStyle(gridWithDotCells).getProperty Value('grid-template-areas')", '"first ." ". second"')
142
143 var gridWithDotsCells = document.getElementById("gridWithDotsCells");
144 shouldBeEqualToString("window.getComputedStyle(gridWithDotsCells).getPropert yValue('grid-template-areas')", '"first ." ". second"')
145
146 var gridWithComplexDotAreas = document.getElementById("gridWithComplexDotAre as");
147 shouldBeEqualToString("window.getComputedStyle(gridWithComplexDotAreas).getP ropertyValue('grid-template-areas')", '". header header ." ". . . ." "nav main m ain aside" "nav main main aside" ". . . aside" ". footer footer aside"')
148
149 var gridWithComplexDotsAreas = document.getElementById("gridWithComplexDotsA reas");
150 shouldBeEqualToString("window.getComputedStyle(gridWithComplexDotsAreas).get PropertyValue('grid-template-areas')", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"')
151
152 var gridWithMixedDotAndDotsAreas = document.getElementById("gridWithMixedDot AndDotsAreas");
153 shouldBeEqualToString("window.getComputedStyle(gridWithMixedDotAndDotsAreas) .getPropertyValue('grid-template-areas')", '". title ." ". main main" "nav . asi de" ". footer ."')
154
155 var gridWithHorizontalRectangle = document.getElementById("gridWithHorizonta lRectangle");
156 shouldBeEqualToString("window.getComputedStyle(gridWithHorizontalRectangle). getPropertyValue('grid-template-areas')", '"a a a" "a a a"');
157
158 var gridWithVerticalRectangle = document.getElementById("gridWithVerticalRec tangle");
159 shouldBeEqualToString("window.getComputedStyle(gridWithVerticalRectangle).ge tPropertyValue('grid-template-areas')", '"a a" "a a" "a a"');
160 138
161 debug("Test grid-template-areas: initial"); 139 debug("Test grid-template-areas: initial");
162 var element = document.createElement("div"); 140 var element = document.createElement("div");
163 document.body.appendChild(element); 141 document.body.appendChild(element);
164 element.style.gridTemplateAreas = "'foobar'"; 142 element.style.gridTemplateAreas = "'foobar'";
165 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"') 143 testJSGridTemplateAreas(element, '"foobar"');
166 element.style.gridTemplateAreas = "initial"; 144 element.style.gridTemplateAreas = "initial";
167 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", 'none'); 145 testJSGridTemplateAreas(element, 'none');
168 element.style.gridTemplateAreas = "'foobar'"; 146 element.style.gridTemplateAreas = "'foobar'";
169 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"') 147 testJSGridTemplateAreas(element, '"foobar"');
170 element.style.gridTemplateAreas = "none"; 148 element.style.gridTemplateAreas = "none";
171 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", 'none'); 149 testJSGridTemplateAreas(element, 'none');
172 document.body.removeChild(element); 150 document.body.removeChild(element);
173 151
174 debug("Test grid-template-areas: inherit"); 152 debug("Test grid-template-areas: inherit");
175 var parentElement = document.createElement("div"); 153 var parentElement = document.createElement("div");
176 document.body.appendChild(parentElement); 154 document.body.appendChild(parentElement);
177 parentElement.style.gridTemplateAreas = "'foo bar'"; 155 parentElement.style.gridTemplateAreas = "'foo bar'";
178 shouldBeEqualToString("window.getComputedStyle(parentElement).getPropertyVal ue('grid-template-areas')", '"foo bar"') 156 testJSGridTemplateAreas(parentElement, '"foo bar"');
179 157
180 var element = document.createElement("div"); 158 var element = document.createElement("div");
181 parentElement.appendChild(element); 159 parentElement.appendChild(element);
182 element.style.gridTemplateAreas = "inherit"; 160 element.style.gridTemplateAreas = "inherit";
183 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foo bar"') 161 testJSGridTemplateAreas(element, '"foo bar"');
184 document.body.removeChild(parentElement); 162 document.body.removeChild(parentElement);
185 163
186 debug("Test invalid grid-template-areas values."); 164 debug("Test invalid grid-template-areas values.");
187 var element = document.createElement("div"); 165 var element = document.createElement("div");
188 document.body.appendChild(element); 166 document.body.appendChild(element);
189 167
190 // 'nav' is not a rectangular definition. 168 // 'nav' is not a rectangular definition.
191 element.style.gridTemplateAreas = "'nav head' 'nav nav'"; 169 element.style.gridTemplateAreas = "'nav head' 'nav nav'";
192 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 170 testJSGridTemplateAreas(element, "none");
193 171
194 // 'nav' is not contiguous in the column direction. 172 // 'nav' is not contiguous in the column direction.
195 element.style.gridTemplateAreas = "'nav head nav'"; 173 element.style.gridTemplateAreas = "'nav head nav'";
196 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 174 testJSGridTemplateAreas(element, "none");
197 175
198 // 'nav' is not contiguous in the row direction. 176 // 'nav' is not contiguous in the row direction.
199 element.style.gridTemplateAreas = "'nav head' 'middle middle' 'nav footer'"; 177 element.style.gridTemplateAreas = "'nav head' 'middle middle' 'nav footer'";
200 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 178 testJSGridTemplateAreas(element, "none");
201 179
202 // The rows don't have the same number of columns. 180 // The rows don't have the same number of columns.
203 element.style.gridTemplateAreas = "'nav head' 'foot'"; 181 element.style.gridTemplateAreas = "'nav head' 'foot'";
204 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 182 testJSGridTemplateAreas(element, "none");
205 183
206 // Empty rows. 184 // Empty rows.
207 element.style.gridTemplateAreas = "'' ''"; 185 element.style.gridTemplateAreas = "'' ''";
208 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 186 testJSGridTemplateAreas(element, "none");
209 187
210 debug(""); 188 debug("");
211 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;."); 189 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;.");
212 // <ident> only allows a leading '-'. 190 // <ident> only allows a leading '-'.
213 element.style.gridTemplateAreas = '"nav-up"'; 191 element.style.gridTemplateAreas = '"nav-up"';
214 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 192 testJSGridTemplateAreas(element, "none");
svillar 2015/06/10 07:22:37 ... these ones do not improve the tests, I agree i
Manuel Rego 2015/06/10 11:56:47 Acknowledged.
215 </script> 193 </script>
216 </body> 194 </body>
217 </html> 195 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698