summaryrefslogtreecommitdiffstats
path: root/layout/forms/test/test_select_key_navigation_bug961363.html
blob: 78151497783732b403ed6ee7c8eb33420c3d750d (plain)
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
123
124
125
126
127
128
129
130
131
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=961363
-->
<head>
<meta charset="utf-8">
<title>Test for Bug 961363</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 961363 **/

  SimpleTest.waitForExplicitFinish();

  function test() {
    SimpleTest.waitForFocus(function() {
      const single_list = [
        {key: "DOWN",      change: true,  state: [false, false, true,  false]},
        {key: "UP",        change: true,  state: [false, true,  false, false]},
        {key: "RIGHT",     change: true,  state: [false, false, true,  false]},
        {key: "LEFT",      change: true,  state: [false, true,  false, false]},
        {key: "END",       change: true,  state: [false, false, false, true ]},
        {key: "HOME",      change: true,  state: [true,  false, false, false]},
        {key: "PAGE_DOWN", change: false, state: [true,  false, false, false]},
        {key: "PAGE_UP",   change: false, state: [true,  false, false, false]}
      ];

      const single_dropdown = [
        {key: "DOWN",      change: true,  state: [false, false, true,  false]},
        {key: "UP",        change: true,  state: [false, true,  false, false]},
        {key: "RIGHT",     change: true,  state: [false, false, true,  false]},
        {key: "LEFT",      change: true,  state: [false, true,  false, false]},
        {key: "END",       change: true,  state: [false, false, false, true ]},
        {key: "HOME",      change: true,  state: [true,  false, false, false]},
        {key: "PAGE_DOWN", change: false, state: [true,  false, false, false]},
        {key: "PAGE_UP",   change: false, state: [true,  false, false, false]}
      ];

      const multiple = [
        {key: "DOWN",      change: false, state: [false, true,  true,  false]},
        {key: "UP",        change: false, state: [false, false, true,  false]},
        {key: "RIGHT",     change: false, state: [false, false, false, false]},
        {key: "LEFT",      change: false, state: [false, true,  false, false]},
        {key: "PAGE_DOWN", change: false, state: [false, true,  false, true ]},
        {key: "PAGE_UP",   change: false, state: [false, false, false, true ]},
        {key: "END",       change: false, state: [false, false, false, false]},
        {key: "HOME",      change: false, state: [true,  false, false, false]}
      ];

      function select_test(id, tests) {
        let element = document.getElementById(id);
        element.focus();
        tests.forEach(data => {
          let previousValue = element.value;
          let key = data.k;
          synthesizeKey("VK_" + data.key, {shiftKey: false, metaKey: false,
                                           ctrlKey: true });
          (data.change ? isnot : is)(
            element.value, previousValue,
            `value should ${data.change ? "": "not "} have changed while testing CTRL+${data.key} (id: ${id})`
          );

          // Hit ctrl+space, but only for <select multiple> elements; doing so
          // for single <select> elements will just trigger the dropdown to
          // open. This is especially important because e10s-backed dropdowns
          // behave differently: their .value isn't updated until the dropdown
          // is closed (and the change confirmed), e.g. by pressing Enter.
          let action;
          if (element.multiple) {
            synthesizeKey(" ", {shiftKey: false, metaKey: false,
                                ctrlKey: true});
            action = `CTRL+SPACE (after testing CTRL+${data.key})`;
          } else {
            action = `testing CTRL+${data.key}`;
          }

          let selected = [...element.options].map(o => o.selected);
          is(selected.toString(), data.state.toString(),
             `selected options match after ${action} (id: ${id})`);
        });
      }

      select_test("single-list", single_list);
      if (!navigator.platform.includes("Mac")) {
        select_test("single-dropdown", single_dropdown);
      } else {
        todo(false, "Make these tests work on OSX");
      }

      select_test("multiple", multiple);
      SimpleTest.finish();
    });
  }
</script>
</head>
<body onload="test();">
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=961363">Mozilla Bug 961363</a>
<div>
  <ul>
    <li>
      <select id="single-list" size="3">
        <option>0</option>
        <option selected>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </li>
    <li>
      <select id="single-dropdown" size="1">
        <option>0</option>
        <option selected>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </li>
    <li>
      <select id="multiple" multiple size="3">
        <option>0</option>
        <option selected>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </li>
  </ul>
</div>
<pre id="test">
</pre>
</body>
</html>