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

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: Patch for landing 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 | no next file » | 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(gridId, expectedResult) {
113 shouldBeEqualToString("window.getComputedStyle(" + gridId + ").getProper tyValue('grid-template-areas')", expectedResult);
114 }
115
112 debug("Test getting grid-template-areas set through CSS."); 116 debug("Test getting grid-template-areas set through CSS.");
113 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla te"); 117 testGridTemplateAreas("gridWithDefaultTemplate", "none");
114 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP ropertyValue('grid-template-areas')", "none") 118 testGridTemplateAreas("gridWithSingleStringTemplate", '"area"');
115 119 testGridTemplateAreas("gridWithTwoColumnsTemplate", '"first second"');
116 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt ringTemplate"); 120 testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"');
117 shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate) .getPropertyValue('grid-template-areas')", '"area"') 121 testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"');
118 122 testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."');
119 var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumns Template"); 123 testGridTemplateAreas("gridWithSpanningRowsDotsTemplate", '"span" "."');
120 shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).g etPropertyValue('grid-template-areas')", '"first second"') 124 testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."');
121 125 testGridTemplateAreas("gridWithDotsColumn", '"header ." "footer ."');
122 var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTempla te"); 126 testGridTemplateAreas("gridWithDotCells", '"first ." ". second"');
123 shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getP ropertyValue('grid-template-areas')", '"first" "second"') 127 testGridTemplateAreas("gridWithDotsCells", '"first ." ". second"');
124 128 testGridTemplateAreas("gridWithComplexDotAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer a side"');
125 var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpann ingColumnsTemplate"); 129 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"') 130 testGridTemplateAreas("gridWithMixedDotAndDotsAreas", '". title ." ". main m ain" "nav . aside" ". footer ."');
127 131 testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"');
128 var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpann ingRowsDotTemplate"); 132 testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"');
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 133
161 debug("Test grid-template-areas: initial"); 134 debug("Test grid-template-areas: initial");
162 var element = document.createElement("div"); 135 var element = document.createElement("div");
163 document.body.appendChild(element); 136 document.body.appendChild(element);
164 element.style.gridTemplateAreas = "'foobar'"; 137 element.style.gridTemplateAreas = "'foobar'";
165 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"') 138 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"')
166 element.style.gridTemplateAreas = "initial"; 139 element.style.gridTemplateAreas = "initial";
167 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", 'none'); 140 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", 'none');
168 element.style.gridTemplateAreas = "'foobar'"; 141 element.style.gridTemplateAreas = "'foobar'";
169 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"') 142 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"')
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
208 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 181 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
209 182
210 debug(""); 183 debug("");
211 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;."); 184 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;.");
212 // <ident> only allows a leading '-'. 185 // <ident> only allows a leading '-'.
213 element.style.gridTemplateAreas = '"nav-up"'; 186 element.style.gridTemplateAreas = '"nav-up"';
214 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 187 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
215 </script> 188 </script>
216 </body> 189 </body>
217 </html> 190 </html>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698