summaryrefslogtreecommitdiffstats
path: root/toolkit/content/tests/chrome/test_tabindex.xhtml
blob: 9828728c633b090e6337703fb7bee831b23ebf4c (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
134
135
136
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
<!--
  XUL Widget Test for tabindex
  -->
<window title="tabindex" width="500" height="600"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:html="http://www.w3.org/1999/xhtml">
  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

<!--
  Elements are navigated in the following order:
    1. tabindex > 0 in tree order
    2. tabindex = 0 in tree order
  Elements with tabindex = -1 are focusable, but not in the tab order
 -->
<hbox>
  <button id="t7" label="One"/>
  <checkbox id="f1" label="Two" tabindex="-1"/>
  <button id="t8" label="Three" tabindex="0"/>
  <checkbox id="t1" label="Four" tabindex="1"/>
</hbox>
<hbox>
  <html:input id="t9" idmod="t5" size="3"/>
  <html:input id="f2" size="3" tabindex="-1"/>
  <html:input id="t10" idmod="t6" size="3" tabindex="0"/>
  <html:input id="t2" idmod="t1" size="3" tabindex="1"/>
</hbox>
<hbox>
  <button id="n1" style="-moz-user-focus: ignore;" label="One"/>
  <checkbox id="f3" style="-moz-user-focus: ignore;" label="Two" tabindex="-1"/>
  <button id="t11" style="-moz-user-focus: ignore;" label="Three" tabindex="0"/>
  <checkbox id="t3" style="-moz-user-focus: ignore;" label="Four" tabindex="1"/>
</hbox>
<hbox>
  <html:input id="t12" idmod="t7" style="-moz-user-focus: ignore;" size="3"/>
  <html:input id="f4" style="-moz-user-focus: ignore;" size="3" tabindex="-1"/>
  <html:input id="t13" idmod="t8" style="-moz-user-focus: ignore;" size="3" tabindex="0"/>
  <html:input id="t4" idmod="t2" style="-moz-user-focus: ignore;" size="3" tabindex="1"/>
</hbox>
<richlistbox id="t14" idmod="t9">
  <richlistitem><label value="Item One"/></richlistitem>
</richlistbox>

<hbox>
  <!-- the tabindex attribute applies to non-controls as well. They are not
       focusable unless tabindex is explicitly specified.
    -->
  <dropmarker id="n2"/>
  <dropmarker id="f5" tabindex="-1"/>
  <dropmarker id="t15" tabindex="0"/>
  <dropmarker id="t5" idmod="t3" tabindex="1"/>
  <dropmarker id="t16" style="-moz-user-focus: normal;"/>
  <dropmarker id="f6" style="-moz-user-focus: normal;" tabindex="-1"/>
  <dropmarker id="t17" style="-moz-user-focus: normal;" tabindex="0"/>
  <dropmarker id="t6" idmod="t4" style="-moz-user-focus: normal;" tabindex="1"/>
</hbox>

<body xmlns="http://www.w3.org/1999/xhtml">
<p id="display"></p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
</body>

<script>
<![CDATA[

SimpleTest.waitForExplicitFinish();

function checkFocusability(aId, aFocusable)
{
  document.activeElement.blur();
  let testNode = document.getElementById(aId);
  testNode.focus();
  let newFocus = document.activeElement;
  let check = aFocusable ? is : isnot;
  let focusableText = aFocusable ? "focusable " : "unfocusable ";
  check(newFocus, testNode,
    ".focus() call on " + focusableText + aId);
}

var gAdjustedTabFocusModel = false;
var gTestCount = 17;
var gTestsOccurred = 0;
let gFocusableNotTabbableCount = 6;
let gNotFocusableCount = 2;

function runTests()
{
  var t;
  function onFocus(event) {
    if (t == 1 && event.target.id == "t2") {
      // looks to be using the MacOSX Full Keyboard Access set to Textboxes
      // and lists only so use the idmod attribute instead
      gAdjustedTabFocusModel = true;
      gTestCount = 9;
    }

    var attrcompare = gAdjustedTabFocusModel ? "idmod" : "id";

    // check for the last test which should wrap aorund to the first item
    // consider the focus event on the inner input of textboxes instead
    is(event.target.getAttribute(attrcompare), "t" + t,
       "tab " + t + " to " + event.target.localName);
    gTestsOccurred++;
  }
  window.addEventListener("focus", onFocus, true);

  for (t = 1; t <= gTestCount; t++)
    synthesizeKey("KEY_Tab");

  is(gTestsOccurred, gTestCount, "test count");
  window.removeEventListener("focus", onFocus, true);

  for (let i = 1; i <= gFocusableNotTabbableCount; ++i) {
    checkFocusability("f" + i, true);
  }

  for (let i = 1; i <= gNotFocusableCount; ++i) {
    checkFocusability("n" + i, false);
  }

  SimpleTest.finish();
}

SimpleTest.waitForFocus(runTests);

]]>

</script>

</window>