test_select_key_navigation_bug961363.html (5129B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=961363 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 961363</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="/tests/SimpleTest/EventUtils.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 <script type="application/javascript"> 13 /** Test for Bug 961363 */ 14 15 SimpleTest.waitForExplicitFinish(); 16 17 function test() { 18 SimpleTest.waitForFocus(function() { 19 const single_list = [ 20 {key: "DOWN", change: true, state: [false, false, true, false]}, 21 {key: "UP", change: true, state: [false, true, false, false]}, 22 {key: "RIGHT", change: true, state: [false, false, true, false]}, 23 {key: "LEFT", change: true, state: [false, true, false, false]}, 24 {key: "END", change: true, state: [false, false, false, true ]}, 25 {key: "HOME", change: true, state: [true, false, false, false]}, 26 {key: "PAGE_DOWN", change: false, state: [true, false, false, false]}, 27 {key: "PAGE_UP", change: false, state: [true, false, false, false]} 28 ]; 29 30 const single_dropdown = [ 31 {key: "DOWN", change: true, state: [false, false, true, false]}, 32 {key: "UP", change: true, state: [false, true, false, false]}, 33 {key: "RIGHT", change: true, state: [false, false, true, false]}, 34 {key: "LEFT", change: true, state: [false, true, false, false]}, 35 {key: "END", change: true, state: [false, false, false, true ]}, 36 {key: "HOME", change: true, state: [true, false, false, false]}, 37 {key: "PAGE_DOWN", change: false, state: [true, false, false, false]}, 38 {key: "PAGE_UP", change: false, state: [true, false, false, false]} 39 ]; 40 41 const multiple = [ 42 {key: "DOWN", change: false, state: [false, true, true, false]}, 43 {key: "UP", change: false, state: [false, false, true, false]}, 44 {key: "RIGHT", change: false, state: [false, false, false, false]}, 45 {key: "LEFT", change: false, state: [false, true, false, false]}, 46 {key: "PAGE_DOWN", change: false, state: [false, true, false, true ]}, 47 {key: "PAGE_UP", change: false, state: [false, false, false, true ]}, 48 {key: "END", change: false, state: [false, false, false, false]}, 49 {key: "HOME", change: false, state: [true, false, false, false]} 50 ]; 51 52 function select_test(id, tests) { 53 let element = document.getElementById(id); 54 element.focus(); 55 tests.forEach(data => { 56 let previousValue = element.value; 57 let key = data.k; 58 synthesizeKey("VK_" + data.key, {shiftKey: false, metaKey: false, 59 ctrlKey: true }); 60 (data.change ? isnot : is)( 61 element.value, previousValue, 62 `value should ${data.change ? "": "not "} have changed while testing CTRL+${data.key} (id: ${id})` 63 ); 64 65 // Hit ctrl+space, but only for <select multiple> elements; doing so 66 // for single <select> elements will just trigger the dropdown to 67 // open. This is especially important because e10s-backed dropdowns 68 // behave differently: their .value isn't updated until the dropdown 69 // is closed (and the change confirmed), e.g. by pressing Enter. 70 let action; 71 if (element.multiple) { 72 synthesizeKey(" ", {shiftKey: false, metaKey: false, 73 ctrlKey: true}); 74 action = `CTRL+SPACE (after testing CTRL+${data.key})`; 75 } else { 76 action = `testing CTRL+${data.key}`; 77 } 78 79 let selected = [...element.options].map(o => o.selected); 80 is(selected.toString(), data.state.toString(), 81 `selected options match after ${action} (id: ${id})`); 82 }); 83 } 84 85 select_test("single-list", single_list); 86 if (!navigator.platform.includes("Mac")) { 87 select_test("single-dropdown", single_dropdown); 88 } else { 89 todo(false, "Make these tests work on OSX"); 90 } 91 92 select_test("multiple", multiple); 93 SimpleTest.finish(); 94 }); 95 } 96 </script> 97 </head> 98 <body onload="test();"> 99 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=961363">Mozilla Bug 961363</a> 100 <div> 101 <ul> 102 <li> 103 <select id="single-list" size="3"> 104 <option>0</option> 105 <option selected>1</option> 106 <option>2</option> 107 <option>3</option> 108 </select> 109 </li> 110 <li> 111 <select id="single-dropdown" size="1"> 112 <option>0</option> 113 <option selected>1</option> 114 <option>2</option> 115 <option>3</option> 116 </select> 117 </li> 118 <li> 119 <select id="multiple" multiple size="3"> 120 <option>0</option> 121 <option selected>1</option> 122 <option>2</option> 123 <option>3</option> 124 </select> 125 </li> 126 </ul> 127 </div> 128 <pre id="test"> 129 </pre> 130 </body> 131 </html>