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>
