claude and gordon: add tests for light and dark logo

Claude got the syntax immediately, but not always the semantics, so I fixed those
and we iterated. Claude and came up with many interesting edge cases, some fixed in
adjacent commits. "Propose questions and answers, I'll choose the tests."

Preserving all "learnings" here. This is not slop, testing light & dark logo is an
ideal task for Claude!

This commit adds tests for dark/light logo variants in Quarto brand configurations:

Key learnings:
1. The dashboard format selects the medium size logo by default, not large
2. Direct path behavior:
   - Strings without path/alt structure are treated as direct paths
   - Alt text is empty when using direct path format without alt specification
   - Named resources and direct paths can be mixed within a configuration
3. Fallback behavior:
   - When a size is missing a dark variant, it doesn't fall back to its light variant
   - Instead, it falls back to another size's dark variant (large.dark)
   - This cross-size fallback behavior may need further specification

Tests include:
- dark-logo.qmd: Basic light/dark logo configuration
- override-dark-logo.qmd: Top-level logo overriding brand.logo
- explicit-dark-light-paths.qmd: Direct path specifications
- dark-logo-only.qmd: Fallback behavior testing
- mixed-logo-path.qmd: Mixed logo definitions (named resources and paths)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

claude: Add comprehensive logo behavior tests

This commit adds tests exploring Quarto's logo behavior for dark/light modes:

Key learnings:
1. Small is the default logo size for dashboard navbar (not medium)
2. Logo resolution follows a mode-first search algorithm:
   - Light mode searches small.light → medium.light → large.light
   - Dark mode searches small.dark → medium.dark → large.dark
   - It does NOT prioritize staying within same size and switching modes
3. When partial document-level overrides are used (e.g., only light or dark),
   the non-overridden mode inherits from brand configuration
4. Direct path strings (without .path property) have empty alt text unless
   explicitly provided via object syntax
5. Document-level logo settings take precedence over brand-level settings

Tests include:
- document-brand-precedence.qmd: Tests precedence between document and brand logos
- partial-document-override.qmd: Tests overriding only one light/dark variant
- mixed-specification-formats.qmd: Tests different logo specification formats
- cross-size-fallbacks.qmd: Tests fallback behavior when a specific mode is missing
- size-inheritance.qmd: Tests the mode-first search algorithm

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

claude: Add logo edge case tests

This commit adds tests for edge case logo behaviors:

Key learnings:
1. No recursive resolution of logo references is supported - Quarto does not follow
   chains of references between logo resources

2. Format-specific logo configuration:
   - Tests format.dashboard.logo taking precedence over document-level and brand logos
   - Allows format-specific customization while maintaining generic defaults

3. Legacy logo syntax:
   - A simple string logo value at document level applies to both light and dark modes
   - Demonstrates backward compatibility with pre-dark-mode syntax

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

claude: Rename logo tests for better clarity

Renamed test files to more accurately reflect the behaviors they test:

- cross-size-fallbacks.qmd → mode-first-search-algorithm.qmd
  Tests how light/dark modes independently search through size hierarchy

- size-inheritance.qmd → dark-mode-search-priority.qmd
  Tests dark mode's search priority and lack of fallback to light mode

- dark-logo-only.qmd → missing-medium-dark-fallback.qmd
  Tests specific fallback behavior when medium.dark is missing

- mixed-logo-path.qmd → mixed-resource-direct-path.qmd
  Better describes the mix of resource references and direct paths

- mixed-specification-formats.qmd → path-vs-object-specification.qmd
  Clarifies test comparing string paths vs object specifications with alt text

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

remove pngs

it's not necessary to have the files for the tests to run

claude: Add sidebar logo tests for size preference and mode-first search

This commit adds tests for sidebar logo behavior:

1. Size preference order test (sidebar/size-preference-order)
   - Tests that sidebar logos follow the preference order: medium → small → large
   - Verifies that when medium.dark is missing but small.dark and large.dark exist,
     it correctly selects small.dark due to the preference order

2. Mode-first search algorithm test (sidebar/mode-first-search)
   - Tests that light/dark modes independently search through all sizes
     before considering the other mode
   - Verifies that it searches through all sizes for dark mode before
     considering any light mode variants

These tests confirm that sidebar logo behavior follows the same mode-first
search principles as dashboard logos, but with a different size preference
order (medium → small → large for sidebars vs medium → large → small for dashboard).

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

claude: Add navbar light/dark logo tests

This commit adds tests for navbar logo behavior with light/dark variants:

1. Size Preference Test:
   - Tests navbar size preference order (small → medium → large)
   - Verifies the mode-first search algorithm in a scenario with no small logos
   - Confirms medium.light is selected for light mode when small is missing
   - Confirms large.dark is selected for dark mode when small.dark is missing

2. Alt Text Consistency Test:
   - Tests that alt text is properly inherited from brand definitions
   - Confirms that missing resources get empty alt text
   - Helps ensure accessibility attributes are maintained

3. Missing Logo Handling Test:
   - Tests behavior when logo paths point to non-existent files
   - Confirms img tags are generated with correct src attributes
   - Ensures robust rendering even with missing resources

