test_namechange.html (6895B)
1 <html> 2 3 <head> 4 <title>Accessible name change event testing</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 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 11 12 <script type="application/javascript" 13 src="../common.js"></script> 14 <script type="application/javascript" 15 src="../events.js"></script> 16 <script type="application/javascript" 17 src="../role.js"></script> 18 <script type="application/javascript" 19 src="../states.js"></script> 20 21 <script type="application/javascript"> 22 let PromEvents = {}; 23 Services.scriptloader.loadSubScript( 24 "chrome://mochitests/content/a11y/accessible/tests/mochitest/promisified-events.js", 25 PromEvents); 26 27 // ////////////////////////////////////////////////////////////////////////// 28 // Invokers 29 30 function setAttr(aID, aAttr, aValue, aChecker) { 31 this.eventSeq = [ aChecker ]; 32 this.invoke = function setAttr_invoke() { 33 getNode(aID).setAttribute(aAttr, aValue); 34 }; 35 36 this.getID = function setAttr_getID() { 37 return "set attr '" + aAttr + "', value '" + aValue + "'"; 38 }; 39 } 40 41 /** 42 * No name change on an accessible, because the accessible is recreated. 43 */ 44 function setAttr_recreate(aID, aAttr, aValue) { 45 this.eventSeq = [ 46 new invokerChecker(EVENT_HIDE, getAccessible(aID)), 47 new invokerChecker(EVENT_SHOW, aID), 48 ]; 49 this.invoke = function setAttr_recreate_invoke() { 50 todo(false, "No accessible recreation should happen, just name change event"); 51 getNode(aID).setAttribute(aAttr, aValue); 52 }; 53 54 this.getID = function setAttr_recreate_getID() { 55 return "set attr '" + aAttr + "', value '" + aValue + "'"; 56 }; 57 } 58 59 // ////////////////////////////////////////////////////////////////////////// 60 // Do tests 61 62 // gA11yEventDumpToConsole = true; // debuggin 63 64 var gQueue = null; 65 async function doTests() { 66 gQueue = new eventQueue(); 67 // Later tests use await. 68 let queueFinished = new Promise(resolve => { 69 gQueue.onFinish = function() { 70 resolve(); 71 return DO_NOT_FINISH_TEST; 72 }; 73 }); 74 75 gQueue.push(new setAttr("tst1", "aria-label", "hi", 76 new invokerChecker(EVENT_NAME_CHANGE, "tst1"))); 77 gQueue.push(new setAttr("tst1", "alt", "alt", 78 new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst1"))); 79 gQueue.push(new setAttr("tst1", "title", "title", 80 new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst1"))); 81 gQueue.push(new setAttr("tst1", "aria-labelledby", "display", 82 new invokerChecker(EVENT_NAME_CHANGE, "tst1"))); 83 84 gQueue.push(new setAttr("tst2", "aria-labelledby", "display", 85 new invokerChecker(EVENT_NAME_CHANGE, "tst2"))); 86 gQueue.push(new setAttr("tst2", "alt", "alt", 87 new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst2"))); 88 gQueue.push(new setAttr("tst2", "title", "title", 89 new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst2"))); 90 gQueue.push(new setAttr("tst2", "aria-label", "hi", 91 new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst2"))); 92 93 // When `alt` attribute is added or removed from a broken img, 94 // the accessible is recreated. 95 gQueue.push(new setAttr_recreate("tst3", "alt", "one")); 96 // When an `alt` attribute is changed, there is a name change event. 97 gQueue.push(new setAttr("tst3", "alt", "two", 98 new invokerChecker(EVENT_NAME_CHANGE, "tst3"))); 99 gQueue.push(new setAttr("tst3", "title", "title", 100 new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst3"))); 101 102 gQueue.push(new setAttr("tst4", "title", "title", 103 new invokerChecker(EVENT_NAME_CHANGE, "tst4"))); 104 105 gQueue.invoke(); 106 await queueFinished; 107 // Tests beyond this point use await rather than eventQueue. 108 109 const labelledBy = getNode("labelledBy"); 110 const label = getNode("label"); 111 let nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, labelledBy); 112 info("Changing text of aria-labelledby target"); 113 label.textContent = "l2"; 114 await nameChanged; 115 nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, labelledBy); 116 info("Adding node to aria-labelledby target"); 117 label.innerHTML = '<p id="labelChild">l3</p>'; 118 await nameChanged; 119 nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, labelledBy); 120 info("Changing text of aria-labelledby target's child"); 121 getNode("labelChild").textContent = "l4"; 122 await nameChanged; 123 124 const lateLabelledBy = getNode("lateLabelledBy"); 125 nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, lateLabelledBy); 126 info("Setting aria-labelledby"); 127 lateLabelledBy.setAttribute("aria-labelledby", "lateLabel"); 128 await nameChanged; 129 nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, lateLabelledBy); 130 info("Changing text of late aria-labelledby target's child"); 131 getNode("lateLabelChild").textContent = "l2"; 132 await nameChanged; 133 134 nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, "listitem"); 135 info("Changing textContent of listitem child"); 136 // Changing textContent replaces the text leaf with a new one. 137 getNode("listitem").textContent = "world"; 138 await nameChanged; 139 140 nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, "button"); 141 info("Changing text of button's text leaf"); 142 // Changing the text node's data changes the text without replacing the 143 // leaf. 144 getNode("button").firstChild.data = "after"; 145 await nameChanged; 146 147 SimpleTest.finish(); 148 } 149 150 SimpleTest.waitForExplicitFinish(); 151 addA11yLoadEvent(doTests); 152 </script> 153 </head> 154 155 <body> 156 157 <a target="_blank" 158 href="https://bugzilla.mozilla.org/show_bug.cgi?id=991969" 159 title="Event not fired when description changes"> 160 Bug 991969 161 </a> 162 163 <p id="display"></p> 164 <div id="content" style="display: none"></div> 165 <pre id="test"> 166 </pre> 167 168 <img id="tst1" alt="initial" src="../moz.png"> 169 <img id="tst2" src="../moz.png"> 170 <img id="tst3"> 171 <img id="tst4" src="../moz.png"> 172 173 <div id="labelledBy" aria-labelledby="label"></div> 174 <div id="label">l1</div> 175 176 <div id="lateLabelledBy"></div> 177 <div id="lateLabel"><p id="lateLabelChild">l1</p></div> 178 179 <ul><li id="listitem">hello</li></ul> 180 181 <button id="button">before</button> 182 183 <div id="eventdump"></div> 184 </body> 185 </html>