Add support for :read-only and :read-write pseudos (#1497)

Author: jed

src/pseudo-selectors/aliases.ts

@@ -1,3 +1,13 @@
+/**
+ * Only text controls can be made read-only, since for other controls (such
+ * as checkboxes and buttons) there is no useful distinction between being
+ * read-only and being disabled.
+ *
+ * @see {@link https://html.spec.whatwg.org/multipage/input.html#attr-input-readonly}
+ */
+const textControl =
+    "input:is([type=text i],[type=search i],[type=url i],[type=tel i],[type=email i],[type=password i],[type=date i],[type=month i],[type=week i],[type=time i],[type=datetime-local i],[type=number i])";
+
 /**
  * Aliases are pseudos that are expressed as selectors.
  */
@@ -21,6 +31,9 @@ export const aliases: Record<string, string> = {
     required: ":is(input, select, textarea)[required]",
     optional: ":is(input, select, textarea):not([required])",
 
+    "read-only": `[readonly]:is(textarea, ${textControl})`,
+    "read-write": `:not([readonly]):is(textarea, ${textControl})`,
+
     // JQuery extensions
 
     /**

test/pseudo-classes.ts

@@ -200,3 +200,26 @@ describe(":has", () => {
         ).toHaveLength(2);
     });
 });
+
+describe(":read-only and :read-write", () => {
+    it("should match", () => {
+        const dom = parseDocument(`
+            <div>
+                <input type="text" readonly>
+                <input type="text">
+                <input type="color" readonly>
+                <input type="color">
+                <textarea readonly></textarea>
+                <textarea></textarea>
+            </div>
+        `);
+
+        expect(
+            CSSselect.selectAll<AnyNode, Element>(":read-only", dom),
+        ).toHaveLength(2);
+
+        expect(
+            CSSselect.selectAll<AnyNode, Element>(":read-write", dom),
+        ).toHaveLength(2);
+    });
+});