test_optgroup.html (3474B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Add and remove optgroup test</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="../role.js"></script> 14 <script type="application/javascript" 15 src="../events.js"></script> 16 17 <script type="application/javascript"> 18 19 function addOptGroup(aID) { 20 this.selectNode = getNode(aID); 21 this.select = getAccessible(this.selectNode); 22 this.selectList = this.select.firstChild; 23 24 this.invoke = function addOptGroup_invoke() { 25 var optGroup = document.createElement("optgroup"); 26 for (let i = 0; i < 2; i++) { 27 var opt = document.createElement("option"); 28 opt.value = i; 29 opt.text = "Option: Value " + i; 30 31 optGroup.appendChild(opt); 32 } 33 34 this.selectNode.add(optGroup, null); 35 var option = document.createElement("option"); 36 this.selectNode.add(option, null); 37 }; 38 39 this.eventSeq = [ 40 new invokerChecker(EVENT_REORDER, this.selectList), 41 ]; 42 43 this.finalCheck = function addOptGroup_finalCheck() { 44 var tree = 45 { COMBOBOX: [ 46 { COMBOBOX_LIST: [ 47 { GROUPING: [ 48 { COMBOBOX_OPTION: [ ] }, 49 { COMBOBOX_OPTION: [ ] }, 50 ]}, 51 { COMBOBOX_OPTION: [] }, 52 ] }, 53 ] }; 54 testAccessibleTree(this.select, tree); 55 }; 56 57 this.getID = function addOptGroup_getID() { 58 return "test optgroup's insertion into a select"; 59 }; 60 } 61 62 function removeOptGroup(aID) { 63 this.selectNode = getNode(aID); 64 this.select = getAccessible(this.selectNode); 65 this.selectList = this.select.firstChild; 66 67 this.invoke = function removeOptGroup_invoke() { 68 this.option1Node = this.selectNode.firstChild.firstChild; 69 this.selectNode.firstChild.remove(); 70 }; 71 72 this.eventSeq = [ 73 new invokerChecker(EVENT_REORDER, this.selectList), 74 ]; 75 76 this.finalCheck = function removeOptGroup_finalCheck() { 77 var tree = 78 { COMBOBOX: [ 79 { COMBOBOX_LIST: [ 80 { COMBOBOX_OPTION: [] }, 81 ] }, 82 ] }; 83 testAccessibleTree(this.select, tree); 84 is(isAccessible(this.option1Node), false, "removed option shouldn't be accessible anymore!"); 85 }; 86 87 this.getID = function removeOptGroup_getID() { 88 return "test optgroup's removal from a select"; 89 }; 90 } 91 92 // gA11yEventDumpToConsole = true; 93 94 function doTest() { 95 const gQueue = new eventQueue(); 96 97 gQueue.push(new addOptGroup("select")); 98 gQueue.push(new removeOptGroup("select")); 99 100 gQueue.invoke(); // Will call SimpleTest.finish(); 101 } 102 103 SimpleTest.waitForExplicitFinish(); 104 addA11yLoadEvent(doTest); 105 </script> 106 </head> 107 <body> 108 109 <a target="_blank" 110 href="https://bugzilla.mozilla.org/show_bug.cgi?id=616452" 111 title="Bug 616452 - Dynamically inserted select options aren't reflected in accessible tree"> 112 Bug 616452</a> 113 <p id="display"></p> 114 <div id="content" style="display: none"></div> 115 <pre id="test"> 116 </pre> 117 118 <select id="select"></select> 119 120 <div id="debug"/> 121 </body> 122 </html>