Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / accessibility / aria-controls-with-tabs.html
blob680e72a891621fcff7e8774ede3b1dd328832b07
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html>
3 <head>
4 <script src="../resources/js-test.js"></script>
5 </head>
6 <body id="body">
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>
13 <h3 tabindex=0 id="elementOutsideTabs">Test</h3>
15 <div id="panel_1" role="tabpanel" >
16 <h3 tabindex=0>Select Crust</h3>
17 </div>
19 <div id="panel_2" role="tabpanel" >
20 <h2 id="itemInPanel2" tabindex=0>Select Crust</h2>
21 </div>
24 <p id="description"></p>
25 <div id="console"></div>
27 <script>
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.");
31 if (window.accessibilityController) {
33 var tabList = accessibilityController.accessibleElementById('tablist_1');
34 var tab1 = tabList.childAtIndex(0);
35 var tab2 = tabList.childAtIndex(1);
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();
42 shouldBe("tab2.isSelected", "true");
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");
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");
54 </script>
56 </body>
57 </html>