diff options
Diffstat (limited to 'layout/forms/test/test_select_key_navigation_bug1498769.html')
-rw-r--r-- | layout/forms/test/test_select_key_navigation_bug1498769.html | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/layout/forms/test/test_select_key_navigation_bug1498769.html b/layout/forms/test/test_select_key_navigation_bug1498769.html new file mode 100644 index 0000000000..3574761e66 --- /dev/null +++ b/layout/forms/test/test_select_key_navigation_bug1498769.html @@ -0,0 +1,123 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=1498769 +--> +<head> +<meta charset="utf-8"> +<title>Test for Bug 1498769</title> +<script src="/tests/SimpleTest/SimpleTest.js"></script> +<script src="/tests/SimpleTest/EventUtils.js"></script> +<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> +<script type="application/javascript"> + /** Test for Bug 1498769 **/ + + SimpleTest.waitForExplicitFinish(); + + function test() { + const kIsMac = navigator.platform.indexOf("Mac") == 0; + SimpleTest.waitForFocus(function() { + [...document.querySelectorAll('select')].forEach(function(e) { + e.focus(); + const description = ` (size ${e.size})`; + is(e.selectedIndex, 1, "the 'selected' attribute is respected" + description); + if (kIsMac && e.size == "1") { + // On OSX, UP/DOWN opens the dropdown menu rather than changing + // the value so we skip the rest of this test there in this case. + return; + } + synthesizeKey("VK_DOWN", {}); + is(e.selectedIndex, 2, "VK_DOWN selected the first option below" + description); + synthesizeKey("VK_UP", {}); + is(e.selectedIndex, 0, "VK_UP skips the display:none/contents option" + description); + synthesizeKey("VK_DOWN", {}); + is(e.selectedIndex, 2, "VK_DOWN skips the display:none/contents option" + description); + }); + SimpleTest.finish(); + }); + } +</script> +</head> +<body onload="test()"> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1498769">Mozilla Bug 1498769</a> +<div> + <select size="4"> + <option>0</option> + <option selected style="display:none">1</option> + <option>2</option> + <option>3</option> + </select> + <select size="4"> + <option>0</option> + <option selected style="display:contents">1</option> + <option>2</option> + <option>3</option> + </select> + <select size="4"> + <option>0</option> + <optgroup label="group" style="display:none"> + <option selected>1</option> + </optgroup> + <option>2</option> + <option>3</option> + </select> + <select size="4"> + <option>0</option> + <optgroup label="group" style="display:contents"> + <option selected>1</option> + </optgroup> + <option>2</option> + <option>3</option> + </select> + <select size="4"> + <option>0</option> + <optgroup label="group" style="display:contents"> + <option selected style="display:none">1</option> + </optgroup> + <option>2</option> + <option>3</option> + </select> + +<!-- Same as above but with size="1" --> + + <select size="1"> + <option>0</option> + <option selected style="display:none">1</option> + <option>2</option> + <option>3</option> + </select> + <select size="1"> + <option>0</option> + <option selected style="display:contents">1</option> + <option>2</option> + <option>3</option> + </select> + <select size="1"> + <option>0</option> + <optgroup label="group" style="display:none"> + <option selected>1</option> + </optgroup> + <option>2</option> + <option>3</option> + </select> + <select size="1"> + <option>0</option> + <optgroup label="group" style="display:contents"> + <option selected>1</option> + </optgroup> + <option>2</option> + <option>3</option> + </select> + <select size="1"> + <option>0</option> + <optgroup label="group" style="display:contents"> + <option selected style="display:none">1</option> + </optgroup> + <option>2</option> + <option>3</option> + </select> +</div> +<pre id="test"> +</pre> +</body> +</html> |