outertext-setter.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/dom/elements/the-innertext-and-outertext-properties/outertext-setter.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>outerText setter test</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<ul>

  <li>A <span id="testReplacePrevious">B</span></li>

  <li><span id="testReplaceFollowing">A</span> B</li>

  <li>A <span id="testReplaceBoth">B</span> C</li>

  <li><span id="testRemove">Testing</span> removing node using outerText.</li>

  <li><span id="testNewlines">Replace this child with lots of newlines</span></li>

</ul>

<div id="container"></div>

<script>

"use strict";

test(() => {

  const node = document.getElementById("testReplacePrevious");

  const parent = node.parentNode;

  node.outerText = "Replaced";

  assert_equals(parent.innerHTML, "A Replaced");

  assert_equals(parent.childNodes.length, 1, "It got merged with the previous text node");

}, "Replacing a node and merging with the previous text node");

test(() => {

  const node = document.getElementById("testReplaceFollowing");

  const parent = node.parentNode;

  node.outerText = "Replaced";

  assert_equals(parent.innerHTML, "Replaced B");

  assert_equals(parent.childNodes.length, 1, "It got merged with the following text node");

}, "Replacing a node and merging with the following text node");

test(() => {

  const node = document.getElementById("testReplaceBoth");

  const parent = node.parentNode;

  node.outerText = "Replaced";

  assert_equals(parent.innerHTML, "A Replaced C");

  assert_equals(parent.childNodes.length, 1, "It got merged with the previous and following text node");

}, "Replacing a node and merging with the previous and following text node");

test(t => {

  const container = document.getElementById("container");

  t.add_cleanup(() => { container.textContent = ""; });

  container.append("A", "B", document.createElement("span"), "D", "E");

  assert_equals(container.childNodes.length, 5, "Precondition check: five separate nodes");

  const node = container.childNodes[2];

  node.outerText = "Replaced";

  assert_equals(container.innerHTML, "ABReplacedDE");

  assert_equals(container.childNodes.length, 3, "It got merged with the previous and following text node");

  assert_equals(container.childNodes[0].data, "A");

  assert_equals(container.childNodes[1].data, "BReplacedD");

  assert_equals(container.childNodes[2].data, "E");

}, "Only merges with the previous and following text nodes, does not completely normalize");

test(t => {

  const container = document.getElementById("container");

  t.add_cleanup(() => { container.textContent = ""; });

  container.append(document.createElement("span"));

  const node = container.childNodes[0];

  node.outerText = "";

  assert_equals(container.childNodes.length, 1, "Creates text node for the empty string");

  assert_equals(container.childNodes[0].data, "");

}, "Empty string");

test(t => {

  const container = document.getElementById("container");

  t.add_cleanup(() => { container.textContent = ""; });

  container.append("1", "2", document.createElement("span"), "3", "4");

  const node = container.childNodes[2];

  node.outerText = "";

  assert_equals(container.childNodes.length, 3, "It got merged with the previous and following text node");

  assert_equals(container.childNodes[0].data, "1");

  assert_equals(container.childNodes[1].data, "23");

  assert_equals(container.childNodes[2].data, "4");

}, "Empty string with surrounding text nodes");

test(t => {

  const node = document.getElementById("testNewlines");

  const parent = node.parentNode;

  node.outerText = "\n\r\n\r";

  assert_equals(parent.innerHTML, "<br><br><br>");

  assert_equals(parent.childNodes.length, 3);

  assert_equals(parent.childNodes[0].localName, "br", "node 1");

  assert_equals(parent.childNodes[1].localName, "br", "node 2");

  assert_equals(parent.childNodes[2].localName, "br", "node 3");

}, "Setting outerText to a bunch of newlines creates a bunch of <br>s with no text nodes");

test(() => {

  const node = document.getElementById("testRemove");

  const parent = node.parentNode;

  node.outerText = "";

  assert_equals(parent.innerHTML, " removing node using outerText.");

}, "Removing a node");

test(() => {

  const node = document.createElement("span");

  assert_throws_dom("NoModificationAllowedError", () => { node.outerText = ""; });

}, "Detached node");

testText("<div>", "abc", "abc", "Simplest possible test");

testHTML("<div>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in non-white-space:pre elements");

testHTML("<pre>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in <pre> element");

testHTML("<textarea>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in <textarea> element");

testHTML("<div style='white-space:pre'>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in white-space:pre element");

testHTML("<div>", "abc\rdef", "abc<br>def", "CRs convert to <br> in non-white-space:pre elements");

testHTML("<pre>", "abc\rdef", "abc<br>def", "CRs convert to <br> in <pre> element");

testHTML("<div>", "abc\r\ndef", "abc<br>def", "Newline/CR pair converts to <br> in non-white-space:pre element");

testHTML("<div>", "abc\n\ndef", "abc<br><br>def", "Newline/newline pair converts to two <br>s in non-white-space:pre element");

testHTML("<div>", "abc\r\rdef", "abc<br><br>def", "CR/CR pair converts to two <br>s in non-white-space:pre element");

testHTML("<div style='white-space:pre'>", "abc\rdef", "abc<br>def", "CRs convert to <br> in white-space:pre element");

testText("<div>", "abc<def", "abc<def", "< preserved");

testText("<div>", "abc>def", "abc>def", "> preserved");

testText("<div>", "abc&", "abc&", "& preserved");

testText("<div>", "abc\"def", "abc\"def", "\" preserved");

testText("<div>", "abc\'def", "abc\'def", "\' preserved");

testHTML("<svg>", "abc", "<svg></svg>", "outerText not supported on SVG elements");

testHTML("<math>", "abc", "<math></math>", "outerText not supported on MathML elements");

testText("<div>", "abc\0def", "abc\0def", "Null characters preserved");

testText("<div>", "abc\tdef", "abc\tdef", "Tabs preserved");

testText("<div>", " abc", " abc", "Leading whitespace preserved");

testText("<div>", "abc ", "abc ", "Trailing whitespace preserved");

testText("<div>", "abc  def", "abc  def", "Whitespace not compressed");

testText("<div>abc\n\n", "abc", "abc", "Existing text deleted");

testText("<div><br>", "abc", "abc", "Existing <br> deleted");

testHTML("<div>", "", "", "Assigning the empty string");

testHTML("<div>", null, "", "Assigning null");

testHTML("<div>", undefined, "undefined", "Assigning undefined");

testHTML("<div>", "\rabc", "<br>abc", "Start with CR");

testHTML("<div>", "\nabc", "<br>abc", "Start with LF");

testHTML("<div>", "\r\nabc", "<br>abc", "Start with CRLF");

testHTML("<div>", "abc\r", "abc<br>", "End with CR");

testHTML("<div>", "abc\n", "abc<br>", "End with LF");

testHTML("<div>", "abc\r\n", "abc<br>", "End with CRLF");

function testText(startingHTML, outerText, expected, description) {

  test(t => {

    const container = document.getElementById("container");

    t.add_cleanup(() => { container.textContent = ""; });

    container.innerHTML = startingHTML;

    const elementToReplace = container.firstElementChild;

    elementToReplace.outerText = outerText;

    assert_equals(container.textContent, expected);

  }, description);

function testHTML(startingHTML, outerText, expected, description) {

  test(t => {

    const container = document.getElementById("container");

    t.add_cleanup(() => { container.textContent = ""; });

    container.innerHTML = startingHTML;

    const elementToReplace = container.firstElementChild;

    elementToReplace.outerText = outerText;

    assert_equals(container.innerHTML, expected);

  }, description);

</script>