dom/events/test/test_bug687787.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=687787
   5 -->
   6 <head>
   7   <title>Test for Bug 687787</title>
   8   <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
   9   <script src="/tests/SimpleTest/SimpleTest.js"></script>
  10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  11 </head>
  12 <body>
  13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687787">Mozilla Bug 687787</a>
  14 <p id="display"></p>
  15 <div id="content" style="display: none">
  16
  17 </div>
  18
  19 <pre id="test">
  20 <script class="testbody" type="text/javascript">
  21
  22 var eventStack = [];
  23
  24 function _callback(e){
  25     var event = {'type' : e.type, 'target' : e.target, 'relatedTarget' : e.relatedTarget }
  26     eventStack.push(event);
  27 }
  28
  29 function clearEventStack(){
  30     eventStack = [];
  31 }
  32
  33 window.addEventListener("focus", _callback, true);
  34 window.addEventListener("focusin", _callback, true);
  35 window.addEventListener("focusout", _callback, true);
  36 window.addEventListener("blur", _callback, true);
  37
  38 function CompareEventToExpected(e, expected) {
  39     if (expected == null || e == null)
  40         return false;
  41     if (e.type == expected.type && e.target == expected.target && e.relatedTarget == expected.relatedTarget)
  42         return true;
  43     return false;
  44 }
  45
  46 function TestEventOrderNormal() {
  47
  48     var input1 = document.createElement('input');
  49     var input2 = document.createElement('input');
  50     var input3 = document.createElement('input');
  51     var content = document.getElementById('content');
  52
  53     input1.setAttribute('id', 'input1');
  54     input2.setAttribute('id', 'input2');
  55     input3.setAttribute('id', 'input3');
  56     input1.setAttribute('type', 'text');
  57     input2.setAttribute('type', 'text');
  58     input3.setAttribute('type', 'text');
  59
  60     content.appendChild(input1);
  61     content.appendChild(input2);
  62     content.appendChild(input3);
  63     content.style.display = 'block'
  64
  65     let expectedEventOrder = [
  66         {'type' : 'blur',
  67         'target' : input1,
  68         'relatedTarget' : input2},
  69         {'type' : 'focusout',
  70         'target' : input1,
  71         'relatedTarget' : input2},
  72         {'type' : 'focus',
  73         'target' : input2,
  74         'relatedTarget' : input1},
  75         {'type' : 'focusin',
  76         'target' : input2,
  77         'relatedTarget' : input1},
  78         {'type' : 'blur',
  79         'target' : input2,
  80         'relatedTarget' : input3},
  81         {'type' : 'focusout',
  82         'target' : input2,
  83         'relatedTarget' : input3},
  84         {'type' : 'focus',
  85         'target' : input3,
  86         'relatedTarget' : input2},
  87         {'type' : 'focusin',
  88         'target' : input3,
  89         'relatedTarget' : input2},
  90     ]
  91
  92     input1.focus();
  93     clearEventStack();
  94
  95     input2.focus();
  96     input3.focus();
  97
  98     for (var i = 0; i < expectedEventOrder.length || i < eventStack.length ; i++) {
  99         ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
 100                 + 'Expected ('
 101                     + expectedEventOrder[i].type + ','
 102                     + (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
 103                     + (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
 104                 + 'Actual ('
 105                     + eventStack[i].type + ','
 106                     + (eventStack[i].target ? eventStack[i].target.id : null) + ','
 107                     + (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
 108     }
 109
 110     content.innerHTML = '';
 111 }
 112
 113 function TestEventOrderNormalFiresAtRightTime() {
 114
 115     var input1 = document.createElement('input');
 116     var input2 = document.createElement('input');
 117     var input3 = document.createElement('input');
 118     var content = document.getElementById('content');
 119
 120     input1.setAttribute('id', 'input1');
 121     input2.setAttribute('id', 'input2');
 122     input3.setAttribute('id', 'input3');
 123     input1.setAttribute('type', 'text');
 124     input2.setAttribute('type', 'text');
 125     input3.setAttribute('type', 'text');
 126
 127     input1.onblur = function(e)
 128     {
 129         ok(document.activeElement == document.body, 'input1: not focused when blur fires')
 130     }
 131
 132     input1.addEventListener('focusout', function(e)
 133     {
 134         ok(document.activeElement == document.body, 'input1: not focused when focusout fires')
 135     });
 136
 137     input2.onfocus = function(e)
 138     {
 139         ok(document.activeElement == input2, 'input2: focused when focus fires')
 140     }
 141
 142     input2.addEventListener('focusin', function(e)
 143     {
 144         ok(document.activeElement == input2, 'input2: focused when focusin fires')
 145     });
 146
 147     content.appendChild(input1);
 148     content.appendChild(input2);
 149     content.style.display = 'block'
 150
 151     let expectedEventOrder = [
 152         {'type' : 'blur',
 153         'target' : input1,
 154         'relatedTarget' : input2},
 155         {'type' : 'focusout',
 156         'target' : input1,
 157         'relatedTarget' : input2},
 158         {'type' : 'focus',
 159         'target' : input2,
 160         'relatedTarget' : input1},
 161         {'type' : 'focusin',
 162         'target' : input2,
 163         'relatedTarget' : input1},
 164     ]
 165
 166     input1.focus();
 167     clearEventStack();
 168
 169     input2.focus();
 170
 171     for (var i = 0; i < expectedEventOrder.length || i < eventStack.length ; i++) {
 172         ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
 173                 + 'Expected ('
 174                     + expectedEventOrder[i].type + ','
 175                     + (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
 176                     + (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
 177                 + 'Actual ('
 178                     + eventStack[i].type + ','
 179                     + (eventStack[i].target ? eventStack[i].target.id : null) + ','
 180                     + (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
 181     }
 182
 183     content.innerHTML = '';
 184 }
 185
 186 function TestFocusOutRedirectsFocus() {
 187
 188     var input1 = document.createElement('input');
 189     var input2 = document.createElement('input');
 190     var input3 = document.createElement('input');
 191     var content = document.getElementById('content');
 192
 193     input1.setAttribute('id', 'input1');
 194     input2.setAttribute('id', 'input2');
 195     input3.setAttribute('id', 'input3');
 196     input1.setAttribute('type', 'text');
 197     input2.setAttribute('type', 'text');
 198     input3.setAttribute('type', 'text');
 199     input1.addEventListener('focusout', function () {
 200         input3.focus();
 201     });
 202
 203     content.appendChild(input1);
 204     content.appendChild(input2);
 205     content.appendChild(input3);
 206     content.style.display = 'block'
 207
 208     let expectedEventOrder = [
 209         {'type' : 'blur',
 210         'target' : input1,
 211         'relatedTarget' : input2},
 212         {'type' : 'focusout',
 213         'target' : input1,
 214         'relatedTarget' : input2},
 215         {'type' : 'focus',
 216         'target' : input3,
 217         'relatedTarget' : null},
 218         {'type' : 'focusin',
 219         'target' : input3,
 220         'relatedTarget' : null},
 221     ]
 222
 223     input1.focus();
 224     clearEventStack();
 225     input2.focus();
 226
 227     for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
 228         ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
 229                 + 'Expected ('
 230                     + expectedEventOrder[i].type + ','
 231                     + (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
 232                     + (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
 233                 + 'Actual ('
 234                     + eventStack[i].type + ','
 235                     + (eventStack[i].target ? eventStack[i].target.id : null) + ','
 236                     + (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
 237     }
 238
 239     content.innerHTML = '';
 240 }
 241
 242 function TestFocusInRedirectsFocus() {
 243
 244     var input1 = document.createElement('input');
 245     var input2 = document.createElement('input');
 246     var input3 = document.createElement('input');
 247     var content = document.getElementById('content');
 248
 249     input1.setAttribute('id', 'input1');
 250     input2.setAttribute('id', 'input2');
 251     input3.setAttribute('id', 'input3');
 252     input1.setAttribute('type', 'text');
 253     input2.setAttribute('type', 'text');
 254     input3.setAttribute('type', 'text');
 255     input2.addEventListener('focusin', function () {
 256         input3.focus();
 257     });
 258
 259     content.appendChild(input1);
 260     content.appendChild(input2);
 261     content.appendChild(input3);
 262     content.style.display = 'block'
 263
 264     let expectedEventOrder = [
 265         {'type' : 'blur',
 266         'target' : input1,
 267         'relatedTarget' : input2},
 268         {'type' : 'focusout',
 269         'target' : input1,
 270         'relatedTarget' : input2},
 271         {'type' : 'focus',
 272         'target' : input2,
 273         'relatedTarget' : input1},
 274         {'type' : 'focusin',
 275         'target' : input2,
 276         'relatedTarget' : input1},
 277         {'type' : 'blur',
 278         'target' : input2,
 279         'relatedTarget' : input3},
 280         {'type' : 'focusout',
 281         'target' : input2,
 282         'relatedTarget' : input3},
 283         {'type' : 'focus',
 284         'target' : input3,
 285         'relatedTarget' : input2},
 286         {'type' : 'focusin',
 287         'target' : input3,
 288         'relatedTarget' : input2},
 289     ]
 290
 291     input1.focus();
 292     clearEventStack();
 293     input2.focus();
 294
 295     for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
 296         ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
 297                 + 'Expected ('
 298                     + expectedEventOrder[i].type + ','
 299                     + (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
 300                     + (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
 301                 + 'Actual ('
 302                     + eventStack[i].type + ','
 303                     + (eventStack[i].target ? eventStack[i].target.id : null) + ','
 304                     + (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
 305     }
 306
 307     content.innerHTML = '';
 308 }
 309
 310 function TestBlurRedirectsFocus() {
 311
 312     var input1 = document.createElement('input');
 313     var input2 = document.createElement('input');
 314     var input3 = document.createElement('input');
 315     var content = document.getElementById('content');
 316
 317     input1.setAttribute('id', 'input1');
 318     input2.setAttribute('id', 'input2');
 319     input3.setAttribute('id', 'input3');
 320     input1.setAttribute('type', 'text');
 321     input2.setAttribute('type', 'text');
 322     input3.setAttribute('type', 'text');
 323     input1.onblur = function () {
 324         input3.focus();
 325     }
 326
 327     content.appendChild(input1);
 328     content.appendChild(input2);
 329     content.appendChild(input3);
 330     content.style.display = 'block'
 331
 332     let expectedEventOrder = [
 333         {'type' : 'blur',
 334         'target' : input1,
 335         'relatedTarget' : input2},
 336         {'type' : 'focus',
 337         'target' : input3,
 338         'relatedTarget' : null},
 339         {'type' : 'focusin',
 340         'target' : input3,
 341         'relatedTarget' : null},
 342         {'type' : 'focusout',
 343         'target' : input1,
 344         'relatedTarget' : input2},
 345     ]
 346
 347     input1.focus();
 348     clearEventStack();
 349     input2.focus();
 350
 351     for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
 352         ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
 353                 + 'Expected ('
 354                     + expectedEventOrder[i].type + ','
 355                     + (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
 356                     + (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
 357                 + 'Actual ('
 358                     + eventStack[i].type + ','
 359                     + (eventStack[i].target ? eventStack[i].target.id : null) + ','
 360                     + (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
 361     }
 362
 363     content.innerHTML = '';
 364 }
 365
 366 function TestFocusRedirectsFocus() {
 367
 368     var input1 = document.createElement('input');
 369     var input2 = document.createElement('input');
 370     var input3 = document.createElement('input');
 371     var content = document.getElementById('content');
 372
 373     input1.setAttribute('id', 'input1');
 374     input2.setAttribute('id', 'input2');
 375     input3.setAttribute('id', 'input3');
 376     input1.setAttribute('type', 'text');
 377     input2.setAttribute('type', 'text');
 378     input3.setAttribute('type', 'text');
 379     input2.onfocus = function () {
 380         input3.focus();
 381     }
 382
 383     content.appendChild(input1);
 384     content.appendChild(input2);
 385     content.appendChild(input3);
 386     content.style.display = 'block'
 387
 388     let expectedEventOrder = [
 389         {'type' : 'blur',
 390         'target' : input1,
 391         'relatedTarget' : input2},
 392         {'type' : 'focusout',
 393         'target' : input1,
 394         'relatedTarget' : input2},
 395         {'type' : 'focus',
 396         'target' : input2,
 397         'relatedTarget' : input1},
 398         {'type' : 'blur',
 399         'target' : input2,
 400         'relatedTarget' : input3},
 401         {'type' : 'focusout',
 402         'target' : input2,
 403         'relatedTarget' : input3},
 404         {'type' : 'focus',
 405         'target' : input3,
 406         'relatedTarget' : input2},
 407         {'type' : 'focusin',
 408         'target' : input3,
 409         'relatedTarget' : input2},
 410     ]
 411
 412     input1.focus();
 413     clearEventStack();
 414     input2.focus();
 415
 416     for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
 417         ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
 418                 + 'Expected ('
 419                     + expectedEventOrder[i].type + ','
 420                     + (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
 421                     + (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
 422                 + 'Actual ('
 423                     + eventStack[i].type + ','
 424                     + (eventStack[i].target ? eventStack[i].target.id : null) + ','
 425                     + (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
 426     }
 427
 428     content.innerHTML = '';
 429 }
 430
 431 function TestEventOrderDifferentDocument() {
 432
 433     var input1 = document.createElement('input');
 434     var input2 = document.createElement('input');
 435     var iframe1 = document.createElement('iframe');
 436     var content = document.getElementById('content');
 437
 438     input1.setAttribute('id', 'input1');
 439     input2.setAttribute('id', 'input2');
 440     iframe1.setAttribute('id', 'iframe1');
 441     input1.setAttribute('type', 'text');
 442     input2.setAttribute('type', 'text');
 443
 444     content.appendChild(input1);
 445     content.appendChild(iframe1);
 446     iframe1.contentDocument.body.appendChild(input2);
 447     content.style.display = 'block'
 448
 449     iframe1.contentDocument.addEventListener("focus", _callback, true);
 450     iframe1.contentDocument.addEventListener("focusin", _callback, true);
 451     iframe1.contentDocument.addEventListener("focusout", _callback, true);
 452     iframe1.contentDocument.addEventListener("blur", _callback, true);
 453
 454     let expectedEventOrder = [
 455         {'type' : 'blur',
 456         'target' : input1,
 457         'relatedTarget' : null},
 458         {'type' : 'focusout',
 459         'target' : input1,
 460         'relatedTarget' : null},
 461         {'type' : 'blur',
 462         'target' : document,
 463         'relatedTarget' : null},
 464         {'type' : 'blur',
 465         'target' : window,
 466         'relatedTarget' : null},
 467         {'type' : 'focus',
 468         'target' : iframe1.contentDocument,
 469         'relatedTarget' : null},
 470         {'type' : 'focus',
 471         'target' : input2,
 472         'relatedTarget' : null},
 473         {'type' : 'focusin',
 474         'target' : input2,
 475         'relatedTarget' : null},
 476     ]
 477
 478     input1.focus();
 479     clearEventStack();
 480     input2.focus();
 481
 482     for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
 483         ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
 484                 + 'Expected ('
 485                     + expectedEventOrder[i].type + ','
 486                     + (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
 487                     + (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
 488                 + 'Actual ('
 489                     + eventStack[i].type + ','
 490                     + (eventStack[i].target ? eventStack[i].target.id : null) + ','
 491                     + (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
 492     }
 493
 494     content.innerHTML = '';
 495 }
 496
 497
 498 function TestFocusOutMovesTarget() {
 499
 500     var input1 = document.createElement('input');
 501     var input2 = document.createElement('input');
 502     var iframe1 = document.createElement('iframe');
 503     var content = document.getElementById('content');
 504
 505     input1.setAttribute('id', 'input1');
 506     input2.setAttribute('id', 'input2');
 507     iframe1.setAttribute('id', 'iframe1');
 508     input1.setAttribute('type', 'text');
 509     input2.setAttribute('type', 'text');
 510
 511     input1.addEventListener('focusout', function () {
 512         iframe1.contentDocument.body.appendChild(input2);
 513     });
 514
 515     content.appendChild(input1);
 516     content.appendChild(input2);
 517     content.appendChild(iframe1);
 518     content.style.display = 'block'
 519
 520     iframe1.contentDocument.addEventListener("focus", _callback, true);
 521     iframe1.contentDocument.addEventListener("focusin", _callback, true);
 522     iframe1.contentDocument.addEventListener("focusout", _callback, true);
 523     iframe1.contentDocument.addEventListener("blur", _callback, true);
 524
 525     let expectedEventOrder = [
 526         {'type' : 'blur',
 527         'target' : input1,
 528         'relatedTarget' : input2},
 529         {'type' : 'focusout',
 530         'target' : input1,
 531         'relatedTarget' : input2},
 532         {'type' : 'focus',
 533         'target' : input2,
 534         'relatedTarget' : null},
 535         {'type' : 'focusin',
 536         'target' : input2,
 537         'relatedTarget' : null},
 538     ]
 539
 540     input1.focus();
 541     clearEventStack();
 542     input2.focus();
 543
 544     for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
 545         ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
 546                 + 'Expected ('
 547                     + expectedEventOrder[i].type + ','
 548                     + (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
 549                     + (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
 550                 + 'Actual ('
 551                     + eventStack[i].type + ','
 552                     + (eventStack[i].target ? eventStack[i].target.id : null) + ','
 553                     + (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
 554     }
 555
 556     content.innerHTML = '';
 557 }
 558
 559 function TestBlurWindowAndRefocusInputOnlyFiresFocusInOnInput() {
 560
 561     var input1 = document.createElement('input');
 562     var content = document.getElementById('content');
 563
 564     input1.setAttribute('id', 'input1');
 565     input1.setAttribute('type', 'text');
 566
 567     content.appendChild(input1);
 568
 569     let expectedEventOrder = [
 570         {'type' : 'focus',
 571         'target' : document,
 572         'relatedTarget' : null},
 573         {'type' : 'focus',
 574         'target' : window,
 575         'relatedTarget' : null},
 576         {'type' : 'focus',
 577         'target' : input1,
 578         'relatedTarget' : null},
 579         {'type' : 'focusin',
 580         'target' : input1,
 581         'relatedTarget' : null},
 582     ]
 583
 584     window.blur();
 585     clearEventStack();
 586     input1.focus();
 587
 588     for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
 589         ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
 590                 + 'Expected ('
 591                     + expectedEventOrder[i].type + ','
 592                     + (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
 593                     + (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
 594                 + 'Actual ('
 595                     + eventStack[i].type + ','
 596                     + (eventStack[i].target ? eventStack[i].target.id : null) + ','
 597                     + (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
 598     }
 599
 600     content.innerHTML = '';
 601 }
 602
 603 TestEventOrderNormal();
 604 TestEventOrderNormalFiresAtRightTime();
 605 TestFocusOutRedirectsFocus();
 606 TestFocusInRedirectsFocus();
 607 TestBlurRedirectsFocus();
 608 TestFocusRedirectsFocus();
 609 TestFocusOutMovesTarget();
 610 TestEventOrderDifferentDocument();
 611 TestBlurWindowAndRefocusInputOnlyFiresFocusInOnInput();
 612
 613 </script>
 614 </pre>
 615 </body>
 616 </html>