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