tests for a11y and arrow highlighting

these test some elements we saw bad behavior in nojs mode

also, a rather more severe bug where light highlighting is being applied

Author: gordonwoodhull

tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd

@@ -0,0 +1,47 @@
+---
+title: a11y syntax highlighting
+execute:
+  echo: false
+  warning: false
+theme:
+  light: [cosmo, theme.scss]
+  dark: [cosmo, theme-dark.scss]
+highlight-style: a11y
+---
+
+
+```markdown
+![asdf](asd.png)
+```
+
+
+```python
+#| label: fig-polar
+#| fig-cap: "A line plot on a polar axis"
+
+import numpy as np
+import matplotlib.pyplot as plt
+
+r = np.arange(0, 2, 0.01)
+theta = 2 * np.pi * r
+fig, ax = plt.subplots(
+  subplot_kw = {'projection': 'polar'} 
+)
+ax.plot(theta, r)
+ax.set_rticks([0.5, 1, 1.5, 2])
+ax.grid(True)
+plt.show()
+```
+
+```r
+nycflights13::flights %>% 
+  mutate(
+    cancelled = is.na(dep_time),
+    sched_hour = sched_dep_time %/% 100,
+    sched_min = sched_dep_time %% 100,
+    sched_dep_time = sched_hour + sched_min / 60
+  ) %>% 
+  ggplot(mapping = aes(sched_dep_time)) + 
+    geom_freqpoly(mapping = aes(colour = cancelled), binwidth = 1/4) +
+    labs (x = "Scheduled Departure Time")
+```

tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd

@@ -0,0 +1,52 @@
+---
+format: html
+title: arrow syntax highlighting
+theme:
+  light: united
+  dark: slate
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        - []
+        - ["link[href*=\"-dark-\"]"]
+---
+
+## Hello
+
+```markdown
+![asdf](asd.png)
+```
+
+
+```python
+#| label: fig-polar
+#| fig-cap: "A line plot on a polar axis"
+
+import numpy as np
+import matplotlib.pyplot as plt
+
+r = np.arange(0, 2, 0.01)
+theta = 2 * np.pi * r
+fig, ax = plt.subplots(
+  subplot_kw = {'projection': 'polar'} 
+)
+ax.plot(theta, r)
+ax.set_rticks([0.5, 1, 1.5, 2])
+ax.grid(True)
+plt.show()
+```
+
+```r
+nycflights13::flights %>% 
+  mutate(
+    cancelled = is.na(dep_time),
+    sched_hour = sched_dep_time %/% 100,
+    sched_min = sched_dep_time %% 100,
+    sched_dep_time = sched_hour + sched_min / 60
+  ) %>% 
+  ggplot(mapping = aes(sched_dep_time)) + 
+    geom_freqpoly(mapping = aes(colour = cancelled), binwidth = 1/4) +
+    labs (x = "Scheduled Departure Time")
+```
+

tests/integration/playwright/tests/html-dark-mode-nojs.spec.ts

@@ -22,6 +22,29 @@ test('Light brand default, no JS', async ({ page }) => {
 });
 
 
+test('Syntax highlighting, a11y, no JS', async ({ page }) => {
+  // This document use a custom theme file that change the background color of the title banner
+  // Same user defined color should be used in both dark and light theme
+  await page.goto('./html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.html');
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass('fullcontent quarto-light');
+  await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+  const importKeyword = await page.locator('span.im').first();
+  await expect(importKeyword).toHaveCSS('color', 'rgb(84, 84, 84)');
+});
+
+
+test('Syntax highlighting, arrow, no JS', async ({ page }) => {
+  // This document use a custom theme file that change the background color of the title banner
+  // Same user defined color should be used in both dark and light theme
+  await page.goto('./html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.html');
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass('fullcontent quarto-light');
+  await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+  const link = await page.locator('span.al').first();
+  await expect(link).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+});
+
 test('Project dark brand default, no JS', async ({ page }) => {
   // This document use a custom theme file that change the background color of the title banner
   // Same user defined color should be used in both dark and light theme

tests/integration/playwright/tests/html-dark-mode.spec.ts

@@ -32,4 +32,32 @@ test('Brand false remove project brand', async ({ page }) => {
   await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
   // no toggle
   expect(await page.locator('a.quarto-color-scheme-toggle').count()).toEqual(0);
-});
+});
+
+
+test('Syntax highlighting, a11y, with JS', async ({ page }) => {
+  // This document use a custom theme file that change the background color of the title banner
+  // Same user defined color should be used in both dark and light theme
+  await page.goto('./html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.html');
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass('fullcontent quarto-light');
+  await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+  const importKeyword = await page.locator('span.im').first();
+  // light highlight stylesheet 
+  await expect(importKeyword).toHaveCSS('color', 'rgb(84, 84, 84)');
+  await page.locator("a.quarto-color-scheme-toggle").click();
+  // dark highlight stylesheet
+  await expect(importKeyword).toHaveCSS('color', 'rgb(248, 248, 242)');
+});
+
+
+test('Syntax highlighting, arrow, with JS', async ({ page }) => {
+  // This document use a custom theme file that change the background color of the title banner
+  // Same user defined color should be used in both dark and light theme
+  await page.goto('./html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.html');
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass('fullcontent quarto-light');
+  await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+  const link = await page.locator('span.al').first();
+  await expect(link).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+});