Add interactivity UA style for :fullscreen

This is required for the same reason dialog:modal resets interactivity according to spec in the top layer. So strictly not covered by the spec yet. Bug: 370065759 Change-Id: I98e4c54f3fab7ed432bef6331701f5d8305d3646 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6198205 Commit-Queue: Rune Lillesveen <[email protected]> Reviewed-by: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1411818}
jessejay-ch · Jan 27, 2025 · 7c2b382 · 7c2b382
1 parent d8fcfd1
commit 7c2b382
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 1 deletion.
diff --git a/css/css-ui/interactivity-inert-fullscreen-ua.html b/css/css-ui/interactivity-inert-fullscreen-ua.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<title>CSS Basic User Interface Test: UA style interactivity for :fullscreen</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#inertness">
+<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="t1"></div>
+<div id="t2" inert></div>
+<div inert>
+  <div id="t3"></div>
+</div>
+<div id="f4">
+  <div id="t4" inert></div>
+</div>
+<div id="t5" style="interactivity:inert"></div>
+<script>
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    assert_equals(getComputedStyle(t1).interactivity, "auto", "before requestFullscreen");
+    await test_driver.bless("fullscreen", () => t1.requestFullscreen());
+    assert_equals(getComputedStyle(t1).interactivity, "auto", "after requestFullscreen");
+  }, "UA :fullscreen interactivity rule");
+
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    assert_equals(getComputedStyle(t2).interactivity, "inert", "before requestFullscreen");
+    await test_driver.bless("fullscreen", () => t2.requestFullscreen());
+    assert_equals(getComputedStyle(t2).interactivity, "auto", "after requestFullscreen");
+  }, "UA :fullscreen inert rule wins over [inert] rule");
+
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    assert_equals(getComputedStyle(t3).interactivity, "inert", "before requestFullscreen");
+    await test_driver.bless("fullscreen", () => t3.requestFullscreen());
+    assert_equals(getComputedStyle(t3).interactivity, "auto", "after requestFullscreen");
+  }, "UA :fullscreen rule overriding inherited [inert] 'interactivity:inert' rule");
+
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    assert_equals(getComputedStyle(t4).interactivity, "inert", "before requestFullscreen");
+    await test_driver.bless("fullscreen", () => f4.requestFullscreen());
+    assert_equals(getComputedStyle(t4).interactivity, "inert", "after requestFullscreen");
+  }, "UA [inert] rule overriding inherited :fullscreen 'interactivity:auto' rule");
+
+  promise_test(async (t) => {
+    t.add_cleanup(() => {
+      if (document.fullscreenElement) {
+        return document.exitFullscreen();
+      }
+    });
+    assert_equals(getComputedStyle(t5).interactivity, "inert", "before requestFullscreen");
+    await test_driver.bless("fullscreen", () => t5.requestFullscreen());
+    assert_equals(getComputedStyle(t5).interactivity, "inert", "after requestFullscreen");
+  }, "Author 'interactivity:inert' overrides UA :fullscreen 'interactivity:auto' rule");
+
+</script>
diff --git a/css/css-ui/interactivity-inert-modal-dialog-ua.html b/css/css-ui/interactivity-inert-modal-dialog-ua.html
@@ -9,7 +9,7 @@
   <dialog id="t3"></dialog>
 </div>
 <dialog id="d4">
-  <div id="t4" inert>
+  <div id="t4" inert></div>
 </dialog>
 <dialog id="t5" style="interactivity:inert"></dialog>
 <script>