From 9259d21c51998aba76749cad014561d27c8df97b Mon Sep 17 00:00:00 2001
From: Masayuki Nakano <masayuki@d-toybox.com>
Date: Fri, 1 Jul 2022 04:48:55 +0000
Subject: [PATCH] Bug 1776332 - part 2: Create a tentative WPT to check
 attribute handling of joining elements by the builtin editor r=m_kato

Similar to the previous patch, this adds tentative tests.  Different from the
previous tests, joining shouldn't touch attributes of the original nodes.

This tests do not check which node is deleted from the document, but in the
future, it should be tested after fixing bug 1735608 completely.

Differential Revision: https://phabricator.services.mozilla.com/D150221
---
 .../meta/editor/joining_nodes.html.ini        |   86 --
 .../mozilla/tests/editor/joining_nodes.html   |  256 ----
 ...ributes-at-joining-elements.tentative.html | 1167 +++++++++++++++++
 3 files changed, 1167 insertions(+), 342 deletions(-)
 delete mode 100644 testing/web-platform/mozilla/meta/editor/joining_nodes.html.ini
 delete mode 100644 testing/web-platform/mozilla/tests/editor/joining_nodes.html
 create mode 100644 testing/web-platform/tests/editing/other/keeping-attributes-at-joining-elements.tentative.html
