focus-automated-blink-webkit.html (5726B)
1 <!DOCTYPE html> 2 <!-- Modified from Chris Rebert's manual version --> 3 <!-- This documents the behavior according to blink's implementation --> 4 <html> 5 <head> 6 <meta charset="utf-8"> 7 <title>Focus-related events should fire in the correct order</title> 8 <link rel="help" href="https://w3c.github.io/uievents/#events-focusevent-event-order"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 </head> 12 <body id="body"> 13 <input type="text" id="a" value="First"> 14 <input type="text" id="b" value="Second"> 15 <br> 16 <input type="text" id="c" value="Third"> 17 <iframe id="iframe"> 18 </iframe> 19 <br> 20 <script> 21 22 var test_id = 0; 23 var tests = ['normal', 'iframe'] 24 25 function record(evt) { 26 if (done && (evt.type == 'focusin' || evt.type == 'focus') && (evt.target == c)) { 27 startNext(); 28 } 29 if (!done) { 30 var activeElement = document.activeElement ? 31 (document.activeElement.tagName === 'IFRAME' ? 32 document.activeElement.contentDocument.activeElement.id : 33 document.activeElement.id) : null; 34 events[tests[test_id]].push(evt.type); 35 targets[tests[test_id]].push(evt.target.id); 36 focusedElements[tests[test_id]].push(activeElement); 37 relatedTargets[tests[test_id]].push(evt.relatedTarget ? evt.relatedTarget.id : null); 38 } 39 } 40 function startNext() { 41 done = false; 42 test_id++; 43 } 44 function finish() { 45 done = true; 46 } 47 var relevantEvents = [ 48 'focus', 49 'blur', 50 'focusin', 51 'focusout' 52 ]; 53 54 var iframe = document.getElementById('iframe'); 55 var a = document.getElementById('a'); 56 var b = document.getElementById('b'); 57 var c = document.getElementById('c'); 58 var d = document.createElement('input'); 59 60 d.setAttribute('id', 'd'); 61 d.setAttribute('type', 'text'); 62 d.setAttribute('value', 'Fourth'); 63 64 var events = {'normal': [], 'iframe': []}; 65 var targets = {'normal': [], 'iframe': []}; 66 var focusedElements = {'normal': [], 'iframe': []}; 67 var relatedTargets = {'normal': [], 'iframe': []}; 68 var done = false; 69 70 var async_test_normal = async_test('Focus-related events should fire in the correct order (same DocumentOwner)'); 71 var async_test_iframe_static = async_test('Focus-related events should fire in the correct order (different DocumentOwner)'); 72 73 window.onload = function(evt) { 74 75 iframe.contentDocument.body.appendChild(d); 76 77 var inputs = [a, b, c, d]; 78 79 for (var i = 0; i < inputs.length; i++) { 80 for (var k = 0; k < relevantEvents.length; k++) { 81 inputs[i].addEventListener(relevantEvents[k], record, false); 82 } 83 } 84 85 a.addEventListener('focusin', function() { b.focus(); }, false); 86 b.addEventListener('focusin', function() { 87 async_test_normal.step( function() { 88 assert_array_equals( 89 events['normal'], 90 ['focus', 'focusin', 'blur', 'focusout', 'focus', 'focusin'], 91 'Focus-related events should fire in this order: focusin, focus, focusout, focusin, blur, focus' 92 ); 93 94 assert_array_equals( 95 targets['normal'], 96 [ 'a', 'a', 'a', 'a', 'b', 'b'], 97 'Focus-related events should fire at the correct targets' 98 ); 99 100 assert_array_equals( 101 relatedTargets['normal'], 102 [ null, null, 'b', 'b', 'a', 'a'], 103 'Focus-related events should reference correct relatedTargets' 104 ); 105 106 assert_array_equals( 107 focusedElements['normal'], 108 [ 'a', 'a', 'body', 'body', 'b', 'b'], 109 'Focus-related events should fire at the correct time relative to actual focus changes' 110 ); 111 112 async_test_normal.done(); 113 }); 114 115 b.addEventListener('focusout', function() { finish(); c.focus(); }); 116 b.blur(); 117 118 }, false); 119 120 c.addEventListener('focusin', function() {d.focus();}); 121 d.addEventListener('focusin', function() { 122 async_test_iframe_static.step(function() { 123 assert_array_equals( 124 events['iframe'], 125 ['focus', 'focusin', 'blur', 'focusout', 'focus', 'focusin'], 126 'Focus-related events should fire in this order: focusin, focus, focusout, focusin, blur, focus' 127 ); 128 129 assert_array_equals( 130 targets['iframe'], 131 [ 'c', 'c', 'c', 'c', 'd', 'd'], 132 'Focus-related events should fire at the correct targets' 133 ); 134 135 assert_array_equals( 136 relatedTargets['iframe'], 137 [ null, null, null, null, null, null], 138 'Focus-related events should reference correct relatedTargets' 139 ); 140 141 assert_array_equals( 142 focusedElements['iframe'], 143 [ 'c', 'c', 'body', 'body', 'd', 'd'], 144 'Focus-related events should fire at the correct time relative to actual focus changes' 145 ); 146 147 async_test_iframe_static.done(); 148 }); 149 150 d.addEventListener('focusout', function() { finish();}); 151 152 }, false); 153 154 a.focus(); 155 } 156 157 </script> 158 </body> 159 </html>