michael@0: /* vim: set ts=2 et sw=2 tw=80: */
michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:  http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: "use strict";
michael@0: 
michael@0: // Test outerHTML edition via the markup-view
michael@0: 
michael@0: loadHelperScript("helper_outerhtml_test_runner.js");
michael@0: 
michael@0: const TEST_DATA = [
michael@0:   {
michael@0:     selector: "#badMarkup1",
michael@0:     oldHTML: '<div id="badMarkup1">badMarkup1</div>',
michael@0:     newHTML: '<div id="badMarkup1">badMarkup1</div> hanging</div>',
michael@0:     validate: function(pageNode, selectedNode) {
michael@0:       is(pageNode, selectedNode, "Original element is selected");
michael@0: 
michael@0:       let textNode = pageNode.nextSibling;
michael@0: 
michael@0:       is(textNode.nodeName, "#text", "Sibling is a text element");
michael@0:       is(textNode.data, " hanging", "New text node has expected text content");
michael@0:     }
michael@0:   },
michael@0:   {
michael@0:     selector: "#badMarkup2",
michael@0:     oldHTML: '<div id="badMarkup2">badMarkup2</div>',
michael@0:     newHTML: '<div id="badMarkup2">badMarkup2</div> hanging<div></div></div></div></body>',
michael@0:     validate: function(pageNode, selectedNode) {
michael@0:       is(pageNode, selectedNode, "Original element is selected");
michael@0: 
michael@0:       let textNode = pageNode.nextSibling;
michael@0: 
michael@0:       is(textNode.nodeName, "#text", "Sibling is a text element");
michael@0:       is(textNode.data, " hanging", "New text node has expected text content");
michael@0:     }
michael@0:   },
michael@0:   {
michael@0:     selector: "#badMarkup3",
michael@0:     oldHTML: '<div id="badMarkup3">badMarkup3</div>',
michael@0:     newHTML: '<div id="badMarkup3">badMarkup3 <em>Emphasized <strong> and strong</div>',
michael@0:     validate: function(pageNode, selectedNode) {
michael@0:       is(pageNode, selectedNode, "Original element is selected");
michael@0: 
michael@0:       let em = getNode("#badMarkup3 em");
michael@0:       let strong = getNode("#badMarkup3 strong");
michael@0: 
michael@0:       is(em.textContent, "Emphasized  and strong", "<em> was auto created");
michael@0:       is(strong.textContent, " and strong", "<strong> was auto created");
michael@0:     }
michael@0:   },
michael@0:   {
michael@0:     selector: "#badMarkup4",
michael@0:     oldHTML: '<div id="badMarkup4">badMarkup4</div>',
michael@0:     newHTML: '<div id="badMarkup4">badMarkup4</p>',
michael@0:     validate: function(pageNode, selectedNode) {
michael@0:       is(pageNode, selectedNode, "Original element is selected");
michael@0: 
michael@0:       let div = getNode("#badMarkup4");
michael@0:       let p = getNode("#badMarkup4 p");
michael@0: 
michael@0:       is(div.textContent, "badMarkup4", "textContent is correct");
michael@0:       is(div.tagName, "DIV", "did not change to <p> tag");
michael@0:       is(p.textContent, "", "The <p> tag has no children");
michael@0:       is(p.tagName, "P", "Created an empty <p> tag");
michael@0:     }
michael@0:   },
michael@0:   {
michael@0:     selector: "#badMarkup5",
michael@0:     oldHTML: '<p id="badMarkup5">badMarkup5</p>',
michael@0:     newHTML: '<p id="badMarkup5">badMarkup5 <div>with a nested div</div></p>',
michael@0:     validate: function(pageNode, selectedNode) {
michael@0:       is(pageNode, selectedNode, "Original element is selected");
michael@0: 
michael@0:       let p = getNode("#badMarkup5");
michael@0:       let nodiv = getNode("#badMarkup5 div");
michael@0:       let div = getNode("#badMarkup5 ~ div");
michael@0: 
michael@0:       ok(!nodiv, "The invalid markup got created as a sibling");
michael@0:       is(p.textContent, "badMarkup5 ", "The <p> tag does not take in the <div> content");
michael@0:       is(p.tagName, "P", "Did not change to a <div> tag");
michael@0:       is(div.textContent, "with a nested div", "textContent is correct");
michael@0:       is(div.tagName, "DIV", "Did not change to <p> tag");
michael@0:     }
michael@0:   }
michael@0: ];
michael@0: 
michael@0: const TEST_URL = "data:text/html," +
michael@0:   "<!DOCTYPE html>" +
michael@0:   "<head><meta charset='utf-8' /></head>" +
michael@0:   "<body>" +
michael@0:   [outer.oldHTML for (outer of TEST_DATA)].join("\n") +
michael@0:   "</body>" +
michael@0:   "</html>";
michael@0: 
michael@0: let test = asyncTest(function*() {
michael@0:   let {inspector} = yield addTab(TEST_URL).then(openInspector);
michael@0:   inspector.markup._frame.focus();
michael@0:   yield runEditOuterHTMLTests(TEST_DATA, inspector);
michael@0: });