scrollingElement.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/scrollingElement.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset=utf-8>

<title>cssom-view - scrollingElement</title>

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

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

<div id="log"></div>

<script>

function makeDescription(rootDisplay, bodyDisplay) {

  let a = [];

  if (rootDisplay) {

    a.push(`root ${rootDisplay}`);

  if (bodyDisplay) {

    a.push(`body ${bodyDisplay}`);

  let s = a.join(", ");

  if (s) {

    s = ` (${s})`;

  return s;

function quirksTest(rootDisplay, bodyDisplay) {

  async_test(function() {

    let quirksFrame = document.createElement("iframe");

    quirksFrame.onload = this.step_func_done(function() {

      var quirksDoc = quirksFrame.contentDocument;

      assert_equals(quirksDoc.compatMode, "BackCompat", "Should be in quirks mode.");

      assert_not_equals(quirksDoc.body, null, "Should have a body element");

      quirksDoc.documentElement.style.display = rootDisplay;

      quirksDoc.body.style.display = bodyDisplay;

      // Tests for quirks mode document.

      assert_equals(quirksDoc.scrollingElement, quirksDoc.body,

        "scrollingElement in quirks mode should default to body element.");

      quirksDoc.documentElement.style.overflow = "scroll";

      quirksDoc.body.style.overflow = "scroll";

      assert_equals(quirksDoc.scrollingElement, null,

        "scrollingElement in quirks mode should be null if overflow of body and root element isn't visible.");

      quirksDoc.documentElement.style.overflow = "visible";

      assert_equals(quirksDoc.scrollingElement, quirksDoc.body);

      quirksDoc.documentElement.style.overflow = "scroll";

      quirksDoc.body.style.overflow = "visible";

      assert_equals(quirksDoc.scrollingElement, quirksDoc.body);

      quirksDoc.documentElement.style.overflow = "visible";

      assert_equals(quirksDoc.scrollingElement, quirksDoc.body);

      quirksDoc.body.style.display = "none";

      assert_equals(quirksDoc.scrollingElement, quirksDoc.body)

      quirksDoc.body.style.display = "block";

      assert_equals(quirksDoc.scrollingElement, quirksDoc.body);

      quirksDoc.documentElement.appendChild(quirksDoc.createElement("body"));

      assert_equals(quirksDoc.scrollingElement, quirksDoc.body);

      assert_equals(quirksDoc.scrollingElement, quirksDoc.getElementsByTagName("body")[0]);

      quirksDoc.documentElement.removeChild(quirksDoc.documentElement.lastChild);

      assert_equals(quirksDoc.scrollingElement, quirksDoc.body);

      quirksDoc.documentElement.removeChild(quirksDoc.body);

      assert_equals(quirksDoc.scrollingElement, null);

      quirksDoc.documentElement.appendChild(quirksDoc.createElementNS("foobarNS", "body"));

      assert_equals(quirksDoc.scrollingElement, null);

      quirksDoc.removeChild(quirksDoc.documentElement);

      assert_equals(quirksDoc.scrollingElement, null);

      quirksDoc.appendChild(quirksDoc.createElementNS("foobarNS", "html"));

      quirksDoc.documentElement.appendChild(quirksDoc.createElement("body"));

      assert_equals(quirksDoc.scrollingElement, null);

      quirksDoc.removeChild(quirksDoc.documentElement);

      quirksDoc.appendChild(quirksDoc.createElement("body"));

      assert_equals(quirksDoc.scrollingElement, null);

      quirksFrame.remove();

});

    quirksFrame.src =

      URL.createObjectURL(new Blob([], { type: "text/html" }));

    document.body.append(quirksFrame);

  }, `scrollingElement in quirks mode${makeDescription(rootDisplay, bodyDisplay)}`);

function nonQuirksTest(rootDisplay, bodyDisplay) {

  async_test(function() {

    let nonQuirksFrame = document.createElement("iframe");

    nonQuirksFrame.onload = this.step_func_done(function() {

      var nonQuirksDoc = nonQuirksFrame.contentDocument;

      assert_equals(nonQuirksDoc.compatMode, "CSS1Compat", "Should be in standards mode.");

      assert_not_equals(nonQuirksDoc.body, null, "Should have a body element");

      nonQuirksDoc.documentElement.style.display = rootDisplay;

      nonQuirksDoc.body.style.display = bodyDisplay;

      assert_equals(nonQuirksDoc.scrollingElement, nonQuirksDoc.documentElement,

        "scrollingElement in standards mode should be the document element.");

      for (let rootOverflow of ["", "clip", "scroll", "hidden", "visible"]) {

        for (let bodyOverflow of ["", "clip", "scroll", "hidden", "visible"]) {

          nonQuirksDoc.documentElement.style.overflow = rootOverflow;

          nonQuirksDoc.body.style.overflow = bodyOverflow;

          assert_equals(nonQuirksDoc.scrollingElement, nonQuirksDoc.documentElement);

      nonQuirksDoc.removeChild(nonQuirksDoc.documentElement);

      assert_equals(nonQuirksDoc.scrollingElement, null);

      nonQuirksDoc.appendChild(nonQuirksDoc.createElement("foobar"));

      assert_equals(nonQuirksDoc.scrollingElement.localName, "foobar");

      nonQuirksFrame.remove();

});

    nonQuirksFrame.src =

      URL.createObjectURL(new Blob([`<!doctype html>`], { type: "text/html" }));

    document.body.append(nonQuirksFrame);

  }, `scrollingElement in no-quirks mode ${makeDescription(rootDisplay, bodyDisplay)}`);

for (let rootDisplay of ["", "table"]) {

  for (let bodyDisplay of ["", "table"]) {

    quirksTest(rootDisplay, bodyDisplay);

    nonQuirksTest(rootDisplay, bodyDisplay);

</script>