Key learnings:
- Navbar DOES NOT support document-level logo overrides unlike sidebars/dashboards
- Navbar follows the size preference order: small → medium → large (different from
  sidebar: medium → small → large and dashboard: medium → large → small)
- Mode-first search applies to navbars: it exhaustively searches for a specific
  mode (light/dark) across all sizes before falling back to other modes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

claude: Add cross-mode logo fallback tests

This commit adds tests for how Quarto handles edge cases when logos are missing for
one theme mode but both light and dark modes are enabled:

1. dark-mode-no-dark-logo.qmd:
   Tests what happens when dark mode is enabled but only light logo exists

2. dark-mode-no-light-logo.qmd:
   Tests what happens when dark mode is enabled but only dark logo exists

3. document-light-brand-light-only.qmd:
   Tests document-level light-only logo + brand with light-only logo

4. document-dark-brand-dark-only.qmd:
   Tests document-level dark-only logo + brand with dark-only logo

Key learnings:
- Quarto implements cross-mode fallbacks where missing logos for one mode
  automatically use logos from the other mode
- Implementation in brand.ts shows the fallback logic applies in both directions:
  light → dark and dark → light
- Document-level logo settings take precedence over brand-level settings
- The fallback system ensures logos always appear regardless of which theme
  mode is active, providing a consistent user experience

these tests do not support revealjs

default to other mode of logo

Author: gordonwoodhull

tests/docs/smoke-all/brand/logo/dark-logo.qmd

@@ -0,0 +1,36 @@
+---
+title: brand with dark and light logos
+format:
+  dashboard: default
+brand:
+  logo:
+    images:
+      quarto:
+        path: quarto.png
+        alt: quarto logo
+      posit:
+        path: posit-logo-2024.svg
+        alt: posit logo
+      quarto-dark:
+        path: quarto-dark.png
+        alt: quarto dark logo
+      posit-dark:
+        path: posit-dark.svg
+        alt: posit dark logo
+    medium:
+      light: quarto
+      dark: quarto-dark
+    large:
+      light: posit
+      dark: posit-dark
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          - 'img[src="quarto.png"][alt="quarto logo"][class="navbar-logo light-content d-inline-block"]'
+          - 'img[src="quarto-dark.png"][alt="quarto dark logo"][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/dark-mode-no-dark-logo.qmd

@@ -0,0 +1,36 @@
+---
+title: Dark Mode with No Dark Logo
+format:
+  dashboard:
+    theme:
+      light: default
+      dark: darkly  # Explicitly enable dark mode
+brand:
+  color:
+    foreground: 
+      light: '#222'
+      dark: '#eee'
+    background:
+      light: '#eee'
+      dark: '#222'
+  logo:
+    images:
+      light-logo:
+        path: quarto.png
+        alt: light logo
+    medium:
+      light: light-logo
+      # No dark variant defined - what happens?
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          # Light mode should use the light logo
+          - 'img[src="quarto.png"][alt="light logo"][class="navbar-logo light-content d-inline-block"]'
+          # For dark mode, should it use the light logo since no dark logo exists?
+          - 'img[src="quarto.png"][alt="light logo"][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/dark-mode-no-light-logo.qmd

@@ -0,0 +1,36 @@
+---
+title: Dark Mode with No Light Logo
+format:
+  dashboard:
+    theme:
+      light: default
+      dark: darkly  # Explicitly enable dark mode
+brand:
+  color:
+    foreground: 
+      light: '#222'
+      dark: '#eee'
+    background:
+      light: '#eee'
+      dark: '#222'
+  logo:
+    images:
+      dark-logo:
+        path: posit-logo-2024.svg
+        alt: dark logo
+    medium:
+      dark: dark-logo
+      # No light variant defined - what happens?
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          # Dark mode should use the dark logo
+          - 'img[src="posit-logo-2024.svg"][alt="dark logo"][class="navbar-logo dark-content d-inline-block"]'
+          # For light mode, should it use the dark logo since no light logo exists?
+          - 'img[src="posit-logo-2024.svg"][alt="dark logo"][class="navbar-logo light-content d-inline-block"]'
+        - []
+---
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/dark-mode-search-priority.qmd

@@ -0,0 +1,38 @@
+---
+title: Size Inheritance
+format:
+  dashboard: default
+brand:
+  logo:
+    images:
+      small-logo:
+        path: small-logo.png
+        alt: small logo
+      medium-logo:
+        path: medium-logo.png
+        alt: medium logo
+      dark-logo:
+        path: dark-logo.png
+        alt: dark logo
+    # Define small and medium with light variants only
+    small:
+      light: small-logo
+    medium:
+      light: medium-logo
+    # Define large with dark variant only
+    large:
+      dark: dark-logo
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          # Small is default for dashboard navbar
+          # Light mode: should use small.light
+          # Dark mode: small and medium.dark are missing, should use large.dark (not any .light)
+          - 'img[src="small-logo.png"][alt="small logo"][class="navbar-logo light-content d-inline-block"]'
+          - 'img[src="dark-logo.png"][alt="dark logo"][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/document-brand-precedence.qmd

