DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
<!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();
        is(e.selectedIndex, 1, "the 'selected' attribute is respected");
        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");
        synthesizeKey("VK_UP", {});
        is(e.selectedIndex, 0, "VK_UP skips the display:none/contents option");
        synthesizeKey("VK_DOWN", {});
        is(e.selectedIndex, 2, "VK_DOWN skips the display:none/contents option");
      });
      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>