@svgrid/grid 2.6.3 → 2.6.4

package/src/svgriddropdown.async-panel.svelte.test.ts

@@ -1,195 +1,195 @@
-/**
- * The dropdown panel's geometry is derived from the option COUNT, and it used
- * to be measured only when the panel opened.
- *
- * With an async `editorOptions` the list is empty at that moment, so the panel
- * was anchored and sized for ZERO options - about 8px tall. The options then
- * arrived and rendered outside that box, unstyled, with the grid rows visible
- * behind them. Reported from demo 428 as a broken editor.
- *
- * jsdom has no layout, so these assert the contract that produces the right
- * geometry: the panel re-measures the trigger whenever the visible option list
- * changes while it is open.
- */
-import { afterEach, describe, expect, it } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGridDropdown from './SvGridDropdown.svelte'
-
-const tick = () => new Promise<void>((r) => setTimeout(r, 0))
-const settle = async () => { for (let i = 0; i < 4; i += 1) await tick() }
-
-let cleanup: (() => void) | null = null
-afterEach(() => { cleanup?.(); cleanup = null })
-
-type Opt = { value: string; label: string }
-const opts = (...labels: string[]): Opt[] => labels.map((l) => ({ value: l, label: l }))
-
-/** Count trigger measurements, which is how the panel is anchored + sized. */
-function trackRectReads(rect?: Partial<DOMRect>) {
-  const reads: number[] = []
-  const orig = HTMLElement.prototype.getBoundingClientRect
-  HTMLElement.prototype.getBoundingClientRect = function () {
-    reads.push(1)
-    return {
-      top: 100, left: 0, width: 160, height: 30,
-      bottom: 130, right: 160, x: 0, y: 100, toJSON() {},
-      ...rect,
-    } as DOMRect
-  }
-  return { reads, restore: () => { HTMLElement.prototype.getBoundingClientRect = orig } }
-}
-
-const panelEl = () => document.querySelector('.sv-grid-dropdown-panel') as HTMLElement
-
-const optionEls = () => document.querySelectorAll('.sv-grid-dropdown-option')
-const emptyEl = () => document.querySelector('.sv-grid-dropdown-empty')
-
-describe('dropdown panel with a late-arriving option list', () => {
-  it('re-measures the trigger when options land after opening', async () => {
-    const t = trackRectReads()
-    try {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      // Opens with an empty list, exactly like an async source.
-      const props = $state({ options: [] as Opt[], value: null, onChange: () => {} })
-      const app = mount(SvGridDropdown, { target, props: props as never })
-      cleanup = () => { unmount(app); target.remove() }
-      await settle()
-
-      expect(optionEls()).toHaveLength(0)
-      const afterOpen = t.reads.length
-      expect(afterOpen).toBeGreaterThan(0)
-
-      // The request resolves.
-      props.options = opts('Paris', 'Lyon', 'Marseille', 'Toulouse', 'Bordeaux')
-      await settle()
-
-      expect(optionEls()).toHaveLength(5)
-      // Sized for an empty list and never re-measured is the bug; the panel has
-      // to consult the trigger again once it has real content.
-      expect(t.reads.length).toBeGreaterThan(afterOpen)
-    } finally {
-      t.restore()
-    }
-  })
-
-  it('re-measures when a search filter shrinks the list', async () => {
-    const t = trackRectReads()
-    try {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      const props = $state({
-        options: opts('Paris', 'Lyon', 'Marseille'),
-        value: null, searchable: true, onChange: () => {},
-      })
-      const app = mount(SvGridDropdown, { target, props: props as never })
-      cleanup = () => { unmount(app); target.remove() }
-      await settle()
-      const before = t.reads.length
-
-      const search = document.querySelector('.sv-grid-dropdown-search') as HTMLInputElement
-      search.value = 'lyo'
-      search.dispatchEvent(new Event('input', { bubbles: true }))
-      await settle()
-
-      expect(optionEls()).toHaveLength(1)
-      expect(t.reads.length).toBeGreaterThan(before)
-    } finally {
-      t.restore()
-    }
-  })
-
-  it('shows Loading rather than "No options" while a list is in flight', async () => {
-    const target = document.createElement('div')
-    document.body.appendChild(target)
-    const app = mount(SvGridDropdown, {
-      target,
-      props: { options: [], value: null, loading: true, onChange: () => {} } as never,
-    })
-    cleanup = () => { unmount(app); target.remove() }
-    await settle()
-    expect(emptyEl()?.textContent).toContain('Loading')
-    // Announced, so a screen reader hears the list arrive.
-    expect(emptyEl()?.getAttribute('role')).toBe('status')
-  })
-
-  it('still says "No options" when the list is genuinely empty', async () => {
-    const target = document.createElement('div')
-    document.body.appendChild(target)
-    const app = mount(SvGridDropdown, {
-      target,
-      props: { options: [], value: null, loading: false, onChange: () => {} } as never,
-    })
-    cleanup = () => { unmount(app); target.remove() }
-    await settle()
-    expect(emptyEl()?.textContent).toContain('No options')
-  })
-
-  it('is not capped by the row-height estimate when the list fits', async () => {
-    // `anchoredRect` clamps its `maxHeight` to our estimate, which assumes a
-    // 32px row. Themes with a bigger font render taller rows, so capping the
-    // panel at that estimate cut off the last option. A short list must be
-    // limited only by the real room available.
-    const t = trackRectReads({ top: 100, bottom: 130 })
-    try {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      const app = mount(SvGridDropdown, {
-        target,
-        props: { options: opts('FR', 'JP', 'US'), value: null, onChange: () => {} } as never,
-      })
-      cleanup = () => { unmount(app); target.remove() }
-      await settle()
-
-      const max = parseFloat(panelEl().style.maxHeight)
-      // The 3-row estimate is 3*32 + 8 = 104. Anything at or under that would
-      // clip; the real space below the trigger is far larger.
-      expect(max).toBeGreaterThan(104)
-    } finally {
-      t.restore()
-    }
-  })
-
-  it('anchors an upward panel by its bottom edge', async () => {
-    // Upward panels used to be positioned by `top`, derived from the same
-    // estimate. Now that the panel may exceed the estimate, a top-anchored one
-    // would grow DOWN over the trigger; bottom-anchoring makes it grow up.
-    const t = trackRectReads({ top: 4000, bottom: 4030 })
-    try {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      const app = mount(SvGridDropdown, {
-        target,
-        props: {
-          options: opts(...Array.from({ length: 12 }, (_, i) => `Opt ${i}`)),
-          value: null, onChange: () => {},
-        } as never,
-      })
-      cleanup = () => { unmount(app); target.remove() }
-      await settle()
-
-      const el = panelEl()
-      expect(el.style.bottom).not.toBe('')
-      expect(el.style.top).toBe('')
-    } finally {
-      t.restore()
-    }
-  })
-
-  it('swaps Loading for the options once they resolve', async () => {
-    const target = document.createElement('div')
-    document.body.appendChild(target)
-    const props = $state({ options: [] as Opt[], value: null, loading: true, onChange: () => {} })
-    const app = mount(SvGridDropdown, { target, props: props as never })
-    cleanup = () => { unmount(app); target.remove() }
-    await settle()
-    expect(emptyEl()?.textContent).toContain('Loading')
-
-    props.options = opts('Paris', 'Lyon')
-    props.loading = false
-    await settle()
-
-    expect(emptyEl()).toBeNull()
-    expect(optionEls()).toHaveLength(2)
-  })
-})
+/**
+ * The dropdown panel's geometry is derived from the option COUNT, and it used
+ * to be measured only when the panel opened.
+ *
+ * With an async `editorOptions` the list is empty at that moment, so the panel
+ * was anchored and sized for ZERO options - about 8px tall. The options then
+ * arrived and rendered outside that box, unstyled, with the grid rows visible
+ * behind them. Reported from demo 428 as a broken editor.
+ *
+ * jsdom has no layout, so these assert the contract that produces the right
+ * geometry: the panel re-measures the trigger whenever the visible option list
+ * changes while it is open.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGridDropdown from './SvGridDropdown.svelte'
+
+const tick = () => new Promise<void>((r) => setTimeout(r, 0))
+const settle = async () => { for (let i = 0; i < 4; i += 1) await tick() }
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+type Opt = { value: string; label: string }
+const opts = (...labels: string[]): Opt[] => labels.map((l) => ({ value: l, label: l }))
+
+/** Count trigger measurements, which is how the panel is anchored + sized. */
+function trackRectReads(rect?: Partial<DOMRect>) {
+  const reads: number[] = []
+  const orig = HTMLElement.prototype.getBoundingClientRect
+  HTMLElement.prototype.getBoundingClientRect = function () {
+    reads.push(1)
+    return {
+      top: 100, left: 0, width: 160, height: 30,
+      bottom: 130, right: 160, x: 0, y: 100, toJSON() {},
+      ...rect,
+    } as DOMRect
+  }
+  return { reads, restore: () => { HTMLElement.prototype.getBoundingClientRect = orig } }
+}
+
+const panelEl = () => document.querySelector('.sv-grid-dropdown-panel') as HTMLElement
+
+const optionEls = () => document.querySelectorAll('.sv-grid-dropdown-option')
+const emptyEl = () => document.querySelector('.sv-grid-dropdown-empty')
+
+describe('dropdown panel with a late-arriving option list', () => {
+  it('re-measures the trigger when options land after opening', async () => {
+    const t = trackRectReads()
+    try {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      // Opens with an empty list, exactly like an async source.
+      const props = $state({ options: [] as Opt[], value: null, onChange: () => {} })
+      const app = mount(SvGridDropdown, { target, props: props as never })
+      cleanup = () => { unmount(app); target.remove() }
+      await settle()
+
+      expect(optionEls()).toHaveLength(0)
+      const afterOpen = t.reads.length
+      expect(afterOpen).toBeGreaterThan(0)
+
+      // The request resolves.
+      props.options = opts('Paris', 'Lyon', 'Marseille', 'Toulouse', 'Bordeaux')
+      await settle()
+
+      expect(optionEls()).toHaveLength(5)
+      // Sized for an empty list and never re-measured is the bug; the panel has
+      // to consult the trigger again once it has real content.
+      expect(t.reads.length).toBeGreaterThan(afterOpen)
+    } finally {
+      t.restore()
+    }
+  })
+
+  it('re-measures when a search filter shrinks the list', async () => {
+    const t = trackRectReads()
+    try {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const props = $state({
+        options: opts('Paris', 'Lyon', 'Marseille'),
+        value: null, searchable: true, onChange: () => {},
+      })
+      const app = mount(SvGridDropdown, { target, props: props as never })
+      cleanup = () => { unmount(app); target.remove() }
+      await settle()
+      const before = t.reads.length
+
+      const search = document.querySelector('.sv-grid-dropdown-search') as HTMLInputElement
+      search.value = 'lyo'
+      search.dispatchEvent(new Event('input', { bubbles: true }))
+      await settle()
+
+      expect(optionEls()).toHaveLength(1)
+      expect(t.reads.length).toBeGreaterThan(before)
+    } finally {
+      t.restore()
+    }
+  })
+
+  it('shows Loading rather than "No options" while a list is in flight', async () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvGridDropdown, {
+      target,
+      props: { options: [], value: null, loading: true, onChange: () => {} } as never,
+    })
+    cleanup = () => { unmount(app); target.remove() }
+    await settle()
+    expect(emptyEl()?.textContent).toContain('Loading')
+    // Announced, so a screen reader hears the list arrive.
+    expect(emptyEl()?.getAttribute('role')).toBe('status')
+  })
+
+  it('still says "No options" when the list is genuinely empty', async () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvGridDropdown, {
+      target,
+      props: { options: [], value: null, loading: false, onChange: () => {} } as never,
+    })
+    cleanup = () => { unmount(app); target.remove() }
+    await settle()
+    expect(emptyEl()?.textContent).toContain('No options')
+  })
+
+  it('is not capped by the row-height estimate when the list fits', async () => {
+    // `anchoredRect` clamps its `maxHeight` to our estimate, which assumes a
+    // 32px row. Themes with a bigger font render taller rows, so capping the
+    // panel at that estimate cut off the last option. A short list must be
+    // limited only by the real room available.
+    const t = trackRectReads({ top: 100, bottom: 130 })
+    try {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGridDropdown, {
+        target,
+        props: { options: opts('FR', 'JP', 'US'), value: null, onChange: () => {} } as never,
+      })
+      cleanup = () => { unmount(app); target.remove() }
+      await settle()
+
+      const max = parseFloat(panelEl().style.maxHeight)
+      // The 3-row estimate is 3*32 + 8 = 104. Anything at or under that would
+      // clip; the real space below the trigger is far larger.
+      expect(max).toBeGreaterThan(104)
+    } finally {
+      t.restore()
+    }
+  })
+
+  it('anchors an upward panel by its bottom edge', async () => {
+    // Upward panels used to be positioned by `top`, derived from the same
+    // estimate. Now that the panel may exceed the estimate, a top-anchored one
+    // would grow DOWN over the trigger; bottom-anchoring makes it grow up.
+    const t = trackRectReads({ top: 4000, bottom: 4030 })
+    try {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGridDropdown, {
+        target,
+        props: {
+          options: opts(...Array.from({ length: 12 }, (_, i) => `Opt ${i}`)),
+          value: null, onChange: () => {},
+        } as never,
+      })
+      cleanup = () => { unmount(app); target.remove() }
+      await settle()
+
+      const el = panelEl()
+      expect(el.style.bottom).not.toBe('')
+      expect(el.style.top).toBe('')
+    } finally {
+      t.restore()
+    }
+  })
+
+  it('swaps Loading for the options once they resolve', async () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const props = $state({ options: [] as Opt[], value: null, loading: true, onChange: () => {} })
+    const app = mount(SvGridDropdown, { target, props: props as never })
+    cleanup = () => { unmount(app); target.remove() }
+    await settle()
+    expect(emptyEl()?.textContent).toContain('Loading')
+
+    props.options = opts('Paris', 'Lyon')
+    props.loading = false
+    await settle()
+
+    expect(emptyEl()).toBeNull()
+    expect(optionEls()).toHaveLength(2)
+  })
+})

