test_select_input_change_event.html (5348B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1265968 5 --> 6 <head> 7 <title>Test for Bug 1024350</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.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=1024350">Mozilla Bug 1024350</a> 14 <p id="display"></p> 15 <div id="content"> 16 <select oninput='++selectInput;' onchange="++selectChange;"> 17 <option>one</option> 18 </select> 19 <select oninput='++selectInput;' onchange="++selectChange;"> 20 <option>one</option> 21 <option>two</option> 22 </select> 23 <select multiple size='1' oninput='++selectInput;' onchange="++selectChange;"> 24 <option>one</option> 25 </select> 26 <select multiple oninput='++selectInput;' onchange="++selectChange;"> 27 <option>one</option> 28 <option>two</option> 29 </select> 30 </div> 31 <pre id="test"> 32 <script type="application/javascript"> 33 var selectSingleOneItem = document.getElementsByTagName('select')[0]; 34 var selectSingle = document.getElementsByTagName('select')[1]; 35 var selectMultipleOneItem = document.getElementsByTagName('select')[2]; 36 var selectMultiple = document.getElementsByTagName('select')[3]; 37 38 var selectChange = 0; 39 var selectInput = 0; 40 var expectedChange = 0; 41 var expectedInput = 0; 42 43 selectSingleOneItem.focus(); 44 synthesizeKey("KEY_ArrowDown"); 45 is(selectInput, expectedInput, "Down key should not fire input event when reaching end of the list."); 46 is(selectChange, expectedChange, "Down key should not fire change event when reaching end of the list."); 47 48 synthesizeKey("KEY_ArrowUp"); 49 is(selectInput, expectedInput, "Up key should not fire input event when reaching top of the list."); 50 is(selectChange, expectedChange, "Up key should not fire change event when reaching top of the list."); 51 52 selectSingle.focus(); 53 for (var i = 1; i < selectSingle.length; i++) { 54 synthesizeKey("KEY_ArrowDown"); 55 56 is(selectSingle.options[i].selected, true, "Option should be selected"); 57 is(selectInput, ++expectedInput, "Down key should fire input event."); 58 is(selectChange, ++expectedChange, "Down key should fire change event."); 59 } 60 61 // We are at the end of the list, going down should not fire change event. 62 synthesizeKey("KEY_ArrowDown"); 63 is(selectInput, expectedInput, "Down key should not fire input event when reaching end of the list."); 64 is(selectChange, expectedChange, "Down key should not fire change event when reaching end of the list."); 65 66 for (var i = selectSingle.length - 2; i >= 0; i--) { 67 synthesizeKey("KEY_ArrowUp"); 68 69 is(selectSingle.options[i].selected, true, "Option should be selected"); 70 is(selectInput, ++expectedInput, "Up key should fire input event."); 71 is(selectChange, ++expectedChange, "Up key should fire change event."); 72 } 73 74 // We are at the top of the list, going up should not fire change event. 75 synthesizeKey("KEY_ArrowUp"); 76 is(selectInput, expectedInput, "Up key should not fire input event when reaching top of the list."); 77 is(selectChange, expectedChange, "Up key should not fire change event when reaching top of the list."); 78 79 selectMultipleOneItem.focus(); 80 synthesizeKey("KEY_ArrowDown"); 81 is(selectInput, ++expectedInput, "Down key should fire input event when reaching end of the list."); 82 is(selectChange, ++expectedChange, "Down key should fire change event when reaching end of the list."); 83 84 synthesizeKey("KEY_ArrowDown"); 85 is(selectInput, expectedInput, "Down key should not fire input event when reaching end of the list."); 86 is(selectChange, expectedChange, "Down key should not fire change event when reaching end of the list."); 87 88 synthesizeKey("KEY_ArrowUp"); 89 is(selectInput, expectedInput, "Up key should not fire input event when reaching top of the list."); 90 is(selectChange, expectedChange, "Up key should not fire change event when reaching top of the list."); 91 92 selectMultiple.focus(); 93 for (var i = 0; i < selectMultiple.length; i++) { 94 synthesizeKey("KEY_ArrowDown"); 95 96 is(selectMultiple.options[i].selected, true, "Option should be selected"); 97 is(selectInput, ++expectedInput, "Down key should fire input event."); 98 is(selectChange, ++expectedChange, "Down key should fire change event."); 99 } 100 101 // We are at the end of the list, going down should not fire change event. 102 synthesizeKey("KEY_ArrowDown"); 103 is(selectInput, expectedInput, "Down key should not fire input event when reaching end of the list."); 104 is(selectChange, expectedChange, "Down key should not fire change event when reaching end of the list."); 105 106 for (var i = selectMultiple.length - 2; i >= 0; i--) { 107 synthesizeKey("KEY_ArrowUp"); 108 109 is(selectMultiple.options[i].selected, true, "Option should be selected"); 110 is(selectInput, ++expectedInput, "Up key should fire input event."); 111 is(selectChange, ++expectedChange, "Up key should fire change event."); 112 } 113 114 // We are at the top of the list, going up should not fire change event. 115 synthesizeKey("KEY_ArrowUp"); 116 is(selectInput, expectedInput, "Up key should not fire input event when reaching top of the list."); 117 is(selectChange, expectedChange, "Up key should not fire change event when reaching top of the list."); 118 119 </script> 120 </pre> 121 </body> 122 </html>