Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / LayoutTests / accessibility / aria-controls-with-tabs.html
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html>
3 <head>
4 <script src="../resources/js-test-pre.js"></script>
5 </head>
6 <body id="body">
7
8 <ul id="tablist_1" role="tablist">
9 <li id="tab_1" role="tab" tabindex="-1" class="">Crust</li>
10 <li id="tab_2" role="tab" tabindex="-1" aria-controls="panel_2" class="">Veges</li>
11 </ul>
12
13 <h3 tabindex=0 id="elementOutsideTabs">Test</h3>
14
15 <div id="panel_1" role="tabpanel" >
16 <h3 tabindex=0>Select Crust</h3>
17 </div>
18
19 <div id="panel_2" role="tabpanel" >
20 <h2 id="itemInPanel2" tabindex=0>Select Crust</h2>
21 </div>
22
23
24 <p id="description"></p>
25 <div id="console"></div>
26
27 <script>
28
29     description("This tests that the aria tab item becomes selected if either aria-selected is used, or if aria-controls points to an item that contains KB focus.");
30
31     if (window.accessibilityController) {
32
33           var tabList = accessibilityController.accessibleElementById('tablist_1');
34           var tab1 = tabList.childAtIndex(0);
35           var tab2 = tabList.childAtIndex(1);
36
37           // we set KB focus to something in panel_2, which means that tab2 should become selected
38           // because it aria-controls panel_2
39           var panel2Item = document.getElementById("itemInPanel2");
40           panel2Item.focus();
41
42           shouldBe("tab2.isSelected", "true");
43
44           // reset KB focus and verify that neither tab is selected
45           document.getElementById("elementOutsideTabs").focus();
46           shouldBe("tab1.isSelected", "false");
47           shouldBe("tab2.isSelected", "false");
48
49           // Now we set aria-selected to be true on tab1 so that it should become selected
50           document.getElementById("tab_1").setAttribute("aria-selected", "true");
51           shouldBe("tab1.isSelected", "true");          
52     }
53
54 </script>
55
56 <script src="../resources/js-test-post.js"></script>
57 </body>
58 </html>