package/src/test-setup.ts

@@ -1,62 +1,62 @@
-// Vitest setup. jsdom doesn't ship ResizeObserver, IntersectionObserver,
-// or the layout APIs SvGrid touches inside its mount effects. Provide
-// minimal no-op stubs so component mounting completes without crashing.
-//
-// These assign to globals/prototypes the jsdom env doesn't fully type, so
-// the targets are cast to `any`. We deliberately avoid expect-error
-// suppression directives: when a stub happens to line up with the lib types,
-// such a directive becomes "unused" and svelte-check fails the build (an
-// unused expect-error directive is itself an error).
-
-if (typeof globalThis.ResizeObserver === 'undefined') {
-  ;(globalThis as any).ResizeObserver = class {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-  }
-}
-
-if (typeof globalThis.IntersectionObserver === 'undefined') {
-  ;(globalThis as any).IntersectionObserver = class {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-    takeRecords() {
-      return []
-    }
-  }
-}
-
-// jsdom's HTMLElement.scrollIntoView is a no-op; some grid code calls it
-// during the first effect. Make sure the method exists on every element.
-if (typeof Element !== 'undefined' && !Element.prototype.scrollIntoView) {
-  ;(Element.prototype as any).scrollIntoView = function () {}
-}
-
-// jsdom returns 0 for offset* and getBoundingClientRect; the grid only uses
-// these for visual layout (column widths, virtualization windowing), so the
-// zeros are harmless for behavioral tests.
-
-// jsdom lacks the Web Animations API that Svelte 5 transitions (e.g. the chart
-// drawer's slide-in) drive via element.animate(). Provide a no-op so mounting
-// transitioned components doesn't throw "element.animate is not a function".
-if (typeof Element !== 'undefined' && !Element.prototype.animate) {
-  ;(Element.prototype as any).animate = function () {
-    return {
-      cancel() {},
-      finish() {},
-      play() {},
-      pause() {},
-      reverse() {},
-      addEventListener() {},
-      removeEventListener() {},
-      finished: Promise.resolve(),
-      currentTime: 0,
-      playState: 'finished',
-      onfinish: null,
-      oncancel: null,
-    }
-  }
-}
-
-export {}
+// Vitest setup. jsdom doesn't ship ResizeObserver, IntersectionObserver,
+// or the layout APIs SvGrid touches inside its mount effects. Provide
+// minimal no-op stubs so component mounting completes without crashing.
+//
+// These assign to globals/prototypes the jsdom env doesn't fully type, so
+// the targets are cast to `any`. We deliberately avoid expect-error
+// suppression directives: when a stub happens to line up with the lib types,
+// such a directive becomes "unused" and svelte-check fails the build (an
+// unused expect-error directive is itself an error).
+
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  ;(globalThis as any).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+}
+
+if (typeof globalThis.IntersectionObserver === 'undefined') {
+  ;(globalThis as any).IntersectionObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords() {
+      return []
+    }
+  }
+}
+
+// jsdom's HTMLElement.scrollIntoView is a no-op; some grid code calls it
+// during the first effect. Make sure the method exists on every element.
+if (typeof Element !== 'undefined' && !Element.prototype.scrollIntoView) {
+  ;(Element.prototype as any).scrollIntoView = function () {}
+}
+
+// jsdom returns 0 for offset* and getBoundingClientRect; the grid only uses
+// these for visual layout (column widths, virtualization windowing), so the
+// zeros are harmless for behavioral tests.
+
+// jsdom lacks the Web Animations API that Svelte 5 transitions (e.g. the chart
+// drawer's slide-in) drive via element.animate(). Provide a no-op so mounting
+// transitioned components doesn't throw "element.animate is not a function".
+if (typeof Element !== 'undefined' && !Element.prototype.animate) {
+  ;(Element.prototype as any).animate = function () {
+    return {
+      cancel() {},
+      finish() {},
+      play() {},
+      pause() {},
+      reverse() {},
+      addEventListener() {},
+      removeEventListener() {},
+      finished: Promise.resolve(),
+      currentTime: 0,
+      playState: 'finished',
+      onfinish: null,
+      oncancel: null,
+    }
+  }
+}
+
+export {}

