test_select_key_navigation_bug1498769.html (3575B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1498769 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1498769</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 1498769 */ 14 15 SimpleTest.waitForExplicitFinish(); 16 17 function test() { 18 const kIsMac = navigator.platform.indexOf("Mac") == 0; 19 SimpleTest.waitForFocus(function() { 20 [...document.querySelectorAll('select')].forEach(function(e) { 21 e.focus(); 22 const description = ` (size ${e.size})`; 23 is(e.selectedIndex, 1, "the 'selected' attribute is respected" + description); 24 if (kIsMac && e.size == "1") { 25 // On OSX, UP/DOWN opens the dropdown menu rather than changing 26 // the value so we skip the rest of this test there in this case. 27 return; 28 } 29 synthesizeKey("VK_DOWN", {}); 30 is(e.selectedIndex, 2, "VK_DOWN selected the first option below" + description); 31 synthesizeKey("VK_UP", {}); 32 is(e.selectedIndex, 0, "VK_UP skips the display:none/contents option" + description); 33 synthesizeKey("VK_DOWN", {}); 34 is(e.selectedIndex, 2, "VK_DOWN skips the display:none/contents option" + description); 35 }); 36 SimpleTest.finish(); 37 }); 38 } 39 </script> 40 </head> 41 <body onload="test()"> 42 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1498769">Mozilla Bug 1498769</a> 43 <div> 44 <select size="4"> 45 <option>0</option> 46 <option selected style="display:none">1</option> 47 <option>2</option> 48 <option>3</option> 49 </select> 50 <select size="4"> 51 <option>0</option> 52 <option selected style="display:contents">1</option> 53 <option>2</option> 54 <option>3</option> 55 </select> 56 <select size="4"> 57 <option>0</option> 58 <optgroup label="group" style="display:none"> 59 <option selected>1</option> 60 </optgroup> 61 <option>2</option> 62 <option>3</option> 63 </select> 64 <select size="4"> 65 <option>0</option> 66 <optgroup label="group" style="display:contents"> 67 <option selected>1</option> 68 </optgroup> 69 <option>2</option> 70 <option>3</option> 71 </select> 72 <select size="4"> 73 <option>0</option> 74 <optgroup label="group" style="display:contents"> 75 <option selected style="display:none">1</option> 76 </optgroup> 77 <option>2</option> 78 <option>3</option> 79 </select> 80 81 <!-- Same as above but with size="1" --> 82 83 <select size="1"> 84 <option>0</option> 85 <option selected style="display:none">1</option> 86 <option>2</option> 87 <option>3</option> 88 </select> 89 <select size="1"> 90 <option>0</option> 91 <option selected style="display:contents">1</option> 92 <option>2</option> 93 <option>3</option> 94 </select> 95 <select size="1"> 96 <option>0</option> 97 <optgroup label="group" style="display:none"> 98 <option selected>1</option> 99 </optgroup> 100 <option>2</option> 101 <option>3</option> 102 </select> 103 <select size="1"> 104 <option>0</option> 105 <optgroup label="group" style="display:contents"> 106 <option selected>1</option> 107 </optgroup> 108 <option>2</option> 109 <option>3</option> 110 </select> 111 <select size="1"> 112 <option>0</option> 113 <optgroup label="group" style="display:contents"> 114 <option selected style="display:none">1</option> 115 </optgroup> 116 <option>2</option> 117 <option>3</option> 118 </select> 119 </div> 120 <pre id="test"> 121 </pre> 122 </body> 123 </html>