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

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 14715014: Add parsing for named grid lines (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Patch for landing (fixed Elliott's comments) Created 7 years, 7 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 | « no previous file | 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 <script>
5 if (window.testRunner) 5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script> 7 </script>
8 <style> 8 <style>
9 .gridItemWithPositiveInteger { 9 .gridItemWithPositiveInteger {
10 -webkit-grid-column: 10; 10 -webkit-grid-column: 10;
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
43 -webkit-grid-row: auto / auto; 43 -webkit-grid-row: auto / auto;
44 } 44 }
45 .gridItemWithBothLongHand { 45 .gridItemWithBothLongHand {
46 -webkit-grid-end: 11; 46 -webkit-grid-end: 11;
47 -webkit-grid-before: 4; 47 -webkit-grid-before: 4;
48 } 48 }
49 .gridItemWithNoSpace { 49 .gridItemWithNoSpace {
50 -webkit-grid-column: auto/1; 50 -webkit-grid-column: auto/1;
51 -webkit-grid-row: 5/auto; 51 -webkit-grid-row: 5/auto;
52 } 52 }
53 .gridItemWithString {
54 -webkit-grid-column: "first";
55 -webkit-grid-row: "last";
56 }
57 .gridItemWithSpanString {
58 -webkit-grid-column: 1 /span "first";
59 -webkit-grid-row: -1 / span "last";
60 }
61 .gridItemWithSpanNumberString {
62 -webkit-grid-column: 1 /span 3 "first";
63 -webkit-grid-row: -1 / "last" 2 span ;
64 }
53 </style> 65 </style>
54 <script src="resources/grid-item-column-row-parsing-utils.js"></script> 66 <script src="resources/grid-item-column-row-parsing-utils.js"></script>
55 <script src="../js/resources/js-test-pre.js"></script> 67 <script src="../js/resources/js-test-pre.js"></script>
56 </head> 68 </head>
57 <body> 69 <body>
58 <!-- The first has no properties set on it. --> 70 <!-- The first has no properties set on it. -->
59 <div id="gridItemWithNoCSSRule"></div> 71 <div id="gridItemWithNoCSSRule"></div>
60 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div> 72 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
61 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div> 73 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
62 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div> 74 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
63 <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div> 75 <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div>
64 <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiv eIntegerElement"></div> 76 <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiv eIntegerElement"></div>
65 <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div> 77 <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div>
66 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div> 78 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div>
67 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div> 79 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div>
68 <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div> 80 <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div>
69 <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gr idItemWithBothShortLongHandElement"></div> 81 <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gr idItemWithBothShortLongHandElement"></div>
70 <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div> 82 <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div>
83 <div class="gridItemWithString" id="gridItemWithString"></div>
84 <div class="gridItemWithSpanString" id="gridItemWithSpanString"></div>
85 <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberString"></di v>
71 <script> 86 <script>
72 description('Test that setting and getting grid-column and grid-row works as expected'); 87 description('Test that setting and getting grid-column and grid-row works as expected');
73 88
74 debug("Test getting -webkit-grid-column and -webkit-grid-row set through CSS "); 89 debug("Test getting -webkit-grid-column and -webkit-grid-row set through CSS ");
75 testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto / auto", "auto / auto "); 90 testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto / auto", "auto / auto ");
76 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / au to"); 91 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / au to");
77 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto"); 92 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
78 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to"); 93 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au to");
79 testColumnRowCSSParsing("gridItemWith2IntegerElement", "10 / 15", "5 / 5"); 94 testColumnRowCSSParsing("gridItemWith2IntegerElement", "10 / 15", "5 / 5");
80 testColumnRowCSSParsing("gridItemWithNegativePositiveIntegerElement", "10 / -10", "-8 / 5"); 95 testColumnRowCSSParsing("gridItemWithNegativePositiveIntegerElement", "10 / -10", "-8 / 5");
81 testColumnRowCSSParsing("gridItemWithBeforeSpanElement", "span 2 / 4", "3 / span 5"); 96 testColumnRowCSSParsing("gridItemWithBeforeSpanElement", "span 2 / 4", "3 / span 5");
82 testColumnRowCSSParsing("gridItemWith2OnlySpanElement", "auto / auto", "auto / auto"); 97 testColumnRowCSSParsing("gridItemWith2OnlySpanElement", "auto / auto", "auto / auto");
83 testColumnRowCSSParsing("gridItemWith2AutoElement", "auto / auto" , "auto / auto"); 98 testColumnRowCSSParsing("gridItemWith2AutoElement", "auto / auto" , "auto / auto");
84 testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", " 4 / 5"); 99 testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", " 4 / 5");
85 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto" ); 100 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto" );
101 testColumnRowCSSParsing("gridItemWithString", "1 first / auto", "1 last / au to");
102 testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 / span 1 last");
103 testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first", "-1 / span 2 last");
86 104
87 debug(""); 105 debug("");
88 debug("Test the initial value"); 106 debug("Test the initial value");
89 var element = document.createElement("div"); 107 var element = document.createElement("div");
90 document.body.appendChild(element); 108 document.body.appendChild(element);
91 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / auto'"); 109 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'auto / auto'");
92 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start ')", "'auto'"); 110 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start ')", "'auto'");
93 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'auto'"); 111 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'auto'");
94 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / auto'"); 112 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'auto / auto'");
95 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor e')", "'auto'"); 113 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor e')", "'auto'");
96 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'auto'"); 114 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after ')", "'auto'");
97 115
98 debug(""); 116 debug("");
99 debug("Test getting and setting grid-column and grid-row through JS"); 117 debug("Test getting and setting grid-column and grid-row through JS");
100 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto"); 118 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto");
101 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto"); 119 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto");
102 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto"); 120 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto");
103 testColumnRowJSParsing("10 / 55", "1 / 10"); 121 testColumnRowJSParsing("10 / 55", "1 / 10");
104 testColumnRowJSParsing("span 5 / 5", "4 / span 4"); 122 testColumnRowJSParsing("span 5 / 5", "4 / span 4");
105 testColumnRowJSParsing("-5 / 5", "4 / -4"); 123 testColumnRowJSParsing("-5 / 5", "4 / -4");
106 testColumnRowJSParsing("4 / auto", "5 / auto"); 124 testColumnRowJSParsing("4 / auto", "5 / auto");
107 testColumnRowJSParsing("auto / 5", "auto / 8"); 125 testColumnRowJSParsing("auto / 5", "auto / 8");
108 testColumnRowJSParsing("span / 3", "5 / span", "span 1 / 3", "5 / span 1"); 126 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");
128 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");
130 testColumnRowJSParsing("3 'first' span / -3 'last'", "'last' 2 span / -1 'na v'", "span 3 first / -3 last", "span 2 last / -1 nav");
109 131
110 debug(""); 132 debug("");
111 debug("Test setting grid-column and grid-row back to 'auto' through JS"); 133 debug("Test setting grid-column and grid-row back to 'auto' through JS");
112 element.style.webkitGridColumn = "18 / 19"; 134 element.style.webkitGridColumn = "18 / 19";
113 element.style.webkitGridRow = "66 / 68"; 135 element.style.webkitGridRow = "66 / 68";
114 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'18 / 19'"); 136 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum n')", "'18 / 19'");
115 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start ')", "'18'"); 137 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start ')", "'18'");
116 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'19'"); 138 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end') ", "'19'");
117 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'66 / 68'"); 139 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') ", "'66 / 68'");
118 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor e')", "'66'"); 140 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor e')", "'66'");
(...skipping 26 matching lines...) Expand all
145 testColumnRowInvalidJSParsing("5 5", "8 auto"); 167 testColumnRowInvalidJSParsing("5 5", "8 auto");
146 testColumnRowInvalidJSParsing("5 / /", "8 / /"); 168 testColumnRowInvalidJSParsing("5 / /", "8 / /");
147 169
148 // 0 is invalid. 170 // 0 is invalid.
149 testColumnRowInvalidJSParsing("0 / 5", "0 / 6"); 171 testColumnRowInvalidJSParsing("0 / 5", "0 / 6");
150 testColumnRowInvalidJSParsing("6 / 0", "8 / 0"); 172 testColumnRowInvalidJSParsing("6 / 0", "8 / 0");
151 testColumnRowInvalidJSParsing("0", "0"); 173 testColumnRowInvalidJSParsing("0", "0");
152 174
153 testColumnRowInvalidJSParsing("span span / span span", "span span / span spa n"); 175 testColumnRowInvalidJSParsing("span span / span span", "span span / span spa n");
154 176
155 // Negative integer or 0 are invalid. 177 // More than 1 <integer> and / or <string>.
156 testColumnRowInvalidJSParsing("span -1 / -2 span", "-3 span / span -4"); 178 testColumnRowInvalidJSParsing("5 5 / span 2", "4 4 / 3 span");
157 testColumnRowInvalidJSParsing("0 span / span 0", "span 0 / 0 span"); 179 testColumnRowInvalidJSParsing("5 'first' 'last' / span 2", "'first' 4 'last' / 3 span");
180 testColumnRowInvalidJSParsing("5 / 'first' 'last' 2", "4 / 'first' 3 'last'" );
181 testColumnRowInvalidJSParsing("'first' 'last' / span 2", "'first' 'last' / 3 span");
182 testColumnRowInvalidJSParsing("5 / 'first' 'last'", "4 / 'first' 'last'");
183 testColumnRowInvalidJSParsing("5 5 span / 2", "span 4 4 / 3");
184 testColumnRowInvalidJSParsing("span 3 5 / 1", "5 span 4 / 3");
185 testColumnRowInvalidJSParsing("span 'last' 'first' / 1", "span 'first' 'last ' / 3");
186 testColumnRowInvalidJSParsing("2 / span 'last' 'first'", "3 / span 'first' ' last'");
187 testColumnRowInvalidJSParsing("span 1 'last' 'first' / 1", "span 'first' 'la st' 7 / 3");
188 testColumnRowInvalidJSParsing("2 / span 'last' 3 'first'", "3 / span 'first' 5 'last'");
189 testColumnRowInvalidJSParsing("1 span 2 'first' / 1", "1 span 'last' 7 / 3") ;
190 testColumnRowInvalidJSParsing("2 / 3 span 3 'first'", "3 / 5 span 'first' 5" );
191
192 // Negative integer or 0 are invalid for spans.
193 testColumnRowInvalidJSParsing("span -1 / -2", "-3 span / -4");
194 testColumnRowInvalidJSParsing("-1 / -2 span", "-3 / span -4");
195 testColumnRowInvalidJSParsing("0 span / 0", "span 0 / 0");
196 testColumnRowInvalidJSParsing("0 / span 0", "0 / 0 span");
197 testColumnRowInvalidJSParsing("span -3 'first' / 3 'last'", "'last' -2 span / 1 'nav'");
158 198
159 // Spans for both initial / final values is not allowed. 199 // Spans for both initial / final values is not allowed.
160 testColumnRowInvalidJSParsing("5 span / span 2", "span 4 / 3 span"); 200 testColumnRowInvalidJSParsing("5 span / span 2", "span 4 / 3 span");
201 testColumnRowInvalidJSParsing("'first' span / span 'last'", "span 4 'first' / 3 span 'last'");
202 testColumnRowInvalidJSParsing("'first' 3 span / span 'last'", "span 'first' / 2 span 'last'");
203 testColumnRowInvalidJSParsing("'first' -1 span / span 'last'", "span -2 'fir st' / span 'last'");
204
205 // We don't allow span to be between the <integer> and the <string>.
206 testColumnRowInvalidJSParsing("'first' span 1 / 'last'", "2 span 'first' / ' last'");
207 testColumnRowInvalidJSParsing("3 'first' / 2 span 'last'", "5 'nav' / 'last' span 7");
208 testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3");
161 </script> 209 </script>
162 <script src="../js/resources/js-test-post.js"></script> 210 <script src="../js/resources/js-test-post.js"></script>
163 </body> 211 </body>
164 </html> 212 </html>
OLDNEW
« no previous file with comments | « no previous file | 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