LibWeb: Implement :modal pseudo class

Adds the :modal pseudo class which matches dialogs opened with showModal().
LadybirdBrowser · Jul 2, 2024 · aeec74a · aeec74a
1 parent bce7b24
commit aeec74a
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 0 deletions.
diff --git a/Tests/LibWeb/Layout/expected/dialog-open-modal.txt b/Tests/LibWeb/Layout/expected/dialog-open-modal.txt
@@ -0,0 +1,20 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x0 children: inline
+      TextNode <#text>
+  Box <dialog#modal> at (358.84375,19) content-size 82.3125x562 positioned flex-container(row) [FFC] children: not-inline
+    BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+      TextNode <#text>
+    BlockContainer <span> at (358.84375,19) content-size 82.3125x562 flex-item [BFC] children: inline
+      frag 0 from TextNode start: 0, length: 10, rect: [358.84375,19 82.3125x17] baseline: 13.296875
+          "I'm a node"
+      TextNode <#text>
+    BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+      TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
+  PaintableBox (Box<DIALOG>#modal) [339.84375,0 120.3125x600]
+    PaintableWithLines (BlockContainer<SPAN>) [358.84375,19 82.3125x562]
+      TextPaintable (TextNode<#text>)
diff --git a/Tests/LibWeb/Layout/expected/dialog-open-non-modal.txt b/Tests/LibWeb/Layout/expected/dialog-open-non-modal.txt
@@ -0,0 +1,18 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x0 children: inline
+      BlockContainer <dialog> at (358.84375,27) content-size 82.3125x17 positioned [BFC] children: inline
+        TextNode <#text>
+        InlineNode <span>
+          frag 0 from TextNode start: 0, length: 10, rect: [358.84375,27 82.3125x17] baseline: 13.296875
+              "I'm a node"
+          TextNode <#text>
+        TextNode <#text>
+      TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
+      PaintableWithLines (BlockContainer<DIALOG>) [339.84375,8 120.3125x55]
+        InlinePaintable (InlineNode<SPAN>)
+          TextPaintable (TextNode<#text>)
diff --git a/Tests/LibWeb/Layout/input/dialog-open-modal.html b/Tests/LibWeb/Layout/input/dialog-open-modal.html
@@ -0,0 +1,16 @@
+<style>
+    :modal {
+        display: flex;
+    }
+</style>
+
+<dialog id="modal">
+    <span>I'm a node</span>
+</dialog>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        let modal = document.getElementById('modal');
+        modal.showModal();
+    });
+</script>
diff --git a/Tests/LibWeb/Layout/input/dialog-open-non-modal.html b/Tests/LibWeb/Layout/input/dialog-open-non-modal.html
@@ -0,0 +1,9 @@
+<style>
+    :modal {
+        display: flex;
+    }
+</style>
+
+<dialog open>
+    <span>I'm a node</span>
+</dialog>
diff --git a/Userland/Libraries/LibWeb/CSS/PseudoClasses.json b/Userland/Libraries/LibWeb/CSS/PseudoClasses.json
@@ -71,6 +71,9 @@
   "local-link": {
     "argument": ""
   },
+  "modal": {
+    "argument": ""
+  },
   "muted": {
     "argument": ""
   },

diff --git a/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp b/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp
@@ -542,6 +542,15 @@ static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoCla
     case CSS::PseudoClass::Open:
     case CSS::PseudoClass::Closed:
         return matches_open_state_pseudo_class(element, pseudo_class.type == CSS::PseudoClass::Open);
+    case CSS::PseudoClass::Modal: {
+        // https://drafts.csswg.org/selectors/#modal-state
+        if (is<HTML::HTMLDialogElement>(element)) {
+            auto const& dialog_element = static_cast<HTML::HTMLDialogElement const&>(element);
+            return dialog_element.is_modal();
+        }
+        // FIXME: fullscreen elements are also modal.
+        return false;
+    }
     }
 
     return false;

diff --git a/Userland/Libraries/LibWeb/HTML/HTMLDialogElement.h b/Userland/Libraries/LibWeb/HTML/HTMLDialogElement.h
@@ -30,6 +30,8 @@ class HTMLDialogElement final : public HTMLElement {
     // https://www.w3.org/TR/html-aria/#el-dialog
     virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::dialog; }
 
+    bool is_modal() const { return m_is_modal; }
+
 private:
     HTMLDialogElement(DOM::Document&, DOM::QualifiedName);