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