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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js

Issue 16959008: [CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns} (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: rebased Created 7 years, 5 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/resources/grid-columns-rows-get-set.js ('k') | LayoutTests/ietestcenter/css3/grid/display-grid-001.htm » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 description('Test that setting and getting grid-columns and grid-rows works as e xpected'); 1 description('Test that setting and getting grid-definition-columns and grid-defi nition-rows works as expected');
2 2
3 debug("Test getting |display| set through CSS"); 3 debug("Test getting |display| set through CSS");
4 var gridWithFixedElement = document.getElementById("gridWithFixedElement"); 4 var gridWithFixedElement = document.getElementById("gridWithFixedElement");
5 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-colu mns')", "'7px 11px'"); 5 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-defi nition-columns')", "'7px 11px'");
6 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-rows ')", "'17px 2px'"); 6 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-defi nition-rows')", "'17px 2px'");
7 7
8 var gridWithPercentElement = document.getElementById("gridWithPercentElement"); 8 var gridWithPercentElement = document.getElementById("gridWithPercentElement");
9 shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-co lumns')", "'53% 99%'"); 9 shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-de finition-columns')", "'53% 99%'");
10 shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-ro ws')", "'27% 52%'"); 10 shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-de finition-rows')", "'27% 52%'");
11 11
12 var gridWithAutoElement = document.getElementById("gridWithAutoElement"); 12 var gridWithAutoElement = document.getElementById("gridWithAutoElement");
13 shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-colum ns')", "'auto auto'"); 13 shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-defin ition-columns')", "'auto auto'");
14 shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-rows' )", "'auto auto'"); 14 shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-defin ition-rows')", "'auto auto'");
15 15
16 var gridWithEMElement = document.getElementById("gridWithEMElement"); 16 var gridWithEMElement = document.getElementById("gridWithEMElement");
17 shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-columns ')", "'100px 120px'"); 17 shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-definit ion-columns')", "'100px 120px'");
18 shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-rows')" , "'150px 170px'"); 18 shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-definit ion-rows')", "'150px 170px'");
19 19
20 var gridWithThreeItems = document.getElementById("gridWithThreeItems"); 20 var gridWithThreeItems = document.getElementById("gridWithThreeItems");
21 shouldBe("getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-column s')", "'15px auto 100px'"); 21 shouldBe("getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-defini tion-columns')", "'15px auto 100px'");
22 shouldBe("getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-rows') ", "'120px 18px auto'"); 22 shouldBe("getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-defini tion-rows')", "'120px 18px auto'");
23 23
24 var gridWithPercentAndViewportPercent = document.getElementById("gridWithPercent AndViewportPercent"); 24 var gridWithPercentAndViewportPercent = document.getElementById("gridWithPercent AndViewportPercent");
25 shouldBe("getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyVal ue('grid-columns')", "'50% 120px'"); 25 shouldBe("getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyVal ue('grid-definition-columns')", "'50% 120px'");
26 shouldBe("getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyVal ue('grid-rows')", "'35% 168px'"); 26 shouldBe("getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyVal ue('grid-definition-rows')", "'35% 168px'");
27 27
28 var gridWithFitContentAndFitAvailable = document.getElementById("gridWithFitCont entAndFitAvailable"); 28 var gridWithFitContentAndFitAvailable = document.getElementById("gridWithFitCont entAndFitAvailable");
29 shouldBe("getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyVal ue('grid-columns')", "'none'"); 29 shouldBe("getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyVal ue('grid-definition-columns')", "'none'");
30 shouldBe("getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyVal ue('grid-rows')", "'none'"); 30 shouldBe("getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyVal ue('grid-definition-rows')", "'none'");
31 31
32 var gridWithMinMaxContent = document.getElementById("gridWithMinMaxContent"); 32 var gridWithMinMaxContent = document.getElementById("gridWithMinMaxContent");
33 shouldBe("getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-col umns')", "'min-content max-content'"); 33 shouldBe("getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-def inition-columns')", "'min-content max-content'");
34 shouldBe("getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-row s')", "'max-content min-content'"); 34 shouldBe("getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-def inition-rows')", "'max-content min-content'");
35 35
36 var gridWithMinMaxAndFixed = document.getElementById("gridWithMinMaxAndFixed"); 36 var gridWithMinMaxAndFixed = document.getElementById("gridWithMinMaxAndFixed");
37 shouldBe("getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-co lumns')", "'minmax(45px, 30%) 15px'"); 37 shouldBe("getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-de finition-columns')", "'minmax(45px, 30%) 15px'");
38 shouldBe("getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-ro ws')", "'120px minmax(35%, 10px)'"); 38 shouldBe("getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-de finition-rows')", "'120px minmax(35%, 10px)'");
39 39
40 var gridWithMinMaxAndMinMaxContent = document.getElementById("gridWithMinMaxAndM inMaxContent"); 40 var gridWithMinMaxAndMinMaxContent = document.getElementById("gridWithMinMaxAndM inMaxContent");
41 shouldBe("getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue( 'grid-columns')", "'minmax(min-content, 30%) 15px'"); 41 shouldBe("getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue( 'grid-definition-columns')", "'minmax(min-content, 30%) 15px'");
42 shouldBe("getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue( 'grid-rows')", "'120px minmax(35%, max-content)'"); 42 shouldBe("getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue( 'grid-definition-rows')", "'120px minmax(35%, max-content)'");
43 43
44 var gridWithFractionFraction = document.getElementById("gridWithFractionFraction "); 44 var gridWithFractionFraction = document.getElementById("gridWithFractionFraction ");
45 shouldBe("getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid- columns')", "'1fr 2fr'"); 45 shouldBe("getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid- definition-columns')", "'1fr 2fr'");
46 shouldBe("getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid- rows')", "'3fr 4fr'"); 46 shouldBe("getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid- definition-rows')", "'3fr 4fr'");
47 47
48 var gridWithFractionMinMax = document.getElementById("gridWithFractionMinMax"); 48 var gridWithFractionMinMax = document.getElementById("gridWithFractionMinMax");
49 shouldBe("getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-co lumns')", "'minmax(min-content, 45px) 2fr'"); 49 shouldBe("getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-de finition-columns')", "'minmax(min-content, 45px) 2fr'");
50 shouldBe("getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-ro ws')", "'3fr minmax(14px, max-content)'"); 50 shouldBe("getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-de finition-rows')", "'3fr minmax(14px, max-content)'");
51 51
52 debug(""); 52 debug("");
53 debug("Test the initial value"); 53 debug("Test the initial value");
54 var element = document.createElement("div"); 54 var element = document.createElement("div");
55 document.body.appendChild(element); 55 document.body.appendChild(element);
56 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 56 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
57 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 57 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
58 58
59 debug(""); 59 debug("");
60 debug("Test getting and setting display through JS"); 60 debug("Test getting and setting display through JS");
61 element.style.gridColumns = "18px 22px"; 61 element.style.gridDefinitionColumns = "18px 22px";
62 element.style.gridRows = "66px 70px"; 62 element.style.gridDefinitionRows = "66px 70px";
63 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'18p x 22px'"); 63 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'18px 22px'");
64 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'66px 7 0px'"); 64 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'66px 70px'");
65 65
66 element = document.createElement("div"); 66 element = document.createElement("div");
67 document.body.appendChild(element); 67 document.body.appendChild(element);
68 element.style.gridColumns = "55% 80%"; 68 element.style.gridDefinitionColumns = "55% 80%";
69 element.style.gridRows = "40% 63%"; 69 element.style.gridDefinitionRows = "40% 63%";
70 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'55% 80%'"); 70 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'55% 80%'");
71 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'40% 63 %'"); 71 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'40% 63%'");
72 72
73 element = document.createElement("div"); 73 element = document.createElement("div");
74 document.body.appendChild(element); 74 document.body.appendChild(element);
75 element.style.gridColumns = "auto auto"; 75 element.style.gridDefinitionColumns = "auto auto";
76 element.style.gridRows = "auto auto"; 76 element.style.gridDefinitionRows = "auto auto";
77 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'aut o auto'"); 77 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'auto auto'");
78 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'auto a uto'"); 78 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'auto auto'");
79 79
80 element = document.createElement("div"); 80 element = document.createElement("div");
81 document.body.appendChild(element); 81 document.body.appendChild(element);
82 element.style.font = "10px Ahem"; 82 element.style.font = "10px Ahem";
83 element.style.gridColumns = "auto 16em 22px"; 83 element.style.gridDefinitionColumns = "auto 16em 22px";
84 element.style.gridRows = "56% 10em auto"; 84 element.style.gridDefinitionRows = "56% 10em auto";
85 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'aut o 160px 22px'"); 85 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'auto 160px 22px'");
86 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'56% 10 0px auto'"); 86 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'56% 100px auto'");
87 87
88 element = document.createElement("div"); 88 element = document.createElement("div");
89 document.body.appendChild(element); 89 document.body.appendChild(element);
90 element.style.font = "10px Ahem"; 90 element.style.font = "10px Ahem";
91 element.style.gridColumns = "16em minmax(16px, 20px)"; 91 element.style.gridDefinitionColumns = "16em minmax(16px, 20px)";
92 element.style.gridRows = "minmax(10%, 15%) auto"; 92 element.style.gridDefinitionRows = "minmax(10%, 15%) auto";
93 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'160 px minmax(16px, 20px)'"); 93 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'160px minmax(16px, 20px)'");
94 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (10%, 15%) auto'"); 94 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'minmax(10%, 15%) auto'");
95 95
96 element = document.createElement("div"); 96 element = document.createElement("div");
97 document.body.appendChild(element); 97 document.body.appendChild(element);
98 element.style.font = "10px Ahem"; 98 element.style.font = "10px Ahem";
99 element.style.gridColumns = "16em 2fr"; 99 element.style.gridDefinitionColumns = "16em 2fr";
100 element.style.gridRows = "14fr auto"; 100 element.style.gridDefinitionRows = "14fr auto";
101 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'160 px 2fr'"); 101 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'160px 2fr'");
102 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'14fr a uto'"); 102 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'14fr auto'");
103 103
104 debug(""); 104 debug("");
105 debug("Test getting wrong values set from CSS"); 105 debug("Test getting wrong values set from CSS");
106 var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto"); 106 var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto");
107 shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-colum ns')", "'none'"); 107 shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-defin ition-columns')", "'none'");
108 shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-rows' )", "'none'"); 108 shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-defin ition-rows')", "'none'");
109 109
110 var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed"); 110 var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed");
111 shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-colu mns')", "'none'"); 111 shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-defi nition-columns')", "'none'");
112 shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-rows ')", "'none'"); 112 shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-defi nition-rows')", "'none'");
113 113
114 debug(""); 114 debug("");
115 debug("Test setting and getting wrong values from JS"); 115 debug("Test setting and getting wrong values from JS");
116 element = document.createElement("div"); 116 element = document.createElement("div");
117 document.body.appendChild(element); 117 document.body.appendChild(element);
118 element.style.gridColumns = "none auto"; 118 element.style.gridDefinitionColumns = "none auto";
119 element.style.gridRows = "none auto"; 119 element.style.gridDefinitionRows = "none auto";
120 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 120 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
122 122
123 element = document.createElement("div"); 123 element = document.createElement("div");
124 document.body.appendChild(element); 124 document.body.appendChild(element);
125 element.style.gridColumns = "none 16em"; 125 element.style.gridDefinitionColumns = "none 16em";
126 element.style.gridRows = "none 56%"; 126 element.style.gridDefinitionRows = "none 56%";
127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
129 129
130 element = document.createElement("div"); 130 element = document.createElement("div");
131 document.body.appendChild(element); 131 document.body.appendChild(element);
132 element.style.gridColumns = "none none"; 132 element.style.gridDefinitionColumns = "none none";
133 element.style.gridRows = "none none"; 133 element.style.gridDefinitionRows = "none none";
134 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 134 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
135 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 135 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
136 136
137 element = document.createElement("div"); 137 element = document.createElement("div");
138 document.body.appendChild(element); 138 document.body.appendChild(element);
139 element.style.gridColumns = "auto none"; 139 element.style.gridDefinitionColumns = "auto none";
140 element.style.gridRows = "auto none"; 140 element.style.gridDefinitionRows = "auto none";
141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
142 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 142 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
143 143
144 element = document.createElement("div"); 144 element = document.createElement("div");
145 document.body.appendChild(element); 145 document.body.appendChild(element);
146 element.style.gridColumns = "auto none 16em"; 146 element.style.gridDefinitionColumns = "auto none 16em";
147 element.style.gridRows = "auto 18em none"; 147 element.style.gridDefinitionRows = "auto 18em none";
148 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 148 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
149 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 149 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
150 150
151 element = document.createElement("div"); 151 element = document.createElement("div");
152 document.body.appendChild(element); 152 document.body.appendChild(element);
153 element.style.gridColumns = "50% 12vw"; 153 element.style.gridDefinitionColumns = "50% 12vw";
154 element.style.gridRows = "5% 85vh"; 154 element.style.gridDefinitionRows = "5% 85vh";
155 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'50% 96px'"); 155 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'50% 96px'");
156 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'5% 510 px'"); 156 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'5% 510px'");
157 157
158 element = document.createElement("div"); 158 element = document.createElement("div");
159 document.body.appendChild(element); 159 document.body.appendChild(element);
160 element.style.gridColumns = "-webkit-fit-content -webkit-fit-content"; 160 element.style.gridDefinitionColumns = "-webkit-fit-content -webkit-fit-content";
161 element.style.gridRows = "-webkit-fit-available -webkit-fit-available"; 161 element.style.gridDefinitionRows = "-webkit-fit-available -webkit-fit-available" ;
162 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 162 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
163 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 163 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
164 164
165 element = document.createElement("div"); 165 element = document.createElement("div");
166 document.body.appendChild(element); 166 document.body.appendChild(element);
167 element.style.gridColumns = "auto minmax(16px, auto)"; 167 element.style.gridDefinitionColumns = "auto minmax(16px, auto)";
168 element.style.gridRows = "minmax(auto, 15%) 10vw"; 168 element.style.gridDefinitionRows = "minmax(auto, 15%) 10vw";
169 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 169 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
170 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 170 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
171 171
172 function testInherit() 172 function testInherit()
173 { 173 {
174 var parentElement = document.createElement("div"); 174 var parentElement = document.createElement("div");
175 document.body.appendChild(parentElement); 175 document.body.appendChild(parentElement);
176 parentElement.style.gridColumns = "50px 1fr 'last'"; 176 parentElement.style.gridDefinitionColumns = "50px 1fr 'last'";
177 parentElement.style.gridRows = "101% 'middle' 45px"; 177 parentElement.style.gridDefinitionRows = "101% 'middle' 45px";
178 178
179 element = document.createElement("div"); 179 element = document.createElement("div");
180 parentElement.appendChild(element); 180 parentElement.appendChild(element);
181 element.style.gridColumns = "inherit"; 181 element.style.gridDefinitionColumns = "inherit";
182 element.style.gridRows = "inherit"; 182 element.style.gridDefinitionRows = "inherit";
183 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", " '50px 1fr last'"); 183 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co lumns')", "'50px 1fr last'");
184 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'10 1% middle 45px'"); 184 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro ws')", "'101% middle 45px'");
185 185
186 document.body.removeChild(parentElement); 186 document.body.removeChild(parentElement);
187 } 187 }
188 debug(""); 188 debug("");
189 debug("Test setting grid-columns and grid-rows to 'inherit' through JS"); 189 debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit ' through JS");
190 testInherit(); 190 testInherit();
191 191
192 function testInitial() 192 function testInitial()
193 { 193 {
194 element = document.createElement("div"); 194 element = document.createElement("div");
195 document.body.appendChild(element); 195 document.body.appendChild(element);
196 element.style.gridColumns = "150% 'middle' 55px"; 196 element.style.gridDefinitionColumns = "150% 'middle' 55px";
197 element.style.gridRows = "1fr 'line' 2fr 'line'"; 197 element.style.gridDefinitionRows = "1fr 'line' 2fr 'line'";
198 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", " '150% middle 55px'"); 198 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co lumns')", "'150% middle 55px'");
199 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'1f r line 2fr line'"); 199 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro ws')", "'1fr line 2fr line'");
200 200
201 element.style.gridColumns = "initial"; 201 element.style.gridDefinitionColumns = "initial";
202 element.style.gridRows = "initial"; 202 element.style.gridDefinitionRows = "initial";
203 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", " 'none'"); 203 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co lumns')", "'none'");
204 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'no ne'"); 204 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro ws')", "'none'");
205 205
206 document.body.removeChild(element); 206 document.body.removeChild(element);
207 } 207 }
208 debug(""); 208 debug("");
209 debug("Test setting grid-columns and grid-rows to 'initial' through JS"); 209 debug("Test setting grid-definition-columns and grid-definition-rows to 'initial ' through JS");
210 testInitial(); 210 testInitial();
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js ('k') | LayoutTests/ietestcenter/css3/grid/display-grid-001.htm » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698