style-attr-update-across-documents.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/style-attr-update-across-documents.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSSStyleDeclaration setter works when a node changes document</title>

<link rel="author" title="Raphael Kubo da Costa" href="raphael.kubo.da.costa@intel.com">

<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-camel-cased-attribute">

<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-webkit-cased-attribute">

<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-dashed-attribute">

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

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

<div id="original-div" style="background-color:green; height: 100px; width: 100px"></div>

<script>

  // Create and return a 100x100 red <div>.

  function createDiv(containerDocument) {

    const div = containerDocument.createElement("div");

    div.style.backgroundColor = "red";

    div.style.height = "100px";

    div.style.width = "100px";

    containerDocument.body.appendChild(div);

    return div;

  async_test(t => {

    const iframeElement = document.createElement("iframe");

    iframeElement.addEventListener("load", t.step_func_done(() => {

      const originalDiv = document.getElementById("original-div");

      const newDiv = createDiv(iframeElement.contentDocument);

      assert_not_equals(newDiv.ownerDocument, document,

                        "The new <div> belongs to the iframe, not the main document");

      document.body.insertBefore(newDiv, originalDiv);

      assert_equals(newDiv.ownerDocument, document,

                    "The new <div> now belongs to the main document");

      newDiv.style.backgroundColor = "blue";

      assert_equals(window.getComputedStyle(newDiv).getPropertyValue("background-color"),

                    "rgb(0, 0, 255)",

                    "The new <div>'s background-color is blue");

      document.body.removeChild(iframeElement);

      newDiv.style.backgroundColor = "green";

      assert_equals(window.getComputedStyle(newDiv).getPropertyValue("background-color"),

                    "rgb(0, 128, 0)",

                    "The new <div>'s background-color is green");

    }));

    document.body.appendChild(iframeElement);

  }, "Changing the style of a node that switched documents works");

</script>