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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1178503003: [CSS Grid Layout] Fix grid-template-areas parsing to avoid spaces (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') | Source/core/css/parser/CSSPropertyParser.cpp » ('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 <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 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
68 "... footer footer aside"; 68 "... footer footer aside";
69 } 69 }
70 70
71 #gridWithMixedDotAndDotsAreas { 71 #gridWithMixedDotAndDotsAreas {
72 grid-template-areas: "... title ." 72 grid-template-areas: "... title ."
73 ".. main main" 73 ".. main main"
74 "nav ................... aside" 74 "nav ................... aside"
75 ". footer ......"; 75 ". footer ......";
76 } 76 }
77 77
78 #gridWithDotsNoSpace {
79 grid-template-areas: ".title...nav. ..main test";
80 }
81
78 #gridWithHorizontalRectangle { 82 #gridWithHorizontalRectangle {
79 grid-template-areas: "a a a" 83 grid-template-areas: "a a a"
80 "a a a"; 84 "a a a";
81 } 85 }
82 86
83 #gridWithVerticalRectangle { 87 #gridWithVerticalRectangle {
84 grid-template-areas: "a a" 88 grid-template-areas: "a a"
85 "a a" 89 "a a"
86 "a a"; 90 "a a";
87 } 91 }
88 92
89 </style> 93 </style>
90 <script src="../../resources/js-test.js"></script> 94 <script src="../../resources/js-test.js"></script>
91 </head> 95 </head>
92 <body> 96 <body>
93 <div class="grid" id="gridWithDefaultTemplate"></div> 97 <div class="grid" id="gridWithDefaultTemplate"></div>
94 <div class="grid" id="gridWithSingleStringTemplate"></div> 98 <div class="grid" id="gridWithSingleStringTemplate"></div>
95 <div class="grid" id="gridWithTwoColumnsTemplate"></div> 99 <div class="grid" id="gridWithTwoColumnsTemplate"></div>
96 <div class="grid" id="gridWithTwoRowsTemplate"></div> 100 <div class="grid" id="gridWithTwoRowsTemplate"></div>
97 <div class="grid" id="gridWithSpanningColumnsTemplate"></div> 101 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
98 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div> 102 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
99 <div class="grid" id="gridWithSpanningRowsDotsTemplate"></div> 103 <div class="grid" id="gridWithSpanningRowsDotsTemplate"></div>
100 <div class="grid" id="gridWithDotColumn"></div> 104 <div class="grid" id="gridWithDotColumn"></div>
101 <div class="grid" id="gridWithDotsColumn"></div> 105 <div class="grid" id="gridWithDotsColumn"></div>
102 <div class="grid" id="gridWithDotCells"></div> 106 <div class="grid" id="gridWithDotCells"></div>
103 <div class="grid" id="gridWithDotsCells"></div> 107 <div class="grid" id="gridWithDotsCells"></div>
104 <div class="grid" id="gridWithComplexDotAreas"></div> 108 <div class="grid" id="gridWithComplexDotAreas"></div>
105 <div class="grid" id="gridWithComplexDotsAreas"></div> 109 <div class="grid" id="gridWithComplexDotsAreas"></div>
106 <div class="grid" id="gridWithMixedDotAndDotsAreas"></div> 110 <div class="grid" id="gridWithMixedDotAndDotsAreas"></div>
111 <div class="grid" id="gridWithDotsNoSpace"></div>
107 <div class="grid" id="gridWithHorizontalRectangle"></div> 112 <div class="grid" id="gridWithHorizontalRectangle"></div>
108 <div class="grid" id="gridWithVerticalRectangle"></div> 113 <div class="grid" id="gridWithVerticalRectangle"></div>
109 <script> 114 <script>
110 description("This test checks that grid-template-areas is properly parsed.") ; 115 description("This test checks that grid-template-areas is properly parsed.") ;
111 116
112 debug("Test getting grid-template-areas set through CSS."); 117 debug("Test getting grid-template-areas set through CSS.");
113 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla te"); 118 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla te");
114 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP ropertyValue('grid-template-areas')", "none") 119 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP ropertyValue('grid-template-areas')", "none")
115 120
116 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt ringTemplate"); 121 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt ringTemplate");
(...skipping 28 matching lines...) Expand all
145 150
146 var gridWithComplexDotAreas = document.getElementById("gridWithComplexDotAre as"); 151 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"') 152 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 153
149 var gridWithComplexDotsAreas = document.getElementById("gridWithComplexDotsA reas"); 154 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"') 155 shouldBeEqualToString("window.getComputedStyle(gridWithComplexDotsAreas).get PropertyValue('grid-template-areas')", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"')
151 156
152 var gridWithMixedDotAndDotsAreas = document.getElementById("gridWithMixedDot AndDotsAreas"); 157 var gridWithMixedDotAndDotsAreas = document.getElementById("gridWithMixedDot AndDotsAreas");
153 shouldBeEqualToString("window.getComputedStyle(gridWithMixedDotAndDotsAreas) .getPropertyValue('grid-template-areas')", '". title ." ". main main" "nav . asi de" ". footer ."') 158 shouldBeEqualToString("window.getComputedStyle(gridWithMixedDotAndDotsAreas) .getPropertyValue('grid-template-areas')", '". title ." ". main main" "nav . asi de" ". footer ."')
154 159
160 var gridWithDotsNoSpace = document.getElementById("gridWithDotsNoSpace");
161 shouldBeEqualToString("window.getComputedStyle(gridWithDotsNoSpace).getPrope rtyValue('grid-template-areas')", '". title . nav . . main test"')
162
155 var gridWithHorizontalRectangle = document.getElementById("gridWithHorizonta lRectangle"); 163 var gridWithHorizontalRectangle = document.getElementById("gridWithHorizonta lRectangle");
156 shouldBeEqualToString("window.getComputedStyle(gridWithHorizontalRectangle). getPropertyValue('grid-template-areas')", '"a a a" "a a a"'); 164 shouldBeEqualToString("window.getComputedStyle(gridWithHorizontalRectangle). getPropertyValue('grid-template-areas')", '"a a a" "a a a"');
157 165
158 var gridWithVerticalRectangle = document.getElementById("gridWithVerticalRec tangle"); 166 var gridWithVerticalRectangle = document.getElementById("gridWithVerticalRec tangle");
159 shouldBeEqualToString("window.getComputedStyle(gridWithVerticalRectangle).ge tPropertyValue('grid-template-areas')", '"a a" "a a" "a a"'); 167 shouldBeEqualToString("window.getComputedStyle(gridWithVerticalRectangle).ge tPropertyValue('grid-template-areas')", '"a a" "a a" "a a"');
160 168
161 debug("Test grid-template-areas: initial"); 169 debug("Test grid-template-areas: initial");
162 var element = document.createElement("div"); 170 var element = document.createElement("div");
163 document.body.appendChild(element); 171 document.body.appendChild(element);
164 element.style.gridTemplateAreas = "'foobar'"; 172 element.style.gridTemplateAreas = "'foobar'";
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after
208 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 216 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
209 217
210 debug(""); 218 debug("");
211 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;."); 219 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;.");
212 // <ident> only allows a leading '-'. 220 // <ident> only allows a leading '-'.
213 element.style.gridTemplateAreas = '"nav-up"'; 221 element.style.gridTemplateAreas = '"nav-up"';
214 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 222 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
215 </script> 223 </script>
216 </body> 224 </body>
217 </html> 225 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt » ('j') | Source/core/css/parser/CSSPropertyParser.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698