test_inert.html (3915B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>Inert tree update test</title> 6 7 <link rel="stylesheet" type="text/css" 8 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 9 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 11 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 12 13 <script src="../common.js"></script> 14 <script src="../promisified-events.js"></script> 15 <script src="../role.js"></script> 16 17 <script> 18 async function doTest() { 19 const inertContainer = getAccessible("inertContainer"); 20 const inertTree = { SECTION: [ // inertContainer 21 { PARAGRAPH: [{ TEXT_LEAF: [] }] }, // before 22 { PARAGRAPH: [{ TEXT_LEAF: [] }] }, // after 23 ]}; 24 testAccessibleTree(inertContainer, inertTree); 25 26 info("Unsetting inert"); 27 let reordered = waitForEvent(EVENT_REORDER, inertContainer); 28 const inertNode = getNode("inert"); 29 inertNode.inert = false; 30 await reordered; 31 testAccessibleTree(inertContainer, { SECTION: [ // inertContainer 32 { PARAGRAPH: [{ TEXT_LEAF: [] }] }, // before 33 { SECTION: [ // inert 34 { TEXT_LEAF: [] }, 35 { PUSHBUTTON: [] }, 36 ] }, 37 { PARAGRAPH: [{ TEXT_LEAF: [] }] }, // after 38 ]}); 39 40 info("Setting inert"); 41 reordered = waitForEvent(EVENT_REORDER, inertContainer); 42 inertNode.inert = true; 43 await reordered; 44 testAccessibleTree(inertContainer, inertTree); 45 46 const noDialogTree = { SECTION: [ // dialogContainer 47 { TEXT_LEAF: [] } 48 ] }; 49 testAccessibleTree("dialogContainer", noDialogTree); 50 51 info("Showing modal dialog"); 52 reordered = waitForEvent(EVENT_REORDER, document); 53 const dialogNode = getNode("dialog"); 54 dialogNode.showModal(); 55 await reordered; 56 // The dialog makes everything else in the document inert. 57 testAccessibleTree(document, { DOCUMENT: [ 58 { DIALOG: [ 59 { PUSHBUTTON: [] } 60 ] } 61 ] }); 62 63 info("Closing dialog"); 64 reordered = waitForEvent(EVENT_REORDER, document); 65 dialogNode.close(); 66 await reordered; 67 testAccessibleTree("dialogContainer", noDialogTree); 68 69 const fullscreenTree = { SECTION: [ // fullscreen 70 { PUSHBUTTON: [] } 71 ] }; 72 const notFullscreenTree = { SECTION: [ // fullscreenContainer 73 { SECTION: [ 74 { PUSHBUTTON: [] } // requestFullscreen 75 ] }, 76 fullscreenTree, 77 ] }; 78 testAccessibleTree("fullscreenContainer", notFullscreenTree); 79 80 info("Requesting fullscreen"); 81 reordered = waitForEvent(EVENT_REORDER, document); 82 // Fullscreen must be requested by a user input event. 83 synthesizeMouseAtCenter(getNode("requestFullscreen"), {}); 84 await reordered; 85 // Fullscreen makes everything else in the document inert. 86 testAccessibleTree(document, { DOCUMENT: [ 87 fullscreenTree 88 ] }); 89 90 info("Exiting fullscreen"); 91 reordered = waitForEvent(EVENT_REORDER, document); 92 document.exitFullscreen(); 93 await reordered; 94 testAccessibleTree("fullscreenContainer", notFullscreenTree); 95 96 SimpleTest.finish(); 97 } 98 99 SimpleTest.waitForExplicitFinish(); 100 addA11yLoadEvent(doTest); 101 </script> 102 </head> 103 <body> 104 105 <p id="display"></p> 106 <div id="content" style="display: none"></div> 107 <pre id="test"> 108 </pre> 109 110 <div id="inertContainer"> 111 <p>before</p> 112 <div id="inert" inert>inert <button></button></div> 113 <p>after</p> 114 </div> 115 116 <div id="dialogContainer"> 117 dialogContainer 118 <dialog id="dialog"><button></button></dialog> 119 </div> 120 121 <div id="fullscreenContainer"> 122 <div> 123 <button id="requestFullscreen" 124 onclick="document.getElementById('fullscreen').requestFullscreen();"> 125 </button> 126 </div> 127 <div id="fullscreen"><button></button></div> 128 </div> 129 130 <div id="eventdump"></div> 131 </body> 132 </html>