/* Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ */ "use strict"; // Tests that various mutations to the dom update the markup view correctly. const TEST_URL = URL_ROOT + "doc_markup_mutation.html"; // Mutation tests. Each entry in the array has the following properties: // - desc: for logging only // - numMutations: how many mutations are expected to come happen due to the // test case. Defaults to 1 if not set. // - test: a function supposed to mutate the DOM // - check: a function supposed to test that the mutation was handled const TEST_DATA = [ { desc: "Adding an attribute", async test() { await setContentPageElementAttribute("#node1", "newattr", "newattrval"); }, async check(inspector) { const { editor } = await getContainerForSelector("#node1", inspector); ok( [...editor.attrList.querySelectorAll(".attreditor")].some(attr => { return ( attr.textContent.trim() === 'newattr="newattrval"' && attr.dataset.value === "newattrval" && attr.dataset.attr === "newattr" ); }), "newattr attribute found" ); }, }, { desc: "Removing an attribute", async test() { await removeContentPageElementAttribute("#node1", "newattr"); }, async check(inspector) { const { editor } = await getContainerForSelector("#node1", inspector); ok( ![...editor.attrList.querySelectorAll(".attreditor")].some(attr => { return attr.textContent.trim() === 'newattr="newattrval"'; }), "newattr attribute removed" ); }, }, { desc: "Re-adding an attribute", async test() { await setContentPageElementAttribute("#node1", "newattr", "newattrval"); }, async check(inspector) { const { editor } = await getContainerForSelector("#node1", inspector); ok( [...editor.attrList.querySelectorAll(".attreditor")].some(attr => { return ( attr.textContent.trim() === 'newattr="newattrval"' && attr.dataset.value === "newattrval" && attr.dataset.attr === "newattr" ); }), "newattr attribute found" ); }, }, { desc: "Changing an attribute", async test() { await setContentPageElementAttribute( "#node1", "newattr", "newattrchanged" ); }, async check(inspector) { const { editor } = await getContainerForSelector("#node1", inspector); ok( [...editor.attrList.querySelectorAll(".attreditor")].some(attr => { return ( attr.textContent.trim() === 'newattr="newattrchanged"' && attr.dataset.value === "newattrchanged" && attr.dataset.attr === "newattr" ); }), "newattr attribute found" ); }, }, { desc: "Adding another attribute does not rerender unchanged attributes", async test(inspector) { const { editor } = await getContainerForSelector("#node1", inspector); // This test checks the impact on the markup-view nodes after setting attributes on // content nodes. info("Expect attribute-container for 'new-attr' from the previous test"); const attributeContainer = editor.attrList.querySelector( "[data-attr=newattr]" ); ok(attributeContainer, "attribute-container for 'newattr' found"); info("Set a flag on the attribute-container to check after the mutation"); attributeContainer.beforeMutationFlag = true; info( "Add the attribute 'otherattr' on the content node to trigger the mutation" ); await setContentPageElementAttribute("#node1", "otherattr", "othervalue"); }, async check(inspector) { const { editor } = await getContainerForSelector("#node1", inspector); info( "Check the attribute-container for the new attribute mutation was created" ); const otherAttrContainer = editor.attrList.querySelector( "[data-attr=otherattr]" ); ok(otherAttrContainer, "attribute-container for 'otherattr' found"); info( "Check the attribute-container for 'new-attr' is the same node as earlier." ); const newAttrContainer = editor.attrList.querySelector( "[data-attr=newattr]" ); ok(newAttrContainer, "attribute-container for 'newattr' found"); ok( newAttrContainer.beforeMutationFlag, "attribute-container same as earlier" ); }, }, { desc: "Adding ::after element", numMutations: 2, async test() { await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { const node1 = content.document.querySelector("#node1"); node1.classList.add("pseudo"); }); }, async check(inspector) { const { children } = await getContainerForSelector("#node1", inspector); is( children.childNodes.length, 2, "Node1 now has 2 children (text child and ::after" ); }, }, { desc: "Removing ::after element", numMutations: 2, async test() { await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { const node1 = content.document.querySelector("#node1"); node1.classList.remove("pseudo"); }); }, async check(inspector) { const container = await getContainerForSelector("#node1", inspector); ok(container.inlineTextChild, "Has single text child."); }, }, { desc: "Updating the text-content", async test() { await setContentPageElementProperty("#node1", "textContent", "newtext"); }, async check(inspector) { const container = await getContainerForSelector("#node1", inspector); ok(container.inlineTextChild, "Has single text child."); ok(!container.canExpand, "Can't expand container with inlineTextChild."); ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild."); is( container.editor.elt.querySelector(".text").textContent.trim(), "newtext", "Single text child editor updated." ); }, }, { desc: "Adding a second text child", async test() { await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { const node1 = content.document.querySelector("#node1"); const newText = node1.ownerDocument.createTextNode("more"); node1.appendChild(newText); }); }, async check(inspector) { const container = await getContainerForSelector("#node1", inspector); ok(!container.inlineTextChild, "Does not have single text child."); ok(container.canExpand, "Can expand container with child nodes."); ok( container.editor.elt.querySelector(".text") == null, "Single text child editor removed." ); }, }, { desc: "Go from 2 to 1 text child", async test() { await setContentPageElementProperty("#node1", "textContent", "newtext"); }, async check(inspector) { const container = await getContainerForSelector("#node1", inspector); ok(container.inlineTextChild, "Has single text child."); ok(!container.canExpand, "Can't expand container with inlineTextChild."); ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild."); is( container.editor.elt.querySelector(".text").textContent.trim(), "newtext", "Single text child editor updated." ); }, }, { desc: "Removing an only text child", async test() { await setContentPageElementProperty("#node1", "innerHTML", ""); }, async check(inspector) { const container = await getContainerForSelector("#node1", inspector); ok(!container.inlineTextChild, "Does not have single text child."); ok(!container.canExpand, "Can't expand empty container."); ok( container.editor.elt.querySelector(".text") == null, "Single text child editor removed." ); }, }, { desc: "Go from 0 to 1 text child", async test() { await setContentPageElementProperty("#node1", "textContent", "newtext"); }, async check(inspector) { const container = await getContainerForSelector("#node1", inspector); ok(container.inlineTextChild, "Has single text child."); ok(!container.canExpand, "Can't expand container with inlineTextChild."); ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild."); is( container.editor.elt.querySelector(".text").textContent.trim(), "newtext", "Single text child editor updated." ); }, }, { desc: "Updating the innerHTML", async test() { await setContentPageElementProperty( "#node2", "innerHTML", "