@react-x11/components 0.11.0 → 0.13.0

package/src/html/css/color.ts

@@ -1,4 +1,5 @@
 import * as ntk from 'react-x11/ntk';
+import { closingParen, topLevelComma } from './vars.js';
 
 // CSS Color 4's functional colours: read here, and written back in the one
 // form every drawing context reads — `#rrggbb`, or `rgba(r, g, b, a)` with
@@ -753,3 +754,89 @@ const REC2020_TO_XYZ: readonly Triple[] = [
   [26158966 / 99577255, 472592308 / 697040785, 8267143 / 139408157],
   [0, 19567812 / 697040785, 295819943 / 278816314],
 ];
+
+// --- colour schemes ---------------------------------------------------------
+
+/** Whether a value has a `light-dark()` in it. */
+export const LIGHT_DARK = /(?:^|[^\w-])light-dark\(/i;
+const LIGHT_DARK_AT = /(?:^|[^\w-])(light-dark\()/gi;
+
+/**
+ * A value with each `light-dark()` in it replaced by the branch `scheme`
+ * picks (CSS Color 5, 7): the first where the element's used colour
+ * scheme is light, the second where it is dark. Replaced in the text, as a
+ * `var()` is, so a branch can be any colour — or another `light-dark()` —
+ * in any value a colour stands in. Null where one is not two arguments,
+ * which makes the declaration invalid.
+ */
+export function lightDark(
+  value: string,
+  scheme: 'light' | 'dark',
+): string | null {
+  let out = value;
+  // a branch can hold another, which the next round replaces
+  for (let round = 0; round < 32; round += 1) {
+    LIGHT_DARK_AT.lastIndex = 0;
+    const m = LIGHT_DARK_AT.exec(out);
+    if (!m) return out;
+    const open = m.index + m[0].length;
+    const start = open - m[1].length;
+    const close = closingParen(out, open);
+    if (close < 0) return null;
+    const inner = out.slice(open, close);
+    const comma = topLevelComma(inner);
+    if (comma < 0) return null;
+    const light = inner.slice(0, comma).trim();
+    const dark = inner.slice(comma + 1).trim();
+    if (!light || !dark || topLevelComma(dark) >= 0) return null;
+    out =
+      out.slice(0, start) +
+      (scheme === 'dark' ? dark : light) +
+      out.slice(close + 1);
+  }
+  return null;
+}
+
+/**
+ * The scheme an element with this `color-scheme` is drawn in (CSS Color
+ * Adjust 1, 2.2), given the one `preferred` — the palette's, which stands
+ * for the reader's preference: that one where the element supports it,
+ * else the first it names that is one, else the one `normal` gives, which
+ * is the palette's own too. Null for a value that is not a `color-scheme`.
+ */
+export function usedColorScheme(
+  value: string,
+  preferred: 'light' | 'dark' = 'light',
+): 'light' | 'dark' | null {
+  const words = value.trim().toLowerCase().split(/\s+/);
+  if (words.length === 1 && words[0] === 'normal') return preferred;
+  // `[ light | dark | <custom-ident> ]+ && only?`: `only` once, first or
+  // last, and never on its own
+  const only = words.indexOf('only');
+  if (only >= 0) {
+    if (only !== 0 && only !== words.length - 1) return null;
+    words.splice(only, 1);
+    if (!words.length) return null;
+  }
+  let first: 'light' | 'dark' | null = null;
+  for (const word of words) {
+    if (!SCHEME_IDENT.test(word) || NOT_SCHEMES.has(word)) return null;
+    if (word === preferred) return preferred;
+    if (!first && (word === 'light' || word === 'dark')) first = word;
+  }
+  return first ?? preferred;
+}
+
+const SCHEME_IDENT = /^-?(?:[a-z_]|--)[\w-]*$/;
+/** What a scheme's name cannot be: the keywords the grammar has, and the
+ *  CSS-wide ones, which reach here only in a list. */
+const NOT_SCHEMES = new Set([
+  'normal',
+  'only',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+  'default',
+]);

package/src/html/css/parse.ts

@@ -60,6 +60,14 @@ export interface Stylesheet {
    *  keeps these so a resize can tell "the layout changed" from "the
    *  *cascade* changed", and restyle only when it crossed one. */
   breakpoints: number[];
+  /** Whether a `@media` rule in this sheet tests the viewport's height,
+   *  which makes a document restyle when the height moves, as a `vh`
+   *  does. */
+  readsHeight?: boolean;
+  /** Whether one tests its aspect ratio, which a width that crosses no
+   *  breakpoint can change: the document restyles as one with a `vw`
+   *  does. */
+  readsWidth?: boolean;
   /** The `@font-face` rules, in order (see `fonts.ts`). */
   fontFaces: FontFaceRule[];
   /** `@counter-style` rules, in order: a name and its descriptors, which
@@ -94,12 +102,26 @@ export interface FontFaceSource {
   format: string | null;
 }
 
-/** The tests this evaluates live: a width, a colour scheme, or both.
+/** The tests this evaluates live: a width, a height, a colour scheme.
  *  Anything else — `orientation`, `print`, `prefers-reduced-motion` — is
  *  decided once, at parse time, by `staticPass`. */
 export interface MediaCondition {
   min?: number;
   max?: number;
+  /** The viewport's height, as `min`/`max` its width: `min-height`,
+   *  `max-height` and a range on `height` (Media Queries 4, 4.2). */
+  minHeight?: number;
+  maxHeight?: number;
+  /** The display's resolution in dots per CSS pixel, its scale: `min-`
+   *  and `max-resolution`, and WebKit's `-webkit-min-device-pixel-ratio`,
+   *  which a design writes to swap in its high-DPI images. */
+  minResolution?: number;
+  maxResolution?: number;
+  /** The viewport's width over its height: `aspect-ratio` and its `min-`
+   *  and `max-`, the device's the viewport's too, and `orientation`, which
+   *  is landscape where the width is the greater. */
+  minAspect?: number;
+  maxAspect?: number;
   /** `prefers-color-scheme`, answered from the palette in force. */
   scheme?: 'light' | 'dark';
   /** Set when the query could not be evaluated as a width or scheme test:
@@ -229,6 +251,13 @@ export function parseStylesheet(
           for (const c of conditions) {
             if (c.min !== undefined) breakpoints.add(c.min);
             if (c.max !== undefined) breakpoints.add(c.max + MAX_EDGE);
+            if (c.minHeight !== undefined || c.maxHeight !== undefined) {
+              sheet.readsHeight = true;
+            }
+            if (c.minAspect !== undefined || c.maxAspect !== undefined) {
+              sheet.readsHeight = true;
+              sheet.readsWidth = true;
+            }
           }
           // A nested `@media` intersects with the one above it; pushing a
           // level rather than merging keeps "all of these blocks hold" exact
@@ -242,8 +271,11 @@ export function parseStylesheet(
         } else if (name === 'supports' && at.block !== null) {
           // Everything in a `@supports` block is markup this renderer either
           // understands or ignores per-declaration, so entering it is closer
-          // to right than skipping it.
-          walk(at.block, media, layer, path);
+          // to right than skipping it — but for a condition it can answer
+          // false (`supportsCondition`)
+          if (supportsCondition(at.prelude) !== false) {
+            walk(at.block, media, layer, path);
+          }
         } else if (name === 'layer') {
           // `@layer a, b;` names layers, and so fixes their order, and
           // `@layer a { … }` puts rules in one; one with no name is a layer
@@ -332,6 +364,13 @@ export function parseStylesheet(
         for (const c of conditions) {
           if (c.min !== undefined) breakpoints.add(c.min);
           if (c.max !== undefined) breakpoints.add(c.max + MAX_EDGE);
+          if (c.minHeight !== undefined || c.maxHeight !== undefined) {
+            sheet.readsHeight = true;
+          }
+          if (c.minAspect !== undefined || c.maxAspect !== undefined) {
+            sheet.readsHeight = true;
+            sheet.readsWidth = true;
+          }
         }
         styleRule(
           selectors,
@@ -342,7 +381,9 @@ export function parseStylesheet(
           depth + 1,
         );
       } else if (name === 'supports') {
-        styleRule(selectors, item.block, media, layer, path, depth + 1);
+        if (supportsCondition(item.prelude) !== false) {
+          styleRule(selectors, item.block, media, layer, path, depth + 1);
+        }
       } else if (name === 'layer' && LAYER_NAME.test(item.prelude.trim())) {
         const [ranks, full] = enter(item.prelude.trim(), layer, path);
         styleRule(selectors, item.block, media, ranks, full, depth + 1);
@@ -1350,17 +1391,36 @@ function readAtRule(text: string, at: number): AtRule {
  *  divides a device width into (`640.5` at 2x) fall on the right side. */
 const MAX_EDGE = 1 / 64;
 
+/**
+ * The media features that are the viewport's width and its height here.
+ * `device-width` and `device-height` are the Web-exposed screen area's
+ * (Media Queries 4, appendix A), which a user agent may answer with the
+ * viewport's (CSSOM View 2.3), and a document drawn into an element has no
+ * screen of its own to answer with. Deprecated, and still what a page from
+ * before `width` asks with: DuckDuckGo Lite's phone sheet is
+ * `(max-device-width: 700px)`, and a query that went unread held, so a
+ * desktop window got the phone's 12px dropdowns.
+ */
+const VIEWPORT_SIDES = {
+  width: new Set(['width', 'device-width']),
+  height: new Set(['height', 'device-height']),
+};
+
 /**
  * A width range in Media Queries 4's syntax — `(width >= 48rem)`, `(60rem >
  * width)`, `(40rem <= width < 60rem)` — as the widths it holds between, or
  * null for a term that is not one. A strict bound is a sixty-fourth of a
  * pixel inside the value, where a viewport's width never lands.
  */
-function widthRange(term: string): { min?: number; max?: number } | null {
+function widthRange(
+  term: string,
+  feature: 'width' | 'height' = 'width',
+): { min?: number; max?: number } | null {
   const inner = /^\(\s*(.*?)\s*\)$/.exec(term)?.[1];
   if (!inner || !/[<>=]/.test(inner)) return null;
   const parts = inner.split(/\s*(<=|>=|<|>|=)\s*/);
-  const isWidth = (part: string) => part.toLowerCase() === 'width';
+  const isWidth = (part: string) =>
+    VIEWPORT_SIDES[feature].has(part.toLowerCase());
   const out: { min?: number; max?: number } = {};
   // `width OP value`, with the operator read from the width's side
   const bound = (op: string, value: string): boolean => {
@@ -1755,8 +1815,15 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
     const condition: MediaCondition = {};
     let pass = true;
     let sawWidth = false;
+    let sawHeight = false;
+    let sawResolution = false;
+    let sawAspect = false;
     const negated = /^\s*not\b/i.test(group);
-    for (const part of group.split(/\s+and\s+/i)) {
+    // `and` needs white space after it, where a `(` would make it a
+    // function, and none after the `)` it follows: DuckDuckGo writes
+    // `(max-device-width: 701px)and (orientation: landscape)`, which read
+    // as one term that was no feature, and held
+    for (const part of group.split(/(?:\s+|(?<=\)))and\s+/i)) {
       const term = part
         .trim()
         .replace(/^not\s+/i, '')
@@ -1775,17 +1842,61 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
         sawWidth = true;
         continue;
       }
-      const feature = /^\(\s*([a-z-]+)\s*:\s*([^)]+?)\s*\)$/i.exec(term);
+      const heights = widthRange(term, 'height');
+      if (heights) {
+        if (heights.min !== undefined) {
+          condition.minHeight = Math.max(condition.minHeight ?? 0, heights.min);
+        }
+        if (heights.max !== undefined) {
+          condition.maxHeight = Math.min(
+            condition.maxHeight ?? Infinity,
+            heights.max,
+          );
+        }
+        sawHeight = true;
+        continue;
+      }
+      const feature = mediaFeature(term);
       if (feature) {
         const key = feature[1].toLowerCase();
         const len = parseLength(feature[2], ZERO_UNITS);
         const px = typeof len === 'number' ? len : null;
-        if (key === 'min-width' && px !== null) {
+        if (
+          (key === 'min-width' || key === 'min-device-width') &&
+          px !== null
+        ) {
           condition.min = Math.max(condition.min ?? 0, px);
           sawWidth = true;
-        } else if (key === 'max-width' && px !== null) {
+        } else if (
+          (key === 'max-width' || key === 'max-device-width') &&
+          px !== null
+        ) {
           condition.max = Math.min(condition.max ?? Infinity, px);
           sawWidth = true;
+        } else if (
+          px === null &&
+          /^(?:min-|max-)?(?:device-)?(?:width|height)$/.test(key)
+        ) {
+          // a size that is no length is a query that does not parse, which
+          // Media Queries 4 (3.2) makes `not all`: `(min-width:0\0)`, the
+          // hack that kept a block for Internet Explorer 9 and 10, held
+          // here as a query that asked nothing, and its rules applied
+          pass = false;
+        } else if (
+          (key === 'min-height' || key === 'min-device-height') &&
+          px !== null
+        ) {
+          // the viewport's height, answered live as its width is: a
+          // design that sets its heading's size by the window's height
+          // took the tallest step's at every height
+          condition.minHeight = Math.max(condition.minHeight ?? 0, px);
+          sawHeight = true;
+        } else if (
+          (key === 'max-height' || key === 'max-device-height') &&
+          px !== null
+        ) {
+          condition.maxHeight = Math.min(condition.maxHeight ?? Infinity, px);
+          sawHeight = true;
         } else if (key === 'prefers-color-scheme') {
           // Answered live, from the palette in force: a document dropped
           // into a dark application takes its dark branch, and follows the
@@ -1804,7 +1915,73 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
           // renderer needs.
           pass = false;
         } else if (key === 'orientation') {
-          pass = feature[2].trim().toLowerCase() === 'landscape';
+          // the viewport's, as its aspect ratio: portrait where its height
+          // is at least its width (Media Queries 4, 4.5)
+          const orientation = feature[2].trim().toLowerCase();
+          if (orientation === 'portrait') {
+            condition.maxAspect = Math.min(condition.maxAspect ?? Infinity, 1);
+            sawAspect = true;
+          } else if (orientation === 'landscape') {
+            condition.minAspect = Math.max(
+              condition.minAspect ?? 0,
+              1 + ASPECT_EDGE,
+            );
+            sawAspect = true;
+          } else pass = false;
+        } else if (ASPECT_FEATURES.test(key)) {
+          const ratio = ratioOf(feature[2]);
+          if (ratio === null) pass = false;
+          else {
+            if (!key.startsWith('max-')) {
+              condition.minAspect = Math.max(condition.minAspect ?? 0, ratio);
+            }
+            if (!key.startsWith('min-')) {
+              condition.maxAspect = Math.min(
+                condition.maxAspect ?? Infinity,
+                ratio,
+              );
+            }
+            sawAspect = true;
+          }
+        } else if (RESOLUTION_FEATURES.has(key)) {
+          const dppx = resolutionOf(feature[2], key.startsWith('-webkit-'));
+          if (dppx === null) pass = false;
+          else {
+            if (!key.includes('max-')) {
+              condition.minResolution = Math.max(
+                condition.minResolution ?? 0,
+                dppx,
+              );
+            }
+            if (!key.includes('min-')) {
+              condition.maxResolution = Math.min(
+                condition.maxResolution ?? Infinity,
+                dppx,
+              );
+            }
+            sawResolution = true;
+          }
+        } else if (desktopFeature(key, feature[2]) !== true) {
+          // any other feature as a desktop screen with a mouse answers
+          // it, and one nothing knows is false (Media Queries 4, 3.2):
+          // Firefox's and Opera's resolution features, which a design lists
+          // beside WebKit's, held here, and a page at one dot to the pixel
+          // took the rules it keeps for two
+          pass = false;
+        }
+        continue;
+      }
+      const flag = /^\(\s*(-?[a-z][a-z0-9-]*)\s*\)$/i.exec(term);
+      if (flag) {
+        // a feature in the boolean context, `(hover)`: true where its value
+        // is anything but zero or none
+        const key = flag[1].toLowerCase();
+        if (
+          !BOOLEAN_TRUE.has(key) &&
+          !RESOLUTION_FEATURES.has(key) &&
+          desktopFeature(key, null) !== true
+        ) {
+          pass = false;
         }
         continue;
       }
@@ -1820,11 +1997,23 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
       // `not` over a scheme is the other scheme. `not` over a width range
       // is not expressible as one range; the honest reduction is to decide
       // it statically rather than invert it wrongly.
-      if (!sawWidth && pass && condition.scheme) {
+      if (
+        !sawWidth &&
+        !sawHeight &&
+        !sawResolution &&
+        !sawAspect &&
+        pass &&
+        condition.scheme
+      ) {
         out.push({ scheme: condition.scheme === 'dark' ? 'light' : 'dark' });
         continue;
       }
-      out.push({ staticPass: !sawWidth && pass ? false : !pass });
+      out.push({
+        staticPass:
+          !sawWidth && !sawHeight && !sawResolution && !sawAspect && pass
+            ? false
+            : !pass,
+      });
       continue;
     }
     if (!pass) {
@@ -1833,6 +2022,9 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
     }
     if (
       !sawWidth &&
+      !sawHeight &&
+      !sawResolution &&
+      !sawAspect &&
       condition.scheme === undefined &&
       condition.min === undefined &&
       condition.max === undefined
@@ -1845,6 +2037,221 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
   return out.length ? out : [{ staticPass: true }];
 }
 
+/**
+ * The properties whose support a `@supports` condition is answered for:
+ * the mask's, which pages test before they draw an icon as a masked colour
+ * and keep a background image under `not` for an engine without them.
+ * Drawn here, and the fallback drawn too, an icon was its image in black
+ * under the mask, over the colour it was meant to be.
+ */
+const ANSWERED = new Set(
+  [
+    'mask',
+    'mask-image',
+    'mask-repeat',
+    'mask-position',
+    'mask-size',
+    'mask-origin',
+    'mask-clip',
+  ].flatMap((name) => [name, `-webkit-${name}`]),
+);
+
+/**
+ * Whether a `@supports` condition holds (CSS Conditional 3, 6): true or
+ * false where it turns on declarations of the properties this answers for
+ * (`ANSWERED`), combined by `not`, `and` and `or`; null where it turns on
+ * anything else, or is none, and the block is entered as every one was.
+ * Answering more is not safe without a list of what this draws: Tailwind 4
+ * keeps its variables' starting values under a test for engines without
+ * `@property`, which this is, and false there would drop every shadow and
+ * gradient it writes.
+ */
+export function supportsCondition(prelude: string): boolean | null {
+  const text = prelude.trim();
+  if (/^not\b/i.test(text)) {
+    const inner = supportsCondition(text.slice(3));
+    return inner === null ? null : !inner;
+  }
+  // the terms at the top level, and the one operator between them
+  const terms: string[] = [];
+  let op = '';
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    const c = text[i];
+    if (c === '(') depth += 1;
+    else if (c === ')') depth -= 1;
+    else if (depth === 0 && /\s/.test(c)) {
+      const word = /^\s+(and|or)\s+/i.exec(text.slice(i));
+      if (!word) continue;
+      const next = word[1].toLowerCase();
+      // `and` and `or` mixed without parentheses is no condition
+      if (op && op !== next) return null;
+      op = next;
+      terms.push(text.slice(start, i));
+      i += word[0].length - 1;
+      start = i + 1;
+    }
+    if (depth < 0) return null;
+  }
+  if (terms.length) {
+    terms.push(text.slice(start));
+    const values = terms.map(supportsCondition);
+    if (op === 'and') {
+      if (values.includes(false)) return false;
+      return values.includes(null) ? null : true;
+    }
+    if (values.includes(true)) return true;
+    return values.includes(null) ? null : false;
+  }
+  // one term: a condition in parentheses, or a declaration in them
+  if (!(text.startsWith('(') && text.endsWith(')'))) return null;
+  const inner = text.slice(1, -1).trim();
+  if (inner.startsWith('(') || /^not\b/i.test(inner)) {
+    return supportsCondition(inner);
+  }
+  const declaration = /^([a-z-]+)\s*:\s*(\S[\s\S]*)$/i.exec(inner);
+  if (!declaration || !ANSWERED.has(declaration[1].toLowerCase())) return null;
+  return true;
+}
+
+/**
+ * A `(name: value)` media feature: the whole term, its name, and its value
+ * read to the parenthesis that closes the feature, or null where the term is
+ * no such thing. A value may hold parentheses of its own: MediaWiki's
+ * breakpoints are `(max-width: calc(640px - 1px))`, and a value read to the
+ * first `)` found no feature there — the term was passed over as though it
+ * said nothing, and every narrow-screen rule held at every width.
+ */
+/** `aspect-ratio` and the device's, bare or `min-`/`max-`. */
+const ASPECT_FEATURES = /^(?:min-|max-)?(?:device-)?aspect-ratio$/;
+
+/** How far past square a landscape viewport is: any width over the height. */
+const ASPECT_EDGE = 1e-9;
+
+/** A ratio, `16/9` or `16 / 9` or `1.5`, as a number; null for anything
+ *  else, or a ratio of nothing. */
+function ratioOf(value: string): number | null {
+  const m = /^\s*(\d*\.?\d+)\s*(?:\/\s*(\d*\.?\d+)\s*)?$/.exec(value);
+  if (!m) return null;
+  const ratio = Number(m[1]) / (m[2] === undefined ? 1 : Number(m[2]));
+  return Number.isFinite(ratio) && ratio > 0 ? ratio : null;
+}
+
+/** The resolution features, the standard's and WebKit's, which Chrome
+ *  answers; `min--moz-device-pixel-ratio` and `-o-min-device-pixel-ratio`
+ *  are no feature of its, and none of this. */
+const RESOLUTION_FEATURES = new Set([
+  'resolution',
+  'min-resolution',
+  'max-resolution',
+  '-webkit-device-pixel-ratio',
+  '-webkit-min-device-pixel-ratio',
+  '-webkit-max-device-pixel-ratio',
+]);
+
+/** A resolution in dots per CSS pixel: `2dppx`, `2x`, `192dpi`, `75.6dpcm`,
+ *  or WebKit's device pixel ratio, a number. Null for anything else. */
+function resolutionOf(value: string, ratio: boolean): number | null {
+  const m = /^\s*(\d*\.?\d+(?:e[+-]?\d+)?)\s*(dppx|x|dpi|dpcm)?\s*$/i.exec(
+    value,
+  );
+  if (!m) return null;
+  const n = Number(m[1]);
+  const unit = (m[2] ?? '').toLowerCase();
+  if (ratio) return unit ? null : n;
+  if (unit === 'dppx' || unit === 'x') return n;
+  if (unit === 'dpi') return n / 96;
+  if (unit === 'dpcm') return (n * 2.54) / 96;
+  return null;
+}
+
+/** The features true in the boolean context whatever the viewport: a
+ *  size, a scheme, an orientation, there is always one. */
+const BOOLEAN_TRUE = new Set([
+  'width',
+  'height',
+  'device-width',
+  'device-height',
+  'aspect-ratio',
+  'orientation',
+  'prefers-color-scheme',
+]);
+
+/**
+ * A media feature as a desktop screen driven by a mouse answers it — the
+ * device `<Html>` draws on — for the features that do not depend on the
+ * viewport: true, false, or null for a feature nothing knows, which is
+ * false (Media Queries 4, 3.2). `value` is null in the boolean context.
+ * The colour is eight bits a component on no palette and no grid; scripts
+ * never run here, so `scripting` is `none`.
+ */
+function desktopFeature(key: string, value: string | null): boolean | null {
+  const v = value?.trim().toLowerCase() ?? null;
+  const numeric = (feature: string, has: number): boolean | null => {
+    const bare = key.replace(/^(min|max)-/, '');
+    if (bare !== feature) return null;
+    if (v === null) return key === feature ? has !== 0 : null;
+    const n = Number(v);
+    if (!Number.isFinite(n)) return false;
+    if (key.startsWith('min-')) return has >= n;
+    if (key.startsWith('max-')) return has <= n;
+    return has === n;
+  };
+  const keyword = (answers: Record<string, boolean>, bool: boolean) =>
+    v === null ? bool : (answers[v] ?? false);
+  switch (key) {
+    case 'hover':
+    case 'any-hover':
+      return keyword({ hover: true, none: false }, true);
+    case 'pointer':
+    case 'any-pointer':
+      return keyword({ fine: true, coarse: false, none: false }, true);
+    case 'update':
+      return keyword({ fast: true, slow: false, none: false }, true);
+    case 'overflow-block':
+    case 'overflow-inline':
+      return keyword({ scroll: true }, true);
+    case 'scan':
+      return false;
+    case 'color-gamut':
+      return keyword({ srgb: true }, true);
+    case 'dynamic-range':
+    case 'video-dynamic-range':
+      return keyword({ standard: true }, true);
+    case 'prefers-contrast':
+    case 'prefers-reduced-transparency':
+    case 'prefers-reduced-data':
+      return keyword({ 'no-preference': true }, false);
+    case 'forced-colors':
+      return keyword({ none: true }, false);
+    case 'scripting':
+      return keyword({ none: true }, false);
+    case 'display-mode':
+      return keyword({ browser: true }, true);
+    case '-webkit-transform-3d':
+      return v === null || v === '1';
+  }
+  return (
+    numeric('color', 8) ??
+    numeric('monochrome', 0) ??
+    numeric('color-index', 0) ??
+    numeric('grid', 0)
+  );
+}
+
+function mediaFeature(term: string): [string, string, string] | null {
+  const m = /^\(\s*([a-z-]+)\s*:([\s\S]*)\)$/i.exec(term);
+  if (!m) return null;
+  let depth = 0;
+  for (const c of m[2]) {
+    if (c === '(') depth += 1;
+    else if (c === ')' && --depth < 0) return null;
+  }
+  const value = m[2].trim();
+  return depth === 0 && value ? [term, m[1], value] : null;
+}
+
 /** A `@media` width is compared with the viewport in CSS pixels — the
  *  cascade divides the device width by the scale before asking — so the
  *  thresholds parse at scale 1 whatever panel the document lands on. */
@@ -1856,6 +2263,11 @@ export function mediaMatches(
   media: MediaCondition[][] | null,
   width: number,
   scheme: 'light' | 'dark' = 'light',
+  /** The viewport's height in CSS pixels; a test of it holds at no height
+   *  where none is given. */
+  height = NaN,
+  /** The display's scale, device pixels to the CSS pixel. */
+  resolution = 1,
 ): boolean {
   if (!media) return true;
   for (const block of media) {
@@ -1868,6 +2280,12 @@ export function mediaMatches(
       if (
         (c.min === undefined || width >= c.min) &&
         (c.max === undefined || width <= c.max) &&
+        (c.minHeight === undefined || height >= c.minHeight) &&
+        (c.maxHeight === undefined || height <= c.maxHeight) &&
+        (c.minResolution === undefined || resolution >= c.minResolution) &&
+        (c.minAspect === undefined || width >= c.minAspect * height) &&
+        (c.maxAspect === undefined || width <= c.maxAspect * height) &&
+        (c.maxResolution === undefined || resolution <= c.maxResolution) &&
         (c.scheme === undefined || c.scheme === scheme)
       ) {
         any = true;