Add the :open pseudo-class

These pseudo-classes are defined in CSS here: https://drafts.csswg.org/selectors-4/#open-state

Author: josepharhar

source

@@ -48211,6 +48211,35 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
   data-x="attr-input-type-checkbox">Checkbox</span> state) stop an <code>input</code> element from
   being <i data-x="concept-fe-mutable">mutable</i>.</p>
 
+  <p>The <code>input</code> element can <dfn data-x="input-support-picker">support a picker</dfn>. A
+  picker is a user interface element that allows the end user to choose a value. Whether an
+  <code>input</code> element supports a picker depends on the <code
+  data-x="attr-input-type">type</code> attribute state and <span>implementation-defined</span>
+  behavior. An <code>input</code> element must support a picker when its <code
+  data-x="attr-input-type">type</code> attribute is in the <span data-x="attr-input-type-file">File
+  Upload</span> state.</p>
+
+  <div class="note">
+   <p>As of the time of this writing, typical browser implementations show such picker UI for:</p>
+
+   <ul>
+    <li><p><code>input</code> elements whose <code data-x="attr-input-type">type</code>
+    attributes are in the <span data-x="attr-input-type-date">Date</span>, <span
+    data-x="attr-input-type-month">Month</span>, <span data-x="attr-input-type-week">Week</span>,
+    <span data-x="attr-input-type-time">Time</span>, <span
+    data-x="attr-input-type-datetime-local">Local Date and Time</span>, and <span
+    data-x="attr-input-type-color">Color</span> states;</p></li>
+
+    <li><p><code>input</code> elements in various states that have a <span
+    data-x="concept-input-list">suggestions source element</span>;</p></li>
+
+    <li><p><code>input</code> elements whose <code data-x="attr-input-type">type</code> attribute
+    is in the <span data-x="attr-input-type-file">File Upload</span> state; and</p></li>
+
+    <li><p><code>select</code> elements.</p></li>
+   </ul>
+  </div>
+
   <p>The <span data-x="concept-node-clone-ext">cloning steps</span> for <code>input</code> elements
   must propagate the <span data-x="concept-fe-value">value</span>, <span
   data-x="concept-fe-dirty">dirty value flag</span>, <span
@@ -52840,8 +52869,10 @@ You cannot submit this form when the field is incorrect.</samp></pre>
    <dt><code data-x=""><var>input</var>.<span subdfn data-x="dom-input-showPicker">showPicker</span>()</code></dt>
 
    <dd>
-    <p>Shows any applicable picker UI for <var>input</var>, so that the user can select a value. (If
-    no picker UI is implemented for the given control, then this method does nothing.)</p>
+    <p>Shows any applicable picker UI for <var>input</var>, so that the user can select a value.</p>
+
+    <p>If <var>input</var> does not <span data-x="input-support-picker">support a picker</span>,
+    this method does nothing.</p>
 
     <p>Throws an <span>"<code>InvalidStateError</code>"</span> <code>DOMException</code> if
     <var>input</var> is not <span data-x="concept-fe-mutable">mutable</span>.</p>
@@ -53172,6 +53203,9 @@ You cannot submit this form when the field is incorrect.</samp></pre>
    <li><p><span>Consume user activation</span> given <span>element</span>'s <span>relevant global
    object</span>.</p></li>
 
+   <li><p>If <var>element</var> does not <span data-x="input-support-picker">support a
+   picker</span>, then return.</p></li>
+
    <li>
     <p>If <var>element</var> is an <code>input</code> element and <var>element</var>'s <code
     data-x="attr-input-type">type</code> attribute is in the <span
@@ -53212,11 +53246,10 @@ You cannot submit this form when the field is incorrect.</samp></pre>
    </li>
 
    <li>
-    <p>Otherwise, the user agent should show any relevant user interface for selecting a value for
-    <var>element</var>, in the way it normally would when the user interacts with the control. (If
-    no such UI applies to <var>element</var>, then this step does nothing.)</p>
+    <p>Otherwise, the user agent should show the relevant user interface for selecting a value for
+    <var>element</var>, in the way it normally would when the user interacts with the control.</p>
 
-    <p>If such a user interface is shown, it must respect the requirements stated in the relevant
+    <p>When showing such a user interface, it must respect the requirements stated in the relevant
     parts of the specification for how <var>element</var> behaves given its <code
     data-x="attr-input-type">type</code> attribute state. (For example, various sections describe
     restrictions on the resulting <span data-x="concept-fe-value">value</span> string.)</p>
@@ -53226,33 +53259,6 @@ You cannot submit this form when the field is incorrect.</samp></pre>
     firing either <code data-x="event-input">input</code> and <code
     data-x="event-change">change</code> events, or a <code data-x="event-cancel">cancel</code>
     event.)</p>
-
-    <div class="note">
-     <p>As of the time of this writing, typical browser implementations show such picker UI for:</p>
-
-     <ul>
-      <li><p><code>input</code> elements whose <code data-x="attr-input-type">type</code>
-      attributes are in the <span data-x="attr-input-type-date">Date</span>, <span
-      data-x="attr-input-type-month">Month</span>, <span data-x="attr-input-type-week">Week</span>,
-      <span data-x="attr-input-type-time">Time</span>, <span
-      data-x="attr-input-type-datetime-local">Local Date and Time</span>, and <span
-      data-x="attr-input-type-color">Color</span> states;</p></li>
-
-      <li><p><code>input</code> elements in various states that have a <span
-      data-x="concept-input-list">suggestions source element</span>;</p></li>
-
-      <li><p><code>input</code> elements whose <code data-x="attr-input-type">type</code> attribute
-      is in the <span data-x="attr-input-type-file">File Upload</span> state (although those are
-      handled via the special case above, instead of by this step); and</p></li>
-
-      <li><p><code>select</code> elements.</p></li>
-     </ul>
-
-     <p>However, the intent of this step is to trigger <em>any</em> picker UI implementation. So
-     for example, if a user agent implemented a password picker UI for the <span
-     data-x="attr-input-type-password">Password</span> state, then this method would be expected to
-     show that picker UI when called on a password input.</p>
-    </div>
    </li>
   </ol>
 
@@ -75082,6 +75088,26 @@ Demos:
    <dd><p>The <code data-x="selector-volume-locked">:volume-locked</code> <span>pseudo-class</span>
    must match all <span data-x="media element">media elements</span> when the user agent's
    <span>volume locked</span> is true.</p></dd>
+
+   <dt><dfn selector><code data-x="selector-open">:open</code></dfn></dt>
+   <dd>
+    <p>The <code data-x="selector-open">:open</code> <span>pseudo-class</span> must match any
+    element falling into one of the following categories:</p>
+
+    <ul>
+     <li><p><code>details</code> elements that have an <code data-x="attr-details-open">open</code>
+     attribute</p></li>
+
+     <li><p><code>dialog</code> elements that have an <code data-x="attr-dialog-open">open</code>
+     attribute</p></li>
+
+     <li><p><code>select</code> elements that are a <span>drop-down box</span> and whose drop-down
+     boxes are open</p></li>
+
+     <li><p><code>input</code> elements that <span data-x="input-support-picker">support a
+     picker</span> and whose pickers are open</p></li>
+    </ul>
+   </dd>
   </dl>
 
   <p class="note">This specification does not define when an element matches the <code undefined