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>