test_focus_radio.html (6627B)
1 <!doctype html> 2 <title>Test for input radio focus</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <script src="/tests/SimpleTest/EventUtils.js"></script> 5 <style> 6 .visHidden { 7 visibility: hidden; 8 } 9 .dispNone { 10 display: none; 11 } 12 </style> 13 <button id="before">before</button> 14 <fieldset> 15 <legend>a</legend> 16 <label><input id="a1" type="radio" name="a" checked>a1</label> 17 <label><input id="a2" type="radio" name="a">a2</label> 18 </fieldset> 19 <fieldset> 20 <legend>b</legend> 21 <label><input id="b1" type="radio" name="b">b1</label> 22 <label><input id="b2" type="radio" name="b" checked>b2</label> 23 </fieldset> 24 <fieldset> 25 <legend>c</legend> 26 <label><input id="c1" type="radio" name="c">c1</label> 27 <label><input id="c2" type="radio" name="c">c2</label> 28 </fieldset> 29 <fieldset> 30 <legend>d</legend> 31 <label><input id="d1" type="radio" name="d" disabled>d1</label> 32 <label><input id="d2" type="radio" name="d">d2</label> 33 <label><input id="d3" type="radio" name="d" disabled>d3</label> 34 <label><input id="d4" type="radio" name="d">d4</label> 35 </fieldset> 36 <fieldset> 37 <legend>e</legend> 38 <label><input id="e1" type="radio" name="e" hidden>e1</label> 39 <label><input id="e2" type="radio" name="e">e2</label> 40 <label><input id="e3" type="radio" name="e" hidden>e3</label> 41 <label><input id="e4" type="radio" name="e">e4</label> 42 </fieldset> 43 <fieldset> 44 <legend>f</legend> 45 <label><input id="f1" type="radio" name="f" class="visHidden">f1</label> 46 <label><input id="f2" type="radio" name="f">f2</label> 47 <label><input id="f3" type="radio" name="f" class="visHidden">f3</label> 48 <label><input id="f4" type="radio" name="f">f4</label> 49 </fieldset> 50 <fieldset> 51 <legend>g</legend> 52 <label><input id="g1" type="radio" name="g" class="dispNone">g1</label> 53 <label><input id="g2" type="radio" name="g">g2</label> 54 <label><input id="g3" type="radio" name="g" class="dispNone">g3</label> 55 <label><input id="g4" type="radio" name="g">g4</label> 56 </fieldset> 57 <fieldset> 58 <legend>h</legend> 59 <label><input id="h1" type="radio" name="h" disabled checked>h1</label> 60 <label><input id="h2" type="radio" name="h">h2</label> 61 </fieldset> 62 <fieldset> 63 <legend>i</legend> 64 <label><input id="i1" type="radio" name="i" hidden checked>i1</label> 65 <label><input id="i2" type="radio" name="i">i2</label> 66 </fieldset> 67 <fieldset> 68 <legend>j</legend> 69 <label><input id="j1" type="radio" name="j">j1</label> 70 <label><input id="j2" type="radio" name="j" disabled checked>j2</label> 71 </fieldset> 72 <button id="after">after</button> 73 74 <script> 75 SimpleTest.waitForExplicitFinish(); 76 77 function expectFocusAfterKey(key, id) { 78 const res = key.match(/(Shift\+)?(.*)/); 79 const shiftKey = Boolean(res[1]); 80 const rawKey = res[2]; 81 synthesizeKey(`KEY_${rawKey}`, { shiftKey }); 82 is(document.activeElement.id, id, `${id} is focused after ${key}`); 83 } 84 85 SimpleTest.waitForFocus(async function() { 86 await SpecialPowers.pushPrefEnv({"set": [["accessibility.tabfocus", 7]]}); 87 88 expectFocusAfterKey("Tab", "before"); 89 // a1 is checked. 90 expectFocusAfterKey("Tab", "a1"); 91 // b2 is checked. 92 expectFocusAfterKey("Tab", "b2"); 93 // Nothing is checked in group c, so c1 should get focus. 94 expectFocusAfterKey("Tab", "c1"); 95 // d1 is disabled, so d2 should get focus. 96 expectFocusAfterKey("Tab", "d2"); 97 // e1 is hidden, so e2 should get focus. 98 expectFocusAfterKey("Tab", "e2"); 99 // f1 is hidden, so f2 should get focus. 100 expectFocusAfterKey("Tab", "f2"); 101 // g1 is hidden, so g2 should get focus. 102 expectFocusAfterKey("Tab", "g2"); 103 // h1 is checked but disabled, so h2 should get focus. 104 expectFocusAfterKey("Tab", "h2"); 105 // i1 is checked but hidden, so i2 should get focus. 106 expectFocusAfterKey("Tab", "i2"); 107 // j2 is checked but disabled, so j1 should get focus. 108 expectFocusAfterKey("Tab", "j1"); 109 expectFocusAfterKey("Tab", "after"); 110 111 expectFocusAfterKey("Shift+Tab", "j1"); 112 expectFocusAfterKey("Shift+Tab", "i2"); 113 expectFocusAfterKey("Shift+Tab", "h2"); 114 expectFocusAfterKey("Shift+Tab", "g2"); 115 expectFocusAfterKey("Shift+Tab", "f2"); 116 expectFocusAfterKey("Shift+Tab", "e2"); 117 expectFocusAfterKey("Shift+Tab", "d2"); 118 expectFocusAfterKey("Shift+Tab", "c1"); 119 expectFocusAfterKey("Shift+Tab", "b2"); 120 expectFocusAfterKey("Shift+Tab", "a1"); 121 expectFocusAfterKey("Shift+Tab", "before"); 122 123 expectFocusAfterKey("Tab", "a1"); 124 expectFocusAfterKey("ArrowDown", "a2"); 125 expectFocusAfterKey("Tab", "b2"); 126 // a2 is now checked, so shift+tab should focus it. 127 expectFocusAfterKey("Shift+Tab", "a2"); 128 129 expectFocusAfterKey("Tab", "b2"); 130 expectFocusAfterKey("ArrowUp", "b1"); 131 expectFocusAfterKey("Shift+Tab", "a2"); 132 expectFocusAfterKey("Tab", "b1"); 133 134 expectFocusAfterKey("Tab", "c1"); 135 expectFocusAfterKey("ArrowDown", "c2"); 136 expectFocusAfterKey("Tab", "d2"); 137 expectFocusAfterKey("Shift+Tab", "c2"); 138 139 expectFocusAfterKey("Tab", "d2"); 140 // d3 is disabled, so down arrow should focus d4. 141 expectFocusAfterKey("ArrowDown", "d4"); 142 expectFocusAfterKey("ArrowUp", "d2"); 143 expectFocusAfterKey("ArrowDown", "d4"); 144 // Down arrow should wrap at the bottom, skipping disabled. 145 expectFocusAfterKey("ArrowDown", "d2"); 146 // Up arrow should wrap at the top. 147 expectFocusAfterKey("ArrowUp", "d4"); 148 149 expectFocusAfterKey("Tab", "e2"); 150 // e3 is hidden, so down arrow should focus e4. 151 expectFocusAfterKey("ArrowDown", "e4"); 152 expectFocusAfterKey("ArrowUp", "e2"); 153 expectFocusAfterKey("ArrowDown", "e4"); 154 // Down arrow should wrap at the bottom, skipping hidden. 155 expectFocusAfterKey("ArrowDown", "e2"); 156 // Up arrow should wrap at the top. 157 expectFocusAfterKey("ArrowUp", "e4"); 158 159 expectFocusAfterKey("Tab", "f2"); 160 // f3 is hidden, so down arrow should focus f4. 161 expectFocusAfterKey("ArrowDown", "f4"); 162 expectFocusAfterKey("ArrowUp", "f2"); 163 expectFocusAfterKey("ArrowDown", "f4"); 164 // Down arrow should wrap at the bottom, skipping hidden. 165 expectFocusAfterKey("ArrowDown", "f2"); 166 // Up arrow should wrap at the top. 167 expectFocusAfterKey("ArrowUp", "f4"); 168 169 expectFocusAfterKey("Tab", "g2"); 170 // g3 is hidden, so down arrow should focus g4. 171 expectFocusAfterKey("ArrowDown", "g4"); 172 expectFocusAfterKey("ArrowUp", "g2"); 173 expectFocusAfterKey("ArrowDown", "g4"); 174 // Down arrow should wrap at the bottom, skipping hidden. 175 expectFocusAfterKey("ArrowDown", "g2"); 176 // Up arrow should wrap at the top. 177 expectFocusAfterKey("ArrowUp", "g4"); 178 179 SimpleTest.finish(); 180 }); 181 </script>