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

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: Rebased patch applying suggested changes 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 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 function testGridTemplateAreas(gridId, expectedResult) { 117 function testGridTemplateAreas(gridId, expectedResult) {
113 shouldBeEqualToString("window.getComputedStyle(" + gridId + ").getProper tyValue('grid-template-areas')", expectedResult); 118 shouldBeEqualToString("window.getComputedStyle(" + gridId + ").getProper tyValue('grid-template-areas')", expectedResult);
114 } 119 }
115 120
116 debug("Test getting grid-template-areas set through CSS."); 121 debug("Test getting grid-template-areas set through CSS.");
117 testGridTemplateAreas("gridWithDefaultTemplate", "none"); 122 testGridTemplateAreas("gridWithDefaultTemplate", "none");
118 testGridTemplateAreas("gridWithSingleStringTemplate", '"area"'); 123 testGridTemplateAreas("gridWithSingleStringTemplate", '"area"');
119 testGridTemplateAreas("gridWithTwoColumnsTemplate", '"first second"'); 124 testGridTemplateAreas("gridWithTwoColumnsTemplate", '"first second"');
120 testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"'); 125 testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"');
121 testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"'); 126 testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"');
122 testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."'); 127 testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."');
123 testGridTemplateAreas("gridWithSpanningRowsDotsTemplate", '"span" "."'); 128 testGridTemplateAreas("gridWithSpanningRowsDotsTemplate", '"span" "."');
124 testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."'); 129 testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."');
125 testGridTemplateAreas("gridWithDotsColumn", '"header ." "footer ."'); 130 testGridTemplateAreas("gridWithDotsColumn", '"header ." "footer ."');
126 testGridTemplateAreas("gridWithDotCells", '"first ." ". second"'); 131 testGridTemplateAreas("gridWithDotCells", '"first ." ". second"');
127 testGridTemplateAreas("gridWithDotsCells", '"first ." ". second"'); 132 testGridTemplateAreas("gridWithDotsCells", '"first ." ". second"');
128 testGridTemplateAreas("gridWithComplexDotAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer a side"'); 133 testGridTemplateAreas("gridWithComplexDotAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer a side"');
129 testGridTemplateAreas("gridWithComplexDotsAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"'); 134 testGridTemplateAreas("gridWithComplexDotsAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
130 testGridTemplateAreas("gridWithMixedDotAndDotsAreas", '". title ." ". main m ain" "nav . aside" ". footer ."'); 135 testGridTemplateAreas("gridWithMixedDotAndDotsAreas", '". title ." ". main m ain" "nav . aside" ". footer ."');
136 testGridTemplateAreas("gridWithDotsNoSpace", '". title . nav . . main test"' );
131 testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"'); 137 testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"');
132 testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"'); 138 testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"');
133 139
134 debug("Test grid-template-areas: initial"); 140 debug("Test grid-template-areas: initial");
135 var element = document.createElement("div"); 141 var element = document.createElement("div");
136 document.body.appendChild(element); 142 document.body.appendChild(element);
137 element.style.gridTemplateAreas = "'foobar'"; 143 element.style.gridTemplateAreas = "'foobar'";
138 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"') 144 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"')
139 element.style.gridTemplateAreas = "initial"; 145 element.style.gridTemplateAreas = "initial";
140 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", 'none'); 146 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", 'none');
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
181 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 187 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
182 188
183 debug(""); 189 debug("");
184 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;."); 190 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;.");
185 // <ident> only allows a leading '-'. 191 // <ident> only allows a leading '-'.
186 element.style.gridTemplateAreas = '"nav-up"'; 192 element.style.gridTemplateAreas = '"nav-up"';
187 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 193 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
188 </script> 194 </script>
189 </body> 195 </body>
190 </html> 196 </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