diff --git a/testing/web-platform/mozilla/meta/editor/joining_nodes.html.ini b/testing/web-platform/mozilla/meta/editor/joining_nodes.html.ini
deleted file mode 100644
index 8a52821e8068..000000000000
--- a/testing/web-platform/mozilla/meta/editor/joining_nodes.html.ini
+++ /dev/null
@@ -1,86 +0,0 @@
-[joining_nodes.html]
-  type: testharness
-  [Joining <dt> and <dd> nodes, delete command]
-    expected: FAIL
-
-  [Joining <dt> and <dd> nodes, forwarddelete command]
-    expected: FAIL
-
-  [Joining <dd> and <dt> nodes, delete command]
-    expected: FAIL
-
-  [Joining <dd> and <dt> nodes, forwarddelete command]
-    expected: FAIL
-
-  [Joining <h1> and <p> elements, delete command]
-    expected: FAIL
-
-  [Joining <h1> and <p> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <h2> and <p> elements, delete command]
-    expected: FAIL
-
-  [Joining <h2> and <p> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <h3> and <p> elements, delete command]
-    expected: FAIL
-
-  [Joining <h3> and <p> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <h4> and <p> elements, delete command]
-    expected: FAIL
-
-  [Joining <h4> and <p> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <h5> and <p> elements, delete command]
-    expected: FAIL
-
-  [Joining <h5> and <p> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <h6> and <p> elements, delete command]
-    expected: FAIL
-
-  [Joining <h6> and <p> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <p> and <h1> elements, delete command]
-    expected: FAIL
-
-  [Joining <p> and <h1> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <p> and <h2> elements, delete command]
-    expected: FAIL
-
-  [Joining <p> and <h2> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <p> and <h3> elements, delete command]
-    expected: FAIL
-
-  [Joining <p> and <h3> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <p> and <h4> elements, delete command]
-    expected: FAIL
-
-  [Joining <p> and <h4> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <p> and <h5> elements, delete command]
-    expected: FAIL
-
-  [Joining <p> and <h5> elements, forwarddelete command]
-    expected: FAIL
-
-  [Joining <p> and <h6> elements, delete command]
-    expected: FAIL
-
-  [Joining <p> and <h6> elements, forwarddelete command]
-    expected: FAIL
-
diff --git a/testing/web-platform/mozilla/tests/editor/joining_nodes.html b/testing/web-platform/mozilla/tests/editor/joining_nodes.html
deleted file mode 100644
index 2dd3b68ca58b..000000000000
--- a/testing/web-platform/mozilla/tests/editor/joining_nodes.html
+++ /dev/null
@@ -1,256 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<meta charset=utf-8>
-<title>Joining nodes with delete/forwardDelete command</title>
-<script src=/resources/testharness.js></script>
-<script src=/resources/testharnessreport.js></script>
-</head>
-<body>
-<script>
-"use strict";
-
-(function() {
-  const kTests = [
-    { description: "Joining text nodes separated by <br>",
-      innerHTML: "<p>foo bar<br id=\"separator\">baz</p>",
-      expectedInnerHTML: "<p>foo barbaz</p>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    // XXX Attributes of right <li> element are cloned but this may not be expected behavior.
-    { description: "Joining <li> nodes in <ul>",
-      innerHTML: "<ul><li>foo bar</li><li id=\"separator\">baz</li></ul>",
-      expectedInnerHTML: "<ul><li id=\"separator\">foo barbaz</li></ul>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    // XXX Attributes of right <li> element are cloned but this may not be expected behavior.
-    { description: "Joining <li> nodes in <ol>",
-      innerHTML: "<ol><li>foo bar</li><li id=\"separator\">baz</li></ol>",
-      expectedInnerHTML: "<ol><li id=\"separator\">foo barbaz</li></ol>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <dt> and <dd> nodes",
-      innerHTML: "<dl><dt>foo bar</dt><dd id=\"separator\">baz</dd></dl>",
-      expectedInnerHTML: "<dl><dt>foo barbaz</dt></dl>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <dd> and <dt> nodes",
-      innerHTML: "<dl><dd>foo bar</dd><dt id=\"separator\">baz</dt></dl>",
-      expectedInnerHTML: "<dl><dd>foo barbaz</dd></dl>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    // XXX Attributes of right <p> element are cloned but this may not be expected behavior.
-    { description: "Joining <p> elements",
-      innerHTML: "<p>foo bar</p><p id=\"separator\">baz</p>",
-      expectedInnerHTML: "<p id=\"separator\">foo barbaz</p>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    // XXX Attributes of right <div> element are cloned but this may not be expected behavior.
-    { description: "Joining <div> elements",
-      innerHTML: "<div>foo bar</div><div id=\"separator\">baz</div>",
-      expectedInnerHTML: "<div id=\"separator\">foo barbaz</div>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <h1> and <p> elements",
-      innerHTML: "<h1>foo bar</h1><p id=\"separator\">baz</p>",
-      expectedInnerHTML: "<h1>foo barbaz</h1>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <h2> and <p> elements",
-      innerHTML: "<h2>foo bar</h2><p id=\"separator\">baz</p>",
-      expectedInnerHTML: "<h2>foo barbaz</h2>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <h3> and <p> elements",
-      innerHTML: "<h3>foo bar</h3><p id=\"separator\">baz</p>",
-      expectedInnerHTML: "<h3>foo barbaz</h3>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <h4> and <p> elements",
-      innerHTML: "<h4>foo bar</h4><p id=\"separator\">baz</p>",
-      expectedInnerHTML: "<h4>foo barbaz</h4>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <h5> and <p> elements",
-      innerHTML: "<h5>foo bar</h5><p id=\"separator\">baz</p>",
-      expectedInnerHTML: "<h5>foo barbaz</h5>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <h6> and <p> elements",
-      innerHTML: "<h6>foo bar</h6><p id=\"separator\">baz</p>",
-      expectedInnerHTML: "<h6>foo barbaz</h6>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <p> and <h1> elements",
-      innerHTML: "<p>foo bar</p><h1 id=\"separator\">baz</h1>",
-      expectedInnerHTML: "<p>foo barbaz</p>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <p> and <h2> elements",
-      innerHTML: "<p>foo bar</p><h2 id=\"separator\">baz</h2>",
-      expectedInnerHTML: "<p>foo barbaz</p>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <p> and <h3> elements",
-      innerHTML: "<p>foo bar</p><h3 id=\"separator\">baz</h3>",
-      expectedInnerHTML: "<p>foo barbaz</p>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <p> and <h4> elements",
-      innerHTML: "<p>foo bar</p><h4 id=\"separator\">baz</h4>",
-      expectedInnerHTML: "<p>foo barbaz</p>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <p> and <h5> elements",
-      innerHTML: "<p>foo bar</p><h5 id=\"separator\">baz</h5>",
-      expectedInnerHTML: "<p>foo barbaz</p>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-    { description: "Joining <p> and <h6> elements",
-      innerHTML: "<p>foo bar</p><h6 id=\"separator\">baz</h6>",
-      expectedInnerHTML: "<p>foo barbar</p>",
-      expectedSelectionRange: function (editor) {
-        return { collapsed: true,
-                 startContainer: editor.firstChild.firstChild,
-                 startOffset: 7 };
-      }, },
-  ];
-
-  document.body.innerHTML = "<div id=\"editor\" contenteditable></div>";
-  let editor = document.getElementById("editor");
-  editor.focus();
-  let selection = document.getSelection();
-
-  for (const kTest of kTests) {
-    editor.innerHTML = kTest.innerHTML;
-    let separator = document.getElementById("separator");
-    function getFirstLeafNode(node) {
-      for (; node.firstChild; node = node.firstChild) {
-      }
-      return node;
-    }
-    if (separator.nodeName.toLowerCase() == "br") {
-      if (separator.nextSibling) {
-        selection.collapse(getFirstLeafNode(separator.nextSibling), 0);
-      } else {
-        selection.collapse(separator.parentNode,
-                           separator.parentNode.childNodes.length);
-      }
-    } else {
-      selection.collapse(getFirstLeafNode(separator), 0);
-    }
-    test(function () {
-      document.execCommand("delete", false);
-      assert_equals(editor.innerHTML, kTest.expectedInnerHTML);
-      const kExpectedSelectionRange = kTest.expectedSelectionRange(editor);
-      let range = selection.getRangeAt(0);
-      assert_equals(range.collapsed, kExpectedSelectionRange.collapsed);
-      assert_equals(range.startContainer, kExpectedSelectionRange.startContainer);
-      assert_equals(range.startOffset, kExpectedSelectionRange.startOffset);
-      if (kExpectedSelectionRange.collapsed) {
-        assert_equals(range.endContainer, kExpectedSelectionRange.startContainer);
-        assert_equals(range.endOffset, kExpectedSelectionRange.startOffset);
-      } else {
-        assert_equals(range.endContainer, kExpectedSelectionRange.endContainer);
-        assert_equals(range.endOffset, kExpectedSelectionRange.endOffset);
-      }
-    }, kTest.description + ", delete command");
-
-    editor.innerHTML = kTest.innerHTML;
-    separator = document.getElementById("separator");
-    function getLastLeafNode(node) {
-      for (; node.lastChild; node = node.lastChild) {
-      }
-      return node;
-    }
-    function getLength(node) {
-      if (node.length !== undefined) {
-        return node.length;
-      }
-      return node.childNodes.length;
-    }
-    if (separator.previousSibling) {
-      let lastLeafNode = getLastLeafNode(separator.previousSibling);
-      selection.collapse(lastLeafNode, getLength(lastLeafNode));
-    } else {
-      selection.collapse(separator.parentNode, 0);
-    }
-    test(function () {
-      try {
-        document.execCommand("forwarddelete", false);
-      } catch (e) {
-        console.log(e);
-      }
-      assert_equals(editor.innerHTML, kTest.expectedInnerHTML);
-      const kExpectedSelectionRange = kTest.expectedSelectionRange(editor);
-      let range = selection.getRangeAt(0);
-      assert_equals(range.collapsed, kExpectedSelectionRange.collapsed);
-      assert_equals(range.startContainer, kExpectedSelectionRange.startContainer);
-      assert_equals(range.startOffset, kExpectedSelectionRange.startOffset);
-      if (kExpectedSelectionRange.collapsed) {
-        assert_equals(range.endContainer, kExpectedSelectionRange.startContainer);
-        assert_equals(range.endOffset, kExpectedSelectionRange.startOffset);
-      } else {
-        assert_equals(range.endContainer, kExpectedSelectionRange.endContainer);
-        assert_equals(range.endOffset, kExpectedSelectionRange.endOffset);
-      }
-    }, kTest.description + ", forwarddelete command");
-  }
-})();
-</script>
-</body>
-</html>
diff --git a/testing/web-platform/tests/editing/other/keeping-attributes-at-joining-elements.tentative.html b/testing/web-platform/tests/editing/other/keeping-attributes-at-joining-elements.tentative.html
new file mode 100644
index 000000000000..99a0dab56ab4
--- /dev/null
+++ b/testing/web-platform/tests/editing/other/keeping-attributes-at-joining-elements.tentative.html
@@ -0,0 +1,1167 @@
+<!doctype html>
+<meta chareset="utf-8">
+<meta name="timeout" content="long">
+<meta name="variant" content="?method=backspace">
+<meta name="variant" content="?method=forwarddelete">
+<title>Not merging attributes at joining elements in contenteditable</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="../include/editor-test-utils.js"></script>
+</style>
+<div contenteditable></div>
+<script>
+"use strict";
+
+const testingBackspace =
+  new URLSearchParams(document.location.search).get("method") == "backspace";
+const caretForBackSpace = testingBackspace ? "[]" : "";
+const caretForForwardDelete = testingBackspace ? "" : "[]";
+document.execCommand("defaultParagraphSeparator", false, "div");
+const utils =
+  new EditorTestUtils(document.querySelector("div[contenteditable]"));
+
+// DO NOT USE multi-line comment in this file, then, you can comment out
+// unnecessary tests when you need to attach the browser with a debugger.
+
+// At joining 2 elements, the attributes shouldn't be merged, and from point of
+// view of JS/DOM, both element kept after the join and element deleted from the
+// DOM tree should have attributes as-is.
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<div id="left">abc${caretForForwardDelete}</div><div id="right">${caretForBackSpace}def</div>`
+  );
+  const leftNode = document.getElementById("left");
+  const rightNode = document.getElementById("right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("id"),
+      "left",
+      `The left node should keep having id=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("id"),
+      "right",
+      `The right node should keep having id=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <div id=\"left\"> and <div id=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<div class="left">abc${caretForForwardDelete}</div><div class="right">${caretForBackSpace}def</div>`
+  );
+  const leftNode = utils.editingHost.querySelector(".left");
+  const rightNode = utils.editingHost.querySelector(".right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("class"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("class"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <div class=\"left\"> and <div class=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<div style="font-size:0.8rem">abc${caretForForwardDelete}</div><div style="font-weight:bold">${caretForBackSpace}def</div>`
+  );
+  const leftNode = utils.editingHost.querySelector("div[style]");
+  const rightNode = leftNode.nextSibling;
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  // style attribute values shouldn't be touched in this but case, but it's
+  // okay if the values are not merged.
+  test(() => {
+    assert_true(
+      leftNode.getAttribute("style").includes("font-size"),
+      `The left node should keep having style attribute containing font-size (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      leftNode.getAttribute("style").includes("font-weight"),
+      `The left node should have font-weight in its style attribute (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  test(() => {
+    assert_true(
+      rightNode.getAttribute("style").includes("font-weight"),
+      `The right node should keep having style attribute containing font-size (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      rightNode.getAttribute("style").includes("font-style"),
+      `The right node should have font-size in its style attribute (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <div style=\"font-size:0.8rem\"> and <div style=\"font-weight:bold\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<div data-foo="left">abc${caretForForwardDelete}</div><div data-bar="right">${caretForBackSpace}def</div>`
+  );
+  const leftNode = utils.editingHost.querySelector("[data-foo=left]");
+  const rightNode = utils.editingHost.querySelector("[data-bar=right]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("data-foo"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      leftNode.hasAttribute("data-bar"),
+      `The left node shouldn't have data-bar attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("data-bar"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      rightNode.hasAttribute("data-foo"),
+      `The right node shouldn't have data-foo attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <div data-foo=\"left\"> and <div data-bar=\"right\">");
+
+// Same tests for list-item elements because they may be handled in a different
+// path.
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<ul><li id="left">abc${caretForForwardDelete}</li><li id="right">${caretForBackSpace}def</li></ul>`
+  );
+  const leftNode = document.getElementById("left");
+  const rightNode = document.getElementById("right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("id"),
+      "left",
+      `The left node should keep having id=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("id"),
+      "right",
+      `The right node should keep having id=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <li id=\"left\"> and <li id=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<ul><li class="left">abc${caretForForwardDelete}</li><li class="right">${caretForBackSpace}def</li></ul>`
+  );
+  const leftNode = utils.editingHost.querySelector(".left");
+  const rightNode = utils.editingHost.querySelector(".right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("class"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("class"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <li class=\"left\"> and <li class=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<ul><li style="font-size:0.8rem">abc${caretForForwardDelete}</li><li style="font-weight:bold">${caretForBackSpace}def</li></ul>`
+  );
+  const leftNode = utils.editingHost.querySelector("li[style]");
+  const rightNode = leftNode.nextSibling;
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  // style attribute values shouldn't be touched in this but case, but it's
+  // okay if the values are not merged.
+  test(() => {
+    assert_true(
+      leftNode.getAttribute("style").includes("font-size"),
+      `The left node should keep having style attribute containing font-size (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      leftNode.getAttribute("style").includes("font-weight"),
+      `The left node should have font-weight in its style attribute (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  test(() => {
+    assert_true(
+      rightNode.getAttribute("style").includes("font-weight"),
+      `The right node should keep having style attribute containing font-size (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      rightNode.getAttribute("style").includes("font-style"),
+      `The right node should have font-size in its style attribute (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <li style=\"font-size:0.8rem\"> and <li style=\"font-weight:bold\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<ul><li data-foo="left">abc${caretForForwardDelete}</li><li data-bar="right">${caretForBackSpace}def</li></ul>`
+  );
+  const leftNode = utils.editingHost.querySelector("[data-foo=left]");
+  const rightNode = utils.editingHost.querySelector("[data-bar=right]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("data-foo"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      leftNode.hasAttribute("data-bar"),
+      `The left node shouldn't have data-bar attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("data-bar"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      rightNode.hasAttribute("data-foo"),
+      `The right node shouldn't have data-foo attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <li data-foo=\"left\"> and <li data-bar=\"right\">");
+
+// Same tests for <dt> elements because they may be handled in a different
+// path.
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dt id="left">abc${caretForForwardDelete}</dt><dt id="right">${caretForBackSpace}def</dt></dl>`
+  );
+  const leftNode = document.getElementById("left");
+  const rightNode = document.getElementById("right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("id"),
+      "left",
+      `The left node should keep having id=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("id"),
+      "right",
+      `The right node should keep having id=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dt id=\"left\"> and <dt id=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dt class="left">abc${caretForForwardDelete}</dt><dt class="right">${caretForBackSpace}def</dt></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector(".left");
+  const rightNode = utils.editingHost.querySelector(".right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("class"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("class"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dt class=\"left\"> and <dt class=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dt style="font-size:0.8rem">abc${caretForForwardDelete}</dt><dt style="font-weight:bold">${caretForBackSpace}def</dt></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector("dt[style]");
+  const rightNode = leftNode.nextSibling;
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  // style attribute values shouldn't be touched in this but case, but it's
+  // okay if the values are not merged.
+  test(() => {
+    assert_true(
+      leftNode.getAttribute("style").includes("font-size"),
+      `The left node should keep having style attribute containing font-size (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      leftNode.getAttribute("style").includes("font-weight"),
+      `The left node should have font-weight in its style attribute (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  test(() => {
+    assert_true(
+      rightNode.getAttribute("style").includes("font-weight"),
+      `The right node should keep having style attribute containing font-size (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      rightNode.getAttribute("style").includes("font-style"),
+      `The right node should have font-size in its style attribute (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dt style=\"font-size:0.8rem\"> and <dt style=\"font-weight:bold\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dt data-foo="left">abc${caretForForwardDelete}</dt><dt data-bar="right">${caretForBackSpace}def</dt></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector("[data-foo=left]");
+  const rightNode = utils.editingHost.querySelector("[data-bar=right]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("data-foo"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      leftNode.hasAttribute("data-bar"),
+      `The left node shouldn't have data-bar attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("data-bar"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      rightNode.hasAttribute("data-foo"),
+      `The right node shouldn't have data-foo attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dt data-foo=\"left\"> and <dt data-bar=\"right\">");
+
+// Same tests for <dd> elements because they may be handled in a different
+// path.
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dd id="left">abc${caretForForwardDelete}</dd><dd id="right">${caretForBackSpace}def</dd></dl>`
+  );
+  const leftNode = document.getElementById("left");
+  const rightNode = document.getElementById("right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("id"),
+      "left",
+      `The left node should keep having id=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("id"),
+      "right",
+      `The right node should keep having id=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dd id=\"left\"> and <dd id=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dd class="left">abc${caretForForwardDelete}</dd><dd class="right">${caretForBackSpace}def</dd></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector(".left");
+  const rightNode = utils.editingHost.querySelector(".right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("class"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("class"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dd class=\"left\"> and <dd class=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dd style="font-size:0.8rem">abc${caretForForwardDelete}</dd><dd style="font-weight:bold">${caretForBackSpace}def</dd></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector("dd[style]");
+  const rightNode = leftNode.nextSibling;
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  // style attribute values shouldn't be touched in this but case, but it's
+  // okay if the values are not merged.
+  test(() => {
+    assert_true(
+      leftNode.getAttribute("style").includes("font-size"),
+      `The left node should keep having style attribute containing font-size (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      leftNode.getAttribute("style").includes("font-weight"),
+      `The left node should have font-weight in its style attribute (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  test(() => {
+    assert_true(
+      rightNode.getAttribute("style").includes("font-weight"),
+      `The right node should keep having style attribute containing font-size (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      rightNode.getAttribute("style").includes("font-style"),
+      `The right node should have font-size in its style attribute (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dd style=\"font-size:0.8rem\"> and <dd style=\"font-weight:bold\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dd data-foo="left">abc${caretForForwardDelete}</dd><dd data-bar="right">${caretForBackSpace}def</dd></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector("[data-foo=left]");
+  const rightNode = utils.editingHost.querySelector("[data-bar=right]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("data-foo"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      leftNode.hasAttribute("data-bar"),
+      `The left node shouldn't have data-bar attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("data-bar"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      rightNode.hasAttribute("data-foo"),
+      `The right node shouldn't have data-foo attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dd data-foo=\"left\"> and <dd data-bar=\"right\">");
+
+// Same tests for <dt> and <dd> because they may be handled in a different
+// path.
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dt id="left">abc${caretForForwardDelete}</dt><dd id="right">${caretForBackSpace}def</dd></dl>`
+  );
+  const leftNode = document.getElementById("left");
+  const rightNode = document.getElementById("right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("id"),
+      "left",
+      `The left node should keep having id=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("id"),
+      "right",
+      `The right node should keep having id=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dt id=\"left\"> and <dd id=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dt class="left">abc${caretForForwardDelete}</dt><dd class="right">${caretForBackSpace}def</dd></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector(".left");
+  const rightNode = utils.editingHost.querySelector(".right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("class"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("class"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dt class=\"left\"> and <dd class=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dt style="font-size:0.8rem">abc${caretForForwardDelete}</dt><dd style="font-weight:bold">${caretForBackSpace}def</dd></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector("dt[style]");
+  const rightNode = utils.editingHost.querySelector("dd[style]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  // style attribute values shouldn't be touched in this but case, but it's
+  // okay if the values are not merged.
+  test(() => {
+    assert_true(
+      leftNode.getAttribute("style").includes("font-size"),
+      `The left node should keep having style attribute containing font-size (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      leftNode.getAttribute("style").includes("font-weight"),
+      `The left node should have font-weight in its style attribute (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  test(() => {
+    assert_true(
+      rightNode.getAttribute("style").includes("font-weight"),
+      `The right node should keep having style attribute containing font-size (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      rightNode.getAttribute("style").includes("font-style"),
+      `The right node should have font-size in its style attribute (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dt style=\"font-size:0.8rem\"> and <dd style=\"font-weight:bold\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dt data-foo="left">abc${caretForForwardDelete}</dt><dd data-bar="right">${caretForBackSpace}def</dd></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector("[data-foo=left]");
+  const rightNode = utils.editingHost.querySelector("[data-bar=right]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("data-foo"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      leftNode.hasAttribute("data-bar"),
+      `The left node shouldn't have data-bar attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("data-bar"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      rightNode.hasAttribute("data-foo"),
+      `The right node shouldn't have data-foo attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dt data-foo=\"left\"> and <dd data-bar=\"right\">");
+
+// Same tests for <dd> and <dt> because they may be handled in a different
+// path.
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dd id="left">abc${caretForForwardDelete}</dd><dt id="right">${caretForBackSpace}def</dt></dl>`
+  );
+  const leftNode = document.getElementById("left");
+  const rightNode = document.getElementById("right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("id"),
+      "left",
+      `The left node should keep having id=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("id"),
+      "right",
+      `The right node should keep having id=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dd id=\"left\"> and <dt id=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dd class="left">abc${caretForForwardDelete}</dd><dt class="right">${caretForBackSpace}def</dt></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector(".left");
+  const rightNode = utils.editingHost.querySelector(".right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("class"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("class"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dd class=\"left\"> and <dt class=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dd style="font-size:0.8rem">abc${caretForForwardDelete}</dd><dt style="font-weight:bold">${caretForBackSpace}def</dt></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector("dd[style]");
+  const rightNode = utils.editingHost.querySelector("dt[style]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  // style attribute values shouldn't be touched in this but case, but it's
+  // okay if the values are not merged.
+  test(() => {
+    assert_true(
+      leftNode.getAttribute("style").includes("font-size"),
+      `The left node should keep having style attribute containing font-size (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      leftNode.getAttribute("style").includes("font-weight"),
+      `The left node should have font-weight in its style attribute (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  test(() => {
+    assert_true(
+      rightNode.getAttribute("style").includes("font-weight"),
+      `The right node should keep having style attribute containing font-size (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      rightNode.getAttribute("style").includes("font-style"),
+      `The right node should have font-size in its style attribute (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dd style=\"font-size:0.8rem\"> and <dt style=\"font-weight:bold\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<dl><dd data-foo="left">abc${caretForForwardDelete}</dd><dt data-bar="right">${caretForBackSpace}def</dt></dl>`
+  );
+  const leftNode = utils.editingHost.querySelector("[data-foo=left]");
+  const rightNode = utils.editingHost.querySelector("[data-bar=right]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("data-foo"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      leftNode.hasAttribute("data-bar"),
+      `The left node shouldn't have data-bar attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("data-bar"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      rightNode.hasAttribute("data-foo"),
+      `The right node shouldn't have data-foo attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <dd data-foo=\"left\"> and <dt data-bar=\"right\">");
+
+// Same tests for <h3> and <div> because they may be handled in a different
+// path.
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<h3 id="left">abc${caretForForwardDelete}</h3><div id="right">${caretForBackSpace}def</div>`
+  );
+  const leftNode = document.getElementById("left");
+  const rightNode = document.getElementById("right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("id"),
+      "left",
+      `The left node should keep having id=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("id"),
+      "right",
+      `The right node should keep having id=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <h3 id=\"left\"> and <div id=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<h3 class="left">abc${caretForForwardDelete}</h3><div class="right">${caretForBackSpace}def</div>`
+  );
+  const leftNode = utils.editingHost.querySelector(".left");
+  const rightNode = utils.editingHost.querySelector(".right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("class"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("class"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <h3 class=\"left\"> and <div class=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<h3 style="font-size:0.8rem">abc${caretForForwardDelete}</h3><div style="font-weight:bold">${caretForBackSpace}def</div>`
+  );
+  const leftNode = utils.editingHost.querySelector("h3[style]");
+  const rightNode = utils.editingHost.querySelector("div[style]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  // style attribute values shouldn't be touched in this but case, but it's
+  // okay if the values are not merged.
+  test(() => {
+    assert_true(
+      leftNode.getAttribute("style").includes("font-size"),
+      `The left node should keep having style attribute containing font-size (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      leftNode.getAttribute("style").includes("font-weight"),
+      `The left node should have font-weight in its style attribute (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  test(() => {
+    assert_true(
+      rightNode.getAttribute("style").includes("font-weight"),
+      `The right node should keep having style attribute containing font-size (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      rightNode.getAttribute("style").includes("font-style"),
+      `The right node should have font-size in its style attribute (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <h3 style=\"font-size:0.8rem\"> and <div style=\"font-weight:bold\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<h3 data-foo="left">abc${caretForForwardDelete}</h3><div data-bar="right">${caretForBackSpace}def</div>`
+  );
+  const leftNode = utils.editingHost.querySelector("[data-foo=left]");
+  const rightNode = utils.editingHost.querySelector("[data-bar=right]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("data-foo"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      leftNode.hasAttribute("data-bar"),
+      `The left node shouldn't have data-bar attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("data-bar"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      rightNode.hasAttribute("data-foo"),
+      `The right node shouldn't have data-foo attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <h3 data-foo=\"left\"> and <div data-bar=\"right\">");
+
+// Same tests for <div> and <h3> because they may be handled in a different
+// path.
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<div id="left">abc${caretForForwardDelete}</div><h3 id="right">${caretForBackSpace}def</h3>`
+  );
+  const leftNode = document.getElementById("left");
+  const rightNode = document.getElementById("right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("id"),
+      "left",
+      `The left node should keep having id=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("id"),
+      "right",
+      `The right node should keep having id=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <div id=\"left\"> and <h3 id=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<div class="left">abc${caretForForwardDelete}</div><h3 class="right">${caretForBackSpace}def</h3>`
+  );
+  const leftNode = utils.editingHost.querySelector(".left");
+  const rightNode = utils.editingHost.querySelector(".right");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("class"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("class"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <div class=\"left\"> and <h3 class=\"right\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<div style="font-size:0.8rem">abc${caretForForwardDelete}</div><h3 style="font-weight:bold">${caretForBackSpace}def</h3>`
+  );
+  const leftNode = utils.editingHost.querySelector("div[style]");
+  const rightNode = utils.editingHost.querySelector("h3[style]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  // style attribute values shouldn't be touched in this but case, but it's
+  // okay if the values are not merged.
+  test(() => {
+    assert_true(
+      leftNode.getAttribute("style").includes("font-size"),
+      `The left node should keep having style attribute containing font-size (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      leftNode.getAttribute("style").includes("font-weight"),
+      `The left node should have font-weight in its style attribute (style="${leftNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  test(() => {
+    assert_true(
+      rightNode.getAttribute("style").includes("font-weight"),
+      `The right node should keep having style attribute containing font-size (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+    assert_false(
+      rightNode.getAttribute("style").includes("font-style"),
+      `The right node should have font-size in its style attribute (style="${rightNode.getAttribute("style")}", ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <div style=\"font-size:0.8rem\"> and <h3 style=\"font-weight:bold\">");
+
+promise_test(async t => {
+  utils.setupEditingHost(
+    `<div data-foo="left">abc${caretForForwardDelete}</div><h3 data-bar="right">${caretForBackSpace}def</h3>`
+  );
+  const leftNode = utils.editingHost.querySelector("[data-foo=left]");
+  const rightNode = utils.editingHost.querySelector("[data-bar=right]");
+
+  await (testingBackspace ? utils.sendBackspaceKey() : utils.sendDeleteKey());
+
+  test(() => {
+    assert_equals(
+      leftNode.getAttribute("data-foo"),
+      "left",
+      `The left node should keep having class=left (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      leftNode.hasAttribute("data-bar"),
+      `The left node shouldn't have data-bar attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_equals(
+      rightNode.getAttribute("data-bar"),
+      "right",
+      `The right node should keep having class=right (isConnected=${rightNode.isConnected}, ${t.name})`
+    );
+  });
+  test(() => {
+    assert_false(
+      rightNode.hasAttribute("data-foo"),
+      `The right node shouldn't have data-foo attribute (isConnected=${leftNode.isConnected}, ${t.name})`
+    );
+  });
+  assert_equals(
+    leftNode.isConnected ^ rightNode.isConnected,
+    1,
+    `One should stay in the document and the other should be disconnected (${utils.editingHost.innerHTML}, ${t.name})`
+  );
+}, "Joining <div data-foo=\"left\"> and <h3 data-bar=\"right\">");
+
+
+</script>
