Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/fullscreen
parent: Initial commit. (diff)
download: firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
84 files changed, 3051 insertions, 0 deletions
diff --git a/testing/web-platform/tests/fullscreen/META.yml b/testing/web-platform/tests/fullscreen/META.yml
new file mode 100644
index 0000000000..fbdb76390c
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/META.yml
@@ -0,0 +1,5 @@
+spec: https://fullscreen.spec.whatwg.org/
+suggested_reviewers:
+  - aliams
+  - foolip
+  - upsuper
diff --git a/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-active-document.html b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-active-document.html
new file mode 100644
index 0000000000..c96a56f352
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-active-document.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>
+    Document#exitFullscreen() when the document is not the active document
+</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<iframe allowfullscreen></iframe>
+<script>
+    promise_test(async (t) => {
+        const iframe = document.querySelector("iframe");
+        const stolenTypeError = iframe.contentWindow.TypeError;
+        const documentBeforeNav = iframe.contentDocument;
+
+        await new Promise((resolve) => {
+            iframe.onload = resolve;
+            iframe.src = "about:blank";
+        });
+
+        await promise_rejects_js(
+            t,
+            stolenTypeError,
+            documentBeforeNav.documentElement.requestFullscreen(),
+            "Promise should be undefined after navigation"
+        );
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-nested-in-iframe.html b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-nested-in-iframe.html
new file mode 100644
index 0000000000..893814dec3
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-nested-in-iframe.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>Document#exitFullscreen() for nested fullscreen inside an iframe</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="../trusted-click.js"></script>
+<iframe allowfullscreen></iframe>
+<script>
+    promise_test(async (t) => {
+        const iframe = document.querySelector("iframe");
+        await new Promise((resolve) => {
+            iframe.onload = resolve;
+            iframe.srcdoc = "<div id='outer'><div id='inner'></div></div>";
+        });
+        const iframeDoc = iframe.contentDocument;
+        const outer = iframeDoc.getElementById("outer");
+        const inner = iframeDoc.getElementById("inner");
+
+        // First request fullscreen for the outer element.
+        await Promise.all([fullScreenChange(), trusted_request(outer)]);
+        assert_equals(document.fullscreenElement, iframe);
+        assert_equals(iframeDoc.fullscreenElement, outer);
+
+        // Then request fullscreen for the inner element.
+        await Promise.all([fullScreenChange(), trusted_request(inner)]);
+        assert_equals(document.fullscreenElement, iframe);
+        assert_equals(iframeDoc.fullscreenElement, inner);
+
+        // Now exit fullscreen for the iframe's content document.
+        await Promise.all([fullScreenChange(), iframeDoc.exitFullscreen()]);
+        assert_equals(document.fullscreenElement, null);
+        assert_equals(iframeDoc.fullscreenElement, null);
+    }, "Exit fullscreen for nested fullscreen inside an iframe");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-nested-shadow-dom.html b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-nested-shadow-dom.html
new file mode 100644
index 0000000000..695ae00322
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-nested-shadow-dom.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<title>Exiting fullscreen from a nested shadow root should work correctly.</title>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1652155">
+<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>
+<div id="host">
+  <button>
+    <!--
+        This is gross, but testdriver doesn't let us click stuff in shadow
+        DOM, so here we are instead, using nested slots.
+    -->
+    fullscreen
+  </button>
+</div>
+<script>
+promise_test(async function() {
+  let host = document.getElementById("host");
+  host.attachShadow({ mode: "open" }).innerHTML = `
+    <style>
+      #outer { width: 200px; height: 200px; background: blue }
+    </style>
+    <div id="outer">
+      <slot></slot>
+    </div>
+  `;
+
+  let outer = host.shadowRoot.getElementById("outer");
+  outer.attachShadow({ mode: "open" }).innerHTML = `
+    <style>
+      #inner { width: 100px; height: 100px; background: purple }
+    </style>
+    <div id="inner"></div>
+    <slot></slot>
+  `;
+
+  let button = document.querySelector("button");
+
+  let inner = outer.shadowRoot.getElementById("inner");
+  let finished = new Promise(resolve => {
+    button.addEventListener("click", async function() {
+      await outer.requestFullscreen();
+      assert_equals(outer.getRootNode().fullscreenElement, outer);
+      assert_equals(document.fullscreenElement, host);
+
+      button.addEventListener("click", async function() {
+        await inner.requestFullscreen();
+        assert_equals(inner.getRootNode().fullscreenElement, inner);
+        assert_equals(document.fullscreenElement, host);
+        await document.exitFullscreen();
+        assert_equals(inner.getRootNode().fullscreenElement, null);
+        assert_equals(outer.getRootNode().fullscreenElement, outer);
+        assert_equals(document.fullscreenElement, host);
+        resolve();
+      }, { once: true });
+
+      requestAnimationFrame(() => requestAnimationFrame(() => {
+        test_driver.click(button);
+      }));
+    }, { once: true });
+  });
+
+  test_driver.click(button);
+  await finished;
+}, "Exiting fullscreen from a nested shadow root works correctly.");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-nested.html b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-nested.html
new file mode 100644
index 0000000000..37332b9b8f
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-nested.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>Document#exitFullscreen() for nested fullscreen</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="../trusted-click.js"></script>
+<div><div></div></div>
+<script>
+    promise_test(async (t) => {
+        const outer = document.querySelector("div");
+        const inner = outer.firstChild;
+
+        document.onfullscreenerror = t.unreached_func("fullscreenerror event");
+
+        // First request fullscreen for the outer element.
+        await Promise.all([
+            fullScreenChange(),
+            trusted_request(outer),
+        ]);
+
+        assert_equals(document.fullscreenElement, outer);
+
+        // Then request fullscreen for the inner element.
+        const p = trusted_request(inner);
+
+        // Even though we are already in fullscreen, the change in
+        // document.fullscreenElement should not happen synchronously.
+        assert_equals(document.fullscreenElement, outer);
+        await Promise.all([
+            fullScreenChange(),
+            p,
+        ]);
+        assert_equals(document.fullscreenElement, inner);
+
+        // Now exit fullscreen.
+        const exitP = document.exitFullscreen();
+        // Even though we don't need to exit fullscreen, the change in
+        // document.fullscreenElement should not happen synchronously.
+        assert_equals(document.fullscreenElement, inner);
+        await Promise.all([
+            exitP,
+            fullScreenChange(),
+        ]);
+        assert_equals(document.fullscreenElement, outer);
+    }, "Exit fullscreen for nested fullscreen");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-timing.html b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-timing.html
new file mode 100644
index 0000000000..43e01743b9
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-timing.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>Document#exitFullscreen() timing</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="../trusted-click.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async (t) => {
+        const div = document.querySelector("div");
+        await trusted_request(div);
+
+        await Promise.all([
+            new Promise((r) => (document.onfullscreenchange = r)),
+            document.exitFullscreen(),
+        ]);
+
+        // If fullscreenchange is an animation frame event, then animation frame
+        // callbacks should be run after it is fired, before the timer callback.
+        // The resize event should fire before the fullscreenchange event.
+        const events = [];
+        const callback = t.step_func((event) => {
+            // fullscreenElement should have changed before either event is fired.
+            assert_equals(
+                document.fullscreenElement,
+                null,
+                `fullscreenElement in ${event.type} event`
+            );
+            events.push(event.type);
+            if (event.type == "fullscreenchange") {
+                step_timeout(t.unreached_func("timer callback"));
+                requestAnimationFrame(
+                    t.step_func_done(() => {
+                        assert_array_equals(
+                            events,
+                            ["resize", "fullscreenchange"],
+                            "event order"
+                        );
+                    })
+                );
+            }
+        });
+        document.onfullscreenchange = window.onresize = callback;
+    }, "Timing of fullscreenchange and resize events");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-twice.html b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-twice.html
new file mode 100644
index 0000000000..aa8538cce4
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-twice.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<title>Document#exitFullscreen() called twice</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="../trusted-click.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async (t) => {
+        const once = { once: true };
+        const div = document.querySelector("div");
+        document.onfullscreenerror = t.unreached_func("fullscreenerror event");
+
+        await Promise.all([
+            fullScreenChange(),
+            trusted_request(div),
+        ]);
+
+        // We are now in fullscreen.
+        assert_equals(document.fullscreenElement, div);
+
+        // Exit fullscreen twice.
+        const firstPromise = document.exitFullscreen();
+        assert_equals(
+            document.fullscreenElement,
+            div,
+            "fullscreenElement after first exitFullscreen()"
+        );
+
+        const secondPromise = document.exitFullscreen();
+        assert_equals(
+            document.fullscreenElement,
+            div,
+            "fullscreenElement after second exitFullscreen()"
+        );
+        const eventChange = new Promise((resolve) => {
+            document.addEventListener("fullscreenchange", resolve, once);
+            document.addEventListener(
+                "fullscreenchange",
+                t.unreached_func("second event fired"),
+                once
+            );
+        });
+
+        await Promise.all([
+            fullScreenChange,
+            firstPromise,
+            secondPromise,
+            eventChange,
+        ]);
+        assert_equals(document.fullscreenElement, null);
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen.html b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen.html
new file mode 100644
index 0000000000..666950ff55
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-exit-fullscreen.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Document#exitFullscreen()</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="../trusted-click.js"></script>
+<div id="log"></div>
+<body></body>
+<script>
+    promise_test(async function (t) {
+        const div = document.querySelector("div");
+        // enter fullscreen
+        await trusted_request(div);
+
+        // Exit fullscreen
+        const [event] = await Promise.all([
+            fullScreenChange(),
+            document.exitFullscreen(),
+        ]);
+
+        // Check event from exiting fullscreen
+        assert_equals(event.target, div, "event.target");
+        assert_true(event.bubbles, "event.bubbles");
+        assert_false(event.cancelable, "event.cancelable");
+        assert_true(event.composed, "event.composed");
+    }, "Checks that the fullscreenchange event is fired when exiting fullscreen");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-fullscreen-element.html b/testing/web-platform/tests/fullscreen/api/document-fullscreen-element.html
new file mode 100644
index 0000000000..8b3a16a2a8
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-fullscreen-element.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>Document#fullscreenElement</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="../trusted-click.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async function (t) {
+        const div = document.querySelector("div");
+
+        await trusted_click();
+
+        assert_equals(
+            document.fullscreenElement,
+            null,
+            "fullscreenElement before requestFullscreen()"
+        );
+
+        const fsPromise = div.requestFullscreen();
+        assert_equals(
+            document.fullscreenElement,
+            null,
+            "fullscreenElement after requestFullscreen()"
+        );
+        await fsPromise;
+        assert_equals(
+            document.fullscreenElement,
+            div,
+            "fullscreenElement before exitFullscreen()"
+        );
+        const exitPromise = document.exitFullscreen();
+        assert_equals(
+            document.fullscreenElement,
+            div,
+            "fullscreenElement after exitFullscreen()"
+        );
+        await Promise.all([fullScreenChange(), exitPromise]);
+
+        assert_equals(
+            document.fullscreenElement,
+            null,
+            "fullscreenElement after exiting fullscreen"
+        );
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-active-document.html b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-active-document.html
new file mode 100644
index 0000000000..360982c4a5
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-active-document.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>
+    Document#fullscreenEnabled when the document is not the active document
+</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<iframe allowfullscreen></iframe>
+<script>
+    promise_test(async (t) => {
+        const iframe = document.querySelector("iframe");
+        const documentBeforeNav = iframe.contentDocument;
+        await new Promise((resolve) => {
+            iframe.onload = resolve;
+            iframe.src = "/common/blank.html";
+        });
+        assert_false(documentBeforeNav.fullscreenEnabled)
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-cross-origin.sub.html b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-cross-origin.sub.html
new file mode 100644
index 0000000000..bcfc98bbca
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-cross-origin.sub.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>Document#fullscreenEnabled</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<iframe src="resources/report-fullscreen-enabled.html" name="same-origin-default"></iframe>
+<iframe src="resources/report-fullscreen-enabled.html" allowfullscreen name="same-origin-allow"></iframe>
+<iframe src="http://{{hosts[][]}}:{{ports[http][0]}}/fullscreen/api/resources/report-fullscreen-enabled.html" name="cross-origin-default"></iframe>
+<iframe src="http://{{hosts[][]}}:{{ports[http][1]}}/fullscreen/api/resources/report-fullscreen-enabled.html" allowfullscreen name="cross-origin-allow"></iframe>
+<script>
+var expectations = {
+  "same-origin-default": true,
+  "same-origin-allow": true,
+  "cross-origin-default": false,
+  "cross-origin-allow": true
+};
+
+var tests = {};
+for (var name in expectations) {
+  tests[name] = async_test( 'Fullscreen enabled test: ' + name);
+}
+
+// When a message is received from a child frame, ensure that the report
+// matches the expectations.
+window.addEventListener('message', e => {
+  if (e.data.report && e.data.report.api == "fullscreen") {
+    if (e.data.report.frame in expectations) {
+      tests[e.data.report.frame].step(() => {
+        assert_equals(e.data.report.enabled, expectations[e.data.report.frame],
+          e.data.report.frame + " frame fullscreenEnabled");
+      });
+      delete expectations[e.data.report.frame];
+      tests[e.data.report.frame].done();
+    }
+  }
+});
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-removing-allowfullscreen.sub.html b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-removing-allowfullscreen.sub.html
new file mode 100644
index 0000000000..687a4ff1e4
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-removing-allowfullscreen.sub.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<title>
+    Document#fullscreenEnabled removing allowfullscreen after load and then
+    navigating
+</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<iframe></iframe>
+<script>
+    function requestStatus(iframe) {
+        iframe.contentWindow.postMessage(
+            "What is document.fullscreenEnabled?",
+            "*"
+        );
+        return new Promise((resolve) => {
+            window.addEventListener("message", function listener(e) {
+                window.removeEventListener("message", listener);
+                resolve(event.data);
+            });
+        });
+    }
+
+    promise_test(async (t) => {
+        const iframe = document.querySelector("iframe");
+        iframe.allowFullscreen = true;
+        assert_true(iframe.allowFullscreen, "allowFullscreen is false");
+        assert_true(
+            iframe.hasAttribute("allowfullscreen"),
+            "allowFullscreen attribute is present"
+        );
+        await new Promise((resolve) => {
+            iframe.onload = resolve;
+            const path = location.pathname.substring(
+                0,
+                location.pathname.lastIndexOf("/") + 1
+            );
+            iframe.src = `http://{{hosts[][]}}:{{ports[http][0]}}${path}resources/echo-fullscreenEnabled.html`;
+        });
+
+        assert_true(
+            await requestStatus(iframe),
+            "document.fullscreenEnabled in the iframe, before navigation"
+        );
+
+        iframe.allowFullscreen = false;
+        assert_false(iframe.allowFullscreen, "allowFullscreen is false");
+        assert_false(
+            iframe.hasAttribute("allowfullscreen"),
+            "allowFullscreen attribute is not present"
+        );
+
+        await new Promise((resolve) => {
+            iframe.onload = resolve;
+            iframe.contentWindow.location.href = iframe.src + "?2";
+        });
+
+        assert_false(
+            await requestStatus(iframe),
+            "document.fullscreenEnabled in the iframe, after navigation"
+        );
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-setting-allowfullscreen-timing.sub.html b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-setting-allowfullscreen-timing.sub.html
new file mode 100644
index 0000000000..49d91c8501
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-setting-allowfullscreen-timing.sub.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Document#fullscreenEnabled setting allowfullscreen after document creation, before response</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+// Set allowfullscreen attribute in a timeout after <iframe> has been inserted to the document.
+// The iframe's response is delayed so it happens after the attribute is set.
+
+async_test((t) => {
+  const iframe = document.createElement('iframe');
+  // no allowfullscreen attribute
+
+  const path = location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1);
+  iframe.src = "http://{{hosts[][]}}:{{ports[http][0]}}" + path + "resources/echo-fullscreenEnabled.html?pipe=trickle(d1)";
+  iframe.onload = t.step_func(() => {
+    iframe.contentWindow.postMessage('What is document.fullscreenEnabled?', '*');
+  });
+
+  window.onmessage = t.step_func_done((e) => {
+    assert_false(e.data, 'document.fullscreenEnabled in the iframe');
+  });
+
+  document.body.appendChild(iframe);
+
+  t.step_timeout(() => {
+    iframe.allowFullscreen = true;
+  }, 10);
+});
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-setting-allowfullscreen.sub.html b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-setting-allowfullscreen.sub.html
new file mode 100644
index 0000000000..4894fa0663
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled-setting-allowfullscreen.sub.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>Document#fullscreenEnabled setting allowfullscreen after load and then navigating</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+async_test((t) => {
+  const iframe = document.createElement('iframe');
+  // no allowfullscreen attribute
+
+  let i = 0;
+
+  const path = location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1);
+  iframe.src = "http://{{hosts[][]}}:{{ports[http][0]}}" + path + "resources/echo-fullscreenEnabled.html";
+  iframe.onload = t.step_func(() => {
+    if (i === 0) {
+      iframe.allowFullscreen = true;
+    }
+    iframe.contentWindow.postMessage('What is document.fullscreenEnabled?', '*');
+  });
+
+  window.onmessage = t.step_func((e) => {
+    i++;
+    if (i === 1) {
+      assert_false(e.data, 'document.fullscreenEnabled in the iframe, before navigation');
+
+      // Navigate the iframe. This will fire a second 'load' event on the iframe.
+      iframe.contentWindow.location.href = iframe.src + '?2';
+    } else {
+      assert_true(e.data, 'document.fullscreenEnabled in the iframe, after navigation');
+      t.done();
+    }
+  });
+
+  document.body.appendChild(iframe);
+});
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled.html b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled.html
new file mode 100644
index 0000000000..40430d7bbf
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-fullscreen-enabled.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Document#fullscreenEnabled</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<iframe></iframe>
+<script>
+test(function()
+{
+    assert_true(document.fullscreenEnabled, "top-level document");
+    const iframe = document.querySelector("iframe");
+    assert_true(iframe.contentDocument.fullscreenEnabled, "same-origin iframe");
+});
+
+// The cross-origin iframe case is tested in
+// /html/semantics/embedded-content/the-iframe-element/iframe-allowfullscreen.html
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-onfullscreenchange.html b/testing/web-platform/tests/fullscreen/api/document-onfullscreenchange.html
new file mode 100644
index 0000000000..10503c6ccb
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-onfullscreenchange.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Document#onfullscreenchange</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="../trusted-click.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async (t) => {
+        const div = document.querySelector("div");
+        assert_equals(
+            document.onfullscreenchange,
+            null,
+            "initial onfullscreenchange"
+        );
+        const [, event] = await Promise.all([
+            trusted_request(div),
+            new Promise((r) =>
+                document.addEventListener("fullscreenchange", r)
+            ),
+        ]);
+        assert_true(event instanceof Event);
+        assert_equals(event.target, div);
+    }, "Checks that the fullscreenchange event is fired when entering fullscreen");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/document-onfullscreenerror.html b/testing/web-platform/tests/fullscreen/api/document-onfullscreenerror.html
new file mode 100644
index 0000000000..ac92a9c24b
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/document-onfullscreenerror.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>Document#onfullscreenerror</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async (t) => {
+        assert_equals(
+            document.onfullscreenerror,
+            null,
+            "initial onfullscreenerror"
+        );
+        const [, event] = await Promise.all([
+            promise_rejects_js(
+                t,
+                TypeError,
+                document.documentElement.requestFullscreen()
+            ),
+            new Promise((r) => document.addEventListener("fullscreenerror", r)),
+        ]);
+        assert_equals(event.target, document.documentElement);
+        assert_true(event instanceof Event);
+    }, "Checks that the fullscreenerror event is fired when entering fullscreen fails");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-ready-allowed.html b/testing/web-platform/tests/fullscreen/api/element-ready-allowed.html
new file mode 100644
index 0000000000..79890fa82f
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-ready-allowed.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Element ready check with enabled flag not set</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="../trusted-click.js"></script>
+<div id="log"></div>
+<iframe></iframe>
+<script>
+    promise_test(async function (t) {
+        const iframe = document.querySelector("iframe");
+        await new Promise((r) => {
+            iframe.onload = r;
+            iframe.src = "about:blank";
+        });
+        document.onfullscreenchange = t.unreached_func(
+            "document fullscreenchange event"
+        );
+        document.onfullscreenerror = t.unreached_func(
+            "document fullscreenerror event"
+        );
+        iframe.contentDocument.onfullscreenchange = t.unreached_func(
+            "iframe fullscreenchange event"
+        );
+        assert_false(iframe.allowFullscreen, "fullscreen enabled flag");
+        assert_true(
+            iframe.contentDocument.fullscreenEnabled,
+            "fullscreen enabled flag"
+        );
+        return trusted_request(iframe.contentDocument.body, document.body);
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-ready-check-allowed-cross-origin.sub.html b/testing/web-platform/tests/fullscreen/api/element-ready-check-allowed-cross-origin.sub.html
new file mode 100644
index 0000000000..9c93ed006b
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-ready-check-allowed-cross-origin.sub.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>Element ready check with allowfullscreen attribute</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="../trusted-click.js"></script>
+<iframe name="cross-origin-allowed" allowfullscreen></iframe>
+<script>
+    promise_test(async (t) => {
+        // Trigger the child frame to report as soon as its content is loaded.
+        const iframe = document.querySelector("iframe");
+        await new Promise((resolve) => {
+            iframe.onload = resolve;
+            iframe.src =
+                "http://{{hosts[][]}}:{{ports[http][0]}}/fullscreen/api/resources/attempt-fullscreen.html";
+        });
+
+        // Activate the child frame.
+        await test_driver.click(iframe);
+
+        // When a message is received from a child frame, ensure that the report
+        // matches the expectations.
+        const messagePromise = promiseMessage(iframe);
+        const data = await messagePromise;
+        assert_true(
+            data.report.result,
+            `${data.report.frame} frame did enter fullscreen`
+        );
+    }, "Element ready check with allowfullscreen attribute");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-ready-check-containing-iframe.html b/testing/web-platform/tests/fullscreen/api/element-ready-check-containing-iframe.html
new file mode 100644
index 0000000000..8d55aea563
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-ready-check-containing-iframe.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>Element ready check for containing iframe</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="../trusted-click.js"></script>
+<div id="log"></div>
+<iframe allowfullscreen></iframe>
+<iframe allowfullscreen></iframe>
+<script>
+    // wait for load event to avoid https://bugzil.la/1493878
+    window.onload = function () {
+        promise_test(async function (t) {
+            const [iframe1, iframe2] = document.getElementsByTagName("iframe");
+
+            iframe2.contentDocument.onfullscreenerror = t.unreached_func(
+                "fullscreenerror event"
+            );
+
+            await Promise.all([
+                trusted_request(
+                    iframe1.contentDocument.body,
+                    iframe1.contentDocument.body
+                ),
+                fullScreenChange(),
+            ]);
+
+            assert_equals(document.fullscreenElement, iframe1);
+
+            await Promise.all([
+                trusted_request(
+                    iframe2.contentDocument.body,
+                    iframe1.contentDocument.body
+                ),
+                fullScreenChange(iframe2.contentDocument),
+            ]);
+        }, "Element ready check for containing iframe");
+    };
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-ready-check-fullscreen-element-sibling.html b/testing/web-platform/tests/fullscreen/api/element-ready-check-fullscreen-element-sibling.html
new file mode 100644
index 0000000000..6394c13ee3
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-ready-check-fullscreen-element-sibling.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Element ready check for sibling of fullscreen element</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="a"></div>
+<div id="b"></div>
+<script>
+    promise_test(async (t) => {
+        document.onfullscreenerror = t.unreached_func(
+            "second fullscreenchange event"
+        );
+        const a = document.getElementById("a");
+        const b = document.getElementById("b");
+        await Promise.all([trusted_request(a), fullScreenChange()]);
+
+        assert_equals(document.fullscreenElement, a, "fullscreen element is a");
+
+        await Promise.all([trusted_request(b, a), fullScreenChange()]);
+        assert_equals(document.fullscreenElement, b, "fullscreen element is b");
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-ready-check-fullscreen-iframe-child.html b/testing/web-platform/tests/fullscreen/api/element-ready-check-fullscreen-iframe-child.html
new file mode 100644
index 0000000000..77aad41e7d
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-ready-check-fullscreen-iframe-child.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>Element ready check for child of a fullscreen iframe</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="../trusted-click.js"></script>
+<div id="log"></div>
+<iframe><!-- script inserts div here --></iframe>
+<script>
+    // Verify that an iframe can itself go fullscreen, and that this doesn't
+    // influence the iframe ancestor test of the element ready check.
+    promise_test(async (t) => {
+        document.onfullscreenerror = t.unreached_func("fullscreenerror event");
+        const iframe = document.querySelector("iframe");
+        await Promise.all([trusted_request(iframe), fullScreenChange()]);
+
+        assert_equals(document.fullscreenElement, iframe, "fullscreen element");
+
+        // This adds the div to the iframe element itself, not to the iframe's
+        // contentDocument. It's done here because the HTML parser treats the
+        // content of iframe as a text node.
+        var div = document.createElement("div");
+        iframe.appendChild(div);
+
+        await Promise.all([
+            trusted_request(div, iframe.contentDocument.body),
+            fullScreenChange(),
+        ]);
+        assert_equals(document.fullscreenElement, div);
+    }, "Element ready check for child of a fullscreen iframe");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-ready-check-iframe-child.html b/testing/web-platform/tests/fullscreen/api/element-ready-check-iframe-child.html
new file mode 100644
index 0000000000..9b9d06ad75
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-ready-check-iframe-child.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>Element ready check for child of iframe</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="../trusted-click.js"></script>
+<div id="log"></div>
+<iframe><!-- script inserts child here --></iframe>
+<script>
+    promise_test(async (t) => {
+        document.onfullscreenerror = t.unreached_func("fullscreenerror event");
+        const div = document.createElement("div");
+        document.querySelector("iframe").appendChild(div);
+
+        await Promise.all([
+            trusted_request(div, document.body),
+            fullScreenChange(),
+        ]);
+
+        assert_equals(document.fullscreenElement, div);
+    }, "Element ready check for child of iframe");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-ready-check-not-allowed-cross-origin.sub.html b/testing/web-platform/tests/fullscreen/api/element-ready-check-not-allowed-cross-origin.sub.html
new file mode 100644
index 0000000000..a59906ba9f
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-ready-check-not-allowed-cross-origin.sub.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>Element ready check with no allowfullscreen attribute</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="../trusted-click.js"></script>
+<body>
+  <iframe name="cross-origin-default"></iframe>
+</body>
+
+<script>
+  // Allow the time bomb to be triggered.
+  setup({ allow_uncaught_exception: true });
+
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) return document.exitFullscreen();
+    });
+    const iframe = document.querySelector("iframe");
+    await new Promise((resolve) => {
+      iframe.onload = resolve;
+      iframe.src =
+        "http://{{hosts[][]}}:{{ports[http][0]}}/fullscreen/api/resources/attempt-fullscreen.html";
+    });
+    // Trigger the child frame to report as soon as its content is loaded.
+    await trusted_click();
+    const timeBomb = new Promise((resolve, reject) => {
+      t.step_timeout(() => {
+        const error = new Error("Timed out waiting for message");
+        reject(error);
+      }, 5000);
+    });
+    const data = await Promise.race([promiseMessage(iframe), timeBomb]);
+    // When a message is received from a child frame, ensure that the report
+    // matches the expectations.
+    assert_false(
+      data.report.result,
+      `${data.report.frame} frame entered fullscreen, but allowfullscreen was not set`
+    );
+  }, "Cross-origin element ready check with no allowfullscreen or allow attribute");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-ready-check-not-in-document.html b/testing/web-platform/tests/fullscreen/api/element-ready-check-not-in-document.html
new file mode 100644
index 0000000000..210ccc2ace
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-ready-check-not-in-document.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Element ready check for element not in a document</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="../trusted-click.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async function (t) {
+        const div = document.createElement("div");
+        document.onfullscreenchange = t.unreached_func(
+            "fullscreenchange event"
+        );
+        await Promise.all([
+            promise_rejects_js(
+                t,
+                TypeError,
+                trusted_request(div, document.body)
+            ),
+            new Promise((resolve) => {
+                document.onfullscreenerror = resolve;
+            }),
+        ]);
+    }, "Element ready check for element not in a document");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-active-document.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-active-document.html
new file mode 100644
index 0000000000..bac8631059
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-active-document.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>
+    Element#requestFullscreen() when the document is not the active document
+</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<iframe allowfullscreen></iframe>
+<script>
+    promise_test(async (t) => {
+        const iframe = document.querySelector("iframe");
+        const typeErrorConstructor = iframe.contentWindow.TypeError;
+        const documentBeforeNav = iframe.contentDocument;
+
+        documentBeforeNav.onfullscreenchange = t.unreached_func(
+            "fullscreenchange event"
+        );
+        documentBeforeNav.onfullscreenerror = t.unreached_func(
+            "fullscreenerror event"
+        );
+
+        await new Promise((r) => {
+            iframe.src = "/common/blank.html";
+            iframe.onload = r;
+        });
+
+        await promise_rejects_js(
+            t,
+            typeErrorConstructor,
+            documentBeforeNav.documentElement.requestFullscreen()
+        );
+
+        // Per spec the fullscreenerror event should be fired at the next animation
+        // frame, but at least Gecko and WebKit will instead effectively do "queue a
+        // task to fire ...". Use both rAF and setTimeout to fail even if the timing
+        // of the (unexpected) event isn't as expected.
+        await new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                t.step_timeout(resolve);
+            });
+        });
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-after-error.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-after-error.html
new file mode 100644
index 0000000000..4278382770
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-after-error.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() after error</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>
+<div id="log"></div>
+<script>
+promise_test(async t => {
+  await new Promise(r => window.onload = r);
+
+  const element1 = document.createElement("div");
+  document.body.appendChild(element1);
+
+  await test_driver.bless("request full screen");
+  let promise = element1.requestFullscreen()
+  await new Promise(r => t.step_timeout(r, 0))
+  document.body.removeChild(element1);
+  try {
+    await promise;
+    assert_unreached("requestFullscreen shouldn't be successful");
+  } catch (e) {
+  }
+  try {
+    await document.exitFullscreen();
+  } catch (e) {
+  }
+
+  const element2 = document.createElement("div");
+  document.body.appendChild(element2);
+
+  await test_driver.bless("request full screen");
+  try {
+    await element2.requestFullscreen();
+  } catch (e) {
+    assert_unreached("requestFullscreen shouldn't throw an error - " + e.message);
+  }
+  await document.exitFullscreen();
+}, "requestFullscreen works even if previous requestFullscreen causes an error");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-exit-iframe.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-exit-iframe.html
new file mode 100644
index 0000000000..f0bf5f6bac
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-exit-iframe.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<title>
+    Element#requestFullscreen() and Document#exitFullscreen() in iframe
+</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="../trusted-click.js"></script>
+<div id="log"></div>
+<iframe allowfullscreen></iframe>
+<script>
+    const iframe = document.querySelector("iframe");
+    let iframeDoc;
+    let iframeBody;
+
+    promise_setup(async () => {
+        const iframe = document.querySelector("iframe");
+        await new Promise((resolve) => {
+            iframe.onload = resolve;
+            iframe.src = "about:blank";
+        });
+        iframeDoc = iframe.contentDocument;
+        iframeBody = iframeDoc.body;
+    });
+    /**
+     *
+     * @param {Document} doc
+     * @param {HTMLElement} value
+     * @returns {Promise<Event>}
+     */
+    function makeChangeListener(doc) {
+        return new Promise((resolve) => {
+            doc.addEventListener("fullscreenchange", resolve, { once: true });
+        });
+    }
+
+    // Both when entering and exiting, the fullscreenchange event is fired first
+    // on the outer document and then on the iframe's document. This is because
+    // the events are fired in animation frame tasks, which run in "frame tree"
+    // order.
+    promise_test(async (t) => {
+        document.onfullscreenerror = t.unreached_func(
+            "document fullscreenerror event"
+        );
+        iframeDoc.onfullscreenerror = t.unreached_func(
+            "iframe fullscreenerror event"
+        );
+        const outerPromise = makeChangeListener(document);
+        const innerPromise = makeChangeListener(iframeDoc);
+        const request = trusted_request(iframeBody, iframeBody);
+
+        const winningEvent = await Promise.race([outerPromise, innerPromise]);
+        assert_equals(winningEvent.target, iframe);
+
+        await Promise.allSettled([outerPromise, innerPromise, request]);
+
+        assert_equals(
+            document.fullscreenElement,
+            iframe,
+            "outer fullscreenElement"
+        );
+
+        assert_equals(
+            iframeDoc.fullscreenElement,
+            iframeBody,
+            "inner fullscreenElement"
+        );
+    }, "Checks that the fullscreenchange events fire in right order when entering fullscreen");
+
+    promise_test(async (t) => {
+        document.onfullscreenerror = t.unreached_func(
+            "document fullscreenerror event"
+        );
+        iframeDoc.onfullscreenerror = t.unreached_func(
+            "iframe fullscreenerror event"
+        );
+        const outerPromise = makeChangeListener(document);
+        const innerPromise = makeChangeListener(iframeDoc);
+        const exitPromise = iframeDoc.exitFullscreen();
+
+        const winningEvent = await Promise.race([outerPromise, innerPromise]);
+        assert_equals(winningEvent.target, iframe);
+
+        await Promise.allSettled([outerPromise, innerPromise, exitPromise]);
+        assert_equals(
+            document.fullscreenElement,
+            null,
+            "outer fullscreenElement"
+        );
+        assert_equals(
+            iframeDoc.fullscreenElement,
+            null,
+            "inner fullscreenElement"
+        );
+    }, "Checks that the fullscreenchange events fire in right order when exiting fullscreen");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-move-to-iframe.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-move-to-iframe.html
new file mode 100644
index 0000000000..f758835012
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-move-to-iframe.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<title>
+    Element#requestFullscreen() followed by moving the element into an iframe
+</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="target"></div>
+<iframe allowfullscreen></iframe>
+<script>
+    // rfsPromise will be uncaught
+    setup({ allow_uncaught_exception: true });
+
+    promise_test(async (t) => {
+        const iframe = document.querySelector("iframe");
+        await new Promise((r) => {
+            iframe.onload = r;
+            iframe.src = "about:blank";
+        });
+        const target = document.getElementById("target");
+        const iframeDoc = iframe.contentDocument;
+
+        iframeDoc.onfullscreenchange = t.unreached_func(
+            "fullscreenchange event in iframe"
+        );
+        iframeDoc.onfullscreenerror = t.unreached_func(
+            "fullscreenerror event in iframe"
+        );
+        document.onfullscreenchange = t.unreached_func(
+            "fullscreenchange event"
+        );
+
+        const errorPromise = new Promise(
+            (resolve) => (document.onfullscreenerror = resolve)
+        );
+        await trusted_click(document.body);
+        const rfsPromise = target.requestFullscreen();
+        iframeDoc.body.appendChild(target);
+        const event = await errorPromise;
+        assert_equals(
+            iframeDoc.fullscreenElement,
+            null,
+            "inner fullscreen element"
+        );
+        assert_equals(
+            document.fullscreenElement,
+            null,
+            "outer fullscreen element"
+        );
+        assert_equals(event.target, document, "event target");
+        await promise_rejects_js(
+            t,
+            TypeError,
+            rfsPromise,
+            "requestFullscreen promise"
+        );
+    }, "Element#requestFullscreen() followed by moving the element into an iframe");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-move.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-move.html
new file mode 100644
index 0000000000..f031461ce5
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-move.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>
+    Element#requestFullscreen() followed by moving the element within the
+    document
+</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="target"></div>
+<div id="moveto"></div>
+<script>
+    promise_test(async (t) => {
+        document.onfullscreenerror = t.unreached_func("fullscreenerror event");
+        const target = document.getElementById("target");
+        const moveTo = document.getElementById("moveto");
+        await trusted_click(document.body);
+        const p = target.requestFullscreen();
+        moveTo.appendChild(target);
+        await Promise.all([p, fullScreenChange()]);
+        assert_equals(document.fullscreenElement, target);
+        assert_equals(target.parentNode, moveTo);
+    }, "Element#requestFullscreen() followed by moving the element within the document");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-remove-iframe.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-remove-iframe.html
new file mode 100644
index 0000000000..991799a48d
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-remove-iframe.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>
+    Element#requestFullscreen() in iframe followed by removing the iframe
+</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="../trusted-click.js"></script>
+<div id="log"></div>
+<iframe allowfullscreen></iframe>
+<script>
+    promise_test(async (t) => {
+        const iframe = document.querySelector("iframe");
+        await new Promise((resolve) => {
+            iframe.onload = resolve;
+            iframe.src = "about:blank";
+        });
+
+        const iframeDocument = iframe.contentDocument;
+        document.onfullscreenchange = t.unreached_func(
+            "fullscreenchange event"
+        );
+        document.onfullscreenerror = t.unreached_func("fullscreenerror event");
+        iframeDocument.onfullscreenchange = t.unreached_func(
+            "iframe fullscreenchange event"
+        );
+        iframeDocument.onfullscreenerror = t.unreached_func(
+            "iframe fullscreenerror event"
+        );
+        await trusted_click(document.body);
+        const p = iframeDocument.body.requestFullscreen();
+        const typeErrorConstructor = iframe.contentWindow.TypeError;
+        iframe.remove();
+        // Prevent the tests from hanging if the promise never rejects.
+        const errorPromise = new Promise((_, reject) =>
+            t.step_timeout(() => {
+                assert_unreached("Promise didn't reject.");
+                reject(new Error("Promise didn't reject."));
+            }, 1000)
+        );
+        await Promise.race([
+            promise_rejects_js(t, typeErrorConstructor, p),
+            errorPromise,
+        ]);
+        assert_equals(document.fullscreenElement, null);
+        assert_equals(iframeDocument.fullscreenElement, null);
+    }, "requestFullscreen() in iframe followed by removing the iframe");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-remove.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-remove.html
new file mode 100644
index 0000000000..436a61b6e1
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-remove.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() followed by removing the element</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="target"></div>
+<script>
+    promise_test(async (t) => {
+        const target = document.getElementById("target");
+        document.onfullscreenchange = t.unreached_func(
+            "fullscreenchange event"
+        );
+        const errorEventPromise = new Promise(
+            (resolve) => (document.onfullscreenerror = resolve)
+        );
+        await trusted_click(document.body);
+        const p = target.requestFullscreen();
+        target.remove();
+        Promise.all([promise_rejects_js(t, TypeError, p), errorEventPromise]);
+    }, "requestFullscreen() followed by removing the element");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-consume-user-activation.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-consume-user-activation.html
new file mode 100644
index 0000000000..cc4806711d
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-consume-user-activation.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() consumes user activation</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>
+<div id="log"></div>
+<script>
+promise_test(async (t) => {
+    t.add_cleanup(() => {
+        if (document.fullscreenElement) return document.exitFullscreen();
+    });
+    const div = document.querySelector("div");
+
+    await test_driver.bless("fullscreen");
+    assert_true(navigator.userActivation.isActive, "Activation must be active");
+    // Request fullscreen twice in a row. The first request should consume the
+    // user activation and succeed, and the second request should fail because
+    // of the user activation requirement.
+    const p1 = div.requestFullscreen();
+    assert_false(navigator.userActivation.isActive, "Transient activation is consumed");
+    const p2 = promise_rejects_js(t, TypeError, div.requestFullscreen());
+    await Promise.all([p1, p2]);
+});
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-cross-origin.sub.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-cross-origin.sub.html
new file mode 100644
index 0000000000..5f3a397bbc
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-cross-origin.sub.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<title>
+  Element#requestFullscreen() works properly with a tree of cross-origin iframes
+</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>
+
+<body>
+  <script>
+    function waitFor(action, frameName) {
+      return new Promise((resolve) => {
+        window.addEventListener("message", function listener(e) {
+          if (e.data.action === action && e.data.name === frameName) {
+            window.removeEventListener("message", listener);
+            resolve(event.data);
+          }
+        });
+      });
+    }
+
+    function compare_report(report, expectedEvents) {
+      assert_equals(
+        report.events.length,
+        expectedEvents.length,
+        `Expected report for iframe "${report.frame}" to have ${expectedEvents.length} events: [${expectedEvents}]`
+      );
+      report.events.forEach((value, i) => {
+        assert_equals(
+          value,
+          expectedEvents[i],
+          "Event type matches in order expected"
+        );
+      });
+
+      report.events.length
+        ? assert_false(
+            report.fullscreenElementIsNull,
+            "Event fired, fullscreenElement is set"
+          )
+        : assert_true(
+            report.fullscreenElementIsNull,
+            "No event fired, fullscreenElement is null"
+          );
+    }
+
+    const iframes = [
+      {
+        name: "A",
+        src: "http://{{hosts[][]}}:{{ports[http][0]}}/fullscreen/api/resources/recursive-iframe-fullscreen.html?a",
+        allow_fullscreen: true,
+        expectedEvents: ["fullscreenchange"],
+      },
+      {
+        name: "B",
+        src: "http://{{hosts[][]}}:{{ports[http][1]}}/fullscreen/api/resources/recursive-iframe-fullscreen.html?b",
+        allow_fullscreen: true,
+        expectedEvents: ["fullscreenchange"],
+      },
+      {
+        name: "C",
+        src: "http://{{hosts[alt][]}}:{{ports[http][0]}}/fullscreen/api/resources/recursive-iframe-fullscreen.html?c",
+        allow_fullscreen: true,
+        expectedEvents: ["fullscreenchange"],
+      },
+      {
+        name: "D",
+        src: "http://{{hosts[alt][]}}:{{ports[http][1]}}/fullscreen/api/resources/recursive-iframe-fullscreen.html?d",
+        allow_fullscreen: true,
+        expectedEvents: ["fullscreenchange"],
+      },
+      {
+        name: "E",
+        src: "http://{{hosts[][]}}:{{ports[http][0]}}/fullscreen/api/resources/recursive-iframe-fullscreen.html?e",
+        allow_fullscreen: true,
+        expectedEvents: [],
+      },
+    ];
+
+    promise_setup(async () => {
+      // Add the first iframe.
+      const iframeDetails = iframes[0];
+      const child_frame = document.createElement("iframe");
+      child_frame.allow = iframeDetails.allow_fullscreen ? "fullscreen" : "";
+      child_frame.name = iframeDetails.name;
+      child_frame.style.width = "100%";
+      child_frame.style.height = "100%";
+      child_frame.src = iframeDetails.src;
+      await new Promise((resolve) => {
+        child_frame.onload = resolve;
+        document.body.appendChild(child_frame);
+      });
+
+      // Create the nested iframes.
+      for (let i = 1; i < iframes.length; i++) {
+        const parentName = iframes[i - 1].name;
+        const details = iframes[i];
+        child_frame.contentWindow.postMessage(
+          { action: "addIframe", iframe: details, name: parentName },
+          "*"
+        );
+        await waitFor("load", details.name);
+      }
+    });
+
+    promise_test(async (t) => {
+      t.add_cleanup(() => {
+        if (document.fullscreenElement) {
+          return document.exitFullscreen();
+        }
+      });
+      document.onfullscreenerror = t.unreached_func(
+        "fullscreenerror event fired"
+      );
+      const fsChangeFiredPromise = new Promise((resolve) => {
+        document.onfullscreenchange = resolve;
+      });
+
+      const child_frame = document.querySelector("iframe[name=A]");
+      child_frame.contentWindow.postMessage(
+        {
+          action: "requestFullscreen",
+          name: "D",
+        },
+        "*"
+      );
+
+      await waitFor("requestFullscreen", "D");
+
+      for (const frame of iframes.slice(1)) {
+        const data = {
+          action: "requestReport",
+          name: frame.name,
+        };
+        child_frame.contentWindow.postMessage(data, "*");
+        const { report } = await waitFor("report", frame.name);
+        compare_report(report, frame.expectedEvents);
+      }
+      await fsChangeFiredPromise;
+    }, "Element#requestFullscreen() works properly with a tree of cross-origin iframes");
+  </script>
+</body>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-dialog.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-dialog.html
new file mode 100644
index 0000000000..ee5e21306a
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-dialog.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() for dialog element</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>
+<div id="log"></div>
+<dialog></dialog>
+<script>
+    promise_test(async (t) => {
+        const dialog = document.querySelector("dialog");
+        assert_true(dialog instanceof HTMLDialogElement);
+        document.onfullscreenchange = t.unreached_func(
+            "fullscreenchange event"
+        );
+        const errorEventPromise = new Promise(
+            (resolve) => (document.onfullscreenerror = resolve)
+        );
+        Promise.all([
+            promise_rejects_js(t, TypeError, dialog.requestFullscreen()),
+            errorEventPromise,
+        ]);
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-namespaces.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-namespaces.html
new file mode 100644
index 0000000000..dffa8dbc90
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-namespaces.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() for an element in null namespace</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="../trusted-click.js"></script>
+<div id="log"></div>
+<script>
+    const supportedNS = [
+        { ns: "http://www.w3.org/1999/xhtml", elemName: "div" },
+        { ns: "http://www.w3.org/2000/svg", elemName: "svg" },
+        { ns: "http://www.w3.org/1998/Math/MathML", elemName: "math" },
+    ];
+
+    const unsupportedNS = [null, "https://unknown.namespace", ""];
+
+    for (const ns of unsupportedNS) {
+        promise_test(async (t) => {
+            const element = document.createElementNS(ns, "element");
+            document.body.appendChild(element);
+            document.onfullscreenchange = t.unreached_func(
+                "fullscreenchange event"
+            );
+            await promise_rejects_js(t, TypeError, trusted_request(element));
+        }, `requestFullscreen() fails for an element in ${ns} namespace`);
+    }
+
+    for (const { ns, elemName } of supportedNS) {
+        promise_test(async (t) => {
+            const element = document.createElementNS(ns, elemName);
+            document.body.appendChild(element);
+            await Promise.all([trusted_request(element), fullScreenChange()]);
+            await document.exitFullscreen();
+        }, `requestFullscreen() succeed for an element in ${ns} namespace`);
+    }
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-non-top.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-non-top.html
new file mode 100644
index 0000000000..9bed70d695
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-non-top.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>
+    Element#requestFullscreen() for non-top element in fullscreen element stack
+</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="first">
+    <div id="last"></div>
+</div>
+<script>
+    promise_test(async (t) => {
+        const first = document.getElementById("first");
+        const last = document.getElementById("last");
+
+        await Promise.all([trusted_request(first), fullScreenChange()]);
+        assert_equals(document.fullscreenElement, first);
+
+        await Promise.all([trusted_request(last), fullScreenChange()]);
+        assert_equals(document.fullscreenElement, last);
+
+        await Promise.all([trusted_request(first, last), fullScreenChange()]);
+        assert_equals(document.fullscreenElement, first);
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-not-allowed.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-not-allowed.html
new file mode 100644
index 0000000000..e52895ad7e
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-not-allowed.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>
+    Element#requestFullscreen() when not allowed to request fullscreen
+</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async (t) => {
+        const div = document.querySelector("div");
+        const errorEventPromise = new Promise(
+            (resolve) => (document.onfullscreenerror = resolve)
+        );
+        const [, event] = await Promise.all([
+            promise_rejects_js(t, TypeError, div.requestFullscreen()),
+            errorEventPromise,
+        ]);
+        assert_equals(event.type, "fullscreenerror");
+        assert_equals(event.target, div, "event.target");
+        assert_true(event.bubbles, "event.bubbles");
+        assert_false(event.cancelable, "event.cancelable");
+        assert_true(event.composed, "event.composed");
+    }, "requestFullscreen() when not allowed to request fullscreen");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-options.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-options.html
new file mode 100644
index 0000000000..c11f54f7b5
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-options.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen({ navigationUI }) support</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body></body>
+<script>
+    // Tests for https://github.com/whatwg/fullscreen/pull/129. Because there are
+    // no normative requirements on what navigationUI should do, just test for
+    // basic support. (One could also check that the three allowed enum valid are
+    // supported and no others, but that would overlap with UA-specific tests.)
+    promise_test(async (t) => {
+        const invalidDict = {
+            get navigationUI() {
+                return "invalid-value";
+            },
+        };
+        await promise_rejects_js(
+            t,
+            TypeError,
+            document.body.requestFullscreen(invalidDict)
+        );
+        await promise_rejects_js(
+            t,
+            TypeError,
+            document.body.requestFullscreen({ navigationUI: "other-invalid-value" })
+        );
+    }, "requestFullscreen() with invalid navigationUI values");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-options.tentative.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-options.tentative.html
new file mode 100644
index 0000000000..b2eb60088a
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-options.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen({ screen }) tentative support</title>
+<link rel="help" href="https://w3c.github.io/window-placement/" />
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+    promise_test(async (t) => {
+        await test_driver.set_permission(
+            { name: "window-placement" },
+            "granted"
+        );
+
+        const options = {
+            get screen() {
+                return undefined;
+            },
+        };
+
+        await promise_rejects_js(
+            t,
+            TypeError,
+            document.body.requestFullscreen(options)
+        );
+    }, "fullscreenOptions.screen getter is invoked on requestFullscreen");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-same-element.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-same-element.html
new file mode 100644
index 0000000000..a2b04dd173
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-same-element.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() on the current fullscreen element</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>
+<div id="log"></div>
+<script>
+promise_test(async (t) => {
+    t.add_cleanup(() => {
+        if (document.fullscreenElement) return document.exitFullscreen();
+    });
+
+    // Use the body element as the fullscreen element, because the second
+    // test_driver.bless() call needs to insert a button inside of it, which
+    // can't be clicked if another element is already fullscreen.
+    const target = document.body;
+
+    // First enter fullscreen.
+    await test_driver.bless("fullscreen", () => target.requestFullscreen());
+    assert_equals(document.fullscreenElement, target, "fullscreen element after first request");
+
+    // Now request fullscreen again, which should be a no-op.
+    await test_driver.bless("fullscreen", () => target.requestFullscreen());
+    assert_equals(document.fullscreenElement, target, "fullscreen element after second request");
+});
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-same.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-same.html
new file mode 100644
index 0000000000..8569c4df79
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-same.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() on the current fullscreen element</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="target"></div>
+<script>
+    promise_test(async (t) => {
+        const target = document.getElementById("target");
+        document.onfullscreenerror = t.unreached_func("fullscreenerror event");
+
+        await Promise.all([
+            fullScreenChange(),
+            trusted_request(target),
+        ]);
+
+        assert_equals(document.fullscreenElement, target);
+
+        // The next requestFullscreen() should fire no events due to "If element is
+        // doc's fullscreen element, terminate these subsubsteps."
+        document.onfullscreenchange = t.unreached_func(
+            "fullscreenchange event"
+        );
+
+        await trusted_click(target);
+        await target.requestFullscreen();
+        assert_equals(document.fullscreenElement, target);
+        // Wait until after the next animation frame.
+        await new Promise((r) => requestAnimationFrame(r));
+    }, "Element#requestFullscreen() on the current fullscreen element");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-svg-rect.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-svg-rect.html
new file mode 100644
index 0000000000..44adfa6898
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-svg-rect.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() for SVG rect element</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="../trusted-click.js"></script>
+<div id="log"></div>
+<svg>
+    <rect
+        width="300"
+        height="300"
+        style="fill: rgb(0, 255, 153)"
+    />
+</svg>
+<script>
+    promise_test(async (t) => {
+        const rect = document.querySelector("rect");
+        assert_true(rect instanceof SVGRectElement);
+        document.onfullscreenchange = t.unreached_func(
+            "fullscreenchange event"
+        );
+        await trusted_click(document.body);
+        await Promise.all([
+            promise_rejects_js(t, TypeError, rect.requestFullscreen()),
+            new Promise((resolve) => {
+                document.onfullscreenerror = resolve;
+            }),
+        ]);
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-svg-svg.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-svg-svg.html
new file mode 100644
index 0000000000..e579f6e7d7
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-svg-svg.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() for SVG svg element</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="../trusted-click.js"></script>
+<div id="log"></div>
+<svg></svg>
+<script>
+    promise_test(async (t) => {
+        const svg = document.querySelector("svg");
+        assert_true(svg instanceof SVGSVGElement);
+        document.onfullscreenerror = t.unreached_func("fullscreenerror event");
+        await Promise.all([
+            fullScreenChange(),
+            trusted_request(svg),
+        ]);
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-timing.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-timing.html
new file mode 100644
index 0000000000..b7986575ff
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-timing.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() timing</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="../trusted-click.js"></script>
+<div id="log"></div>
+<script>
+promise_test(async t => {
+  const div = document.querySelector('div');
+
+  // If fullscreenchange is an animation frame event, then animation frame
+  // callbacks should be run after it is fired, before the timer callback.
+  // The resize event should fire before the fullscreenchange event.
+  const events = [];
+  const callback = t.step_func(event => {
+    // fullscreenElement should have changed before either event is fired.
+    assert_equals(document.fullscreenElement, div, `fullscreenElement in {event.type} event`);
+    events.push(event.type);
+    if (event.type == 'fullscreenchange') {
+      step_timeout(t.unreached_func('timer callback'));
+      requestAnimationFrame(t.step_func_done(() => {
+        assert_array_equals(events, ['resize', 'fullscreenchange'], 'event order');
+      }));
+    }
+  });
+  document.onfullscreenchange = window.onresize = callback;
+  await trusted_request(div);
+}, 'Timing of fullscreenchange and resize events');
+
+async_test(t => {
+  // Gecko throttles requestAnimationFrame before the first paint, so
+  // wrap the test to work around that.
+  requestAnimationFrame(t.step_func(() => {
+    var promise = document.createElement('a').requestFullscreen();
+    var promise_executed = false;
+    promise.catch(()=>{promise_executed = true; });
+    // If fullscreenerror is an animation frame event, then animation frame
+    // callbacks should be run after it is fired, before the timer callback.
+    document.onfullscreenerror = t.step_func(() => {
+      assert_true(promise_executed, "promise executed");
+      step_timeout(t.unreached_func('timer callback'));
+      requestAnimationFrame(t.step_func_done());
+    });
+  }));
+}, 'Timing of fullscreenerror event');
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-top.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-top.html
new file mode 100644
index 0000000000..59211856ab
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-top.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>
+    Element#requestFullscreen() for top element in fullscreen element stack
+</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="top"></div>
+<script>
+    promise_test(async function (t) {
+        const top = document.getElementById("top");
+        document.onfullscreenerror = t.unreached_func("fullscreenerror event");
+
+        await Promise.all([
+            trusted_request(top),
+            new Promise((r) =>
+                document.addEventListener("fullscreenchange", r)
+            ),
+        ]);
+        assert_equals(document.fullscreenElement, top);
+        await trusted_click(top);
+        await top.requestFullscreen();
+        // A fullscreenerror event would be fired after an async section
+        // and an animation frame task, so wait until after that.
+        await new Promise((resolve) => {
+            t.step_timeout(() => {
+                requestAnimationFrame(resolve);
+            });
+        });
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-twice.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-twice.html
new file mode 100644
index 0000000000..db53aec544
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-twice.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() twice</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="../trusted-click.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async (t) => {
+        const div = document.querySelector("div");
+        await trusted_click(document.body);
+        const p = div.requestFullscreen();
+        assert_equals(
+            document.fullscreenElement,
+            null,
+            "fullscreenElement after first requestFullscreen()"
+        );
+        const rejectedPromises = [
+            promise_rejects_js(t, TypeError, div.requestFullscreen()),
+            promise_rejects_js(t, TypeError, div.requestFullscreen()),
+        ];
+        await Promise.all([p, fullScreenChange()]);
+        assert_equals(
+            document.fullscreenElement,
+            div,
+            "fullscreenElement after entering fullscreen"
+        );
+        // Ensure that there's are not more changes fullscreenchange event.
+        document.onfullscreenchange = t.unreached_func(
+            "second fullscreenchange event"
+        );
+        await Promise.all(rejectedPromises);
+        await new Promise((r) => requestAnimationFrame(r));
+    }, "requestFullscreen() multiple times after going fullscreen");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-two-elements.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-two-elements.html
new file mode 100644
index 0000000000..54419ea8fd
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen-two-elements.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen() on two elements in the same document</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="../trusted-click.js"></script>
+<body>
+    <div id="a"></div>
+    <div id="b"></div>
+</body>
+<script>
+    promise_test(async (t) => {
+        document.onfullscreenerror = t.unreached_func("fullscreenerror event");
+
+        // Request fullscreen on both elements, but in reverse tree order.
+        const a = document.getElementById("a");
+        const b = document.getElementById("b");
+
+        // Expect two fullscreenchange events, with document.fullscreenElement
+        // changing in the same order as the requests.
+        await trusted_click(b);
+        await Promise.all([b.requestFullscreen(), fullScreenChange()]);
+        assert_equals(document.fullscreenElement, b);
+
+        await trusted_click(b);
+        await Promise.all([a.requestFullscreen(), fullScreenChange()]);
+        assert_equals(document.fullscreenElement, a);
+    }, "Element#requestFullscreen() on two elements in the same document");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/element-request-fullscreen.html b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen.html
new file mode 100644
index 0000000000..fd9f249551
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/element-request-fullscreen.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Element#requestFullscreen()</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="../trusted-click.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async function (t) {
+        const div = document.querySelector("div");
+        await Promise.all([fullScreenChange(), trusted_request(div)]);
+        assert_equals(event.target, div, "event.target");
+        assert_true(event.bubbles, "event.bubbles");
+        assert_false(event.cancelable, "event.cancelable");
+        assert_true(event.composed, "event.composed");
+        await document.exitFullscreen();
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/fullscreen-display-contents.html b/testing/web-platform/tests/fullscreen/api/fullscreen-display-contents.html
new file mode 100644
index 0000000000..fc6f232747
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/fullscreen-display-contents.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+    <title>
+        Test that display:contents on fullscreen elements acts like
+        display:block
+    </title>
+    <meta charset="utf-8" />
+    <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="../trusted-click.js"></script>
+    <link rel="author" href="mailto:masonf@chromium.org" />
+    <link
+        rel="help"
+        href="https://fullscreen.spec.whatwg.org/#new-stacking-layer"
+    />
+    <div id="target"></div>
+    <style>
+        #target {
+            display: contents;
+            background-color: green;
+        }
+        #target::backdrop {
+            display: contents;
+        }
+    </style>
+
+    <script>
+        promise_test(async (t) => {
+            const target = document.querySelector("#target");
+            await test_driver.bless("fullscreen");
+            await target.requestFullscreen();
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            assert_equals(document.fullscreenElement, target);
+            assert_equals(
+                getComputedStyle(target).display,
+                "block",
+                "fullscreen element should have display:block"
+            );
+            assert_equals(
+                getComputedStyle(target, "::backdrop").display,
+                "block",
+                "fullscreen element's ::backdrop should have display:block"
+            );
+            await document.exitFullscreen();
+            new Promise((resolve) => requestAnimationFrame(resolve));
+            assert_equals(document.fullscreenElement, null);
+            assert_equals(
+                getComputedStyle(target).display,
+                "contents",
+                "fullscreen element should have display:contents after exiting fullscreen"
+            );
+        });
+    </script>
+</html>
diff --git a/testing/web-platform/tests/fullscreen/api/historical.html b/testing/web-platform/tests/fullscreen/api/historical.html
new file mode 100644
index 0000000000..8b3e3c03e9
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/historical.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<title>Historical Fullscreen features</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script>
+[
+  "onwebkitfullscreenchange",
+  "onwebkitfullscreenerror",
+  "webkitCurrentFullScreenElement",
+  "webkitFullscreenElement",
+  "webkitFullscreenEnabled",
+  "webkitIsFullScreen",
+  "webkitRequestFullScreen",
+  "webkitRequestFullscreen",
+  "webkitDisplayingFullscreen",
+  "webkitEnterFullScreen",
+  "webkitEnterFullscreen",
+  "webkitExitFullScreen",
+  "webkitExitFullscreen",
+  "webkitSupportsFullscreen",
+].forEach(function(member) {
+  ["webkit", "moz", "ms"].forEach(function(prefix) {
+    var alias = member.replace("webkit", prefix);
+    var clarifyTestName = (alias.indexOf('FullScreen') != -1 ? ' (uppercase S)' : '');
+
+    test(function() {
+      assert_false(alias in document.createElement('video'));
+    }, '<video> member must not be supported: ' + alias + clarifyTestName);
+
+    test(function() {
+      assert_false(alias in document);
+    }, 'Document member must not be supported: ' + alias + clarifyTestName);
+
+    // Some of the combinations tested here have never been supported, but
+    // it is convenient to just test all names on both <video> and document.
+  });
+});
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/promises-reject.html b/testing/web-platform/tests/fullscreen/api/promises-reject.html
new file mode 100644
index 0000000000..4385b1646d
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/promises-reject.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>Promises#reject</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async (t) => {
+        const e = document.createElement("span");
+        await promise_rejects_js(
+            t,
+            TypeError,
+            e.requestFullscreen(),
+            "Rejects if the element is not connected"
+        );
+        await promise_rejects_js(
+            t,
+            TypeError,
+            document.exitFullscreen(),
+            "Not in fullscreen"
+        );
+    }, "Rejects if the element is not connected");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/promises-resolve.html b/testing/web-platform/tests/fullscreen/api/promises-resolve.html
new file mode 100644
index 0000000000..5b8a090628
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/promises-resolve.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>Promises#resolve</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="../trusted-click.js"></script>
+<div id="log"></div>
+<script>
+    promise_test(async function (t) {
+        const div = document.querySelector("div");
+        await trusted_request(div, document.body);
+        assert_equals(
+            document.fullscreenElement,
+            div,
+            "fullscreenElement before exitFullscreen()"
+        );
+        const p = document.exitFullscreen();
+        assert_equals(
+            document.fullscreenElement,
+            div,
+            "fullscreenElement after exitFullscreen()"
+        );
+        await p;
+        assert_equals(
+            document.fullscreenElement,
+            null,
+            "fullscreenElement after exiting fullscreen"
+        );
+    });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/resources/attempt-fullscreen.html b/testing/web-platform/tests/fullscreen/api/resources/attempt-fullscreen.html
new file mode 100644
index 0000000000..98cca04516
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/resources/attempt-fullscreen.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>IFrame Fullscreen API success reporter</title>
+<body></body>
+<script>
+    window.addEventListener("message", async (e) => {
+        switch (e.data.action) {
+            case "report":
+                await sendReport();
+                break;
+            default:
+                parent.postMessage(
+                    {
+                        report: {
+                            api: "fullscreen",
+                            result: `Unknown action ${e.data.action}`,
+                            frame: window.name,
+                        },
+                    },
+                    "*"
+                );
+        }
+    });
+
+    async function sendReport() {
+        let didSucceed = true;
+        let error;
+        let errorMessage;
+        try {
+            await document.body.requestFullscreen();
+        } catch (e) {
+            didSucceed = false;
+            error = e.name;
+            errorMessage = e.message;
+        } finally {
+            const data = {
+                report: {
+                    api: "fullscreen",
+                    result: didSucceed,
+                    frame: window.name,
+                    error,
+                    errorMessage,
+                },
+            };
+            parent.postMessage(data, "*");
+        }
+    }
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/resources/echo-fullscreenEnabled.html b/testing/web-platform/tests/fullscreen/api/resources/echo-fullscreenEnabled.html
new file mode 100644
index 0000000000..ad5edf7986
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/resources/echo-fullscreenEnabled.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<script>
+window.onmessage = (e) => {
+  if (e.data === 'What is document.fullscreenEnabled?') {
+    e.source.postMessage(document.fullscreenEnabled, '*');
+  } else {
+    e.source.postMessage('Incorrect message', '*');
+  }
+}
+</script>
+<p>This page echos document.fullscreenEnabled.</p>
diff --git a/testing/web-platform/tests/fullscreen/api/resources/recursive-iframe-fullscreen.html b/testing/web-platform/tests/fullscreen/api/resources/recursive-iframe-fullscreen.html
new file mode 100644
index 0000000000..d242a3b3e6
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/resources/recursive-iframe-fullscreen.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Recursive IFrame Fullscreen API success reporter</title>
+<body>
+  <script src="/resources/testdriver.js"></script>
+  <script src="/resources/testdriver-vendor.js"></script>
+  <script src="../../trusted-click.js"></script>
+  <script>
+    let child_frame = null;
+    const events = [];
+
+    document.onfullscreenchange = () => {
+      events.push("fullscreenchange");
+    };
+
+    document.onfullscreenerror  = () => {
+      events.push("fullscreenerror");
+    };
+
+    function send_report() {
+      window.top.postMessage(
+        {
+          name: window.name,
+          action: "report",
+          report: {
+            api: "fullscreen",
+            frame: window.name,
+            fullscreenElementIsNull: document.fullscreenElement === null,
+            events,
+          },
+        },
+        "*"
+      );
+    }
+
+    async function create_child_frame({ src, name, allow_fullscreen }) {
+      child_frame = document.createElement("iframe");
+      child_frame.allow = allow_fullscreen ? "fullscreen" : "";
+      child_frame.name = name;
+      child_frame.style.width = "100%";
+      child_frame.style.height = "100%";
+      document.body.appendChild(child_frame);
+      await new Promise((resolve) => {
+        child_frame.addEventListener("load", resolve, { once: true });
+        child_frame.src = src;
+      });
+      window.top.postMessage({ action: "load", name }, "*");
+    }
+
+    async function go_fullscreen() {
+      await trusted_click(document.body);
+      let error;
+      try {
+        await document.body.requestFullscreen();
+      } catch (err) {
+        error = err.name;
+      } finally {
+        window.top.postMessage(
+          { action: "requestFullscreen", name: window.name, error },
+          "*"
+        );
+      }
+    }
+
+    window.addEventListener("message", async (e) => {
+      // Massage is not for us, try to pass it on...
+      if (e.data.name !== window.name) {
+        child_frame?.contentWindow.postMessage(e.data, "*");
+        return;
+      }
+      switch (e.data.action) {
+        case "requestReport":
+          send_report();
+          break;
+        case "requestFullscreen":
+          await go_fullscreen();
+          break;
+        case "addIframe":
+          await create_child_frame(e.data.iframe);
+          break;
+        default:
+          window.top.postMessage(e.data, "*");
+      }
+    });
+  </script>
+</body>
diff --git a/testing/web-platform/tests/fullscreen/api/resources/report-fullscreen-enabled.html b/testing/web-platform/tests/fullscreen/api/resources/report-fullscreen-enabled.html
new file mode 100644
index 0000000000..ee8d4cfab7
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/resources/report-fullscreen-enabled.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>IFrame fullscreenEnabled attribute reporter</title>
+<body>
+<script>
+parent.postMessage({"report": {
+  "api": "fullscreen",
+  "enabled": document.fullscreenEnabled,
+  "frame": window.name
+}}, "*");
+</script>
diff --git a/testing/web-platform/tests/fullscreen/api/shadowroot-fullscreen-element.html b/testing/web-platform/tests/fullscreen/api/shadowroot-fullscreen-element.html
new file mode 100644
index 0000000000..5e605f00aa
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/api/shadowroot-fullscreen-element.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+    <title>shadowRoot.fullscreenElement works correctly</title>
+    <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+    <link rel="help" href="https://fullscreen.spec.whatwg.org/#dom-document-fullscreenelement">
+</head>
+<div id="host">
+    <button onclick="document.exitFullscreen()" id="exitButton">Exit fullscreen</button>
+</div>
+<button id="requestButton">Go fullscreen</button>
+
+<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>
+promise_test(async function() {
+    let host = document.getElementById("host");
+    host.attachShadow({ mode: "open" }).innerHTML = `
+        <style>
+        #outer { width: 200px; height: 200px; background: blue }
+        </style>
+        <div id="outer">
+        <slot></slot>
+        </div>
+    `;
+    let outer = host.shadowRoot.querySelector("#outer");
+    await new Promise((resolve) => {
+        addEventListener("fullscreenchange", resolve, { once: true });
+        requestButton.addEventListener("click", () => outer.requestFullscreen());
+        test_driver.click(requestButton);
+    });
+
+    assert_equals(outer.getRootNode().fullscreenElement, outer, "Correct shadowRoot.fullscreenElement after entering");
+    assert_equals(document.fullscreenElement, host, "Correct document.fullscreenElement after entering");
+
+    await new Promise((resolve) => {
+        addEventListener("fullscreenchange", resolve, { once: true });
+        test_driver.click(exitButton);
+    });
+
+    assert_equals(outer.getRootNode().fullscreenElement, null, "Correct shadowRoot.fullscreenElement after exiting");
+    assert_equals(document.fullscreenElement, null, "Correct document.fullscreenElement after exiting");
+}, "shadowRoot.fullscreenElement works correctly");
+</script>
+</html>
diff --git a/testing/web-platform/tests/fullscreen/crashtests/backdrop-list-item.html b/testing/web-platform/tests/fullscreen/crashtests/backdrop-list-item.html
new file mode 100644
index 0000000000..c5f58263ff
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/crashtests/backdrop-list-item.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://crbug.com/1371331">
+<style>
+dialog::backdrop {
+  display: list-item;
+}
+</style>
+<dialog></dialog>
+<script>
+document.querySelector("dialog").showModal();
+</script>
diff --git a/testing/web-platform/tests/fullscreen/crashtests/chrome-1312699.html b/testing/web-platform/tests/fullscreen/crashtests/chrome-1312699.html
new file mode 100644
index 0000000000..c783b0d9cc
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/crashtests/chrome-1312699.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html class="reftest-wait">
+<link rel="help" href="https://crbug.com/1312699">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<video></video>
+<script>
+  async function crash() {
+    let video = document.querySelector("video");
+    await video.requestFullscreen();
+    video.width = null;
+    document.documentElement.classList.remove("reftest-wait");
+  }
+  document.addEventListener("click", () => crash(), false);
+
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    test_driver.click(document.body);
+  }));
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/fullscreen/crashtests/content-visibility-crash.html b/testing/web-platform/tests/fullscreen/crashtests/content-visibility-crash.html
new file mode 100644
index 0000000000..63111d03e3
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/crashtests/content-visibility-crash.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class=test-wait>
+<link rel=author href="mailto:m.cooolie@gmail.com">
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1338135">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<body>
+<script>
+async function crash() {
+  const col = document.createElement("col");
+  document.body.appendChild(col);
+
+  let fullscreenPromise = null;
+  await test_driver.bless('open fullscreen', () => {
+    fullscreenPromise = col.requestFullscreen({navigationUI: 'hide'});
+  });
+  await fullscreenPromise;
+
+  const a = document.createElement("a");
+  document.body.appendChild(a);
+
+  document.body.style.all = 'unset';
+  document.body.style.contentVisibility = 'hidden';
+
+  a.offsetParent;
+
+  document.documentElement.classList.remove('test-wait');
+}
+crash();
+</script>
diff --git a/testing/web-platform/tests/fullscreen/idlharness.window.js b/testing/web-platform/tests/fullscreen/idlharness.window.js
new file mode 100644
index 0000000000..ddcc59c403
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/idlharness.window.js
@@ -0,0 +1,16 @@
+// META: script=/resources/WebIDLParser.js
+// META: script=/resources/idlharness.js
+// META: timeout=long
+
+'use strict';
+
+idl_test(
+  ['fullscreen'],
+  ['dom', 'html'],
+  idl_array => {
+    idl_array.add_objects({
+      Document: ['new Document'],
+      Element: ['document.createElementNS(null, "test")'],
+    });
+  }
+);
diff --git a/testing/web-platform/tests/fullscreen/model/move-to-fullscreen-iframe.html b/testing/web-platform/tests/fullscreen/model/move-to-fullscreen-iframe.html
new file mode 100644
index 0000000000..0103b2979f
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/model/move-to-fullscreen-iframe.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<title>Moving fullscreen document's body into a fullscreen iframe</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="../trusted-click.js"></script>
+<iframe allowfullscreen></iframe>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    const iframe = document.querySelector("iframe");
+    await new Promise((resolve) => {
+      iframe.onload = resolve;
+      iframe.src = "about:blank";
+    });
+    const iframeDoc = iframe.contentDocument;
+
+    // Enter fullscreen for the iframe's body element.
+    await Promise.all([
+      trusted_request(iframeDoc.body, iframeDoc.body),
+      fullScreenChange(),
+    ]);
+
+    assert_equals(
+      document.fullscreenElement,
+      iframe,
+      "document's initial fullscreen element"
+    );
+    assert_equals(
+      iframeDoc.fullscreenElement,
+      iframeDoc.body,
+      "iframe's initial fullscreen element"
+    );
+
+    // Then, move the outer document's body into the iframe. This is an unusual
+    // thing to do, but means that the iframe is removed from its document and
+    // should trigger fullscreen exit.
+    iframeDoc.documentElement.appendChild(document.body);
+
+    // If we exit in an orderly fashion, that's all one can ask for.
+    await fullScreenChange();
+    assert_equals(
+      document.fullscreenElement,
+      null,
+      "document's final fullscreen element"
+    );
+
+    // Because the iframe was removed, its browsing context was discarded and
+    // its contentDocument has become null. Because that browsing context was
+    // neither a descendant browsing context nor had an active document,
+    // nothing at all was done with it in the exit fullscreen algorithm, so
+    // its fullscreenElement is unchanged.
+    assert_equals(iframe.contentDocument, null, "iframe's content document");
+    assert_equals(
+      iframeDoc.fullscreenElement,
+      iframeDoc.body,
+      "iframe's final fullscreen element"
+    );
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/model/move-to-iframe.html b/testing/web-platform/tests/fullscreen/model/move-to-iframe.html
new file mode 100644
index 0000000000..d3a7a67298
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/model/move-to-iframe.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<title>Move the fullscreen element to another document</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="../trusted-click.js"></script>
+<div></div>
+<iframe></iframe>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    const div = document.querySelector("div");
+    const iframe = document.querySelector("iframe");
+    const [, event] = await Promise.all([
+      trusted_request(div),
+      fullScreenChange(),
+    ]);
+
+    assert_equals(document.fullscreenElement, div);
+    assert_equals(event.target, div);
+
+    assert_equals(div.ownerDocument, document);
+    iframe.contentDocument.body.appendChild(div);
+    assert_not_equals(div.ownerDocument, document);
+    // Moving /div/ removes it from the top layer and thus the fullscreen
+    // element synchronously becomes null.
+    assert_equals(document.fullscreenElement, null);
+
+    div.onfullscreenchange = t.unreached_func(
+      "fullscreenchange fired on element"
+    );
+    iframe.contentDocument.onfullscreenchange = t.unreached_func(
+      "fullscreenchange fired on other document"
+    );
+    const secondEvent = await fullScreenChange();
+    assert_equals(document.fullscreenElement, null);
+    assert_equals(secondEvent.target, document);
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/model/move-to-inactive-document.html b/testing/web-platform/tests/fullscreen/model/move-to-inactive-document.html
new file mode 100644
index 0000000000..b9a95f2954
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/model/move-to-inactive-document.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>Move the fullscreen element to an inactive document</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="../trusted-click.js"></script>
+<div></div>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    const div = document.querySelector("div");
+
+    // Go fullscreen...
+    await Promise.all([trusted_request(div), fullScreenChange()]);
+
+    const inactiveDocument = document.implementation.createDocument(null, "");
+
+    div.onfullscreenchange = t.unreached_func(
+      "fullscreenchange fired on element"
+    );
+    inactiveDocument.onfullscreenchange = t.unreached_func(
+      "fullscreenchange fired on other document"
+    );
+
+    // Transplant element to inactive document...
+    inactiveDocument.appendChild(div);
+
+    // Fullscreen exits...
+    await fullScreenChange();
+    // Make sure no other events fire...
+    await new Promise((resolve) => {
+      requestAnimationFrame(resolve);
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/model/remove-child.html b/testing/web-platform/tests/fullscreen/model/remove-child.html
new file mode 100644
index 0000000000..42355dc2da
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/model/remove-child.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Remove the child of the fullscreen element</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="parent">
+  <div></div>
+</div>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    const parent = document.getElementById("parent");
+    await Promise.all([trusted_request(parent), fullScreenChange()]);
+
+    assert_equals(document.fullscreenElement, parent);
+    parent.textContent = ""; // removes all children
+    // The fullscreen element should not be affected.
+    assert_equals(document.fullscreenElement, parent);
+    document.onfullscreenchange = t.unreached_func("fullscreenchange event");
+    // A fullscreenchange event would be fired after an async section
+    // and an animation frame task, so wait until after that.
+    await new Promise((resolve) => {
+      requestAnimationFrame(resolve);
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/model/remove-first.html b/testing/web-platform/tests/fullscreen/model/remove-first.html
new file mode 100644
index 0000000000..b4058db320
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/model/remove-first.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<title>Remove the first element on the fullscreen element stack</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="first">
+  <div id="last"></div>
+</div>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    const first = document.getElementById("first");
+
+    const [, firstEvent] = await Promise.all([
+      trusted_request(first),
+      fullScreenChange(),
+    ]);
+    assert_equals(document.fullscreenElement, first);
+    assert_equals(firstEvent.target, first);
+
+    const last = document.getElementById("last");
+    const [, secondEvent] = await Promise.all([
+      trusted_request(last),
+      fullScreenChange(),
+    ]);
+    assert_equals(document.fullscreenElement, last);
+    assert_equals(event.target, last);
+    first.remove();
+
+    // Both /first/ and /last/ were removed from the top layer and
+    // thus the fullscreen element synchronously becomes null.
+    assert_equals(document.fullscreenElement, null);
+
+    const thirdEvent = await fullScreenChange();
+    assert_equals(document.fullscreenElement, null);
+    assert_equals(event.target, document);
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/model/remove-last.html b/testing/web-platform/tests/fullscreen/model/remove-last.html
new file mode 100644
index 0000000000..760ccaa0ba
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/model/remove-last.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>Remove the last element on the fullscreen element stack</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="first">
+  <div id="last"></div>
+</div>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    const first = document.getElementById("first");
+    const [, firstEvent] = await Promise.all([
+      trusted_request(first),
+      fullScreenChange(),
+    ]);
+
+    assert_equals(document.fullscreenElement, first);
+    assert_equals(firstEvent.target, first);
+
+    const last = document.getElementById("last");
+    const [, lastEvent] = await Promise.all([
+      trusted_request(last),
+      fullScreenChange(),
+    ]);
+
+    assert_equals(document.fullscreenElement, last);
+    assert_equals(event.target, last);
+    last.remove();
+    // Because /last/ was removed from the top layer, we exit
+    // fullscreen element synchronously.
+    assert_equals(document.fullscreenElement, first);
+
+    const finalEvent = await fullScreenChange();
+    // fullscreen change element should be queued against the
+    // document target.
+    assert_equals(document.fullscreenElement, null);
+    assert_equals(event.target, document);
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/model/remove-parent.html b/testing/web-platform/tests/fullscreen/model/remove-parent.html
new file mode 100644
index 0000000000..54ff5b8371
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/model/remove-parent.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Remove the parent of the fullscreen element</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div>
+  <div id="child"></div>
+</div>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    const child = document.getElementById("child");
+    const [, event] = await Promise.all([
+      trusted_request(child),
+      fullScreenChange(),
+    ]);
+    assert_equals(document.fullscreenElement, child);
+    assert_equals(event.target, child);
+    child.parentNode.remove();
+    // Because /child/ was removed from the top layer, the fullscreen
+    // element becomes null synchronously.
+    assert_equals(document.fullscreenElement, null);
+    const secondEvent = await fullScreenChange();
+    assert_equals(document.fullscreenElement, null);
+    assert_equals(secondEvent.target, document);
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/model/remove-single.html b/testing/web-platform/tests/fullscreen/model/remove-single.html
new file mode 100644
index 0000000000..0401f77953
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/model/remove-single.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Remove the single element on the fullscreen element stack</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="../trusted-click.js"></script>
+<div id="log"></div>
+<div id="single"></div>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    const single = document.getElementById("single");
+    const [, event] = await Promise.all([
+      trusted_request(single),
+      fullScreenChange(),
+    ]);
+
+    assert_equals(document.fullscreenElement, single);
+    assert_equals(event.target, single);
+    single.remove();
+    // Because /single/ was removed from the top layer, the fullscreen
+    // element becomes null synchronously.
+    assert_equals(document.fullscreenElement, null);
+
+    const secondEvent = await fullScreenChange();
+    assert_equals(document.fullscreenElement, null);
+    assert_equals(event.target, single);
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/rendering/backdrop-iframe-ref.html b/testing/web-platform/tests/fullscreen/rendering/backdrop-iframe-ref.html
new file mode 100644
index 0000000000..3126fe1942
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/backdrop-iframe-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<body style="background: green"></body>
diff --git a/testing/web-platform/tests/fullscreen/rendering/backdrop-iframe.html b/testing/web-platform/tests/fullscreen/rendering/backdrop-iframe.html
new file mode 100644
index 0000000000..710d1b48f1
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/backdrop-iframe.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>::backdrop for a fullscreen iframe element</title>
+<link rel=match href="backdrop-iframe-ref.html">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6939">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+iframe::backdrop {
+  background: green;
+}
+</style>
+<iframe></iframe>
+<script>
+document.addEventListener('fullscreenchange', () => {
+  document.documentElement.classList.remove('reftest-wait');
+});
+test_driver.bless('fullscreen', () => {
+  document.querySelector('iframe').requestFullscreen();
+});
+</script>
diff --git a/testing/web-platform/tests/fullscreen/rendering/backdrop-object-ref.html b/testing/web-platform/tests/fullscreen/rendering/backdrop-object-ref.html
new file mode 100644
index 0000000000..6c7071a727
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/backdrop-object-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<style>
+body {
+    background: blue;
+    margin: 0;
+}
+div {
+    position: fixed;
+    width: 100px;
+    height: 100px;
+    background: green;
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/fullscreen/rendering/backdrop-object.html b/testing/web-platform/tests/fullscreen/rendering/backdrop-object.html
new file mode 100644
index 0000000000..be285b7612
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/backdrop-object.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>::backdrop for a fullscreen object element</title>
+<link rel=match href="backdrop-object-ref.html">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6939">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+object::backdrop {
+  background: blue;
+}
+</style>
+<object width="200" type="image/svg+xml" data="../../images/100px-green-rect.svg"></object>
+<script>
+const object = document.querySelector("object");
+Promise.all([
+    new Promise((resolve, reject) => document.addEventListener("fullscreenchange", resolve)),
+    new Promise((resolve, reject) => object.addEventListener("load", resolve))
+]).then(() => document.documentElement.classList.remove('reftest-wait'));
+
+test_driver.bless('fullscreen', () => object.requestFullscreen());
+</script>
diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-invalidation.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-invalidation.html
new file mode 100644
index 0000000000..e855d0c193
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-invalidation.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Invalidate :fullscreen based style</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>
+<style>
+  #pass {
+    color: red;
+  }
+  :root:fullscreen #pass {
+    color: green;
+  }
+</style>
+<div id="pass">Should be green</div>
+<script>
+  async_test(t => {
+    document.onfullscreenchange = t.step_func_done(() => {
+      assert_equals(document.fullscreenElement, document.documentElement);
+      assert_equals(getComputedStyle(pass).color, "rgb(0, 128, 0)", "Green when :root is fullscreened.");
+    });
+    document.documentElement.addEventListener('click', t.step_func(() => {
+      document.documentElement.requestFullscreen();
+    }), {once: true});
+    assert_equals(getComputedStyle(pass).color, "rgb(255, 0, 0)", "Initially red.");
+    test_driver.click(document.documentElement);
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-transition.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-transition.html
new file mode 100644
index 0000000000..b494dc04e6
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-css-transition.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Transitions should not be stopped by going fullscreen</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>
+<style>
+  #trans {
+    transition: color steps(1, end) 100s;
+    color: green;
+  }
+</style>
+<div id="trans">Should be green</div>
+<script>
+  async_test(t => {
+    document.onfullscreenchange = t.step_func_done(() => {
+      assert_equals(document.fullscreenElement, trans);
+      assert_equals(getComputedStyle(trans).color, "rgb(0, 128, 0)", "Transition is in progress - still green");
+    });
+    trans.addEventListener('click', t.step_func(() => {
+      trans.style.color = "red";
+      trans.offsetTop;
+      trans.requestFullscreen();
+    }), {once: true});
+    test_driver.click(trans);
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class-support.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class-support.html
new file mode 100644
index 0000000000..fb2ff318b9
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class-support.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>:fullscreen pseudo-class support</title>
+<link rel="help" href="https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class">
+<link rel="help" href="https://dom.spec.whatwg.org/#dom-element-matches">
+<link rel="help" href="https://dom.spec.whatwg.org/#dom-parentnode-queryselector">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+// This is a separate test so that support for :fullscreen can be detected
+// without actually going fullscreen. If it were not supported, then this test
+// would fail.
+test(t => {
+  // precondition is to throw for unknown pseudo-classes:
+  assert_throws_dom("SyntaxError", () => document.body.matches(':halfscreen'));
+  assert_throws_dom("SyntaxError", () => document.querySelector(':halfscreen'));
+  // the actual test:
+  assert_false(document.body.matches(':fullscreen'));
+  assert_equals(document.querySelector(':fullscreen'), null);
+});
+</script>
diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class.html
new file mode 100644
index 0000000000..5b02c32ef3
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-pseudo-class.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>:fullscreen pseudo-class</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="../trusted-click.js"></script>
+<div><div></div></div>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    const outer = document.querySelector("div");
+    const inner = outer.firstChild;
+
+    // First request fullscreen for the outer element.
+    await trusted_request(outer);
+    await fullScreenChange();
+    assert_equals(document.fullscreenElement, outer);
+    assert_true(
+      outer.matches(":fullscreen"),
+      "outer:fullscreen in simple fullscreen"
+    );
+    assert_false(
+      inner.matches(":fullscreen"),
+      "inner:fullscreen in simple fullscreen"
+    );
+
+    // Then request fullscreen for the inner element.
+    await trusted_request(inner);
+    // Although inner is the fullscreen element, both elements match the
+    // selector, as both have their fullscreen flag set.
+    assert_equals(document.fullscreenElement, inner);
+    assert_true(
+      inner.matches(":fullscreen"),
+      "inner:fullscreen in nested fullscreen"
+    );
+    assert_true(
+      outer.matches(":fullscreen"),
+      "outer:fullscreen in nested fullscreen"
+    );
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-scroll.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-scroll.html
new file mode 100644
index 0000000000..87147b42e0
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-scroll.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<style>
+  body {
+    height: 10000px;
+    background: grey;
+  }
+</style>
+<title>fullscreen root block scrolling</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="../trusted-click.js"></script>
+<body>
+<div>
+  This page tests that entering fullscreen doesn't adjust the scroll offset
+</div>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    await trusted_click();
+    document.scrollingElement.scrollTop = 300;
+    await document.documentElement.requestFullscreen();
+    await fullScreenChange();
+
+    assert_equals(document.fullscreenElement, document.documentElement);
+    assert_not_equals(document.scrollingElement.scrollTop, 0);
+    document.scrollingElement.scrollTop = 0;
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-size.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-size.html
new file mode 100644
index 0000000000..5138494d5d
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-block-size.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<style>
+  html,
+  body {
+    margin: 0px;
+  }
+</style>
+<title>fullscreen root block sizing</title>
+<!-- This page intentionally has no content. It needs to have
+no width or height. This is to ensure that the root element
+gets sizing in fullscreen mode as it does in as it does not
+in fullscreen mode.
+-->
+<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="../trusted-click.js"></script>
+<body></body>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    await trusted_click();
+    await document.documentElement.requestFullscreen();
+    await fullScreenChange();
+    assert_equals(document.fullscreenElement, document.documentElement);
+    assert_true(document.documentElement.getBoundingClientRect().width > 0);
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page-ref.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page-ref.html
new file mode 100644
index 0000000000..b2bf13557a
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            background-color: green;
+        }
+    </style>
+</head>
+<body></body>
+</html>
diff --git a/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page.html b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page.html
new file mode 100644
index 0000000000..f122e678f3
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/fullscreen-root-fills-page.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+    <link rel="author" href="https://github.com/nt1m">
+    <link rel="match" href="fullscreen-root-fills-page-ref.html">
+    <style>
+        html {
+            background-color: red;
+            height: 100%;
+            overflow: hidden;
+
+            /* These should be no-op */
+            top: 200px;
+            left: 200px;
+            right: 200px;
+            bottom: 200px;
+        }
+
+        html, body {
+            margin: 0;
+            padding: 0;
+        }
+
+        body, #cover {
+            height: 100%;
+            width: 100%;
+        }
+
+        #cover {
+            background-color: green;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="cover"></div>
+    <script src="/resources/testdriver.js"></script>
+    <script src="/resources/testdriver-vendor.js"></script>
+    <script>
+        document.addEventListener("fullscreenchange", () => {
+            document.documentElement.classList.remove("reftest-wait");
+        });
+        test_driver.bless("fullscreen")
+            .then(() => document.documentElement.requestFullscreen())
+    </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/fullscreen/rendering/ua-style-iframe.html b/testing/web-platform/tests/fullscreen/rendering/ua-style-iframe.html
new file mode 100644
index 0000000000..dcf1656e00
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/rendering/ua-style-iframe.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<title>User-agent levels style sheet defaults for iframe</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="../trusted-click.js"></script>
+<style>
+  iframe {
+    border: 1px solid blue;
+    padding: 1px;
+    /* transform is also tested because of https://crbug.com/662393 */
+    transform: scale(0.5);
+  }
+</style>
+<div id="log"></div>
+<div id="ancestor"><iframe></iframe></div>
+<script>
+  function assert_dir_properties(style, propBase, value, state) {
+    for (let dir of ["Top", "Right", "Bottom", "Left"]) {
+      let prop = propBase.replace("{}", dir);
+      assert_equals(style[prop], value, `${state} ${prop} style`);
+    }
+  }
+
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    const ancestor = document.getElementById("ancestor");
+    const iframe = ancestor.firstChild;
+
+    const initialStyle = getComputedStyle(iframe);
+    assert_dir_properties(initialStyle, "border{}Width", "1px", "initial");
+    assert_dir_properties(initialStyle, "border{}Style", "solid", "initial");
+    assert_dir_properties(
+      initialStyle,
+      "border{}Color",
+      "rgb(0, 0, 255)",
+      "initial"
+    );
+    assert_dir_properties(initialStyle, "padding{}", "1px", "initial");
+    assert_equals(
+      initialStyle.transform,
+      "matrix(0.5, 0, 0, 0.5, 0, 0)",
+      "initial transform style"
+    );
+
+    await trusted_request(iframe);
+    await fullScreenChange();
+
+    const fullscreenStyle = getComputedStyle(iframe);
+    assert_dir_properties(
+      fullscreenStyle,
+      "border{}Width",
+      "0px",
+      "fullscreen"
+    );
+    assert_dir_properties(
+      fullscreenStyle,
+      "border{}Style",
+      "none",
+      "fullscreen"
+    );
+    assert_dir_properties(
+      fullscreenStyle,
+      "border{}Color",
+      "rgb(0, 0, 0)",
+      "fullscreen"
+    );
+    assert_dir_properties(fullscreenStyle, "padding{}", "0px", "fullscreen");
+    assert_equals(
+      fullscreenStyle.transform,
+      "none",
+      "fullscreen transform style"
+    );
+  });
+</script>
diff --git a/testing/web-platform/tests/fullscreen/trusted-click.js b/testing/web-platform/tests/fullscreen/trusted-click.js
new file mode 100644
index 0000000000..51fbce7ee4
--- /dev/null
+++ b/testing/web-platform/tests/fullscreen/trusted-click.js
@@ -0,0 +1,65 @@
+/**
+ * Invokes callback from a trusted click event, avoiding interception by fullscreen element.
+ *
+ * @param {Element} container - Element where button will be created and clicked.
+ */
+function trusted_click(container = document.body) {
+    var document = container.ownerDocument;
+    var button = document.createElement("button");
+    button.textContent = "click to continue test";
+    button.style.display = "block";
+    button.style.fontSize = "20px";
+    button.style.padding = "10px";
+    button.addEventListener("click", () => {
+        button.remove();
+    });
+    container.appendChild(button);
+    if (window.top !== window) test_driver.set_test_context(window.top);
+    // Race them for manually testing...
+    return Promise.race([
+        test_driver.click(button),
+        new Promise((resolve) => {
+            button.addEventListener("click", resolve);
+        }),
+    ]);
+}
+
+// Invokes element.requestFullscreen() from a trusted click.
+async function trusted_request(element = document.body, whereToCreateButton = null) {
+    await trusted_click(whereToCreateButton ?? element.parentNode ?? element);
+    return element.requestFullscreen();
+}
+
+/**
+ * Used to await a fullscreen change event, once.
+ *
+ * @param {EventTarget} target
+ * @returns
+ */
+function fullScreenChange(target = document) {
+    return new Promise((resolve) =>
+        target.addEventListener("fullscreenchange", resolve, { once: true })
+    );
+}
+
+/**
+ * Sets up a message event listener, and returns a promise that resolves
+ * when the message from the iframe is received.
+ *
+ * @param {HTMLIFrameElement} iframe
+ * @returns {Promise<object>}
+ */
+function promiseMessage(iframe) {
+    return new Promise((resolve) => {
+        window.addEventListener(
+            "message",
+            (e) => {
+                if (e.data?.report.api === "fullscreen") {
+                    resolve(e.data);
+                }
+            },
+            { once: true }
+        );
+        iframe.contentWindow.postMessage({ action: "report" }, "*");
+    });
+}
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/fullscreen
parent	Initial commit. (diff)
download	firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip