test_cssoverflow.html (4960B)
1 <html> 2 3 <head> 4 <title>Testing HTML scrollable frames (css overflow style)</title> 5 6 <link rel="stylesheet" type="text/css" 7 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 8 9 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 10 11 <script type="application/javascript" 12 src="../common.js"></script> 13 <script type="application/javascript" 14 src="../role.js"></script> 15 <script type="application/javascript" 16 src="../states.js"></script> 17 <script type="application/javascript" 18 src="../events.js"></script> 19 20 <script type="application/javascript"> 21 22 // ////////////////////////////////////////////////////////////////////////// 23 // Invokers 24 // ////////////////////////////////////////////////////////////////////////// 25 26 /** 27 * Change scroll range to not empty size and inserts a child into container 28 * to trigger tree update of the container. Prior to bug 677154 not empty 29 * size resulted to accessible creation for scroll area, container tree 30 * update picked up that accessible unattaching scroll area accessible 31 * subtree. 32 */ 33 function changeScrollRange(aContainerID, aScrollAreaID) { 34 this.containerNode = getNode(aContainerID); 35 this.container = getAccessible(this.containerNode); 36 this.scrollAreaNode = getNode(aScrollAreaID); 37 38 this.eventSeq = [ 39 new invokerChecker(EVENT_REORDER, this.container), 40 ]; 41 42 this.invoke = function changeScrollRange_invoke() { 43 this.scrollAreaNode.style.width = "20px"; 44 this.containerNode.appendChild(document.createElement("input")); 45 }; 46 47 this.finalCheck = function changeScrollRange_finalCheck() { 48 var accTree = 49 { SECTION: [ // container 50 { SECTION: [ // scroll area 51 { ENTRY: [] }, // child content 52 ] }, 53 { ENTRY: [] }, // inserted input 54 ] }; 55 testAccessibleTree(this.container, accTree); 56 }; 57 58 this.getID = function changeScrollRange_getID() { 59 return "change scroll range for " + prettyName(aScrollAreaID); 60 }; 61 } 62 63 /** 64 * Change scrollbar styles from visible to auto to make the scroll area focusable. 65 * That causes us to create an accessible for it. 66 * Make sure the tree stays intact. 67 * The scroll area has no ID on purpose to make it inaccessible initially. 68 */ 69 function makeFocusableByScrollbarStyles(aContainerID) { 70 this.container = getAccessible(aContainerID); 71 this.scrollAreaNode = getNode(aContainerID).firstChild; 72 73 this.eventSeq = [ 74 new invokerChecker(EVENT_SHOW, getAccessible, this.scrollAreaNode), 75 new invokerChecker(EVENT_REORDER, this.container), 76 ]; 77 78 this.invoke = function makeFocusableByScrollbarStyles_invoke() { 79 var accTree = 80 { SECTION: [ // container 81 { PARAGRAPH: [ // paragraph 82 { TEXT_LEAF: [] }, 83 ] }, 84 ] }; 85 testAccessibleTree(this.container, accTree); 86 87 this.scrollAreaNode.style.overflow = "auto"; 88 }; 89 90 this.finalCheck = function makeFocusableByScrollbarStyles_finalCheck() { 91 var accTree = 92 { SECTION: [ // container 93 { role: ROLE_SECTION, // focusable scroll area 94 states: STATE_FOCUSABLE, 95 children: [ 96 { PARAGRAPH: [ // paragraph 97 { TEXT_LEAF: [] }, // text leaf 98 ] }, 99 ], 100 }, // focusable scroll area 101 ] }; 102 testAccessibleTree(this.container, accTree); 103 }; 104 105 this.getID = function makeFocusableByScrollbarStyles_getID() { 106 return "make div focusable through scrollbar styles " 107 + prettyName(aContainerID); 108 }; 109 } 110 111 // ////////////////////////////////////////////////////////////////////////// 112 // Do tests 113 // ////////////////////////////////////////////////////////////////////////// 114 115 var gQueue = null; 116 // gA11yEventDumpID = "eventdump"; // debug stuff 117 // gA11yEventDumpToConsole = true; 118 119 function doTests() { 120 gQueue = new eventQueue(); 121 122 gQueue.push(new changeScrollRange("container", "scrollarea")); 123 gQueue.push(new makeFocusableByScrollbarStyles("container2")); 124 125 gQueue.invoke(); // Will call SimpleTest.finish(); 126 } 127 128 SimpleTest.waitForExplicitFinish(); 129 addA11yLoadEvent(doTests); 130 </script> 131 </head> 132 133 <body> 134 135 <a target="_blank" 136 href="https://bugzilla.mozilla.org/show_bug.cgi?id=677154" 137 title="Detached document accessibility tree"> 138 Mozilla Bug 677154</a> 139 140 <p id="display"></p> 141 <div id="content" style="display: none"></div> 142 <pre id="test"> 143 </pre> 144 <div id="eventdump"></div> 145 146 <div id="container"><div id="scrollarea" style="overflow:auto;"><input></div></div> 147 <div id="container2"><div style="height: 1px;"><p>foo</p></div></div> 148 </body> 149 </html>