summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/spatial-navigation/snav-multiple-select.html
blob: c149038c5c594b4a07281cab21c89707fc79d90a (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
132
133
<html>
  <!--
    This test ensures the correctness of Spatial Navigation (SNav) algorithm over multiple select element.

    * Pre-conditions:
    1) DRT support for SNav enable/disable.

    * Navigation steps:
    1) Loads this page, focus goes to "start" automatically.
    2) Focus moves away from select in 4 different directions to neighbor nodes and back.
  -->
  <head>
    <script src="../../resources/js-test.js"></script>
    <script src="resources/spatial-navigation-utils.js"></script>
    <script type="application/javascript">

    var resultMap = [
      ["Down", "start"],
      ["Down", "start"],
      ["Down", "start"],
      ["Down", "8"],
      ["Up", "start"],
      ["Up", "start"],
      ["Up", "start"],
      ["Up", "2"],
      ["Down", "start"],
      ["Right", "6"],
      ["Left", "start"],
      ["Left", "4"],
      ["Right", "start"],
      ["DONE", "DONE"]
    ];

    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.overridePreference("WebKitTabToLinksPreferenceKey", 1);
      window.internals.settings.setSpatialNavigationEnabled(true);
      testRunner.waitUntilDone();
    }

    function runTest()
    {
      // starting the test itself: get to a known place.
      document.getElementById("start").focus();

      initTest(resultMap, additionalTest);
    }

    function additionalTest()
    {
      document.getElementById("start").focus();         //move to 1st item
      shouldBe("gFocusedDocument.getElementById(\"start\").options[0].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[1].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[2].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[3].selected", "false");
      eventSender.keyDown("downArrow");                 //move to 2nd item
      shouldBe("gFocusedDocument.getElementById(\"start\").options[0].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[1].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[2].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[3].selected", "false");
      eventSender.keyDown(" ");                         //select 2nd item
      shouldBe("gFocusedDocument.getElementById(\"start\").options[0].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[1].selected", "true");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[2].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[3].selected", "false");
      eventSender.keyDown("downArrow");                 //move to 4th item (3rd item is disabled) 
      shouldBe("gFocusedDocument.getElementById(\"start\").options[0].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[1].selected", "true");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[2].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[3].selected", "false");
      eventSender.keyDown(" ");                         //select 4th item
      shouldBe("gFocusedDocument.getElementById(\"start\").options[0].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[1].selected", "true");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[2].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[3].selected", "true");
      eventSender.keyDown("upArrow");                   //move back to 2nd item
      shouldBe("gFocusedDocument.getElementById(\"start\").options[0].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[1].selected", "true");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[2].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[3].selected", "true");
      eventSender.keyDown(" ");                         //deselect 2nd item
      shouldBe("gFocusedDocument.getElementById(\"start\").options[0].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[1].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[2].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[3].selected", "true");
      eventSender.keyDown("upArrow");                   //move back to 1st item
      shouldBe("gFocusedDocument.getElementById(\"start\").options[0].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[1].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[2].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[3].selected", "true");
      eventSender.keyDown("downArrow", ["shiftKey"]);   //shift-down to 2nd item
      shouldBe("gFocusedDocument.getElementById(\"start\").options[0].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[1].selected", "true");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[2].selected", "false");
      shouldBe("gFocusedDocument.getElementById(\"start\").options[3].selected", "true");

      testCompleted();
    }

    function testCompleted()
    {
      if (window.testRunner)
        testRunner.notifyDone();
    }

    window.onload = runTest;

    </script>
  </head>
  <body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
    <table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="1">
      <tbody>
        <tr>
          <td style="vertical-align: top; text-align: center;"></td>
          <td style="vertical-align: top; text-align: center;"><a id="2" href="a">2</a></td>
          <td style="vertical-align: top; text-align: center;"></td>
        </tr>
        <tr>
          <td style="vertical-align: top; text-align: center;"><a id="4" href="a">4</a></td>
          <td style="vertical-align: top; text-align: center;"><select id="start" multiple><option>1</option><option>2</option><option disabled>3</option><option>4</option></select></td>
          <td style="vertical-align: top; text-align: center;"><a id="6" href="a">6</a></td>
        </tr>
        <tr>
          <td style="vertical-align: top; text-align: center;"></td>
          <td style="vertical-align: top; text-align: center;"><a id="8" href="a">8</a></td>
          <td style="vertical-align: top; text-align: center;"></td>
        </tr>
      </tbody>
    </table>
    <div id="console"></div>
  </body>
</html>