157 lines
5.5 KiB
HTML
157 lines
5.5 KiB
HTML
<!doctype html>
|
|
<title>Test for input radio focus</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script src="/tests/SimpleTest/EventUtils.js"></script>
|
|
<style>
|
|
.visHidden {
|
|
visibility: hidden;
|
|
}
|
|
.dispNone {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<button id="before">before</button>
|
|
<fieldset>
|
|
<legend>a</legend>
|
|
<label><input id="a1" type="radio" name="a" checked>a1</label>
|
|
<label><input id="a2" type="radio" name="a">a2</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>b</legend>
|
|
<label><input id="b1" type="radio" name="b">b1</label>
|
|
<label><input id="b2" type="radio" name="b" checked>b2</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>c</legend>
|
|
<label><input id="c1" type="radio" name="c">c1</label>
|
|
<label><input id="c2" type="radio" name="c">c2</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>d</legend>
|
|
<label><input id="d1" type="radio" name="d" disabled>d1</label>
|
|
<label><input id="d2" type="radio" name="d">d2</label>
|
|
<label><input id="d3" type="radio" name="d" disabled>d3</label>
|
|
<label><input id="d4" type="radio" name="d">d4</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>e</legend>
|
|
<label><input id="e1" type="radio" name="e" hidden>e1</label>
|
|
<label><input id="e2" type="radio" name="e">e2</label>
|
|
<label><input id="e3" type="radio" name="e" hidden>e3</label>
|
|
<label><input id="e4" type="radio" name="e">e4</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>f</legend>
|
|
<label><input id="f1" type="radio" name="f" class="visHidden">f1</label>
|
|
<label><input id="f2" type="radio" name="f">f2</label>
|
|
<label><input id="f3" type="radio" name="f" class="visHidden">f3</label>
|
|
<label><input id="f4" type="radio" name="f">f4</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>g</legend>
|
|
<label><input id="g1" type="radio" name="g" class="dispNone">g1</label>
|
|
<label><input id="g2" type="radio" name="g">g2</label>
|
|
<label><input id="g3" type="radio" name="g" class="dispNone">g3</label>
|
|
<label><input id="g4" type="radio" name="g">g4</label>
|
|
</fieldset>
|
|
<button id="after">after</button>
|
|
|
|
<script>
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
function expectFocusAfterKey(key, id) {
|
|
const res = key.match(/(Shift\+)?(.*)/);
|
|
const shiftKey = Boolean(res[1]);
|
|
const rawKey = res[2];
|
|
synthesizeKey(`KEY_${rawKey}`, { shiftKey });
|
|
is(document.activeElement.id, id, `${id} is focused after ${key}`);
|
|
}
|
|
|
|
SimpleTest.waitForFocus(async function() {
|
|
await SpecialPowers.pushPrefEnv({"set": [["accessibility.tabfocus", 7]]});
|
|
|
|
expectFocusAfterKey("Tab", "before");
|
|
// a1 is checked.
|
|
expectFocusAfterKey("Tab", "a1");
|
|
// b2 is checked.
|
|
expectFocusAfterKey("Tab", "b2");
|
|
// Nothing is checked in group c, so c1 should get focus.
|
|
expectFocusAfterKey("Tab", "c1");
|
|
// d1 is disabled, so d2 should get focus.
|
|
expectFocusAfterKey("Tab", "d2");
|
|
// e1 is hidden, so e2 should get focus.
|
|
expectFocusAfterKey("Tab", "e2");
|
|
// f1 is hidden, so f2 should get focus.
|
|
expectFocusAfterKey("Tab", "f2");
|
|
// g1 is hidden, so g2 should get focus.
|
|
expectFocusAfterKey("Tab", "g2");
|
|
expectFocusAfterKey("Tab", "after");
|
|
|
|
expectFocusAfterKey("Shift+Tab", "g2");
|
|
expectFocusAfterKey("Shift+Tab", "f2");
|
|
expectFocusAfterKey("Shift+Tab", "e2");
|
|
expectFocusAfterKey("Shift+Tab", "d2");
|
|
expectFocusAfterKey("Shift+Tab", "c1");
|
|
expectFocusAfterKey("Shift+Tab", "b2");
|
|
expectFocusAfterKey("Shift+Tab", "a1");
|
|
expectFocusAfterKey("Shift+Tab", "before");
|
|
|
|
expectFocusAfterKey("Tab", "a1");
|
|
expectFocusAfterKey("ArrowDown", "a2");
|
|
expectFocusAfterKey("Tab", "b2");
|
|
// a2 is now checked, so shift+tab should focus it.
|
|
expectFocusAfterKey("Shift+Tab", "a2");
|
|
|
|
expectFocusAfterKey("Tab", "b2");
|
|
expectFocusAfterKey("ArrowUp", "b1");
|
|
expectFocusAfterKey("Shift+Tab", "a2");
|
|
expectFocusAfterKey("Tab", "b1");
|
|
|
|
expectFocusAfterKey("Tab", "c1");
|
|
expectFocusAfterKey("ArrowDown", "c2");
|
|
expectFocusAfterKey("Tab", "d2");
|
|
expectFocusAfterKey("Shift+Tab", "c2");
|
|
|
|
expectFocusAfterKey("Tab", "d2");
|
|
// d3 is disabled, so down arrow should focus d4.
|
|
expectFocusAfterKey("ArrowDown", "d4");
|
|
expectFocusAfterKey("ArrowUp", "d2");
|
|
expectFocusAfterKey("ArrowDown", "d4");
|
|
// Down arrow should wrap at the bottom, skipping disabled.
|
|
expectFocusAfterKey("ArrowDown", "d2");
|
|
// Up arrow should wrap at the top.
|
|
expectFocusAfterKey("ArrowUp", "d4");
|
|
|
|
expectFocusAfterKey("Tab", "e2");
|
|
// e3 is hidden, so down arrow should focus e4.
|
|
expectFocusAfterKey("ArrowDown", "e4");
|
|
expectFocusAfterKey("ArrowUp", "e2");
|
|
expectFocusAfterKey("ArrowDown", "e4");
|
|
// Down arrow should wrap at the bottom, skipping hidden.
|
|
expectFocusAfterKey("ArrowDown", "e2");
|
|
// Up arrow should wrap at the top.
|
|
expectFocusAfterKey("ArrowUp", "e4");
|
|
|
|
expectFocusAfterKey("Tab", "f2");
|
|
// f3 is hidden, so down arrow should focus f4.
|
|
expectFocusAfterKey("ArrowDown", "f4");
|
|
expectFocusAfterKey("ArrowUp", "f2");
|
|
expectFocusAfterKey("ArrowDown", "f4");
|
|
// Down arrow should wrap at the bottom, skipping hidden.
|
|
expectFocusAfterKey("ArrowDown", "f2");
|
|
// Up arrow should wrap at the top.
|
|
expectFocusAfterKey("ArrowUp", "f4");
|
|
|
|
expectFocusAfterKey("Tab", "g2");
|
|
// g3 is hidden, so down arrow should focus g4.
|
|
expectFocusAfterKey("ArrowDown", "g4");
|
|
expectFocusAfterKey("ArrowUp", "g2");
|
|
expectFocusAfterKey("ArrowDown", "g4");
|
|
// Down arrow should wrap at the bottom, skipping hidden.
|
|
expectFocusAfterKey("ArrowDown", "g2");
|
|
// Up arrow should wrap at the top.
|
|
expectFocusAfterKey("ArrowUp", "g4");
|
|
|
|
SimpleTest.finish();
|
|
});
|
|
</script>
|