test_inspector-mutations-attr.html (5768B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id= 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug </title> 9 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 11 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 12 <script type="application/javascript" src="inspector-helpers.js"></script> 13 <script type="application/javascript"> 14 "use strict"; 15 16 window.onload = function() { 17 SimpleTest.waitForExplicitFinish(); 18 runNextTest(); 19 }; 20 21 let gInspectee = null; 22 let gWalker = null; 23 let attrNode; 24 let attrFront; 25 26 addTest(async function setup() { 27 const url = document.getElementById("inspectorContent").href; 28 const { target, doc } = await attachURL(url); 29 const inspector = await target.getFront("inspector"); 30 gInspectee = doc; 31 gWalker = inspector.walker; 32 runNextTest(); 33 }); 34 35 addTest(setupAttrTest); 36 addTest(testAddAttribute); 37 addTest(testChangeAttribute); 38 addTest(testRemoveAttribute); 39 addTest(testQueuedMutations); 40 addTest(setupFrameAttrTest); 41 addTest(testAddAttribute); 42 addTest(testChangeAttribute); 43 addTest(testRemoveAttribute); 44 addTest(testQueuedMutations); 45 46 function setupAttrTest() { 47 attrNode = gInspectee.querySelector("#a"); 48 promiseDone(gWalker.querySelector(gWalker.rootNode, "#a").then(node => { 49 attrFront = node; 50 }).then(runNextTest)); 51 } 52 53 function setupFrameAttrTest() { 54 const frame = gInspectee.querySelector("#childFrame"); 55 attrNode = frame.contentDocument.querySelector("#a"); 56 57 promiseDone(gWalker.querySelector(gWalker.rootNode, "#childFrame").then(childFrame => { 58 return childFrame.walkerFront.children(childFrame); 59 }).then(children => { 60 const nodes = children.nodes; 61 is(nodes.length, 1, "There should be only one child of the iframe"); 62 const [iframeNode] = nodes; 63 is(iframeNode.nodeType, Node.DOCUMENT_NODE, "iframe child should be a document node"); 64 return iframeNode.walkerFront.querySelector(iframeNode, "#a"); 65 }).then(node => { 66 attrFront = node; 67 }).then(runNextTest)); 68 } 69 70 function testAddAttribute() { 71 attrNode.setAttribute("data-newattr", "newvalue"); 72 attrNode.setAttribute("data-newattr2", "newvalue"); 73 attrFront.walkerFront.once("mutations", () => { 74 is(attrFront.attributes.length, 3, "Should have id and two new attributes."); 75 is(attrFront.getAttribute("data-newattr"), "newvalue", 76 "Node front should have the first new attribute"); 77 is(attrFront.getAttribute("data-newattr2"), "newvalue", 78 "Node front should have the second new attribute."); 79 runNextTest(); 80 }); 81 } 82 83 function testChangeAttribute() { 84 attrNode.setAttribute("data-newattr", "changedvalue1"); 85 attrNode.setAttribute("data-newattr", "changedvalue2"); 86 attrNode.setAttribute("data-newattr", "changedvalue3"); 87 attrFront.walkerFront.once("mutations", mutations => { 88 is(mutations.length, 1, 89 "Only one mutation is sent for multiple queued attribute changes"); 90 is(attrFront.attributes.length, 3, "Should have id and two new attributes."); 91 is(attrFront.getAttribute("data-newattr"), "changedvalue3", 92 "Node front should have the changed first value"); 93 is(attrFront.getAttribute("data-newattr2"), "newvalue", 94 "Second value should remain unchanged."); 95 runNextTest(); 96 }); 97 } 98 99 function testRemoveAttribute() { 100 attrNode.removeAttribute("data-newattr2"); 101 attrFront.walkerFront.once("mutations", () => { 102 is(attrFront.attributes.length, 2, "Should have id and one remaining attribute."); 103 is(attrFront.getAttribute("data-newattr"), "changedvalue3", 104 "Node front should still have the first value"); 105 ok(!attrFront.hasAttribute("data-newattr2"), "Second value should be removed."); 106 runNextTest(); 107 }); 108 } 109 110 function testQueuedMutations() { 111 // All modifications to each attribute should be queued in one mutation event. 112 113 attrNode.removeAttribute("data-newattr"); 114 attrNode.setAttribute("data-newattr", "1"); 115 attrNode.removeAttribute("data-newattr"); 116 attrNode.setAttribute("data-newattr", "2"); 117 attrNode.removeAttribute("data-newattr"); 118 119 for (let i = 0; i <= 1000; i++) { 120 attrNode.setAttribute("data-newattr2", i); 121 } 122 123 attrNode.removeAttribute("data-newattr3"); 124 attrNode.setAttribute("data-newattr3", "1"); 125 attrNode.removeAttribute("data-newattr3"); 126 attrNode.setAttribute("data-newattr3", "2"); 127 attrNode.removeAttribute("data-newattr3"); 128 attrNode.setAttribute("data-newattr3", "3"); 129 130 // This shouldn't be added in the attribute set, since it's a new 131 // attribute that's been added and removed. 132 attrNode.setAttribute("data-newattr4", "4"); 133 attrNode.removeAttribute("data-newattr4"); 134 135 attrFront.walkerFront.once("mutations", mutations => { 136 is(mutations.length, 4, 137 "Only one mutation each is sent for multiple queued attribute changes"); 138 is(attrFront.attributes.length, 3, 139 "Should have id, data-newattr2, and data-newattr3."); 140 141 is(attrFront.getAttribute("data-newattr2"), "1000", 142 "Node front should still have the correct value"); 143 is(attrFront.getAttribute("data-newattr3"), "3", 144 "Node front should still have the correct value"); 145 ok(!attrFront.hasAttribute("data-newattr"), "Attribute value should be removed."); 146 ok(!attrFront.hasAttribute("data-newattr4"), "Attribute value should be removed."); 147 148 runNextTest(); 149 }); 150 } 151 152 addTest(function cleanup() { 153 gInspectee = null; 154 gWalker = null; 155 runNextTest(); 156 }); 157 </script> 158 </head> 159 <body> 160 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> 161 <a id="inspectorContent" target="_blank" href="inspector-traversal-data.html">Test Document</a> 162 <p id="display"></p> 163 <div id="content" style="display: none"> 164 165 </div> 166 <pre id="test"> 167 </pre> 168 </body> 169 </html>