Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / LayoutTests / accessibility / aria-modal.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 <body id="body">
8
9 <div id="bg">
10 <p id="bgContent">Other page content with <a href="#">a dummy focusable element</a></p>
11 <p><a onclick="toggleDialog('show'); return false;" href="#" role="button" id="displayBtn">Display a dialog</a></p>
12 </div>
13
14 <div role="dialog" aria-modal="true" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1">
15     <h3 id="myDialog">Just an example.</h3>
16     <button id="ok" onclick="toggleDialog('hide');" class="close-button">OK</button>
17     <button onclick="toggleDialog('hide');" class="close-button">Cancel</button>
18 </div>
19
20
21 <script>
22
23     description("This tests that aria-modal on dialog makes other elements inert.");
24
25     if (window.accessibilityController) {
26         // Background should be unaccessible after loading, since the 
27         // dialog is displayed and aria-modal=true.
28         shouldBeFalse("backgroundAccessible()");
29         
30         // Close the dialog, background should be accessible.
31         document.getElementById("ok").click();
32         shouldBeTrue("backgroundAccessible()");
33         
34         // Click the display button, dialog shows and background becomes unaccessible.
35         document.getElementById("displayBtn").click();
36         shouldBeFalse("backgroundAccessible()");
37         var okBtn = accessibilityController.accessibleElementById("ok");
38         shouldBeFalse("okBtn.isIgnored");
39         
40         // Test the case that aria-modal=true when dialog is hidden won't affect other objects.
41         // 1. Dialog not rendered
42         document.getElementById("ok").click();
43         document.getElementById("box").setAttribute("aria-modal", "true");
44         shouldBeTrue("backgroundAccessible()");
45         // 2. Dialog is aria hidden
46         document.getElementById("displayBtn").click();
47         document.getElementById("box").setAttribute("aria-hidden", "true");
48         shouldBeTrue("backgroundAccessible()");
49         document.getElementById("box").setAttribute("aria-hidden", "false");
50         shouldBeFalse("backgroundAccessible()");
51         
52         // Test modal dialog is removed from DOM tree.
53         var dialog = document.getElementById("box");
54         dialog.parentNode.removeChild(dialog);
55         shouldBeTrue("backgroundAccessible()");
56     }
57     
58     function backgroundAccessible() {
59         var displayBtn = accessibilityController.accessibleElementById("displayBtn");
60         var bgContent = accessibilityController.accessibleElementById("bgContent");
61         
62         if (!displayBtn || !bgContent)
63             return false;
64         
65         return !displayBtn.isIgnored && !bgContent.isIgnored;
66     }
67     
68     function toggleDialog(sh) {
69         dialog = document.getElementById("box");
70     if (sh == "show") {
71         // show the dialog 
72         dialog.style.display = 'block';
73         dialog.setAttribute("aria-modal", "true");
74     } else {
75         dialog.style.display = 'none';
76         dialog.setAttribute("aria-modal", "false"); 
77     }
78 }
79
80 </script>
81
82
83 <script src="../resources/js-test-post.js"></script>
84 </body>
85 </html>