| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Focus-related events (including legacy events) should fire in the correct order</title> |
| <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"> |
| <link rel="help" href="https://w3c.github.io/uievents/#legacy-focusevent-event-order"> |
| <meta name="flags" content="interact"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <ol> |
| <li>Click into the first text input.</li> |
| <li>Click into the second text input.</li> |
| <li>Click the "Done" button.</li> |
| </ol> |
| |
| <input type="text" id="a" value="First"> |
| <br> |
| <input type="text" id="b" value="Second"> |
| <br> |
| <button type="button" id="done">Done</button> |
| |
| <script> |
| setup({explicit_timeout: true}); |
| var done = false; |
| var events = []; |
| var targets = []; |
| function record(e) { |
| if (done) { |
| return; |
| } |
| events.push(e.type); |
| targets.push(e.target.id); |
| } |
| function finish() { |
| done = true; |
| } |
| var relevantEvents = [ |
| 'focus', |
| 'blur', |
| 'focusin', |
| 'focusout', |
| 'DOMFocusIn', |
| 'DOMFocusOut' |
| ]; |
| window.onload = function () { |
| var a = document.getElementById('a'); |
| var b = document.getElementById('b'); |
| var inputs = [a, b]; |
| |
| b.addEventListener('blur', finish, false); |
| b.addEventListener('focusout', finish, false); |
| b.addEventListener('DOMFocusOut', finish, false); |
| |
| for (var i = 0; i < inputs.length; i++) { |
| for (var k = 0; k < relevantEvents.length; k++) { |
| inputs[i].addEventListener(relevantEvents[k], record, false); |
| } |
| } |
| |
| async_test(function(t) { |
| document.getElementById('done').addEventListener('click', function () { |
| finish(); |
| t.step(function () { |
| assert_array_equals( |
| events, |
| ['focusin', 'focus', 'DOMFocusIn', 'focusout', 'focusin', 'blur', 'DOMFocusOut', 'focus', 'DOMFocusIn'], |
| 'Focus-related events should fire in this order: focusin, focus, DOMFocusIn, focusout, focusin, blur, DOMFocusOut, focus, DOMFocusIn' |
| ); |
| assert_array_equals( |
| targets, |
| [ 'a', 'a', 'a', 'a', 'b', 'a', 'a', 'b', 'b'], |
| 'Focus-related events should fire at the correct targets' |
| ); |
| t.done(); |
| }); |
| }, false); |
| }, 'Focus-related events should fire in the correct order'); |
| }; |
| </script> |
| </body> |
| </html> |