test_input_number_focus.html (4034B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1268556 5 --> 6 <head> 7 <title>Test focus behaviour for <input type='number'></title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 <style> 11 #input_test_style_display { 12 display: none; 13 } 14 </style> 15 </head> 16 <body> 17 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1268556">Mozilla Bug 1268556</a> 18 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1057858">Mozilla Bug 1057858</a> 19 <p id="display"></p> 20 <div id="content"> 21 <input id="input_test_redirect" type="number"> 22 <input id="input_test_style_display" type="number" > 23 </div> 24 <pre id="test"> 25 <script type="application/javascript"> 26 27 /** 28 * Test for Bug 1268556. 29 * This test checks that when focusing on an input type=number, the focus is 30 * redirected to the anonymous text control, but the document.activeElement 31 * still returns the <input type=number>. 32 * 33 * Tests for bug 1057858. 34 * Checks that adding an element and immediately focusing it triggers exactly 35 * one "focus" event and no "blur" events. The same for switching 36 * `style.display` from `none` to `block`. 37 */ 38 SimpleTest.waitForExplicitFinish(); 39 SimpleTest.waitForFocus(function() { 40 test_focus_redirects_to_text_control_but_not_for_activeElement(); 41 test_add_element_and_focus_check_one_focus_event(); 42 test_style_display_none_change_to_block_check_one_focus_event(); 43 SimpleTest.finish(); 44 }); 45 46 function test_focus_redirects_to_text_control_but_not_for_activeElement() { 47 document.activeElement.blur(); 48 var number = document.getElementById("input_test_redirect"); 49 number.focus(); 50 51 // The active element returns the input type=number. 52 var activeElement = document.activeElement; 53 is (activeElement, number, "activeElement should be the number element"); 54 is (activeElement.localName, "input", "activeElement should be an input element"); 55 is (activeElement.getAttribute("type"), "number", "activeElement should of type number"); 56 57 // Use FocusManager to check that the actual focus is on the anonymous 58 // text control. 59 var fm = SpecialPowers.Cc["@mozilla.org/focus-manager;1"] 60 .getService(SpecialPowers.Ci.nsIFocusManager); 61 var focusedElement = fm.focusedElement; 62 is (focusedElement.localName, "input", "focusedElement should be an input element"); 63 is (focusedElement.getAttribute("type"), "number", "focusedElement should of type number"); 64 } 65 66 var blurEventCounter = 0; 67 var focusEventCounter = 0; 68 69 function append_input_element_with_event_listeners_to_dom() { 70 var inputElement = document.createElement("input"); 71 inputElement.type = "number"; 72 inputElement.addEventListener("blur", function() { ++blurEventCounter; }); 73 inputElement.addEventListener("focus", function() { ++focusEventCounter; }); 74 var content = document.getElementById("content"); 75 content.appendChild(inputElement); 76 return inputElement; 77 } 78 79 function test_add_element_and_focus_check_one_focus_event() { 80 document.activeElement.blur(); 81 var inputElement = append_input_element_with_event_listeners_to_dom(); 82 83 blurEventCounter = 0; 84 focusEventCounter = 0; 85 inputElement.focus(); 86 87 is(blurEventCounter, 0, "After focus: no blur events observed."); 88 is(focusEventCounter, 1, "After focus: exactly one focus event observed."); 89 } 90 91 function test_style_display_none_change_to_block_check_one_focus_event() { 92 document.activeElement.blur(); 93 var inputElement = document.getElementById("input_test_style_display"); 94 inputElement.addEventListener("blur", function() { ++blurEventCounter; }); 95 inputElement.addEventListener("focus", function() { ++focusEventCounter; }); 96 97 blurEventCounter = 0; 98 focusEventCounter = 0; 99 inputElement.style.display = "block"; 100 inputElement.focus(); 101 102 is(blurEventCounter, 0, "After focus: no blur events observed."); 103 is(focusEventCounter, 1, "After focus: exactly one focus event observed."); 104 } 105 106 </script> 107 </pre> 108 </body> 109 </html>