layout/style/test/test_bug302186.html

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