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")]);
+}