browser/devtools/markupview/test/browser_markupview_mutation_01.js@6474c204b198
browser/devtools/markupview/test/browser_markupview_mutation_01.js
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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/ */
5 "use strict";
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.
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");
81 let node1 = getNode("#node1");
83 node1.appendChild(node20);
84 node20.appendChild(node18);
85 }
86 }
87 ];
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;
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);
100 let {inspector} = yield openInspector();
101 let markup = inspector.markup;
103 info("Expanding all markup-view nodes");
104 yield markup.expandAll();
106 for (let step of TEST_DATA) {
107 info("Starting test: " + step.desc);
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;
114 info("Expanding all markup-view nodes to make sure new nodes are imported");
115 yield markup.expandAll();
117 info("Comparing the markup-view markup with the content document");
118 compareMarkup(parseDoc, inspector);
119 }
120 });
122 function stripWhitespace(node) {
123 node.normalize();
124 let iter = node.ownerDocument.createNodeIterator(node,
125 NodeFilter.SHOW_TEXT + NodeFilter.SHOW_COMMENT, null);
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 }
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);
142 // Parse it
143 let parseNode = parseDoc.querySelector("body");
144 parseNode.outerHTML = sel;
145 parseNode = parseDoc.querySelector("body");
147 // Pull whitespace out of text and comment nodes, there will
148 // be minor unimportant differences.
149 stripWhitespace(parseNode);
151 // console.log(contentNode.innerHTML, parseNode.innerHTML);
152 ok(getNode("body").isEqualNode(parseNode),
153 "Markup panel matches what's in the content document.");
154 }
