test_gencontent.html (5820B)
1 <html> 2 3 <head> 4 <title>Elements with CSS generated content</title> 5 6 <link rel="stylesheet" type="text/css" 7 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 8 9 <style> 10 .gentext:before { 11 content: "START" 12 } 13 .gentext:after { 14 content: "END" 15 } 16 </style> 17 18 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 19 20 <script type="application/javascript" 21 src="../common.js"></script> 22 <script type="application/javascript" 23 src="../role.js"></script> 24 <script type="application/javascript" 25 src="../events.js"></script> 26 27 <script type="application/javascript"> 28 29 // ////////////////////////////////////////////////////////////////////////// 30 // Invokers 31 // ////////////////////////////////////////////////////////////////////////// 32 33 /** 34 * Insert new node with CSS generated content style applied to container. 35 */ 36 function insertNodeHavingGenContent(aContainerID) { 37 this.containerNode = getNode(aContainerID); 38 this.container = getAccessible(this.containerNode); 39 40 this.eventSeq = [ 41 new invokerChecker(EVENT_SHOW, getFirstChild, this.container), 42 new invokerChecker(EVENT_REORDER, this.container), 43 ]; 44 45 this.invoke = function insertNodeHavingGenContent_invoke() { 46 var node = document.createElement("div"); 47 node.textContent = "text"; 48 node.setAttribute("class", "gentext"); 49 this.containerNode.appendChild(node); 50 }; 51 52 this.finalCheck = function insertNodeHavingGenContent_finalCheck() { 53 var accTree = 54 { SECTION: [ // container 55 { SECTION: [ // inserted node 56 { STATICTEXT: [] }, // :before 57 { TEXT_LEAF: [] }, // primary text 58 { STATICTEXT: [] }, // :after 59 ] }, 60 ] }; 61 testAccessibleTree(this.container, accTree); 62 }; 63 64 this.getID = function insertNodeHavingGenContent_getID() { 65 return "insert node having generated content to " + prettyName(aContainerID); 66 }; 67 } 68 69 /** 70 * Add CSS generated content to the given node contained by container node. 71 */ 72 function addGenContent(aContainerID, aNodeID) { 73 this.container = getAccessible(aContainerID); 74 this.nodeAcc = getAccessible(aNodeID); 75 this.node = getNode(aNodeID); 76 77 this.eventSeq = [ 78 new invokerChecker(EVENT_SHOW, getFirstChild, this.nodeAcc), 79 new invokerChecker(EVENT_SHOW, getLastChild, this.nodeAcc), 80 new invokerChecker(EVENT_REORDER, this.nodeAcc), 81 ]; 82 83 this.invoke = function addGenContent_invoke() { 84 this.node.classList.add("gentext"); 85 }; 86 87 this.finalCheck = function insertNodeHavingGenContent_finalCheck() { 88 var accTree = 89 { SECTION: [ // container 90 { SECTION: [ // inserted node 91 { STATICTEXT: [] }, // :before 92 { TEXT_LEAF: [] }, // primary text 93 { STATICTEXT: [] }, // :after 94 ] }, 95 ] }; 96 testAccessibleTree(this.container, accTree); 97 }; 98 99 this.getID = function addGenContent_getID() { 100 return "add generated content to" + prettyName(aNodeID); 101 }; 102 } 103 104 /** 105 * Remove CSS generated content from the given node contained by container node. 106 */ 107 function removeGenContent(aContainerID, aNodeID) { 108 this.container = getAccessible(aContainerID); 109 this.nodeAcc = getAccessible(aNodeID); 110 this.node = getNode(aNodeID); 111 112 this.eventSeq = [ 113 new invokerChecker(EVENT_HIDE, this.nodeAcc.firstChild), 114 new invokerChecker(EVENT_HIDE, this.nodeAcc.lastChild), 115 new invokerChecker(EVENT_REORDER, this.nodeAcc), 116 ]; 117 118 this.invoke = function removeGenContent_invoke() { 119 this.node.classList.remove("gentext"); 120 }; 121 122 this.finalCheck = function removeGenContent_finalCheck() { 123 var accTree = 124 { SECTION: [ // container 125 { SECTION: [ // inserted node 126 { TEXT_LEAF: [] }, // primary text 127 ] }, 128 ] }; 129 testAccessibleTree(this.container, accTree); 130 }; 131 132 this.getID = function addGenContent_getID() { 133 return "remove generated content from" + prettyName(aNodeID); 134 }; 135 } 136 /** 137 * Target getters. 138 */ 139 function getFirstChild(aAcc) { 140 try { return aAcc.firstChild; } catch (e) { return null; } 141 } 142 143 function getLastChild(aAcc) { 144 try { return aAcc.lastChild; } catch (e) { return null; } 145 } 146 147 // ////////////////////////////////////////////////////////////////////////// 148 // Do tests 149 // ////////////////////////////////////////////////////////////////////////// 150 151 var gQueue = null; 152 // gA11yEventDumpID = "eventdump"; // debug stuff 153 // gA11yEventDumpToConsole = true; 154 155 function doTests() { 156 gQueue = new eventQueue(); 157 158 gQueue.push(new insertNodeHavingGenContent("container1")); 159 gQueue.push(new addGenContent("container2", "container2_child")); 160 gQueue.push(new removeGenContent("container3", "container3_child")); 161 162 gQueue.invoke(); // Will call SimpleTest.finish(); 163 } 164 165 SimpleTest.waitForExplicitFinish(); 166 addA11yLoadEvent(doTests); 167 </script> 168 </head> 169 170 <body> 171 172 <a target="_blank" 173 href="https://bugzilla.mozilla.org/show_bug.cgi?id=646350" 174 title="Add a test for dynamic chnages of CSS generated content"> 175 Mozilla Bug 646350</a> 176 177 <p id="display"></p> 178 <div id="content" style="display: none"></div> 179 <pre id="test"> 180 </pre> 181 <div id="eventdump"></div> 182 183 <div id="container1"></div> 184 <div id="container2"><div id="container2_child">text</div></div> 185 <div id="container3"><div id="container3_child" class="gentext">text</div></div> 186 </body> 187 </html>