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

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 17601010: [CSS Grid Layout] Rename grid placement properties (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 7 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 | « 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') | LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js » ('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 <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 grid-column: 10; 10 grid-column: 10;
(...skipping 25 matching lines...) Expand all
36 } 36 }
37 .gridItemWith2OnlySpan { 37 .gridItemWith2OnlySpan {
38 grid-column: span / span; 38 grid-column: span / span;
39 grid-row: span / span; 39 grid-row: span / span;
40 } 40 }
41 .gridItemWith2Auto { 41 .gridItemWith2Auto {
42 grid-column: auto / auto; 42 grid-column: auto / auto;
43 grid-row: auto / auto; 43 grid-row: auto / auto;
44 } 44 }
45 .gridItemWithBothLongHand { 45 .gridItemWithBothLongHand {
46 grid-end: 11; 46 grid-column-end: 11;
47 grid-before: 4; 47 grid-row-start: 4;
48 } 48 }
49 .gridItemWithNoSpace { 49 .gridItemWithNoSpace {
50 grid-column: auto/1; 50 grid-column: auto/1;
51 grid-row: 5/auto; 51 grid-row: 5/auto;
52 } 52 }
53 .gridItemWithString { 53 .gridItemWithString {
54 grid-column: "first"; 54 grid-column: "first";
55 grid-row: "last"; 55 grid-row: "last";
56 } 56 }
57 .gridItemWithSpanString { 57 .gridItemWithSpanString {
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
100 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto" ); 100 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto" );
101 testColumnRowCSSParsing("gridItemWithString", "1 first / auto", "1 last / au to"); 101 testColumnRowCSSParsing("gridItemWithString", "1 first / auto", "1 last / au to");
102 testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 / span 1 last"); 102 testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 / span 1 last");
103 testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first", "-1 / span 2 last"); 103 testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first", "-1 / span 2 last");
104 104
105 debug(""); 105 debug("");
106 debug("Test the initial value"); 106 debug("Test the initial value");
107 var element = document.createElement("div"); 107 var element = document.createElement("div");
108 document.body.appendChild(element); 108 document.body.appendChild(element);
109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'a uto'"); 110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'auto'");
111 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'aut o'"); 111 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'auto'");
112 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 112 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "' auto'"); 113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'a uto'"); 114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " 'auto'");
115 115
116 debug(""); 116 debug("");
117 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");
118 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto"); 118 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto");
119 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto"); 119 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto");
120 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto"); 120 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto");
121 testColumnRowJSParsing("10 / 55", "1 / 10"); 121 testColumnRowJSParsing("10 / 55", "1 / 10");
122 testColumnRowJSParsing("span 5 / 5", "4 / span 4"); 122 testColumnRowJSParsing("span 5 / 5", "4 / span 4");
123 testColumnRowJSParsing("-5 / 5", "4 / -4"); 123 testColumnRowJSParsing("-5 / 5", "4 / -4");
124 testColumnRowJSParsing("4 / auto", "5 / auto"); 124 testColumnRowJSParsing("4 / auto", "5 / auto");
125 testColumnRowJSParsing("auto / 5", "auto / 8"); 125 testColumnRowJSParsing("auto / 5", "auto / 8");
126 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"); 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"); 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"); 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"); 130 testColumnRowJSParsing("3 'first' span / -3 'last'", "'last' 2 span / -1 'na v'", "span 3 first / -3 last", "span 2 last / -1 nav");
131 131
132 debug(""); 132 debug("");
133 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");
134 element.style.gridColumn = "18 / 19"; 134 element.style.gridColumn = "18 / 19";
135 element.style.gridRow = "66 / 68"; 135 element.style.gridRow = "66 / 68";
136 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' 18 / 19'"); 136 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' 18 / 19'");
137 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'1 8'"); 137 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'18'");
138 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'19' "); 138 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'19'");
139 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / 68'"); 139 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / 68'");
140 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "' 66'"); 140 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'6 8'"); 141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " '68'");
142 142
143 element.style.gridColumn = "auto"; 143 element.style.gridColumn = "auto";
144 element.style.gridRow = "auto"; 144 element.style.gridRow = "auto";
145 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'"); 145 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "' auto / auto'");
146 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'a uto'"); 146 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start' )", "'auto'");
147 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'aut o'"); 147 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')" , "'auto'");
148 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'"); 148 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'aut o / auto'");
149 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "' auto'"); 149 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
150 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'a uto'"); 150 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", " 'auto'");
151 151
152 debug(""); 152 debug("");
153 debug("Test getting and setting 'initial' grid-column and grid-row through J S"); 153 debug("Test getting and setting 'initial' grid-column and grid-row through J S");
154 testColumnRowInitialJSParsing(); 154 testColumnRowInitialJSParsing();
155 155
156 debug(""); 156 debug("");
157 debug("Test getting and setting 'inherit' grid-column and grid-row through J S"); 157 debug("Test getting and setting 'inherit' grid-column and grid-row through J S");
158 testColumnRowInheritJSParsing("1 / auto", "inherit"); 158 testColumnRowInheritJSParsing("1 / auto", "inherit");
159 testColumnRowInheritJSParsing("inherit", "1 / auto"); 159 testColumnRowInheritJSParsing("inherit", "1 / auto");
160 testColumnRowInheritJSParsing("inherit", "inherit"); 160 testColumnRowInheritJSParsing("inherit", "inherit");
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
203 testColumnRowInvalidJSParsing("'first' -1 span / span 'last'", "span -2 'fir st' / span 'last'"); 203 testColumnRowInvalidJSParsing("'first' -1 span / span 'last'", "span -2 'fir st' / span 'last'");
204 204
205 // We don't allow span to be between the <integer> and the <string>. 205 // We don't allow span to be between the <integer> and the <string>.
206 testColumnRowInvalidJSParsing("'first' span 1 / 'last'", "2 span 'first' / ' last'"); 206 testColumnRowInvalidJSParsing("'first' span 1 / 'last'", "2 span 'first' / ' last'");
207 testColumnRowInvalidJSParsing("3 'first' / 2 span 'last'", "5 'nav' / 'last' span 7"); 207 testColumnRowInvalidJSParsing("3 'first' / 2 span 'last'", "5 'nav' / 'last' span 7");
208 testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3"); 208 testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3");
209 </script> 209 </script>
210 <script src="../js/resources/js-test-post.js"></script> 210 <script src="../js/resources/js-test-post.js"></script>
211 </body> 211 </body>
212 </html> 212 </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') | LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698