Define :modal pseudo-class and start using it

nt1m · zcorpan · commit 075834570690 · 2023-06-09T13:20:47.000+02:00
diff --git a/source b/source
@@ -73028,6 +73028,18 @@ Demos:
     all other <span>HTML elements</span>.</p>
    </dd>
 
+   <dt><dfn selector noexport><code data-x="selector-modal">:modal</code></dfn></dt>
+   <dd>
+    <p>The <code data-x="selector-modal">:modal</code> <span>pseudo-class</span> must match any
+    element falling into one of the following categories:</p>
+
+    <ul>
+     <li><code>dialog</code> elements whose <span>is modal</span> flag is true</li>
+
+     <li>elements whose <span>fullscreen flag</span> is true</li>
+    </ul>
+   </dd>
+
    <dt><dfn selector noexport><code data-x="selector-ltr">:dir(ltr)</code></dfn></dt>
    <dd>
     <p>The <code data-x="selector-ltr">:dir(ltr)</code> <span>pseudo-class</span> must match all
@@ -124153,6 +124165,13 @@ dialog {
   background-color: Canvas;
   color: CanvasText;
 }
+dialog:modal {
+  position: fixed;
+  overflow: auto;
+  inset-block: 0;
+  max-width: calc(100% - 6px - 2em);
+  max-height: calc(100% - 6px - 2em);
+}
 dialog::backdrop {
   background: rgba(0,0,0,0.1);
 }
@@ -124228,18 +124247,6 @@ form { margin-block-end: 1em; }</code></pre>
   <span>'text-align'</span> property set to 'justify' in a <span data-x="presentational
   hints">presentational hint</span>, and to <span>align descendants</span> to the left.</p>
 
-  <p>The <code>dialog</code> element, when its <span>is modal</span> flag is true, is expected to
-  act as if it had a user-agent-level style sheet rule setting the following properties:</p>
-
-  <ul>
-   <li><span>'position'</span> property to 'fixed'</li>
-   <li><span>'overflow'</span> property to 'auto'</li>
-   <li><span>'inset-block-start'</span> property to '0'</li>
-   <li><span>'inset-block-end'</span> property to '0'</li>
-   <li><span>'max-width'</span> property to 'calc(100% - 6px - 2em)'</li>
-   <li><span>'max-height'</span> property to 'calc(100% - 6px - 2em)'</li>
-  </ul>
-
   <h4>Phrasing content</h4>
 
   <pre><code class="css">@namespace "https://www.w3.org/1999/xhtml";
