From bde57151929b879df1b351ec4ed7747aa9b47a97 Mon Sep 17 00:00:00 2001
From: Florian Scholz <fs@florianscholz.com>
Date: Mon, 27 Nov 2023 13:39:52 +0100
Subject: [PATCH] Add custom CSS selectors

---
 custom/css.json          | 29 +++++++++++++++++++++++++++++
 test-builder/css.test.ts | 35 ++++++++++++++++++++++++++++++-----
 test-builder/css.ts      |  7 +++++++
 3 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/custom/css.json b/custom/css.json
index a98197ff9..605180f89 100644
--- a/custom/css.json
+++ b/custom/css.json
@@ -989,5 +989,34 @@
     "zoom": {
       "__values": ["reset"]
     }
+  },
+  "selectors": {
+    ":-moz-first-node": {},
+    ":-moz-last-node": {},
+    ":-moz-only-whitespace": {},
+    ":-moz-window-inactive": {},
+    "::-moz-color-swatch": {},
+    "::-moz-focus-inner": {},
+    "::-moz-list-bullet": {},
+    "::-moz-list-number": {},
+    "::-moz-progress-bar": {},
+    "::-moz-range-progress": {},
+    "::-moz-range-thumb": {},
+    "::-moz-range-track": {},
+    "::-webkit-inner-spin-button": {},
+    "::-webkit-meter-bar": {},
+    "::-webkit-meter-even-less-good-value": {},
+    "::-webkit-meter-inner-element": {},
+    "::-webkit-meter-optimum-value": {},
+    "::-webkit-meter-suboptimum-value": {},
+    "::-webkit-progress-bar": {},
+    "::-webkit-progress-inner-element": {},
+    "::-webkit-progress-value": {},
+    "::-webkit-scrollbar": {},
+    "::-webkit-search-cancel-button": {},
+    "::-webkit-search-results-button": {},
+    "::-webkit-slider-runnable-track": {},
+    "::-webkit-slider-thumb": {},
+    ":popover-open": {}
   }
 }
diff --git a/test-builder/css.test.ts b/test-builder/css.test.ts
index 231742ee3..96b4ad392 100644
--- a/test-builder/css.test.ts
+++ b/test-builder/css.test.ts
@@ -38,7 +38,7 @@ describe("build (CSS)", () => {
           url: "",
         },
         properties: [],
-        selectors: [{name: "+"}, {name: "nth-of-type()"}],
+        selectors: [{name: "+"}, {name: ":nth-of-type()"}],
       },
     };
 
@@ -52,6 +52,9 @@ describe("build (CSS)", () => {
         },
         zoom: {},
       },
+      selectors: {
+        "::-webkit-progress-bar": {},
+      },
     };
 
     assert.deepEqual(await build(webrefCSS, customCSS), {
@@ -83,12 +86,16 @@ describe("build (CSS)", () => {
         code: 'bcd.testCSSProperty("zoom")',
         exposure: ["Window"],
       },
+      "css.selectors.-webkit-progress-bar": {
+        code: 'bcd.testCSSSelector("::-webkit-progress-bar")',
+        exposure: ["Window"],
+      },
       "css.selectors.next-sibling": {
         code: 'bcd.testCSSSelector("+")',
         exposure: ["Window"],
       },
       "css.selectors.nth-of-type": {
-        code: 'bcd.testCSSSelector("nth-of-type()")',
+        code: 'bcd.testCSSSelector(":nth-of-type()")',
         exposure: ["Window"],
       },
     });
@@ -106,7 +113,7 @@ describe("build (CSS)", () => {
       },
     };
 
-    assert.deepEqual(await build(css, {properties: {}}), {
+    assert.deepEqual(await build(css, {properties: {}, selectors: {}}), {
       "css.properties.foo": {
         code: `(function () {
   return 1;
@@ -130,11 +137,29 @@ describe("build (CSS)", () => {
     };
 
     await assert.isRejected(
-      build(css, {properties: {foo: {}}}),
+      build(css, {properties: {foo: {}}, selectors: {}}),
       "Custom CSS property already known: foo",
     );
   });
 
+  it("double-defined selector", async () => {
+    const css = {
+      "css-dummy": {
+        spec: {
+          title: "CSS Dummy",
+          url: "",
+        },
+        properties: [],
+        selectors: [{name: "foo"}],
+      },
+    };
+
+    await assert.isRejected(
+      build(css, {properties: {}, selectors: {foo: {}}}),
+      "Custom CSS selector already known: foo",
+    );
+  });
+
   it("invalid import", async () => {
     const css = {
       "css-dummy": {
@@ -147,7 +172,7 @@ describe("build (CSS)", () => {
       },
     };
 
-    assert.deepEqual(await build(css, {properties: {}}), {
+    assert.deepEqual(await build(css, {properties: {}, selectors: {}}), {
       "css.properties.bar": {
         code: `(function () {
   throw "Test is malformed: <%css.properties.foo:a%> is an invalid import reference";
diff --git a/test-builder/css.ts b/test-builder/css.ts
index 82603c52b..8b9ccd028 100644
--- a/test-builder/css.ts
+++ b/test-builder/css.ts
@@ -60,6 +60,13 @@ const build = async (specCSS, customCSS) => {
     properties.set(name, mergedValues);
   }
 
+  for (const [name] of Object.entries(customCSS.selectors) as any[]) {
+    if (selectors.has(name)) {
+      throw new Error(`Custom CSS selector already known: ${name}`);
+    }
+    selectors.set(name, new Map());
+  }
+
   const tests = {};
 
   for (const name of Array.from(properties.keys()).sort()) {