Implement ShadowRoot.fullscreenElement

https://bugs.webkit.org/show_bug.cgi?id=248712 rdar://102937497 Reviewed by Chris Dumez. Use ancestorElementInThisScope() similarly to webkitFullscreenElement. * LayoutTests/imported/w3c/web-platform-tests/fullscreen/api/document-exit-fullscreen-nested-shadow-dom-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/fullscreen/api/shadowroot-fullscreen-element-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/fullscreen/api/shadowroot-fullscreen-element.html: Added. * Source/WebCore/dom/DocumentOrShadowRootFullscreen.cpp: (WebCore::DocumentOrShadowRootFullscreen::fullscreenElement): Canonical link: https://commits.webkit.org/257457@main
WebKit · Dec 7, 2022 · 9d1bb9c5d5663e614e6c67465a99363255eafa01 · 9d1bb9c
1 parent c96dd4f
commit 9d1bb9c5d5663e614e6c67465a99363255eafa01
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/...web-platform-tests/fullscreen/api/document-exit-fullscreen-nested-shadow-dom-expected.txt b/...web-platform-tests/fullscreen/api/document-exit-fullscreen-nested-shadow-dom-expected.txt
@@ -1,17 +1,11 @@
-CONSOLE MESSAGE: Unhandled Promise Rejection: Error: assert_equals: expected Element node <div id="outer">
-      <slot></slot>
-    </div> but got null
+CONSOLE MESSAGE: Unhandled Promise Rejection: TypeError: Type error
 fullscreen
 
-Harness Error (FAIL), message = Unhandled rejection: assert_equals: expected Element node <div id="outer">
-      <slot></slot>
-    </div> but got null
+Harness Error (FAIL), message = Unhandled rejection: Type error
 
 TIMEOUT Exiting fullscreen from a nested shadow root works correctly. Test timed out
 
-Harness Error (FAIL), message = Unhandled rejection: assert_equals: expected Element node <div id="outer">
-      <slot></slot>
-    </div> but got null
+Harness Error (FAIL), message = Unhandled rejection: Type error
 
 TIMEOUT Exiting fullscreen from a nested shadow root works correctly. Test timed out
 
diff --git a/...imported/w3c/web-platform-tests/fullscreen/api/shadowroot-fullscreen-element-expected.txt b/...imported/w3c/web-platform-tests/fullscreen/api/shadowroot-fullscreen-element-expected.txt
@@ -0,0 +1,5 @@
+Exit fullscreen
+Go fullscreen
+
+PASS shadowRoot.fullscreenElement works correctly
+
diff --git a/...utTests/imported/w3c/web-platform-tests/fullscreen/api/shadowroot-fullscreen-element.html b/...utTests/imported/w3c/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/Source/WebCore/dom/DocumentOrShadowRootFullscreen.cpp b/Source/WebCore/dom/DocumentOrShadowRootFullscreen.cpp
@@ -38,10 +38,8 @@ namespace WebCore {
 // https://fullscreen.spec.whatwg.org/#dom-document-fullscreenelement
 Element* DocumentOrShadowRootFullscreen::fullscreenElement(TreeScope& treeScope)
 {
-    if (auto* document = dynamicDowncast<Document>(treeScope.rootNode()))
-        return document->fullscreenManager().fullscreenElement();
-    // FIXME: Add a proper implementation for ShadowRoot.
-    return nullptr;
+    auto& document = treeScope.documentScope();
+    return treeScope.ancestorElementInThisScope(document.fullscreenManager().fullscreenElement());
 }
 
 } // namespace WebCore