package/src/themes/contrast.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest'
+import { themePresets, resolveThemeTokens, type ThemeMode } from './index'
+
+/**
+ * WCAG contrast for every built-in theme, in both light and dark.
+ *
+ * The axe suite (`a11y.axe.test.ts`) runs in jsdom, which does no layout and no
+ * painting, so its `color-contrast` rule is disabled there. That leaves a real
+ * gap: a theme could ship text nobody can read and nothing would complain.
+ * Our tokens are plain hex, so the ratios are computable directly - no browser
+ * needed, and every preset is covered rather than whichever one a demo happens
+ * to use.
+ *
+ * Thresholds are the WCAG 2.1 AA ones:
+ *   - 4.5:1 for normal-size text
+ *   - 3:1   for large text and for non-text UI boundaries (SC 1.4.11)
+ */
+
+const AA_TEXT = 4.5
+const AA_UI = 3
+
+/** sRGB hex -> relative luminance, per WCAG 2.x. */
+function luminance(hex: string): number {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim())
+  if (!m) throw new Error(`not a plain hex colour: ${hex}`)
+  let h = m[1]!
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('')
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(h.slice(i, i + 2), 16) / 255
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  }) as [number, number, number]
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+function contrast(fg: string, bg: string): number {
+  const a = luminance(fg)
+  const b = luminance(bg)
+  const [hi, lo] = a > b ? [a, b] : [b, a]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+const round = (n: number) => Math.round(n * 100) / 100
+
+/**
+ * Pairs that actually meet a user's eye. Each is [foreground, background,
+ * threshold, what it is] - named so a failure says which surface is unreadable
+ * rather than just which token.
+ */
+const PAIRS: Array<[string, string, number, string]> = [
+  ['--sg-fg', '--sg-bg', AA_TEXT, 'body text on the grid background'],
+  ['--sg-fg', '--sg-row-alt-bg', AA_TEXT, 'body text on zebra-striped rows'],
+  ['--sg-fg', '--sg-row-hover-bg', AA_TEXT, 'body text on a hovered row'],
+  ['--sg-fg', '--sg-selection-bg', AA_TEXT, 'body text on a selected row'],
+  ['--sg-muted', '--sg-bg', AA_TEXT, 'secondary text on the grid background'],
+  ['--sg-header-fg', '--sg-header-bg', AA_TEXT, 'header text'],
+  ['--sg-on-accent', '--sg-accent', AA_TEXT, 'text on an accent-filled control'],
+  ['--sg-accent', '--sg-bg', AA_UI, 'accent used as a focus/selection indicator'],
+]
+
+/**
+ * Deliberately NOT checked: `--sg-border` against `--sg-bg`.
+ *
+ * WCAG 1.4.11 covers UI components whose STATE must be perceivable, and
+ * graphics required to understand content. A table gridline is neither: the
+ * grid's structure is carried by the accessibility tree (role=grid, rows,
+ * columnheaders), so a screen reader never depends on the line being visible,
+ * and a sighted user reads the table from its alignment and spacing. Holding
+ * gridlines to 3:1 would force every preset to draw near-black rules, which is
+ * why no mainstream design system does it. Focus rings and selection states DO
+ * have to clear 3:1, which is what the `--sg-accent` row above checks.
+ */
+
+const MODES: ThemeMode[] = ['light', 'dark']
+
+describe('built-in theme contrast (WCAG 2.1 AA)', () => {
+  const cases = themePresets.flatMap((preset) =>
+    MODES.map((mode) => [preset.id, mode, preset] as const),
+  )
+
+  it.each(cases)('%s / %s meets AA on every text surface', (id, mode, preset) => {
+    const tokens = resolveThemeTokens(preset, mode)
+    const failures: string[] = []
+
+    for (const [fgToken, bgToken, threshold, label] of PAIRS) {
+      const fg = tokens[fgToken]
+      const bg = tokens[bgToken]
+      // Skip anything a preset expresses as a gradient/color-mix rather than a
+      // flat hex - those cannot be judged without painting, and are called out
+      // in docs as the consumer's responsibility.
+      if (!fg || !bg || !/^#/.test(fg) || !/^#/.test(bg)) continue
+      const ratio = contrast(fg, bg)
+      if (ratio < threshold) {
+        failures.push(
+          `${label}: ${fgToken} ${fg} on ${bgToken} ${bg} = ${round(ratio)}:1 (needs ${threshold}:1)`,
+        )
+      }
+    }
+
+    expect(failures, `${id} (${mode}) contrast failures:\n  ${failures.join('\n  ')}`).toEqual([])
+  })
+
+  it('checks a meaningful number of presets', () => {
+    // Guards against the suite silently passing because the preset list moved.
+    expect(themePresets.length).toBeGreaterThanOrEqual(15)
+  })
+
+  it('computes known ratios correctly', () => {
+    // Sanity-check the maths itself against WCAG's canonical extremes.
+    expect(round(contrast('#000000', '#ffffff'))).toBe(21)
+    expect(round(contrast('#ffffff', '#ffffff'))).toBe(1)
+  })
+})