diff options
Diffstat (limited to 'devtools/client/inspector/markup/test/browser_markup_tag_delete_whitespace_node.js')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_tag_delete_whitespace_node.js | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_delete_whitespace_node.js b/devtools/client/inspector/markup/test/browser_markup_tag_delete_whitespace_node.js new file mode 100644 index 0000000000..620440cda7 --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_tag_delete_whitespace_node.js @@ -0,0 +1,79 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// After deleting a node, whitespace siblings that had an impact on the layout might no +// longer have any impact. This tests that the markup view is correctly rendered after +// deleting a node that triggers such a change. + +const HTML = `<div> + <p id="container"> + <span id="before-whitespace">1</span> <span id="after-whitespace">2</span> + </p> + </div>`; + +const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML); + +add_task(async function deleteNodeAfterWhitespace() { + const { inspector } = await openInspectorForURL(TEST_URL); + + info( + "Test deleting a node that will modify the whitespace nodes rendered in the " + + "markup view." + ); + + await selectAndFocusNode("#after-whitespace", inspector); + await deleteCurrentSelection(inspector); + + // TODO: There is still an issue with selection here. When the span is deleted, the + // selection goes to text-node. But since the text-node gets removed from the markup + // view after losing its impact on the layout, the selection remains on a node which + // is no longer part of the markup view (but still a valid node in the content DOM). + const parentNodeFront = await inspector.selection.nodeFront.parentNode(); + const nodeFront = await getNodeFront("#container", inspector); + is(parentNodeFront, nodeFront, "Selection is as expected after deletion"); + + info("Check that the node was really removed"); + let node = await getNodeFront("#after-whitespace", inspector); + ok(!node, "The node can't be found in the page anymore"); + + info("Undo the deletion to restore the original markup"); + await undoChange(inspector); + node = await getNodeFront("#after-whitespace", inspector); + ok(node, "The node is back"); + + info( + "Test deleting the node before the whitespace and performing an undo preserves " + + "the node order" + ); + + await selectAndFocusNode("#before-whitespace", inspector); + await deleteCurrentSelection(inspector); + + info("Undo the deletion to restore the original markup"); + await undoChange(inspector); + node = await getNodeFront("#before-whitespace", inspector); + ok(node, "The node is back"); + + const nextSibling = await getNodeFront("#before-whitespace + *", inspector); + const afterWhitespace = await getNodeFront("#after-whitespace", inspector); + is( + nextSibling, + afterWhitespace, + "Order has been preserved after restoring the node" + ); +}); + +async function selectAndFocusNode(selector, inspector) { + info(`Select node ${selector} and make sure it is focused`); + await selectNode(selector, inspector); + await clickContainer(selector, inspector); +} + +async function deleteCurrentSelection(inspector) { + info("Delete the node with the delete key"); + const mutated = inspector.once("markupmutation"); + EventUtils.sendKey("delete", inspector.panelWin); + await Promise.all([mutated, inspector.once("inspector-updated")]); +} |