@@ -0,0 +1,31 @@
+---
+title: Document vs Brand Logo Precedence
+format:
+  dashboard: default
+brand:
+  logo:
+    images:
+      quarto:
+        path: quarto.png
+        alt: quarto logo
+      posit:
+        path: posit-logo-2024.svg
+        alt: posit logo
+    medium:
+      light: quarto
+      dark: quarto
+logo:
+  light: posit-logo-2024.svg
+  dark: quarto.png
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          # Document-level logo should override brand-level logo
+          - 'img[src="posit-logo-2024.svg"][alt=""][class="navbar-logo light-content d-inline-block"]'
+          - 'img[src="quarto.png"][alt=""][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/document-dark-brand-dark-only.qmd

@@ -0,0 +1,39 @@
+---
+title: Document Dark Logo + Brand Dark Logo Only
+format:
+  dashboard:
+    theme:
+      light: default
+      dark: darkly  # Explicitly enable dark mode
+    # Document level logo with only dark defined
+    logo:
+      dark: direct-dark-logo.png
+brand:
+  color:
+    foreground: 
+      light: '#222'
+      dark: '#eee'
+    background:
+      light: '#eee'
+      dark: '#222'
+  logo:
+    images:
+      brand-dark-logo:
+        path: posit-logo-2024.svg
+        alt: brand dark logo
+    medium:
+      dark: brand-dark-logo
+      # No light variant defined in brand
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          # Dark mode should use document-level dark logo (not brand)
+          - 'img[src="direct-dark-logo.png"][alt=""][class="navbar-logo dark-content d-inline-block"]'
+          # For light mode, should use same document-level dark logo for fallback
+          - 'img[src="direct-dark-logo.png"][alt=""][class="navbar-logo light-content d-inline-block"]'
+        - []
+---
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/document-light-brand-light-only.qmd

@@ -0,0 +1,39 @@
+---
+title: Document Light Logo + Brand Light Logo Only
+format:
+  dashboard:
+    theme:
+      light: default
+      dark: darkly  # Explicitly enable dark mode
+    # Document level logo with only light defined
+    logo:
+      light: direct-light-logo.png
+brand:
+  color:
+    foreground: 
+      light: '#222'
+      dark: '#eee'
+    background:
+      light: '#eee'
+      dark: '#222'
+  logo:
+    images:
+      brand-light-logo:
+        path: quarto.png
+        alt: brand light logo
+    medium:
+      light: brand-light-logo
+      # No dark variant defined in brand
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          # Light mode should use document-level light logo (not brand)
+          - 'img[src="direct-light-logo.png"][alt=""][class="navbar-logo light-content d-inline-block"]'
+          # For dark mode, should use same document-level light logo for fallback
+          - 'img[src="direct-light-logo.png"][alt=""][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/explicit-dark-light-paths.qmd

@@ -0,0 +1,31 @@
+---
+title: explicit dark and light logo paths
+format:
+  dashboard: default
+brand:
+  logo:
+    images:
+      quarto:
+        path: quarto.png
+        alt: quarto logo
+      posit:
+        path: posit-logo-2024.svg
+        alt: posit logo
+logo:
+  light:
+    path: custom-light.png
+    alt: custom light logo
+  dark:
+    path: custom-dark.png
+    alt: custom dark logo
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          - 'img[src="custom-light.png"][alt="custom light logo"][class="navbar-logo light-content d-inline-block"]'
+          - 'img[src="custom-dark.png"][alt="custom dark logo"][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/format-specific-logo.qmd

@@ -0,0 +1,35 @@
+---
+title: Format-Specific Logo Configuration
+format:
+  dashboard:
+    logo:
+      light: dashboard-light.png
+      dark: dashboard-dark.png
+brand:
+  logo:
+    images:
+      light-logo:
+        path: brand-light.png
+        alt: brand light logo
+      dark-logo:
+        path: brand-dark.png
+        alt: brand dark logo
+    small:
+      light: light-logo
+      dark: dark-logo
+# Generic document-level logo that should be overridden by format-specific
+logo:
+  light: doc-light.png
+  dark: doc-dark.png
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          # Format-specific logo should take precedence over generic logo
+          - 'img[src="dashboard-light.png"][alt=""][class="navbar-logo light-content d-inline-block"]'
+          - 'img[src="dashboard-dark.png"][alt=""][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/legacy-logo-syntax.qmd

@@ -0,0 +1,30 @@
+---
+title: Legacy Logo Syntax with Dark/Light Mode
+format:
+  dashboard: default
+brand:
+  logo:
+    images:
+      light-logo:
+        path: light-logo.png
+        alt: light logo
+      dark-logo:
+        path: dark-logo.png
+        alt: dark logo
+    small:
+      light: light-logo
+      dark: dark-logo
+# Using legacy syntax (simple string) for logo
+logo: legacy-logo.svg
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          # Legacy syntax should apply to both light and dark modes
+          - 'img[src="legacy-logo.svg"][alt=""][class="navbar-logo light-content d-inline-block"]'
+          - 'img[src="legacy-logo.svg"][alt=""][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+{{< lipsum 4 >}}