Update device orientation & motion permission native SPI as per latest proposal
[WebKit-https.git] / LayoutTests / accessibility / aria-modal-multiple-dialogs.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
7 <style>
8 .box-hidden {
9     display: none;
10 }
11 </style>
12
13 <body id="body">
14
15 <div id="bg">
16 <p id="bgContent">Other page content with <a href="#">a dummy focusable element</a></p>
17 <p><a onclick="toggleDialog(document.getElementById('box'),'show'); return false;" href="#" role="button" id="displayBtn">Display a dialog</a></p>
18 </div>
19
20 <div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1">
21     <h3 id="myDialog">Just an example.</h3>
22     <button id="ok" onclick="toggleDialog(document.getElementById('box'),'hide');" class="close-button">OK</button>
23     <button onclick="toggleDialog(document.getElementById('box2'),'show');" id="new">New</button>
24 </div>
25
26 <div role="dialog" aria-labelledby="myDialog2" id="box2" class="box-hidden" tabindex="-1">
27     <h3 id="myDialog2">Another dialog.</h3>
28     <button id="close" onclick="toggleDialog(document.getElementById('box2'),'hide');" class="close-button">Close</button>
29 </div>
30
31
32 <script>
33
34     description("This tests that aria-modal works correctly on multiple dialogs");
35
36     if (window.accessibilityController) {
37         // Background should be accessible after loading.
38         shouldBeTrue("backgroundAccessible()");
39         
40         // Click the display button, dialog1 shows and background becomes unaccessible.
41         document.getElementById("displayBtn").click();
42         shouldBeFalse("backgroundAccessible()");
43         shouldBeTrue("dialog1Accessible()");
44         
45         // Click the new button, dialog2 shows and background/dialog1 should both be unaccessible.
46         document.getElementById("new").click();
47         shouldBeFalse("backgroundAccessible()");
48         shouldBeFalse("dialog1Accessible()");
49         var closeBtn = accessibilityController.accessibleElementById("close");
50         shouldBeFalse("closeBtn.isIgnored");
51         
52         // Close dialog2, dialog1 should become accessible but not the background
53         document.getElementById("close").click();
54         shouldBeFalse("backgroundAccessible()");
55         shouldBeTrue("dialog1Accessible()");
56         
57         // Close dialog1, background should be accessible.
58         document.getElementById("ok").click();
59         shouldBeTrue("backgroundAccessible()");
60     }
61     
62     function backgroundAccessible() {
63         var displayBtn = accessibilityController.accessibleElementById("displayBtn");
64         var bgContent = accessibilityController.accessibleElementById("bgContent");
65         if (!displayBtn || !bgContent)
66             return false;
67         return !displayBtn.isIgnored && !bgContent.isIgnored;
68     }
69     
70     function dialog1Accessible() {
71          var okBtn = accessibilityController.accessibleElementById("ok");
72          var newBtn = accessibilityController.accessibleElementById("new");
73          if (!okBtn || !newBtn)
74              return false;
75          return !okBtn.isIgnored && !newBtn.isIgnored;
76     }
77     
78     function toggleDialog(dialog, sh) {
79     if (sh == "show") {
80         // show the dialog 
81         dialog.style.display = 'block';
82         dialog.setAttribute("aria-modal", "true");
83     } else {
84         dialog.style.display = 'none';
85         dialog.setAttribute("aria-modal", "false"); 
86     }
87 }
88
89 </script>
90
91
92 <script src="../resources/js-test-post.js"></script>
93 </body>
94 </html>