legacy-manual.html (2468B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Focus-related events (including legacy events) should fire in the correct order</title> 6 <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"> 7 <link rel="help" href="https://w3c.github.io/uievents/#legacy-focusevent-event-order"> 8 <meta name="flags" content="interact"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 </head> 12 <body> 13 <ol> 14 <li>Click into the first text input.</li> 15 <li>Click into the second text input.</li> 16 <li>Click the "Done" button.</li> 17 </ol> 18 19 <input type="text" id="a" value="First"> 20 <br> 21 <input type="text" id="b" value="Second"> 22 <br> 23 <button type="button" id="done">Done</button> 24 25 <script> 26 setup({explicit_timeout: true}); 27 var done = false; 28 var events = []; 29 var targets = []; 30 function record(e) { 31 if (done) { 32 return; 33 } 34 events.push(e.type); 35 targets.push(e.target.id); 36 } 37 function finish() { 38 done = true; 39 } 40 var relevantEvents = [ 41 'focus', 42 'blur', 43 'focusin', 44 'focusout', 45 'DOMFocusIn', 46 'DOMFocusOut' 47 ]; 48 window.onload = function () { 49 var a = document.getElementById('a'); 50 var b = document.getElementById('b'); 51 var inputs = [a, b]; 52 53 b.addEventListener('blur', finish, false); 54 b.addEventListener('focusout', finish, false); 55 b.addEventListener('DOMFocusOut', finish, false); 56 57 for (var i = 0; i < inputs.length; i++) { 58 for (var k = 0; k < relevantEvents.length; k++) { 59 inputs[i].addEventListener(relevantEvents[k], record, false); 60 } 61 } 62 63 async_test(function(t) { 64 document.getElementById('done').addEventListener('click', function () { 65 finish(); 66 t.step(function () { 67 assert_array_equals( 68 events, 69 ['focusin', 'focus', 'DOMFocusIn', 'focusout', 'focusin', 'blur', 'DOMFocusOut', 'focus', 'DOMFocusIn'], 70 'Focus-related events should fire in this order: focusin, focus, DOMFocusIn, focusout, focusin, blur, DOMFocusOut, focus, DOMFocusIn' 71 ); 72 assert_array_equals( 73 targets, 74 [ 'a', 'a', 'a', 'a', 'b', 'a', 'a', 'b', 'b'], 75 'Focus-related events should fire at the correct targets' 76 ); 77 t.done(); 78 }); 79 }, false); 80 }, 'Focus-related events should fire in the correct order'); 81 }; 82 </script> 83 </body> 84 </html>