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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html

Issue 22215002: Allow grid positions to be named grid areas (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 4 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-area-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-column-row-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 <script> 4 <link href="resources/grid.css" rel="stylesheet">
5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script>
8 <style> 5 <style>
6 .grid {
7 grid-template: "firstArea" "secondArea"
8 "thirdArea" "thirdArea";
9 }
10
9 .gridItemWithPositiveInteger { 11 .gridItemWithPositiveInteger {
10 grid-column: 10; 12 grid-column: 10;
11 grid-row: 15; 13 grid-row: 15;
12 } 14 }
13 .gridItemWithNegativeInteger { 15 .gridItemWithNegativeInteger {
14 grid-column: -10; 16 grid-column: -10;
15 grid-row: -15; 17 grid-row: -15;
16 } 18 }
17 .gridItemWithAuto { 19 .gridItemWithAuto {
18 grid-column: auto; 20 grid-column: auto;
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
55 grid-row: "last"; 57 grid-row: "last";
56 } 58 }
57 .gridItemWithSpanString { 59 .gridItemWithSpanString {
58 grid-column: 1 /span "first"; 60 grid-column: 1 /span "first";
59 grid-row: -1 / span "last"; 61 grid-row: -1 / span "last";
60 } 62 }
61 .gridItemWithSpanNumberString { 63 .gridItemWithSpanNumberString {
62 grid-column: 1 /span 3 "first"; 64 grid-column: 1 /span 3 "first";
63 grid-row: -1 / "last" 2 span ; 65 grid-row: -1 / "last" 2 span ;
64 } 66 }
67 .gridItemWithSingleNamedGridArea {
68 grid-column: thirdArea;
69 grid-row: firstArea;
70 }
71 .gridItemWithNamedGridAreaAndSpan {
72 grid-column: thirdArea / span;
73 grid-row: firstArea / span 2;
74 }
65 </style> 75 </style>
66 <script src="resources/grid-item-column-row-parsing-utils.js"></script> 76 <script src="resources/grid-item-column-row-parsing-utils.js"></script>
67 <script src="../js/resources/js-test-pre.js"></script> 77 <script src="../js/resources/js-test-pre.js"></script>
68 </head> 78 </head>
69 <body> 79 <body>
70 <!-- The first has no properties set on it. --> 80 <div class="grid">
71 <div id="gridItemWithNoCSSRule"></div> 81 <!-- The first has no properties set on it. -->
72 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div> 82 <div id="gridItemWithNoCSSRule"></div>
73 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div> 83 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></ div>
74 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div> 84 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></ div>
75 <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div> 85 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
76 <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiv eIntegerElement"></div> 86 <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div>
77 <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div> 87 <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePos itiveIntegerElement"></div>
78 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div> 88 <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div>
79 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div> 89 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div >
80 <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div> 90 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div>
81 <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gr idItemWithBothShortLongHandElement"></div> 91 <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div>
82 <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div> 92 <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id ="gridItemWithBothShortLongHandElement"></div>
83 <div class="gridItemWithString" id="gridItemWithString"></div> 93 <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div>
84 <div class="gridItemWithSpanString" id="gridItemWithSpanString"></div> 94 <div class="gridItemWithString" id="gridItemWithString"></div>
85 <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberString"></di v> 95 <div class="gridItemWithSpanString" id="gridItemWithSpanString"></div>
96 <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberString"> </div>
97 <div class="gridItemWithSingleNamedGridArea" id="gridItemWithSingleNamedGrid Area"></div>
98 <div class="gridItemWithNamedGridAreaAndSpan" id="gridItemWithNamedGridAreaA ndSpan"></div>
99 </div>
86 <script> 100 <script>
87 description('Test that setting and getting grid-column and grid-row works as expected'); 101 description('Test that setting and getting grid-column and grid-row works as expected');
88 102
89 debug("Test getting grid-column and grid-row set through CSS"); 103 debug("Test getting grid-column and grid-row set through CSS");
90 testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto / auto", "auto / auto "); 104 testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto / auto", "auto / auto ");
91 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / au to"); 105 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / au to");
92 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto"); 106 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
93 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to"); 107 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to");
94 testColumnRowCSSParsing("gridItemWith2IntegerElement", "10 / 15", "5 / 5"); 108 testColumnRowCSSParsing("gridItemWith2IntegerElement", "10 / 15", "5 / 5");
95 testColumnRowCSSParsing("gridItemWithNegativePositiveIntegerElement", "10 / -10", "-8 / 5"); 109 testColumnRowCSSParsing("gridItemWithNegativePositiveIntegerElement", "10 / -10", "-8 / 5");
96 testColumnRowCSSParsing("gridItemWithBeforeSpanElement", "span 2 / 4", "3 / span 5"); 110 testColumnRowCSSParsing("gridItemWithBeforeSpanElement", "span 2 / 4", "3 / span 5");
97 testColumnRowCSSParsing("gridItemWith2OnlySpanElement", "auto / auto", "auto / auto"); 111 testColumnRowCSSParsing("gridItemWith2OnlySpanElement", "auto / auto", "auto / auto");
98 testColumnRowCSSParsing("gridItemWith2AutoElement", "auto / auto" , "auto / auto"); 112 testColumnRowCSSParsing("gridItemWith2AutoElement", "auto / auto" , "auto / auto");
99 testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", " 4 / 5"); 113 testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", " 4 / 5");
100 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto" ); 114 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto" );
101 testColumnRowCSSParsing("gridItemWithString", "1 first / auto", "1 last / au to"); 115 testColumnRowCSSParsing("gridItemWithString", "1 first / auto", "1 last / au to");
102 testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 / span 1 last"); 116 testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 / span 1 last");
103 testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first", "-1 / span 2 last"); 117 testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first", "-1 / span 2 last");
118 testColumnRowCSSParsing("gridItemWithSingleNamedGridArea", "thirdArea / thir dArea", "firstArea / firstArea");
119 testColumnRowCSSParsing("gridItemWithNamedGridAreaAndSpan", "thirdArea / spa n 1", "firstArea / span 2");
104 120
105 debug(""); 121 debug("");
106 debug("Test the initial value"); 122 debug("Test the initial value");
107 var element = document.createElement("div"); 123 var element = document.createElement("div");
108 document.body.appendChild(element); 124 document.body.appendChild(element);
109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 125 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'auto'"); 126 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'auto'");
111 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'auto'"); 127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'auto'");
112 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'"); 129 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " 'auto'"); 130 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " 'auto'");
115 131
116 debug(""); 132 debug("");
117 debug("Test getting and setting grid-column and grid-row through JS"); 133 debug("Test getting and setting grid-column and grid-row through JS");
118 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto"); 134 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto");
119 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto"); 135 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto");
120 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto"); 136 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto");
121 testColumnRowJSParsing("10 / 55", "1 / 10"); 137 testColumnRowJSParsing("10 / 55", "1 / 10");
122 testColumnRowJSParsing("span 5 / 5", "4 / span 4"); 138 testColumnRowJSParsing("span 5 / 5", "4 / span 4");
123 testColumnRowJSParsing("-5 / 5", "4 / -4"); 139 testColumnRowJSParsing("-5 / 5", "4 / -4");
124 testColumnRowJSParsing("4 / auto", "5 / auto"); 140 testColumnRowJSParsing("4 / auto", "5 / auto");
125 testColumnRowJSParsing("auto / 5", "auto / 8"); 141 testColumnRowJSParsing("auto / 5", "auto / 8");
126 testColumnRowJSParsing("span / 3", "5 / span", "span 1 / 3", "5 / span 1"); 142 testColumnRowJSParsing("span / 3", "5 / span", "span 1 / 3", "5 / span 1");
127 testColumnRowJSParsing("'first' span / 3", "5 / 'last' span", "span 1 first / 3", "5 / span 1 last"); 143 testColumnRowJSParsing("'first' span / 3", "5 / 'last' span", "span 1 first / 3", "5 / span 1 last");
128 testColumnRowJSParsing("'first' / 'last'", "'nav' / 'last' span", "1 first / 1 last", "1 nav / span 1 last"); 144 testColumnRowJSParsing("'first' / 'last'", "'nav' / 'last' span", "1 first / 1 last", "1 nav / span 1 last");
129 testColumnRowJSParsing("3 'first' / 2 'last'", "5 'nav' / 'last' 7 span", "3 first / 2 last", "5 nav / span 7 last"); 145 testColumnRowJSParsing("3 'first' / 2 'last'", "5 'nav' / 'last' 7 span", "3 first / 2 last", "5 nav / span 7 last");
130 testColumnRowJSParsing("3 'first' span / -3 'last'", "'last' 2 span / -1 'na v'", "span 3 first / -3 last", "span 2 last / -1 nav"); 146 testColumnRowJSParsing("3 'first' span / -3 'last'", "'last' 2 span / -1 'na v'", "span 3 first / -3 last", "span 2 last / -1 nav");
147 testColumnRowJSParsing("5 / none", "8 / foobar");
148 testColumnRowJSParsing("nonExistent / none", "nonExistent / foobar");
149 testColumnRowJSParsing("span 'first' 3 / none", "'last' span / foobar", "spa n 3 first / none", "span 1 last / foobar");
131 150
132 debug(""); 151 debug("");
133 debug("Test setting grid-column and grid-row back to 'auto' through JS"); 152 debug("Test setting grid-column and grid-row back to 'auto' through JS");
134 element.style.gridColumn = "18 / 19"; 153 element.style.gridColumn = "18 / 19";
135 element.style.gridRow = "66 / 68"; 154 element.style.gridRow = "66 / 68";
136 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' 18 / 19'"); 155 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' 18 / 19'");
137 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'18'"); 156 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'18'");
138 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'19'"); 157 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'19'");
139 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / 68'"); 158 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / 68'");
140 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'"); 159 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
(...skipping 15 matching lines...) Expand all
156 debug(""); 175 debug("");
157 debug("Test getting and setting 'inherit' grid-column and grid-row through J S"); 176 debug("Test getting and setting 'inherit' grid-column and grid-row through J S");
158 testColumnRowInheritJSParsing("1 / auto", "inherit"); 177 testColumnRowInheritJSParsing("1 / auto", "inherit");
159 testColumnRowInheritJSParsing("inherit", "1 / auto"); 178 testColumnRowInheritJSParsing("inherit", "1 / auto");
160 testColumnRowInheritJSParsing("inherit", "inherit"); 179 testColumnRowInheritJSParsing("inherit", "inherit");
161 180
162 debug(""); 181 debug("");
163 debug("Test getting and setting invalid grid-column and grid-row through JS" ); 182 debug("Test getting and setting invalid grid-column and grid-row through JS" );
164 testColumnRowInvalidJSParsing("4 5", "5 8"); 183 testColumnRowInvalidJSParsing("4 5", "5 8");
165 testColumnRowInvalidJSParsing("4 /", "5 /"); 184 testColumnRowInvalidJSParsing("4 /", "5 /");
166 testColumnRowInvalidJSParsing("5 / none", "8 / foobar");
167 testColumnRowInvalidJSParsing("5 5", "8 auto"); 185 testColumnRowInvalidJSParsing("5 5", "8 auto");
168 testColumnRowInvalidJSParsing("5 / /", "8 / /"); 186 testColumnRowInvalidJSParsing("5 / /", "8 / /");
169 187
170 // 0 is invalid. 188 // 0 is invalid.
171 testColumnRowInvalidJSParsing("0 / 5", "0 / 6"); 189 testColumnRowInvalidJSParsing("0 / 5", "0 / 6");
172 testColumnRowInvalidJSParsing("6 / 0", "8 / 0"); 190 testColumnRowInvalidJSParsing("6 / 0", "8 / 0");
173 testColumnRowInvalidJSParsing("0", "0"); 191 testColumnRowInvalidJSParsing("0", "0");
174 192
175 testColumnRowInvalidJSParsing("span span / span span", "span span / span spa n"); 193 testColumnRowInvalidJSParsing("span span / span span", "span span / span spa n");
176 194
(...skipping 26 matching lines...) Expand all
203 testColumnRowInvalidJSParsing("'first' -1 span / span 'last'", "span -2 'fir st' / span 'last'"); 221 testColumnRowInvalidJSParsing("'first' -1 span / span 'last'", "span -2 'fir st' / span 'last'");
204 222
205 // We don't allow span to be between the <integer> and the <string>. 223 // We don't allow span to be between the <integer> and the <string>.
206 testColumnRowInvalidJSParsing("'first' span 1 / 'last'", "2 span 'first' / ' last'"); 224 testColumnRowInvalidJSParsing("'first' span 1 / 'last'", "2 span 'first' / ' last'");
207 testColumnRowInvalidJSParsing("3 'first' / 2 span 'last'", "5 'nav' / 'last' span 7"); 225 testColumnRowInvalidJSParsing("3 'first' / 2 span 'last'", "5 'nav' / 'last' span 7");
208 testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3"); 226 testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3");
209 </script> 227 </script>
210 <script src="../js/resources/js-test-post.js"></script> 228 <script src="../js/resources/js-test-post.js"></script>
211 </body> 229 </body>
212 </html> 230 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-area-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698