test_bug302186.html (13942B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=302186 5 --> 6 <head> 7 <title>Test for Bug 302186</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 10 <style> 11 12 13 span { color: red } 14 :default + span { color: green } 15 16 span.reverse { color: green } 17 :default + span.reverse { color: red } 18 19 button { display: none } 20 input { display: none } 21 </style> 22 </head> 23 <body> 24 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=302186">Mozilla Bug 302186</a> 25 <p id="display"></p> 26 <div id="content" style="display: block"> 27 28 <!-- static default 1 --> 29 <form> 30 <div> 31 <input type="submit" checked="checked"><span id="s1a">There should be no red.</span> 32 </div> 33 <div> 34 <input type="submit"><span id="s1b" class="reverse">There should be no red.</span> 35 </div> 36 </form> 37 38 <!-- static default 2 --> 39 <form> 40 <div> 41 <button type="submit" checked="checked" id="foo"></button> 42 <span id="s2a">There should be no red.</span> 43 </div> 44 <div> 45 <button type="submit"></button> 46 <span class="reverse" id="s2b">There should be no red.</span> 47 </div> 48 </form> 49 50 <!-- static default 3 --> 51 <form> 52 <div> 53 <input type="checkbox" checked="checked" id="foo"> 54 <span id="s3a">There should be no red.</span> 55 </div> 56 <div> 57 <input checked="checked"> 58 <span class="reverse" id="s3b">There should be no red.</span> 59 </div> 60 </form> 61 62 <!-- static default 3 --> 63 <form> 64 <div> 65 <input type="radio" checked="checked" id="foo"> 66 <span id="s4a">There should be no red.</span> 67 </div> 68 <div> 69 <input checked="checked"> 70 <span class="reverse" id="s4b">There should be no red.</span> 71 </div> 72 </form> 73 74 <!-- static default 5 --> 75 <form> 76 <div> 77 <input type="image"><span id="s5a">There should be no red.</span> 78 </div> 79 <div> 80 <input type="image"><span id="s5b" class="reverse">There should be no red.</span> 81 82 </div> 83 </form> 84 85 <!-- dynamic default 1 --> 86 <form> 87 <div> 88 <input type="submit" checked="checked" id="foo1"> 89 <span class="reverse" id="1a">There should be no red.</span> 90 </div> 91 <div> 92 <input type="submit"> 93 <span id="1b">There should be no red.</span> 94 95 </div> 96 </form> 97 98 <!-- dynamic default 2 --> 99 <form> 100 <div> 101 <button type="submit" checked="checked" id="foo2"></button> 102 <span class="reverse" id="2a">There should be no red.</span> 103 </div> 104 <div> 105 <button type="submit"></button> 106 <span id="2b">There should be no red.</span> 107 </div> 108 </form> 109 110 <!-- dynamic default 3 --> 111 <form> 112 <div> 113 <input type="checkbox" checked="checked" id="foo3"> 114 <span class="reverse" id="3a">There should be no red.</span> 115 </div> 116 <div> 117 <input checked="checked" id="bar3"> 118 <span id="3b">There should be no red.</span> 119 </div> 120 </form> 121 122 <!-- dynamic default 4 --> 123 <form> 124 <div> 125 <input type="radio" checked="checked" id="foo4"> 126 <span class="reverse" id="4a" >There should be no red.</span> 127 </div> 128 <div> 129 <input checked="checked" id="bar4"> 130 <span id="4b">There should be no red.</span> 131 </div> 132 </form> 133 134 <!-- dynamic default 5 --> 135 <form> 136 <div> 137 <input type="submit"> 138 <input type="radio" checked="checked" id="foo5"> 139 <span id="5" class="reverse">There should be no red.</span> 140 </div> 141 </form> 142 143 <!-- dynamic default 6 --> 144 <form> 145 <div id="div6"> 146 <span id="6a">There should be no red.</span> 147 </div> 148 <div> 149 <input type="submit"><span id="6b" class="reverse">There should be no red.</span> 150 </div> 151 </form> 152 153 <!-- dynamic default 7 --> 154 <form> 155 <div> 156 <input type="submit"><span id="7a">There should be no red.</span> 157 </div> 158 <div id="div7"> 159 <span class="reverse" id="7b">There should be no red.</span> 160 161 </div> 162 </form> 163 164 <!-- dynamic default 8 --> 165 <form> 166 <div id="div8"><span id="8a">There should be no red.</span> 167 </div> 168 <div> 169 <input type="image" id="foo"><span class="reverse" id="8b">There should be no red.</span> 170 171 </div> 172 </form> 173 174 <!-- dynamic default 9 --> 175 <form> 176 <div> 177 <input type="image"><span id="9a">There should be no red.</span> 178 </div> 179 <div id="div9"> 180 <span class="reverse" id="9b">There should be no red.</span> 181 182 </div> 183 </form> 184 185 <!-- dynamic default 10 --> 186 <form> 187 <div id="div10"> 188 <input type="submit"><span id="10a" class="reverse">There should be no red.</span> 189 </div> 190 <div> 191 <input type="submit"><span id="10b" >There should be no red.</span> 192 193 </div> 194 </form> 195 196 <!-- dynamic default 11 --> 197 <form> 198 <div id="div11a"> 199 <input type="submit"><span id="11a">There should be no red.</span> 200 </div> 201 <div id="div11"> 202 <input type="submit"><span id="11b" class="reverse">There should be no red.</span> 203 204 </div> 205 </form> 206 207 <!-- dynamic default 12 --> 208 <form> 209 <div id="div12"> 210 <input type="image"><span id="12a" class="reverse">There should be no red.</span> 211 </div> 212 <div> 213 <input type="image"><span id="12b">There should be no red.</span> 214 215 </div> 216 </form> 217 218 <!-- dynamic default 13 --> 219 <form> 220 <div id="div13a"> 221 <input type="image"><span id="13a">There should be no red.</span> 222 </div> 223 <div id="div13"> 224 <input type="image"><span id="13b" class="reverse">There should be no red.</span> 225 226 </div> 227 </form> 228 229 <!-- dynamic default 14 --> 230 <form> 231 <div id="div14a"> 232 <input type="submit" id="foo14"><span id="14a">There should be no red.</span> 233 </div> 234 <div id="div14b"> 235 <input type="submit" id="foo14b"><span id="14b" class="reverse">There should be no red.</span> 236 237 </div> 238 </form> 239 240 <!-- dynamic default 15 --> 241 <form> 242 <div id="div15a"> 243 <input type="image" id="foo15a"><span id="15a">There should be no red.</span> 244 </div> 245 <div id="div15b"> 246 <input type="image" id="foo15b"><span id="15b" class="reverse">There should be no red.</span> 247 248 </div> 249 </form> 250 251 <!-- dynamic default 16 --> 252 <form> 253 <div> 254 <input type="image" checked="checked" id="foo16"></button> 255 <span class="reverse" id="16a">There should be no red.</span> 256 </div> 257 <div> 258 <input type="image"></button><span id="16b">There should be no red.</span> 259 260 </div> 261 </form> 262 263 <!-- dynamic default 17 --> 264 <form> 265 <div> 266 <button type="button" id="foo17"></button> 267 <span id="17a">There should be no red.</span> 268 </div> 269 <div> 270 <button type="submit"></button><span class="reverse" id="17b">There should be no red.</span> 271 </div> 272 </form> 273 274 <!-- dynamic default 18 --> 275 <form> 276 <div> 277 <input type="button" id="foo18"></button> 278 <span id="18a">There should be no red.</span> 279 </div> 280 <div> 281 <input type="submit"></button><span id="18b" class="reverse">There should be no red.</span> 282 283 </div> 284 </form> 285 286 <!-- dynamic default 19 --> 287 <form> 288 <div id="div19"> 289 <span id="19a">There should be no red.</span> 290 </div> 291 </form> 292 293 <!-- dynamic default 20 --> 294 <form> 295 <div id="div20"> 296 <span id="20a">There should be no red.</span> 297 </div> 298 </form> 299 300 </div> 301 302 <pre id="test"> 303 <script class="testbody" type="text/javascript"> 304 305 /** Test for Bug 302186 */ 306 307 SimpleTest.waitForExplicitFinish(); 308 309 function idColor(anId) { 310 var elem = document.getElementById(anId); 311 return getComputedStyle(elem).color; 312 } 313 314 is(idColor("s1a"),"rgb(0, 128, 0)", "CSS static-default 1a"); 315 is(idColor("s1b"),"rgb(0, 128, 0)", "CSS static-default 1b"); 316 is(idColor("s2a"),"rgb(0, 128, 0)", "CSS static-default 2a"); 317 is(idColor("s2b"),"rgb(0, 128, 0)", "CSS static-default 2b"); 318 is(idColor("s3a"),"rgb(0, 128, 0)", "CSS static-default 3a"); 319 is(idColor("s3b"),"rgb(0, 128, 0)", "CSS static-default 3b"); 320 is(idColor("s4a"),"rgb(0, 128, 0)", "CSS static-default 4a"); 321 is(idColor("s4b"),"rgb(0, 128, 0)", "CSS static-default 4b"); 322 is(idColor("s5a"),"rgb(0, 128, 0)", "CSS static-default 5a"); 323 is(idColor("s5b"),"rgb(0, 128, 0)", "CSS static-default 5b"); 324 325 function dynamicDefault1() { 326 $('foo1').removeAttribute("type"); 327 is(idColor("1a"),"rgb(0, 128, 0)", "CSS dynamic-default 1a"); 328 is(idColor("1b"),"rgb(0, 128, 0)", "CSS dynamic-default 1b"); 329 } 330 331 function dynamicDefault2() { 332 $('foo2').setAttribute("type", "button"); 333 is(idColor("2a"),"rgb(0, 128, 0)", "CSS dynamic-default 2a"); 334 is(idColor("2b"),"rgb(0, 128, 0)", "CSS dynamic-default 2b"); 335 } 336 337 function dynamicDefault3() { 338 $('foo3').removeAttribute("type"); 339 $('bar3').setAttribute("type", "checkbox"); 340 is(idColor("3a"),"rgb(0, 128, 0)", "CSS dynamic-default 3a"); 341 is(idColor("3b"),"rgb(0, 128, 0)", "CSS dynamic-default 3b"); 342 } 343 344 function dynamicDefault4() { 345 $('foo4').removeAttribute("type"); 346 $('bar4').setAttribute("type", "radio"); 347 is(idColor("4a"),"rgb(0, 128, 0)", "CSS dynamic-default 4a"); 348 is(idColor("4b"),"rgb(0, 128, 0)", "CSS dynamic-default 4b"); 349 } 350 351 function dynamicDefault5() { 352 $('foo5').setAttribute("type", "submit") 353 is(idColor("5"),"rgb(0, 128, 0)", "CSS dynamic-default 5"); 354 } 355 356 function dynamicDefault6() { 357 var but = document.createElement("input"); 358 but.setAttribute("type", "submit"); 359 $('div6').insertBefore(but, $('div6').firstChild); 360 is(idColor("6a"),"rgb(0, 128, 0)", "CSS dynamic-default 6a"); 361 is(idColor("6b"),"rgb(0, 128, 0)", "CSS dynamic-default 6b"); 362 } 363 364 function dynamicDefault7() { 365 var but = document.createElement("input"); 366 but.setAttribute("type", "submit"); 367 $('div7').insertBefore(but, $('div7').firstChild); 368 is(idColor("7a"),"rgb(0, 128, 0)", "CSS dynamic-default 7a"); 369 is(idColor("7b"),"rgb(0, 128, 0)", "CSS dynamic-default 7b"); 370 } 371 372 function dynamicDefault8() { 373 var but = document.createElement("input"); 374 but.setAttribute("type", "image"); 375 $('div8').insertBefore(but, $('div8').firstChild); 376 is(idColor("8a"),"rgb(0, 128, 0)", "CSS dynamic-default 8a"); 377 is(idColor("8b"),"rgb(0, 128, 0)", "CSS dynamic-default 8b"); 378 } 379 380 function dynamicDefault9() { 381 var but = document.createElement("input"); 382 but.setAttribute("type", "image"); 383 $('div9').insertBefore(but, $('div9').firstChild); 384 is(idColor("9a"),"rgb(0, 128, 0)", "CSS dynamic-default 9a"); 385 is(idColor("9b"),"rgb(0, 128, 0)", "CSS dynamic-default 9b"); 386 } 387 388 function dynamicDefault10() { 389 var inputs = $('div10').getElementsByTagName("input"); 390 $('div10').removeChild(inputs[0]); 391 is(idColor("10a"),"rgb(0, 128, 0)", "CSS dynamic-default 10a"); 392 is(idColor("10b"),"rgb(0, 128, 0)", "CSS dynamic-default 10b"); 393 } 394 395 function dynamicDefault11() { 396 var inputs = $('div11').getElementsByTagName("input"); 397 $('div11').removeChild(inputs[0]); 398 is(idColor("11a"),"rgb(0, 128, 0)", "CSS dynamic-default 11a"); 399 is(idColor("11b"),"rgb(0, 128, 0)", "CSS dynamic-default 11b"); 400 } 401 402 function dynamicDefault12() { 403 var inputs = $('div12').getElementsByTagName("input"); 404 $('div12').removeChild(inputs[0]); 405 is(idColor("12a"),"rgb(0, 128, 0)", "CSS dynamic-default 12a"); 406 is(idColor("12b"),"rgb(0, 128, 0)", "CSS dynamic-default 12b"); 407 } 408 409 function dynamicDefault13() { 410 var inputs = $('div13').getElementsByTagName("input"); 411 $('div13').removeChild(inputs[0]); 412 is(idColor("13a"),"rgb(0, 128, 0)", "CSS dynamic-default 13a"); 413 is(idColor("13b"),"rgb(0, 128, 0)", "CSS dynamic-default 13b"); 414 } 415 416 function dynamicDefault14() { 417 var div1 = document.getElementById("div14a"); 418 var inputs = div1.getElementsByTagName("input"); 419 var firstElement = div1.removeChild(inputs[0]); 420 var div2 = document.getElementById("div14b"); 421 inputs = div2.getElementsByTagName("input"); 422 var secondElement = div2.removeChild(inputs[0]); 423 div1.insertBefore(secondElement, div1.firstChild); 424 div2.insertBefore(firstElement, div2.firstChild); 425 is(idColor("14a"),"rgb(0, 128, 0)", "CSS dynamic-default 14a"); 426 is(idColor("14b"),"rgb(0, 128, 0)", "CSS dynamic-default 14b"); 427 } 428 429 function dynamicDefault15() { 430 var div1 = document.getElementById("div15a"); 431 var inputs = div1.getElementsByTagName("input"); 432 var firstElement = div1.removeChild(inputs[0]); 433 var div2 = document.getElementById("div15b"); 434 inputs = div2.getElementsByTagName("input"); 435 var secondElement = div2.removeChild(inputs[0]); 436 div1.insertBefore(secondElement, div1.firstChild); 437 div2.insertBefore(firstElement, div2.firstChild); 438 is(idColor("15a"),"rgb(0, 128, 0)", "CSS dynamic-default 15a"); 439 is(idColor("15b"),"rgb(0, 128, 0)", "CSS dynamic-default 15b"); 440 } 441 442 function dynamicDefault16() { 443 $("foo16").setAttribute("type", "button"); 444 is(idColor("16a"),"rgb(0, 128, 0)", "CSS dynamic-default 16a"); 445 is(idColor("16b"),"rgb(0, 128, 0)", "CSS dynamic-default 16b"); 446 } 447 448 function dynamicDefault17() { 449 $("foo17").setAttribute("type", "submit"); 450 is(idColor("17a"),"rgb(0, 128, 0)", "CSS dynamic-default 17a"); 451 is(idColor("17b"),"rgb(0, 128, 0)", "CSS dynamic-default 17b"); 452 } 453 454 function dynamicDefault18() { 455 $("foo18").setAttribute("type", "submit"); 456 is(idColor("18a"),"rgb(0, 128, 0)", "CSS dynamic-default 18a"); 457 is(idColor("18b"),"rgb(0, 128, 0)", "CSS dynamic-default 18b"); 458 } 459 460 function dynamicDefault19() { 461 var newSubmit = document.createElement("input"); 462 newSubmit.setAttribute("type", "submit"); 463 var div1 = document.getElementById("div19"); 464 div1.insertBefore(newSubmit, div1.firstChild); 465 is(idColor("19a"),"rgb(0, 128, 0)", "CSS dynamic-default 19a"); 466 } 467 468 function dynamicDefault20() { 469 var newSubmit = document.createElement("input"); 470 newSubmit.setAttribute("type", "image"); 471 var div1 = document.getElementById("div20"); 472 div1.insertBefore(newSubmit, div1.firstChild); 473 is(idColor("20a"),"rgb(0, 128, 0)", "CSS dynamic-default 20a"); 474 } 475 476 addLoadEvent(dynamicDefault1); 477 addLoadEvent(dynamicDefault2); 478 addLoadEvent(dynamicDefault3); 479 addLoadEvent(dynamicDefault4); 480 addLoadEvent(dynamicDefault5); 481 addLoadEvent(dynamicDefault6); 482 addLoadEvent(dynamicDefault7); 483 addLoadEvent(dynamicDefault8); 484 addLoadEvent(dynamicDefault9); 485 addLoadEvent(dynamicDefault10); 486 addLoadEvent(dynamicDefault11); 487 addLoadEvent(dynamicDefault12); 488 addLoadEvent(dynamicDefault13); 489 addLoadEvent(dynamicDefault14); 490 addLoadEvent(dynamicDefault15); 491 addLoadEvent(dynamicDefault16); 492 addLoadEvent(dynamicDefault17); 493 addLoadEvent(dynamicDefault18); 494 addLoadEvent(dynamicDefault19); 495 addLoadEvent(dynamicDefault20); 496 497 addLoadEvent(SimpleTest.finish); 498 499 </script> 500 </pre> 501 </body> 502 </html>