Add UA rules for interactivity

dialog:modal and [inert] should set 'interactivity' to 'auto' and 'inert' respectively according to the spec. Bug: 370065759 Change-Id: Id270eeb7f6672cdb43e6c69f2367a2aa5a68b79e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6197981 Reviewed-by: Robert Flack <[email protected]> Commit-Queue: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1411062}
web-platform-tests · Jan 24, 2025 · b685bd3 · b685bd3
1 parent 0be1c59
commit b685bd3
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 0 deletions.
diff --git a/css/css-ui/interactivity-inert-html-attribute-ua.html b/css/css-ui/interactivity-inert-html-attribute-ua.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>CSS Basic User Interface Test: UA style interactivity for [inert]</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>
+<style>
+  .auto { interactivity: auto; }
+</style>
+<div id="t1" inert></div>
+<div inert>
+  <div id="t2"></div>
+  <div id="t3" class="auto"></div>
+</div>
+<div id="t4" inert class="auto"></div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(t1).interactivity, "inert");
+  }, "[inert] { interactivity: inert }");
+
+  test(() => {
+    assert_equals(getComputedStyle(t2).interactivity, "inert");
+  }, "[inert] { interactivity: inert } inherited");
+
+  test(() => {
+    assert_equals(getComputedStyle(t3).interactivity, "auto");
+  }, "Author interactivity:auto overrides inherited UA [inert] { interactivity: inert }");
+
+  test(() => {
+    assert_equals(getComputedStyle(t4).interactivity, "auto");
+  }, "Author interactivity:auto overrides UA [inert] { interactivity: inert }");
+
+</script>
diff --git a/css/css-ui/interactivity-inert-modal-dialog-ua.html b/css/css-ui/interactivity-inert-modal-dialog-ua.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<title>CSS Basic User Interface Test: UA style interactivity for dialog:modal</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>
+<dialog id="t1"></dialog>
+<dialog id="t2" inert></dialog>
+<div inert>
+  <dialog id="t3"></dialog>
+</div>
+<dialog id="d4">
+  <div id="t4" inert>
+</dialog>
+<dialog id="t5" style="interactivity:inert"></dialog>
+<script>
+  test((t) => {
+    t.add_cleanup(() => { t1.close(); });
+    assert_equals(getComputedStyle(t1).interactivity, "auto", "before showModal");
+    t1.showModal();
+    assert_equals(getComputedStyle(t1).interactivity, "auto", "after showModal");
+  }, "UA dialog:modal interactivity rule");
+
+  test((t) => {
+    t.add_cleanup(() => { t2.close(); });
+    assert_equals(getComputedStyle(t2).interactivity, "inert", "before showModal");
+    t2.showModal();
+    assert_equals(getComputedStyle(t2).interactivity, "auto", "after showModal");
+  }, "UA dialog:modal inert rule wins over [inert] rule");
+
+  test((t) => {
+    t.add_cleanup(() => { t3.close(); });
+    assert_equals(getComputedStyle(t3).interactivity, "inert", "before showModal");
+    t3.showModal();
+    assert_equals(getComputedStyle(t3).interactivity, "auto", "after showModal");
+  }, "UA dialog:modal rule overriding inherited [inert] 'interactivity:inert' rule");
+
+  test((t) => {
+    t.add_cleanup(() => { d4.close(); });
+    assert_equals(getComputedStyle(t4).interactivity, "inert", "before showModal");
+    d4.showModal();
+    assert_equals(getComputedStyle(t4).interactivity, "inert", "after showModal");
+  }, "UA [inert] rule overriding inherited dialog:modal 'interactivity:auto' rule");
+
+  test((t) => {
+    t.add_cleanup(() => { t5.close(); });
+    assert_equals(getComputedStyle(t5).interactivity, "inert", "before showModal");
+    t5.showModal();
+    assert_equals(getComputedStyle(t5).interactivity, "inert", "after showModal");
+  }, "Author 'interactivity:inert' overrides UA dialog:modal 'interactivity:auto' rule");
+
+</script>