| OLD | NEW |
|---|
| (Empty) | |
| 1 Test to make sure top/bottom/left/right properly returns pixel values for any in
put. |
| 2 |
| 3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
". |
| 4 |
| 5 |
| 6 |
| 7 No offsets (zero width/height) |
| 8 |
| 9 PASS getComputedStyle(test).top is '0px' |
| 10 PASS getComputedStyle(test).left is '0px' |
| 11 PASS getComputedStyle(test).right is '200px' |
| 12 PASS getComputedStyle(test).bottom is '400px' |
| 13 PASS getComputedStyle(test).width is '0px' |
| 14 PASS getComputedStyle(test).height is '0px' |
| 15 |
| 16 test.setAttribute('style', 'padding: 5px;') |
| 17 PASS getComputedStyle(test).top is '0px' |
| 18 PASS getComputedStyle(test).left is '0px' |
| 19 PASS getComputedStyle(test).right is '190px' |
| 20 PASS getComputedStyle(test).bottom is '390px' |
| 21 PASS getComputedStyle(test).width is '0px' |
| 22 PASS getComputedStyle(test).height is '0px' |
| 23 |
| 24 test.setAttribute('style', 'border: solid 5px;') |
| 25 PASS getComputedStyle(test).top is '0px' |
| 26 PASS getComputedStyle(test).left is '0px' |
| 27 PASS getComputedStyle(test).right is '190px' |
| 28 PASS getComputedStyle(test).bottom is '390px' |
| 29 PASS getComputedStyle(test).width is '0px' |
| 30 PASS getComputedStyle(test).height is '0px' |
| 31 |
| 32 test.setAttribute('style', 'margin: 5px;') |
| 33 PASS getComputedStyle(test).top is '0px' |
| 34 PASS getComputedStyle(test).left is '0px' |
| 35 PASS getComputedStyle(test).right is '190px' |
| 36 PASS getComputedStyle(test).bottom is '390px' |
| 37 PASS getComputedStyle(test).width is '0px' |
| 38 PASS getComputedStyle(test).height is '0px' |
| 39 test.setAttribute('style', '') |
| 40 |
| 41 test.parentNode.setAttribute('style', 'padding: 5px;') |
| 42 PASS getComputedStyle(test).top is '5px' |
| 43 PASS getComputedStyle(test).left is '5px' |
| 44 PASS getComputedStyle(test).right is '205px' |
| 45 PASS getComputedStyle(test).bottom is '405px' |
| 46 PASS getComputedStyle(test).width is '0px' |
| 47 PASS getComputedStyle(test).height is '0px' |
| 48 |
| 49 test.parentNode.setAttribute('style', 'border: solid 5px;') |
| 50 PASS getComputedStyle(test).top is '0px' |
| 51 PASS getComputedStyle(test).left is '0px' |
| 52 PASS getComputedStyle(test).right is '200px' |
| 53 PASS getComputedStyle(test).bottom is '400px' |
| 54 PASS getComputedStyle(test).width is '0px' |
| 55 PASS getComputedStyle(test).height is '0px' |
| 56 |
| 57 test.parentNode.setAttribute('style', 'margin: 5px;') |
| 58 PASS getComputedStyle(test).top is '0px' |
| 59 PASS getComputedStyle(test).left is '0px' |
| 60 PASS getComputedStyle(test).right is '200px' |
| 61 PASS getComputedStyle(test).bottom is '400px' |
| 62 PASS getComputedStyle(test).width is '0px' |
| 63 PASS getComputedStyle(test).height is '0px' |
| 64 |
| 65 No offsets (50px width/height) |
| 66 |
| 67 test.setAttribute('style', 'width: 50px; height: 50px;') |
| 68 PASS getComputedStyle(test).top is '0px' |
| 69 PASS getComputedStyle(test).left is '0px' |
| 70 PASS getComputedStyle(test).right is '150px' |
| 71 PASS getComputedStyle(test).bottom is '350px' |
| 72 PASS getComputedStyle(test).width is '50px' |
| 73 PASS getComputedStyle(test).height is '50px' |
| 74 |
| 75 test.setAttribute('style', 'width: 50px; height: 50px; padding: 5px;') |
| 76 PASS getComputedStyle(test).top is '0px' |
| 77 PASS getComputedStyle(test).left is '0px' |
| 78 PASS getComputedStyle(test).right is '140px' |
| 79 PASS getComputedStyle(test).bottom is '340px' |
| 80 PASS getComputedStyle(test).width is '50px' |
| 81 PASS getComputedStyle(test).height is '50px' |
| 82 |
| 83 test.setAttribute('style', 'width: 50px; height: 50px; border: solid 5px;') |
| 84 PASS getComputedStyle(test).top is '0px' |
| 85 PASS getComputedStyle(test).left is '0px' |
| 86 PASS getComputedStyle(test).right is '140px' |
| 87 PASS getComputedStyle(test).bottom is '340px' |
| 88 PASS getComputedStyle(test).width is '50px' |
| 89 PASS getComputedStyle(test).height is '50px' |
| 90 |
| 91 test.setAttribute('style', 'width: 50px; height: 50px; margin: 5px;') |
| 92 PASS getComputedStyle(test).top is '0px' |
| 93 PASS getComputedStyle(test).left is '0px' |
| 94 PASS getComputedStyle(test).right is '140px' |
| 95 PASS getComputedStyle(test).bottom is '340px' |
| 96 PASS getComputedStyle(test).width is '50px' |
| 97 PASS getComputedStyle(test).height is '50px' |
| 98 test.removeAttribute('style', 'margin') |
| 99 |
| 100 test.setAttribute('style', 'width: 50px; height: 50px;') |
| 101 |
| 102 test.parentNode.setAttribute('style', 'padding: 5px;') |
| 103 PASS getComputedStyle(test).top is '5px' |
| 104 PASS getComputedStyle(test).left is '5px' |
| 105 PASS getComputedStyle(test).right is '155px' |
| 106 PASS getComputedStyle(test).bottom is '355px' |
| 107 PASS getComputedStyle(test).width is '50px' |
| 108 PASS getComputedStyle(test).height is '50px' |
| 109 |
| 110 test.parentNode.setAttribute('style', 'border: solid 5px;') |
| 111 PASS getComputedStyle(test).top is '0px' |
| 112 PASS getComputedStyle(test).left is '0px' |
| 113 PASS getComputedStyle(test).right is '150px' |
| 114 PASS getComputedStyle(test).bottom is '350px' |
| 115 PASS getComputedStyle(test).width is '50px' |
| 116 PASS getComputedStyle(test).height is '50px' |
| 117 |
| 118 test.parentNode.setAttribute('style', 'margin: 5px;') |
| 119 PASS getComputedStyle(test).top is '0px' |
| 120 PASS getComputedStyle(test).left is '0px' |
| 121 PASS getComputedStyle(test).right is '150px' |
| 122 PASS getComputedStyle(test).bottom is '350px' |
| 123 PASS getComputedStyle(test).width is '50px' |
| 124 PASS getComputedStyle(test).height is '50px' |
| 125 |
| 126 No offsets (100% width/height) |
| 127 |
| 128 test.setAttribute('style', 'width: 100%; height: 100%;') |
| 129 PASS getComputedStyle(test).top is '0px' |
| 130 PASS getComputedStyle(test).left is '0px' |
| 131 PASS getComputedStyle(test).right is '0px' |
| 132 PASS getComputedStyle(test).bottom is '0px' |
| 133 PASS getComputedStyle(test).width is '200px' |
| 134 PASS getComputedStyle(test).height is '400px' |
| 135 |
| 136 test.setAttribute('style', 'width: 100%; height: 100%; padding: 5px;') |
| 137 PASS getComputedStyle(test).top is '0px' |
| 138 PASS getComputedStyle(test).left is '0px' |
| 139 PASS getComputedStyle(test).right is '-10px' |
| 140 PASS getComputedStyle(test).bottom is '-10px' |
| 141 PASS getComputedStyle(test).width is '200px' |
| 142 PASS getComputedStyle(test).height is '400px' |
| 143 test.removeAttribute('style', 'padding') |
| 144 |
| 145 test.setAttribute('style', 'width: 100%; height: 100%; border: solid 5px;') |
| 146 PASS getComputedStyle(test).top is '0px' |
| 147 PASS getComputedStyle(test).left is '0px' |
| 148 PASS getComputedStyle(test).right is '-10px' |
| 149 PASS getComputedStyle(test).bottom is '-10px' |
| 150 PASS getComputedStyle(test).width is '200px' |
| 151 PASS getComputedStyle(test).height is '400px' |
| 152 test.removeAttribute('style', 'border') |
| 153 |
| 154 test.setAttribute('style', 'width: 100%; height: 100%; margin: 5px;') |
| 155 PASS getComputedStyle(test).top is '0px' |
| 156 PASS getComputedStyle(test).left is '0px' |
| 157 PASS getComputedStyle(test).right is '-10px' |
| 158 PASS getComputedStyle(test).bottom is '-10px' |
| 159 PASS getComputedStyle(test).width is '200px' |
| 160 PASS getComputedStyle(test).height is '400px' |
| 161 test.removeAttribute('style', 'margin') |
| 162 |
| 163 test.setAttribute('style', 'width: 100%; height: 100%;') |
| 164 |
| 165 test.parentNode.setAttribute('style', 'padding: 5px;') |
| 166 PASS getComputedStyle(test).top is '5px' |
| 167 PASS getComputedStyle(test).left is '5px' |
| 168 PASS getComputedStyle(test).right is '-5px' |
| 169 PASS getComputedStyle(test).bottom is '-5px' |
| 170 PASS getComputedStyle(test).width is '210px' |
| 171 PASS getComputedStyle(test).height is '410px' |
| 172 |
| 173 test.parentNode.setAttribute('style', 'border: solid 5px;') |
| 174 PASS getComputedStyle(test).top is '0px' |
| 175 PASS getComputedStyle(test).left is '0px' |
| 176 PASS getComputedStyle(test).right is '0px' |
| 177 PASS getComputedStyle(test).bottom is '0px' |
| 178 PASS getComputedStyle(test).width is '200px' |
| 179 PASS getComputedStyle(test).height is '400px' |
| 180 |
| 181 test.parentNode.setAttribute('style', 'margin: 5px;') |
| 182 PASS getComputedStyle(test).top is '0px' |
| 183 PASS getComputedStyle(test).left is '0px' |
| 184 PASS getComputedStyle(test).right is '0px' |
| 185 PASS getComputedStyle(test).bottom is '0px' |
| 186 PASS getComputedStyle(test).width is '200px' |
| 187 PASS getComputedStyle(test).height is '400px' |
| 188 |
| 189 % offsets (top/left) |
| 190 |
| 191 test.setAttribute('style', 'top: 10%; left: 10%; width: 50%; height: 60%;') |
| 192 PASS getComputedStyle(test).top is '40px' |
| 193 PASS getComputedStyle(test).left is '20px' |
| 194 PASS getComputedStyle(test).right is '80px' |
| 195 PASS getComputedStyle(test).bottom is '120px' |
| 196 PASS getComputedStyle(test).width is '100px' |
| 197 PASS getComputedStyle(test).height is '240px' |
| 198 |
| 199 test.parentNode.setAttribute('style', 'padding: 25px;') |
| 200 PASS getComputedStyle(test).top is '45px' |
| 201 PASS getComputedStyle(test).left is '25px' |
| 202 PASS getComputedStyle(test).right is '100px' |
| 203 PASS getComputedStyle(test).bottom is '135px' |
| 204 PASS getComputedStyle(test).width is '125px' |
| 205 PASS getComputedStyle(test).height is '270px' |
| 206 test.parentNode.removeAttribute('style', 'padding') |
| 207 |
| 208 test.parentNode.setAttribute('style', 'border: solid 25px;') |
| 209 PASS getComputedStyle(test).top is '40px' |
| 210 PASS getComputedStyle(test).left is '20px' |
| 211 PASS getComputedStyle(test).right is '80px' |
| 212 PASS getComputedStyle(test).bottom is '120px' |
| 213 PASS getComputedStyle(test).width is '100px' |
| 214 PASS getComputedStyle(test).height is '240px' |
| 215 test.parentNode.removeAttribute('style', 'border') |
| 216 |
| 217 test.parentNode.setAttribute('style', 'margin: 25px;') |
| 218 PASS getComputedStyle(test).top is '40px' |
| 219 PASS getComputedStyle(test).left is '20px' |
| 220 PASS getComputedStyle(test).right is '80px' |
| 221 PASS getComputedStyle(test).bottom is '120px' |
| 222 PASS getComputedStyle(test).width is '100px' |
| 223 PASS getComputedStyle(test).height is '240px' |
| 224 test.parentNode.removeAttribute('style', 'margin') |
| 225 |
| 226 % offsets (right/bottom) |
| 227 |
| 228 test.setAttribute('style', 'right: 10%; bottom: 10%; width: 90%; height: 80%;') |
| 229 PASS getComputedStyle(test).top is '40px' |
| 230 PASS getComputedStyle(test).left is '0px' |
| 231 PASS getComputedStyle(test).right is '20px' |
| 232 PASS getComputedStyle(test).bottom is '40px' |
| 233 PASS getComputedStyle(test).width is '180px' |
| 234 PASS getComputedStyle(test).height is '320px' |
| 235 |
| 236 test.parentNode.setAttribute('style', 'padding: 25px;') |
| 237 PASS getComputedStyle(test).top is '45px' |
| 238 PASS getComputedStyle(test).left is '0px' |
| 239 PASS getComputedStyle(test).right is '25px' |
| 240 PASS getComputedStyle(test).bottom is '45px' |
| 241 PASS getComputedStyle(test).width is '225px' |
| 242 PASS getComputedStyle(test).height is '360px' |
| 243 test.parentNode.removeAttribute('style', 'padding') |
| 244 |
| 245 test.parentNode.setAttribute('style', 'border: solid 25px;') |
| 246 PASS getComputedStyle(test).top is '40px' |
| 247 PASS getComputedStyle(test).left is '0px' |
| 248 PASS getComputedStyle(test).right is '20px' |
| 249 PASS getComputedStyle(test).bottom is '40px' |
| 250 PASS getComputedStyle(test).width is '180px' |
| 251 PASS getComputedStyle(test).height is '320px' |
| 252 test.parentNode.removeAttribute('style', 'border') |
| 253 |
| 254 test.parentNode.setAttribute('style', 'margin: 25px;') |
| 255 PASS getComputedStyle(test).top is '40px' |
| 256 PASS getComputedStyle(test).left is '0px' |
| 257 PASS getComputedStyle(test).right is '20px' |
| 258 PASS getComputedStyle(test).bottom is '40px' |
| 259 PASS getComputedStyle(test).width is '180px' |
| 260 PASS getComputedStyle(test).height is '320px' |
| 261 test.parentNode.removeAttribute('style', 'margin') |
| 262 |
| 263 em offsets |
| 264 |
| 265 test.setAttribute('style', 'top: 1em; left: 2em; width: 3em; height: 4em;') |
| 266 PASS getComputedStyle(test).top is '10px' |
| 267 PASS getComputedStyle(test).left is '20px' |
| 268 PASS getComputedStyle(test).right is '150px' |
| 269 PASS getComputedStyle(test).bottom is '350px' |
| 270 PASS getComputedStyle(test).width is '30px' |
| 271 PASS getComputedStyle(test).height is '40px' |
| 272 |
| 273 test.parentNode.setAttribute('style', 'padding: 25px;') |
| 274 PASS getComputedStyle(test).top is '10px' |
| 275 PASS getComputedStyle(test).left is '20px' |
| 276 PASS getComputedStyle(test).right is '200px' |
| 277 PASS getComputedStyle(test).bottom is '400px' |
| 278 PASS getComputedStyle(test).width is '30px' |
| 279 PASS getComputedStyle(test).height is '40px' |
| 280 |
| 281 test.parentNode.setAttribute('style', 'border: solid 25px;') |
| 282 PASS getComputedStyle(test).top is '10px' |
| 283 PASS getComputedStyle(test).left is '20px' |
| 284 PASS getComputedStyle(test).right is '150px' |
| 285 PASS getComputedStyle(test).bottom is '350px' |
| 286 PASS getComputedStyle(test).width is '30px' |
| 287 PASS getComputedStyle(test).height is '40px' |
| 288 |
| 289 test.parentNode.setAttribute('style', 'margin: 25px;') |
| 290 PASS getComputedStyle(test).top is '10px' |
| 291 PASS getComputedStyle(test).left is '20px' |
| 292 PASS getComputedStyle(test).right is '150px' |
| 293 PASS getComputedStyle(test).bottom is '350px' |
| 294 PASS getComputedStyle(test).width is '30px' |
| 295 PASS getComputedStyle(test).height is '40px' |
| 296 |
| 297 Absolute Offsets |
| 298 |
| 299 test.setAttribute('style', 'position: absolute; top: 30px; height: 300px;') |
| 300 PASS getComputedStyle(test).top is '30px' |
| 301 PASS getComputedStyle(test).left is '0px' |
| 302 PASS getComputedStyle(test).right is '200px' |
| 303 PASS getComputedStyle(test).bottom is '70px' |
| 304 PASS getComputedStyle(test).width is '0px' |
| 305 PASS getComputedStyle(test).height is '300px' |
| 306 |
| 307 test.parentNode.setAttribute('style', 'padding: 25px;') |
| 308 PASS getComputedStyle(test).top is '30px' |
| 309 PASS getComputedStyle(test).left is '25px' |
| 310 PASS getComputedStyle(test).right is '225px' |
| 311 PASS getComputedStyle(test).bottom is '120px' |
| 312 PASS getComputedStyle(test).width is '0px' |
| 313 PASS getComputedStyle(test).height is '300px' |
| 314 |
| 315 test.parentNode.setAttribute('style', 'border: solid 25px;') |
| 316 PASS getComputedStyle(test).top is '30px' |
| 317 PASS getComputedStyle(test).left is '0px' |
| 318 PASS getComputedStyle(test).right is '200px' |
| 319 PASS getComputedStyle(test).bottom is '70px' |
| 320 PASS getComputedStyle(test).width is '0px' |
| 321 PASS getComputedStyle(test).height is '300px' |
| 322 |
| 323 test.parentNode.setAttribute('style', 'margin: 25px;') |
| 324 PASS getComputedStyle(test).top is '30px' |
| 325 PASS getComputedStyle(test).left is '0px' |
| 326 PASS getComputedStyle(test).right is '200px' |
| 327 PASS getComputedStyle(test).bottom is '70px' |
| 328 PASS getComputedStyle(test).width is '0px' |
| 329 PASS getComputedStyle(test).height is '300px' |
| 330 PASS successfullyParsed is true |
| 331 |
| 332 TEST COMPLETE |
| 333 |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 13871003:
Fixing getComputedStyle to return pixel values for left / right / top / bottom (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master