outerhtml-03.html - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /domparsing/outerhtml-03.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>outerHTML miscellaneous tests</title>

<link rel="help" href="https://w3c.github.io/DOM-Parsing/#dom-element-outerhtml">

<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">

<link rel="author" title="Joris van der Wel" href="mailto:joris@jorisvanderwel.com">

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

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

<div id="container">

foo

  <p>bar</p>

</div>

<iframe></iframe>

<script>

"use strict";

test(() => {

  const element = document.createElement("div");

  element.textContent = "foo";

  element.outerHTML = "<p>bar</p>";

  assert_equals(element.outerHTML, "<div>foo</div>");

}, "Setting outerHTML on an Element without a parent should have no effect");

test(() => {

  const fragment = document.createDocumentFragment();

  const oldElement = document.createElement("div");

  fragment.appendChild(oldElement);

  oldElement.innerHTML = "foo<p>bar</p>";

  const newHTML = `<div><h1>Hysterocrates crassipes</h1>" +

                   <p>spinnensoort in de taxonomische indeling van de vogelspinnen</p></div>`;

  // the <body> element should not be included

  // (because the context node will be a temporary <body> element)

  oldElement.outerHTML = `<body>${newHTML}</body>`;

  assert_equals(oldElement.outerHTML, "<div>foo<p>bar</p></div>");

  assert_equals(fragment.firstChild.outerHTML, newHTML);

}, "Setting outerHTML on an Element with a DocumentFragment parent should create a temporary <body>");

test(() => {

  const newHTML = "<b>az</b>";

  const container = document.querySelector("#container");

  const oldElement = container.children[0];

  oldElement.outerHTML = newHTML;

  assert_equals(oldElement.outerHTML, "<p>bar</p>");

  assert_equals(container.children[0].outerHTML, newHTML);

}, "Setting outerHTML on an Element with a parent should replace it but leave the element unchanged");

async_test(t => {

  const iframe = document.querySelector("iframe");

  iframe.onload = t.step_func_done(() => {

    const newHTML = `<body><h1>Hysterocrates crassipes</h1>

                     <p>spinnensoort in de taxonomische indeling van de vogelspinnen</p></body>`;

    const oldBody = iframe.contentWindow.document.body;

    oldBody.outerHTML = newHTML;

    assert_equals(oldBody.outerHTML, "<body>foo<p>bar</p>\n</body>");

    assert_equals(iframe.contentWindow.document.body.outerHTML, newHTML);

});

  iframe.src = "outerhtml-03-support.html";

}, "Setting outerHTML on a <body> element should replace it but leave the element unchanged");

</script>