test_whitespace.html (5834B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>Whitespace text accessible creation/destruction</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 12 <script type="application/javascript" 13 src="../common.js"></script> 14 <script type="application/javascript" 15 src="../role.js"></script> 16 <script type="application/javascript" 17 src="../events.js"></script> 18 19 <script type="application/javascript"> 20 21 // ////////////////////////////////////////////////////////////////////////// 22 // Invokers 23 24 /** 25 * Middle image accessible removal results in text accessible removal. 26 * 27 * Before: 28 * DOM: whitespace img1 whitespace img2 whitespace img3 whitespace, 29 * a11y: img1 whitespace img2 whitespace img3 30 * After: 31 * DOM: whitespace img1 whitespace whitespace img3 whitespace, 32 * a11y: img1 whitespace img3 33 */ 34 function removeImg() { 35 this.containerNode = getNode("container1"); 36 this.imgNode = getNode("img1"); 37 this.img = getAccessible(this.imgNode); 38 this.text = this.img.nextSibling; 39 40 this.eventSeq = [ 41 new invokerChecker(EVENT_HIDE, this.img), 42 new invokerChecker(EVENT_HIDE, this.text), 43 new invokerChecker(EVENT_REORDER, this.containerNode), 44 ]; 45 46 this.finalCheck = function textLeafUpdate_finalCheck() { 47 var tree = 48 { SECTION: [ 49 { GRAPHIC: [] }, 50 { TEXT_LEAF: [] }, 51 { GRAPHIC: [] }, 52 ] }; 53 54 testAccessibleTree(this.containerNode, tree); 55 }; 56 57 this.invoke = function setOnClickAttr_invoke() { 58 var tree = 59 { SECTION: [ 60 { GRAPHIC: [] }, 61 { TEXT_LEAF: [] }, 62 { GRAPHIC: [] }, 63 { TEXT_LEAF: [] }, 64 { GRAPHIC: [] }, 65 ] }; 66 67 testAccessibleTree(this.containerNode, tree); 68 69 this.containerNode.removeChild(this.imgNode); 70 }; 71 72 this.getID = function setOnClickAttr_getID() { 73 return "remove middle img"; 74 }; 75 } 76 77 /** 78 * Append image making the whitespace visible and thus accessible. 79 * Note: images and whitespaces are on different leves of accessible trees, 80 * so that image container accessible update doesn't update the tree 81 * of whitespace container. 82 * 83 * Before: 84 * DOM: whitespace emptylink whitespace linkwithimg whitespace 85 * a11y: emptylink linkwithimg 86 * After: 87 * DOM: whitespace linkwithimg whitespace linkwithimg whitespace 88 * a11y: linkwithimg whitespace linkwithimg 89 */ 90 function insertImg() { 91 this.containerNode = getNode("container2"); 92 this.topNode = this.containerNode.parentNode; 93 this.textNode = this.containerNode.nextSibling; 94 this.imgNode = document.createElement("img"); 95 this.imgNode.setAttribute("src", "../moz.png"); 96 97 this.eventSeq = [ 98 new asyncInvokerChecker(EVENT_SHOW, getAccessible, this.textNode), 99 new asyncInvokerChecker(EVENT_SHOW, getAccessible, this.imgNode), 100 new orderChecker(), 101 new invokerChecker(EVENT_REORDER, this.topNode), 102 ]; 103 104 this.invoke = function insertImg_invoke() { 105 var tree = 106 { SECTION: [ 107 { LINK: [] }, 108 { LINK: [ 109 { GRAPHIC: [] }, 110 ] }, 111 ] }; 112 113 testAccessibleTree(this.topNode, tree); 114 115 this.containerNode.appendChild(this.imgNode); 116 }; 117 118 this.finalCheck = function insertImg_finalCheck() { 119 var tree = 120 { SECTION: [ 121 { LINK: [ 122 { GRAPHIC: [ ] }, 123 ] }, 124 { TEXT_LEAF: [ ] }, 125 { LINK: [ 126 { GRAPHIC: [ ] }, 127 ] }, 128 ] }; 129 130 testAccessibleTree(this.topNode, tree); 131 }; 132 133 this.getID = function appendImg_getID() { 134 return "insert img into internal container"; 135 }; 136 } 137 138 function dontCreateMapWhiteSpace() { 139 const tree = { SECTION: [ { role: ROLE_TEXT_LEAF, name: "x" } ] }; 140 testAccessibleTree("container3", tree); 141 142 getNode("c3_inner").style.textAlign = "center"; 143 document.body.offsetTop; // Flush layout. 144 window.windowUtils.advanceTimeAndRefresh(100); 145 146 testAccessibleTree("container3", tree); 147 window.windowUtils.restoreNormalRefresh(); 148 } 149 150 // ////////////////////////////////////////////////////////////////////////// 151 // Test 152 153 // gA11yEventDumpID = "eventdump"; // debug stuff 154 // gA11yEventDumpToConsole = true; 155 156 var gQueue = null; 157 158 function doTest() { 159 dontCreateMapWhiteSpace(); 160 161 gQueue = new eventQueue(); 162 163 gQueue.push(new removeImg()); 164 gQueue.push(new insertImg()); 165 166 gQueue.invoke(); // SimpleTest.finish() will be called in the end 167 } 168 169 SimpleTest.waitForExplicitFinish(); 170 addA11yLoadEvent(doTest); 171 </script> 172 </head> 173 <body> 174 175 <a target="_blank" 176 title="Make sure accessible tree is correct when rendered text is changed" 177 href="https://bugzilla.mozilla.org/show_bug.cgi?id=625652"> 178 Mozilla Bug 625652 179 </a> 180 181 <p id="display"></p> 182 <div id="content" style="display: none"></div> 183 <pre id="test"> 184 </pre> 185 186 <!-- Whitespace between the div and img tags will be inconsistent depending 187 on the image cache state and what optimizations layout was able to 188 apply. --> 189 <div id="container1"><img src="../moz.png"> <img id="img1" src="../moz.png"> <img src="../moz.png"></div> 190 <div><a id="container2" href=""></a> <a href=""><img src="../moz.png"></a></div> 191 192 <div id="container3"> 193 <div id="c3_inner" role="presentation"> 194 x<map> </map> 195 </div> 196 </div> 197 198 <div id="eventdump"></div> 199 </body> 200 </html>