The Tor Browser / file comparison
comparison: browser/devtools/markupview/test/browser_markupview_mutation_01.js
browser/devtools/markupview/test/browser_markupview_mutation_01.js
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:54b06f91fd8e |
|---|---|
| 1 /* vim: set ts=2 et sw=2 tw=80: */ | |
| 2 /* Any copyright is dedicated to the Public Domain. | |
| 3 http://creativecommons.org/publicdomain/zero/1.0/ */ | |
| 4 | |
| 5 "use strict"; | |
| 6 | |
| 7 // Tests that various mutations to the dom update the markup view correctly. | |
| 8 // The test for comparing the markup view to the real dom is a bit weird: | |
| 9 // - Select the text in the markup view | |
| 10 // - Parse that as innerHTML in a document we've created for the purpose. | |
| 11 // - Remove extraneous whitespace in that tree | |
| 12 // - Compare it to the real dom with isEqualNode. | |
| 13 | |
| 14 const TEST_URL = TEST_URL_ROOT + "doc_markup_mutation.html"; | |
| 15 // All the mutation types we want to test. | |
| 16 const TEST_DATA = [ | |
| 17 { | |
| 18 desc: "Adding an attribute", | |
| 19 test: () => { | |
| 20 let node1 = getNode("#node1"); | |
| 21 node1.setAttribute("newattr", "newattrval"); | |
| 22 } | |
| 23 }, | |
| 24 { | |
| 25 desc: "Removing an attribute", | |
| 26 test: () => { | |
| 27 let node1 = getNode("#node1"); | |
| 28 node1.removeAttribute("newattr"); | |
| 29 } | |
| 30 }, | |
| 31 { | |
| 32 desc: "Updating the text-content", | |
| 33 test: () => { | |
| 34 let node1 = getNode("#node1"); | |
| 35 node1.textContent = "newtext"; | |
| 36 } | |
| 37 }, | |
| 38 { | |
| 39 desc: "Updating the innerHTML", | |
| 40 test: () => { | |
| 41 let node2 = getNode("#node2"); | |
| 42 node2.innerHTML = "<div><span>foo</span></div>"; | |
| 43 } | |
| 44 }, | |
| 45 { | |
| 46 desc: "Removing child nodes", | |
| 47 test: () => { | |
| 48 let node4 = getNode("#node4"); | |
| 49 while (node4.firstChild) { | |
| 50 node4.removeChild(node4.firstChild); | |
| 51 } | |
| 52 } | |
| 53 }, | |
| 54 { | |
| 55 desc: "Appending a child to a different parent", | |
| 56 test: () => { | |
| 57 let node17 = getNode("#node17"); | |
| 58 let node1 = getNode("#node2"); | |
| 59 node1.appendChild(node17); | |
| 60 } | |
| 61 }, | |
| 62 { | |
| 63 desc: "Swapping a parent and child element, putting them in the same tree", | |
| 64 // body | |
| 65 // node1 | |
| 66 // node18 | |
| 67 // node19 | |
| 68 // node20 | |
| 69 // node21 | |
| 70 // will become: | |
| 71 // body | |
| 72 // node1 | |
| 73 // node20 | |
| 74 // node21 | |
| 75 // node18 | |
| 76 // node19 | |
| 77 test: () => { | |
| 78 let node18 = getNode("#node18"); | |
| 79 let node20 = getNode("#node20"); | |
| 80 | |
| 81 let node1 = getNode("#node1"); | |
| 82 | |
| 83 node1.appendChild(node20); | |
| 84 node20.appendChild(node18); | |
| 85 } | |
| 86 } | |
| 87 ]; | |
| 88 | |
| 89 let test = asyncTest(function*() { | |
| 90 info("Creating the helper tab for parsing"); | |
| 91 let parseTab = yield addTab("data:text/html,<html></html>"); | |
| 92 let parseDoc = content.document; | |
| 93 | |
| 94 info("Creating the test tab"); | |
| 95 let contentTab = yield addTab(TEST_URL); | |
| 96 let doc = content.document; | |
| 97 // Strip whitespace in the document for easier comparison | |
| 98 stripWhitespace(doc.documentElement); | |
| 99 | |
| 100 let {inspector} = yield openInspector(); | |
| 101 let markup = inspector.markup; | |
| 102 | |
| 103 info("Expanding all markup-view nodes"); | |
| 104 yield markup.expandAll(); | |
| 105 | |
| 106 for (let step of TEST_DATA) { | |
| 107 info("Starting test: " + step.desc); | |
| 108 | |
| 109 info("Executing the test markup mutation, listening for inspector-updated before moving on"); | |
| 110 let updated = inspector.once("inspector-updated"); | |
| 111 step.test(); | |
| 112 yield updated; | |
| 113 | |
| 114 info("Expanding all markup-view nodes to make sure new nodes are imported"); | |
| 115 yield markup.expandAll(); | |
| 116 | |
| 117 info("Comparing the markup-view markup with the content document"); | |
| 118 compareMarkup(parseDoc, inspector); | |
| 119 } | |
| 120 }); | |
| 121 | |
| 122 function stripWhitespace(node) { | |
| 123 node.normalize(); | |
| 124 let iter = node.ownerDocument.createNodeIterator(node, | |
| 125 NodeFilter.SHOW_TEXT + NodeFilter.SHOW_COMMENT, null); | |
| 126 | |
| 127 while ((node = iter.nextNode())) { | |
| 128 node.nodeValue = node.nodeValue.replace(/\s+/g, ''); | |
| 129 if (node.nodeType == Node.TEXT_NODE && | |
| 130 !/[^\s]/.exec(node.nodeValue)) { | |
| 131 node.parentNode.removeChild(node); | |
| 132 } | |
| 133 } | |
| 134 } | |
| 135 | |
| 136 function compareMarkup(parseDoc, inspector) { | |
| 137 // Grab the text from the markup panel... | |
| 138 let markupContainerEl = getContainerForRawNode("body", inspector).elt; | |
| 139 let sel = markupContainerEl.ownerDocument.defaultView.getSelection(); | |
| 140 sel.selectAllChildren(markupContainerEl); | |
| 141 | |
| 142 // Parse it | |
| 143 let parseNode = parseDoc.querySelector("body"); | |
| 144 parseNode.outerHTML = sel; | |
| 145 parseNode = parseDoc.querySelector("body"); | |
| 146 | |
| 147 // Pull whitespace out of text and comment nodes, there will | |
| 148 // be minor unimportant differences. | |
| 149 stripWhitespace(parseNode); | |
| 150 | |
| 151 // console.log(contentNode.innerHTML, parseNode.innerHTML); | |
| 152 ok(getNode("body").isEqualNode(parseNode), | |
| 153 "Markup panel matches what's in the content document."); | |
| 154 } |
