Add custom test for @media scan

custom/css.json

@@ -1381,5 +1381,12 @@
       "property": "background-image",
       "value": "url('https://collector.openwebdocs.org/')"
     }
+  },
+  "at-rules": {
+    "media": {
+      "scan": {},
+      "scan.interlace": {},
+      "scan.progressive": {}
+    }
   }
 }

custom/tests.yaml

@@ -6269,6 +6269,12 @@ css:
     first: "return {result: null, message: 'Testing :first is not yet implemented'};"
     left: "return {result: null, message: 'Testing :left is not yet implemented'};"
     right: "return {result: null, message: 'Testing :right is not yet implemented'};"
+  at-rules:
+    media:
+      scan:
+        __test: "return window.matchMedia('not (scan: interlace)').matches || window.matchMedia('not (scan: progressive)').matches;"
+        interlace: "return window.matchMedia('not (scan: interlace)').matches;"
+        progressive: "return window.matchMedia('not (scan: progressive)').matches;"
 
 html:
   # Features defined here also need to be in @webref/elements or custom/elements.json.

test-builder/css.ts

@@ -647,6 +647,35 @@ const buildTypeTests = async (customCSS) => {
   return tests;
 };
 
+/**
+ * Builds tests for CSS at-rules based on the provided customCSS.
+ * @param customCSS - The custom CSS data.
+ * @returns - The tests for CSS at-rules.
+ */
+const buildAtRuleTests = async (customCSS) => {
+  const tests = {};
+
+  for (const [atRule, atRuleData] of Object.entries(
+    customCSS["at-rules"] || {},
+  ) as any[]) {
+    for (const [feature] of Object.entries(atRuleData) as any[]) {
+      const ident = `css.at-rules.${atRule}.${feature}`;
+      const customTest = await getCustomTest(ident, "css.at-rules", true);
+
+      if (customTest.test) {
+        tests[ident] = compileTest({
+          raw: {
+            code: customTest.test,
+          },
+          exposure: ["Window"],
+        });
+      }
+    }
+  }
+
+  return tests;
+};
+
 /**
  * Builds tests for CSS features based on the provided specCSS and customCSS.
  * @param specCSS - The specification CSS data.
@@ -659,6 +688,7 @@ const build = async (specCSS, customCSS) => {
   Object.assign(tests, await buildPropertyTests(specCSS, customCSS));
   Object.assign(tests, await buildSelectorTests(specCSS, customCSS));
   Object.assign(tests, await buildTypeTests(customCSS));
+  Object.assign(tests, await buildAtRuleTests(customCSS));
 
   return tests;
 };