1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/markupview/test/browser_markupview_mutation_01.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,154 @@
1.4 +/* vim: set ts=2 et sw=2 tw=80: */
1.5 +/* Any copyright is dedicated to the Public Domain.
1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +// Tests that various mutations to the dom update the markup view correctly.
1.11 +// The test for comparing the markup view to the real dom is a bit weird:
1.12 +// - Select the text in the markup view
1.13 +// - Parse that as innerHTML in a document we've created for the purpose.
1.14 +// - Remove extraneous whitespace in that tree
1.15 +// - Compare it to the real dom with isEqualNode.
1.16 +
1.17 +const TEST_URL = TEST_URL_ROOT + "doc_markup_mutation.html";
1.18 +// All the mutation types we want to test.
1.19 +const TEST_DATA = [
1.20 + {
1.21 + desc: "Adding an attribute",
1.22 + test: () => {
1.23 + let node1 = getNode("#node1");
1.24 + node1.setAttribute("newattr", "newattrval");
1.25 + }
1.26 + },
1.27 + {
1.28 + desc: "Removing an attribute",
1.29 + test: () => {
1.30 + let node1 = getNode("#node1");
1.31 + node1.removeAttribute("newattr");
1.32 + }
1.33 + },
1.34 + {
1.35 + desc: "Updating the text-content",
1.36 + test: () => {
1.37 + let node1 = getNode("#node1");
1.38 + node1.textContent = "newtext";
1.39 + }
1.40 + },
1.41 + {
1.42 + desc: "Updating the innerHTML",
1.43 + test: () => {
1.44 + let node2 = getNode("#node2");
1.45 + node2.innerHTML = "<div><span>foo</span></div>";
1.46 + }
1.47 + },
1.48 + {
1.49 + desc: "Removing child nodes",
1.50 + test: () => {
1.51 + let node4 = getNode("#node4");
1.52 + while (node4.firstChild) {
1.53 + node4.removeChild(node4.firstChild);
1.54 + }
1.55 + }
1.56 + },
1.57 + {
1.58 + desc: "Appending a child to a different parent",
1.59 + test: () => {
1.60 + let node17 = getNode("#node17");
1.61 + let node1 = getNode("#node2");
1.62 + node1.appendChild(node17);
1.63 + }
1.64 + },
1.65 + {
1.66 + desc: "Swapping a parent and child element, putting them in the same tree",
1.67 + // body
1.68 + // node1
1.69 + // node18
1.70 + // node19
1.71 + // node20
1.72 + // node21
1.73 + // will become:
1.74 + // body
1.75 + // node1
1.76 + // node20
1.77 + // node21
1.78 + // node18
1.79 + // node19
1.80 + test: () => {
1.81 + let node18 = getNode("#node18");
1.82 + let node20 = getNode("#node20");
1.83 +
1.84 + let node1 = getNode("#node1");
1.85 +
1.86 + node1.appendChild(node20);
1.87 + node20.appendChild(node18);
1.88 + }
1.89 + }
1.90 +];
1.91 +
1.92 +let test = asyncTest(function*() {
1.93 + info("Creating the helper tab for parsing");
1.94 + let parseTab = yield addTab("data:text/html,<html></html>");
1.95 + let parseDoc = content.document;
1.96 +
1.97 + info("Creating the test tab");
1.98 + let contentTab = yield addTab(TEST_URL);
1.99 + let doc = content.document;
1.100 + // Strip whitespace in the document for easier comparison
1.101 + stripWhitespace(doc.documentElement);
1.102 +
1.103 + let {inspector} = yield openInspector();
1.104 + let markup = inspector.markup;
1.105 +
1.106 + info("Expanding all markup-view nodes");
1.107 + yield markup.expandAll();
1.108 +
1.109 + for (let step of TEST_DATA) {
1.110 + info("Starting test: " + step.desc);
1.111 +
1.112 + info("Executing the test markup mutation, listening for inspector-updated before moving on");
1.113 + let updated = inspector.once("inspector-updated");
1.114 + step.test();
1.115 + yield updated;
1.116 +
1.117 + info("Expanding all markup-view nodes to make sure new nodes are imported");
1.118 + yield markup.expandAll();
1.119 +
1.120 + info("Comparing the markup-view markup with the content document");
1.121 + compareMarkup(parseDoc, inspector);
1.122 + }
1.123 +});
1.124 +
1.125 +function stripWhitespace(node) {
1.126 + node.normalize();
1.127 + let iter = node.ownerDocument.createNodeIterator(node,
1.128 + NodeFilter.SHOW_TEXT + NodeFilter.SHOW_COMMENT, null);
1.129 +
1.130 + while ((node = iter.nextNode())) {
1.131 + node.nodeValue = node.nodeValue.replace(/\s+/g, '');
1.132 + if (node.nodeType == Node.TEXT_NODE &&
1.133 + !/[^\s]/.exec(node.nodeValue)) {
1.134 + node.parentNode.removeChild(node);
1.135 + }
1.136 + }
1.137 +}
1.138 +
1.139 +function compareMarkup(parseDoc, inspector) {
1.140 + // Grab the text from the markup panel...
1.141 + let markupContainerEl = getContainerForRawNode("body", inspector).elt;
1.142 + let sel = markupContainerEl.ownerDocument.defaultView.getSelection();
1.143 + sel.selectAllChildren(markupContainerEl);
1.144 +
1.145 + // Parse it
1.146 + let parseNode = parseDoc.querySelector("body");
1.147 + parseNode.outerHTML = sel;
1.148 + parseNode = parseDoc.querySelector("body");
1.149 +
1.150 + // Pull whitespace out of text and comment nodes, there will
1.151 + // be minor unimportant differences.
1.152 + stripWhitespace(parseNode);
1.153 +
1.154 + // console.log(contentNode.innerHTML, parseNode.innerHTML);
1.155 + ok(getNode("body").isEqualNode(parseNode),
1.156 + "Markup panel matches what's in the content document.");
1.157 +}
