summaryrefslogtreecommitdiffstats
path: root/accessible/tests/mochitest/treeupdate/test_deck.xhtml
blob: 979996a66cbbde20cacdab491ec53f1b06fbbe6c (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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<?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"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        title="Tree update on XUL deck panel switching">

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js" />

  <script type="application/javascript"
          src="../common.js" />
  <script type="application/javascript"
          src="../role.js" />
  <script type="application/javascript"
          src="../states.js" />
  <script type="application/javascript"
          src="../events.js" />

  <script type="application/javascript">
  <![CDATA[
    function switchDeckPanel(aContainerID, aDeckID)
    {
      this.panelIndex = 0;

      this.container = getAccessible(aContainerID);
      this.deckNode = getNode(aDeckID);
      this.prevPanel = getAccessible(this.deckNode.selectedPanel);
      this.panelNode = this.deckNode.childNodes[this.panelIndex];

      this.eventSeq = [
        new invokerChecker(EVENT_HIDE, this.prevPanel),
        new invokerChecker(EVENT_SHOW, this.panelNode),
        new invokerChecker(EVENT_REORDER, this.container)
      ];

      this.invoke = function switchDeckPanel_invoke()
      {
        var tree =
          { GROUPING: [ // role="group"
            { GROUPING: [ // groupbox, a selected panel #2
              { PUSHBUTTON: [ ] } // button
            ] }
          ] };
        testAccessibleTree(this.container, tree);

        this.deckNode.selectedIndex = this.panelIndex;
      }

      this.finalCheck = function switchDeckPanel_finalCheck()
      {
        var tree =
          { GROUPING: [ // role="group"
            { LABEL: [ // description, a selected panel #1
              { TEXT_LEAF: []  } // text leaf, a description value
            ] }
          ] };
        testAccessibleTree(this.container, tree);
      }

      this.getID = function switchDeckPanel_getID()
      {
        return "switch deck panel";
      }
    }

    function showDeckPanel(aContainerID, aPanelID)
    {
      this.container = getAccessible(aContainerID);
      this.deckNode = getNode(aPanelID);
      var tree =
        { GROUPING: [ // role="group"
          { GROUPING: [ // grouping of panel 2
            { PUSHBUTTON: []  } // push button in panel 2
          ] }
        ] };


      this.unexpectedEventSeq = [
        new invokerChecker(EVENT_REORDER, this.container)
      ];

      this.invoke = function showDeckPanel_invoke()
      {
        // This stops the refreh driver from doing its regular ticks, and leaves
        // us in control. 100 is an arbitrary positive number to advance the clock
        // it is not checked or used anywhere.
        window.windowUtils.advanceTimeAndRefresh(100);

        testAccessibleTree(this.container, tree);
        this.deckNode.style.display = "-moz-box";

        // This flushes our DOM mutations and forces any pending mutation events.
        window.windowUtils.advanceTimeAndRefresh(100);
      }

      this.finalCheck = function showDeckPanel_finalCheck()
      {
        testAccessibleTree(this.container, tree);

        // Return to regular refresh driver ticks.
        window.windowUtils.restoreNormalRefresh();
      }

      this.getID = function showDeckPanel_getID()
      {
        return "show deck panel";
      }
    }

    var gQueue = null;
    function doTest()
    {
      gQueue = new eventQueue();
      gQueue.push(new showDeckPanel("container", "hidden"));
      gQueue.push(new switchDeckPanel("container", "deck"));
      gQueue.invoke(); // will call SimpleTest.finish();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTest);
  ]]>
  </script>

  <hbox flex="1" style="overflow: auto;">
    <body xmlns="http://www.w3.org/1999/xhtml">
     <a target="_blank"
         href="https://bugzilla.mozilla.org/show_bug.cgi?id=814836"
         title=" xul:deck element messes up screen reader">
        Mozilla Bug 814836
     </a>

      <p id="display"></p>
      <div id="content" style="display: none">
      </div>
      <pre id="test">
      </pre>
    </body>

    <vbox flex="1" id="container" role="group">

      <deck id="deck" selectedIndex="1">
        <description>This is the first page</description>
        <groupbox>
          <button label="This is the second page"/>
        </groupbox>
        <hbox id="hidden" style="display: none;"><label>This is the third page</label></hbox>
      </deck>

    </vbox>
  </hbox>

</window>