playwright tests for dark brand

for #12319 and (to a lesser degree) #12173
testing theme/brand integration and dark brand

Author: gordonwoodhull

tests/docs/playwright/html/dark-brand/blue-background.yml

@@ -0,0 +1,3 @@
+color:
+  background: "#ccddff"
+  foreground: "#336644"

tests/docs/playwright/html/dark-brand/brand-after-theme.qmd

@@ -0,0 +1,54 @@
+---
+title: "dark brand - ggplot"
+brand:
+  dark: red-background.yml
+  light: blue-background.yml
+theme:
+  dark: [cyborg, brand]
+  light: [simplex, brand]
+execute:
+  echo: false
+  warning: false
+---
+
+```{r}
+#| echo: false
+#| warning: false
+library(ggplot2)
+
+ggplot_theme <- function(bgcolor, fgcolor) {
+  theme_minimal(base_size = 11) %+%
+  theme(
+    panel.border = element_blank(),
+    panel.grid.major.y = element_blank(),
+    panel.grid.minor.y = element_blank(),
+    panel.grid.major.x = element_blank(),
+    panel.grid.minor.x = element_blank(),
+    text = element_text(colour = fgcolor),
+    axis.text = element_text(colour = fgcolor),
+    rect = element_rect(colour = bgcolor, fill = bgcolor),
+    plot.background = element_rect(fill = bgcolor, colour = NA),
+    axis.line = element_line(colour = fgcolor),
+    axis.ticks = element_line(colour = fgcolor)
+  )
+}
+
+brand_ggplot <- function(brand_yml) {
+  brand <- yaml::yaml.load_file(brand_yml)
+  ggplot_theme(brand$color$background, brand$color$foreground)
+}
+
+blue_theme <- brand_ggplot("blue-background.yml")
+red_theme <- brand_ggplot("red-background.yml")
+
+colour_scale <- scale_colour_manual(values = c("darkorange", "purple", "cyan4"))
+```
+
+
+```{r}
+#| renderings: [light, dark]
+ggplot(mtcars, aes(mpg, wt)) +
+  geom_point(aes(colour = factor(cyl))) + blue_theme + colour_scale
+ggplot(mtcars, aes(mpg, wt)) +
+  geom_point(aes(colour = factor(cyl))) + red_theme + colour_scale
+```

tests/docs/playwright/html/dark-brand/brand-before-theme.qmd

@@ -0,0 +1,54 @@
+---
+title: "dark brand - ggplot"
+brand:
+  light: blue-background.yml
+  dark: red-background.yml
+theme:
+  light: simplex
+  dark: cyborg # same effect as [brand, cyborg]
+execute:
+  echo: false
+  warning: false
+---
+
+```{r}
+#| echo: false
+#| warning: false
+library(ggplot2)
+
+ggplot_theme <- function(bgcolor, fgcolor) {
+  theme_minimal(base_size = 11) %+%
+  theme(
+    panel.border = element_blank(),
+    panel.grid.major.y = element_blank(),
+    panel.grid.minor.y = element_blank(),
+    panel.grid.major.x = element_blank(),
+    panel.grid.minor.x = element_blank(),
+    text = element_text(colour = fgcolor),
+    axis.text = element_text(colour = fgcolor),
+    rect = element_rect(colour = bgcolor, fill = bgcolor),
+    plot.background = element_rect(fill = bgcolor, colour = NA),
+    axis.line = element_line(colour = fgcolor),
+    axis.ticks = element_line(colour = fgcolor)
+  )
+}
+
+brand_ggplot <- function(brand_yml) {
+  brand <- yaml::yaml.load_file(brand_yml)
+  ggplot_theme(brand$color$background, brand$color$foreground)
+}
+
+blue_theme <- brand_ggplot("blue-background.yml")
+red_theme <- brand_ggplot("red-background.yml")
+
+colour_scale <- scale_colour_manual(values = c("darkorange", "purple", "cyan4"))
+```
+
+
+```{r}
+#| renderings: [light, dark]
+ggplot(mtcars, aes(mpg, wt)) +
+  geom_point(aes(colour = factor(cyl))) + blue_theme + colour_scale
+ggplot(mtcars, aes(mpg, wt)) +
+  geom_point(aes(colour = factor(cyl))) + red_theme + colour_scale
+```

tests/docs/playwright/html/dark-brand/red-background.yml

@@ -0,0 +1,3 @@
+color:
+  background: "#42070b"
+  foreground: "#cceedd"

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

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+import { asRGB, checkBorderProperties, checkColor, getCSSProperty } from '../src/utils';
+
+test('Dark and light brand after user themes', 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/brand-after-theme.html');
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass('fullcontent quarto-dark');
+  await expect(locatr).toHaveCSS('background-color', 'rgb(66, 7, 11)');
+  await page.locator("a.quarto-color-scheme-toggle").click();
+  const locatr2 = await page.locator('body').first();
+  await expect(locatr2).toHaveCSS('background-color', 'rgb(204, 221, 255)');
+});
+
+
+test('Dark and light brand before user themes', 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/brand-before-theme.html');
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass('fullcontent quarto-light');
+  await expect(locatr).toHaveCSS('background-color', 'rgb(252, 252, 252)');
+  await page.locator("a.quarto-color-scheme-toggle").click();
+  const locatr2 = await page.locator('body').first();
+  await expect(locatr2).toHaveCSS('background-color', 'rgb(6, 6, 6)');
+});