test_update.html (8029B)
1 <html> 2 3 <head> 4 <title>Test updating of accessible relations</title> 5 <link rel="stylesheet" type="text/css" 6 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 10 <script type="application/javascript" 11 src="../common.js"></script> 12 <script type="application/javascript" 13 src="../relations.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 function testRelated(aRelAttr, aHostRelation, aDependentRelation, 21 aHostID, aHostNodeID, aDependent1ID, aDependent2ID) { 22 // no attribute 23 testRelation(aDependent1ID, aDependentRelation, null); 24 testRelation(aDependent2ID, aDependentRelation, null); 25 if (aHostRelation) 26 testRelation(aHostID, aHostRelation, null); 27 28 // set attribute 29 getNode(aHostNodeID).setAttribute(aRelAttr, aDependent1ID); 30 testRelation(aDependent1ID, aDependentRelation, aHostID); 31 testRelation(aDependent2ID, aDependentRelation, null); 32 if (aHostRelation) 33 testRelation(aHostID, aHostRelation, aDependent1ID); 34 35 // change attribute 36 getNode(aHostNodeID).setAttribute(aRelAttr, aDependent2ID); 37 testRelation(aDependent1ID, aDependentRelation, null); 38 testRelation(aDependent2ID, aDependentRelation, aHostID); 39 if (aHostRelation) 40 testRelation(aHostID, aHostRelation, aDependent2ID); 41 42 // remove attribute 43 getNode(aHostNodeID).removeAttribute(aRelAttr); 44 testRelation(aDependent1ID, aDependentRelation, null); 45 testRelation(aDependent2ID, aDependentRelation, null); 46 if (aHostRelation) 47 testRelation(aHostID, aHostRelation, null); 48 } 49 50 function insertRelated(aHostRelAttr, aDependentID, aInsertHostFirst, 51 aHostRelation, aDependentRelation) { 52 this.eventSeq = [ 53 new invokerChecker(EVENT_REORDER, document), 54 ]; 55 56 this.invoke = function insertRelated_invoke() { 57 this.hostNode = document.createElement("div"); 58 this.hostNode.setAttribute(aHostRelAttr, aDependentID); 59 60 this.dependentNode = document.createElement("div"); 61 this.dependentNode.setAttribute("id", aDependentID); 62 63 if (aInsertHostFirst) { 64 document.body.appendChild(this.hostNode); 65 document.body.appendChild(this.dependentNode); 66 } else { 67 document.body.appendChild(this.dependentNode); 68 document.body.appendChild(this.hostNode); 69 } 70 }; 71 72 this.finalCheck = function insertRelated_finalCheck() { 73 testRelation(this.dependentNode, aDependentRelation, this.hostNode); 74 if (aHostRelation) 75 testRelation(this.hostNode, aHostRelation, this.dependentNode); 76 }; 77 78 this.getID = function insertRelated_getID() { 79 return "Insert " + aHostRelAttr + "='" + aDependentID + "' node" + 80 (aInsertHostFirst ? " before" : "after") + " dependent node"; 81 }; 82 } 83 84 /** 85 * Relative accessible recreation shouldn't break accessible relations. 86 * Note: modify this case if the invoke function doesn't change accessible 87 * tree due to changes in layout module. It can be changed on any case 88 * when accessibles are recreated. 89 */ 90 function recreateRelatives(aContainerID, aLabelID, aElmID) { 91 this.containerNode = getNode(aContainerID); 92 this.container = getNode(this.containerNode); 93 94 this.eventSeq = [ 95 new invokerChecker(EVENT_HIDE, this.container), 96 new invokerChecker(EVENT_SHOW, this.containerNode), 97 ]; 98 99 this.invoke = function recreateRelatives_invoke() { 100 testRelation(aLabelID, RELATION_LABEL_FOR, aElmID); 101 testRelation(aElmID, RELATION_LABELLED_BY, aLabelID); 102 103 this.containerNode.setAttribute('role', 'group'); 104 }; 105 106 this.finalCheck = function recreateRelatives_finalCheck() { 107 testRelation(aLabelID, RELATION_LABEL_FOR, aElmID); 108 testRelation(aElmID, RELATION_LABELLED_BY, aLabelID); 109 }; 110 111 this.getID = function recreateRelatives_getID() { 112 return "recreate relatives "; 113 }; 114 } 115 116 // gA11yEventDumpToConsole = true; // debug 117 118 var gQueue = null; 119 120 function doTest() { 121 // Relation updates on ARIA attribute changes. 122 testRelated("aria-labelledby", 123 RELATION_LABELLED_BY, RELATION_LABEL_FOR, 124 "host", "host", "dependent1", "dependent2"); 125 126 testRelated("aria-describedby", 127 RELATION_DESCRIBED_BY, RELATION_DESCRIPTION_FOR, 128 "host", "host", "dependent1", "dependent2"); 129 130 testRelated("aria-controls", 131 RELATION_CONTROLLER_FOR, RELATION_CONTROLLED_BY, 132 "host", "host", "dependent1", "dependent2"); 133 134 testRelated("aria-flowto", 135 RELATION_FLOWS_TO, RELATION_FLOWS_FROM, 136 "host", "host", "dependent1", "dependent2"); 137 138 // Document relation updates on ARIA attribute change. 139 testRelated("aria-labelledby", 140 RELATION_LABELLED_BY, RELATION_LABEL_FOR, 141 document, "body", "dependent1", "dependent2"); 142 143 // Insert related accessibles into tree. 144 gQueue = new eventQueue(); 145 gQueue.push(new insertRelated("aria-labelledby", "dependent3", true, 146 RELATION_LABELLED_BY, RELATION_LABEL_FOR)); 147 gQueue.push(new insertRelated("aria-labelledby", "dependent4", false, 148 RELATION_LABELLED_BY, RELATION_LABEL_FOR)); 149 150 gQueue.push(new insertRelated("aria-describedby", "dependent5", true, 151 RELATION_DESCRIBED_BY, 152 RELATION_DESCRIPTION_FOR)); 153 gQueue.push(new insertRelated("aria-describedby", "dependent6", false, 154 RELATION_DESCRIBED_BY, 155 RELATION_DESCRIPTION_FOR)); 156 157 gQueue.push(new insertRelated("aria-controls", "dependent9", true, 158 RELATION_CONTROLLER_FOR, 159 RELATION_CONTROLLED_BY)); 160 gQueue.push(new insertRelated("aria-controls", "dependent10", false, 161 RELATION_CONTROLLER_FOR, 162 RELATION_CONTROLLED_BY)); 163 164 gQueue.push(new insertRelated("aria-flowto", "dependent11", true, 165 RELATION_FLOWS_TO, RELATION_FLOWS_FROM)); 166 gQueue.push(new insertRelated("aria-flowto", "dependent12", false, 167 RELATION_FLOWS_TO, RELATION_FLOWS_FROM)); 168 169 // Update relations when accessibles are recreated 170 gQueue.push(new recreateRelatives("container", "label", "input")); 171 172 gQueue.invoke(); // will call SimpleTest.finish() 173 } 174 175 SimpleTest.waitForExplicitFinish(); 176 addA11yLoadEvent(doTest); 177 </script> 178 179 </head> 180 181 <body id="body"> 182 183 <a target="_blank" 184 href="https://bugzilla.mozilla.org/show_bug.cgi?id=573469" 185 title="Cache relations defined by ARIA attributes"> 186 Mozilla Bug 573469 187 </a> 188 <a target="_blank" 189 href="https://bugzilla.mozilla.org/show_bug.cgi?id=631068" 190 title="Accessible recreation breaks relations"> 191 Mozilla Bug 631068 192 </a> 193 <a target="_blank" 194 href="https://bugzilla.mozilla.org/show_bug.cgi?id=635346" 195 title="Allow relations for document defined on document content"> 196 Mozilla Bug 635346 197 </a> 198 <br> 199 <p id="display"></p> 200 <div id="content" style="display: none"></div> 201 <pre id="test"> 202 </pre> 203 204 <div id="dependent1">label</div> 205 <div id="dependent2">label2</div> 206 <div role="checkbox" id="host"></div> 207 208 <form id="container" style="overflow: hidden;"> 209 <label for="input" id="label">label</label> 210 <input id="input"> 211 </form> 212 </body> 213 </html>