test - add test for changing highlighting for dark and light

Author: cderv

tests/docs/playwright/html/code-highlight/code-highlight-light-dark.qmd

@@ -0,0 +1,23 @@
+---
+format:
+  html:
+    highlight-style:
+        light: pygments
+        dark: kate
+---
+
+## Light and Dark Mode Testing
+
+This document can be viewed in both light mode and dark mode to test code highlighting in both color schemes.
+
+```{.julia}
+function divide_floats(x::Float64, y::Float64)
+    return x / y
+end
+```
+
+And here the inline version `function divide_floats(x::Float64, y::Float64)`{.julia}.
+
+::: {.callout-note}
+The tests will automatically check the highlighting in both light and dark modes using Playwright's color scheme testing capabilities.
+:::

tests/integration/playwright/tests/html-code-highlight.spec.ts

@@ -26,13 +26,36 @@ const highlightStyles = [
   'solarized',
   'tango',
   'vim-dark',
-  'zenburn'
+  'zenburn',
+  // specific alias for light-dark test
+  'light-dark'
 ];
 
 const colorSchemes: Array<'light' | 'dark'> = ['light', 'dark'];
 
+
+// This is a special case for light-dark theme
+// We test pygments and kate themes so we retrieve the colors from the themeConfig
+// in src\resources\pandoc\highlight-styles\*.theme
+const themeConfigLightDark = {
+  light: {
+    name: 'pygments',
+    colors: {
+      kw: '#007020',
+      fu: '#06287e'
+    }
+  },
+  dark: {
+    name: 'kate',
+    colors: {
+      kw: '#1f1c1b',
+      fu: '#644a9b'
+    }
+  }
+};
+
 for (const style of highlightStyles) {
-  test.describe(`Code highlighting for ${style} theme`, () => {
+  test.describe(`Code highlighting for '${style}' theme`, () => {
 
     for (const colorScheme of colorSchemes) {
       test.describe(`in ${colorScheme} mode`, () => {
@@ -62,6 +85,30 @@ for (const style of highlightStyles) {
 
           await checkColor(codeBlock, 'color', hexToRgb(keywordColor));
         });
+        if (style === 'light-dark') {
+          const themeUsed = themeConfigLightDark[colorScheme].name;
+          const colorUsed = themeConfigLightDark[colorScheme].colors;
+          test(`[${style}] Code highlighting for Inline and CodeBlock are using '${themeUsed}' theme`, async ({ page }) => {
+            const funName = page.locator('div pre.sourceCode code.julia span').getByText('function');
+            const divideFloats = page.locator('div pre.sourceCode code.julia span').getByText('divide_floats');
+            // Get specific syntax elements to test for color
+            // get the class on the span
+            const classNameFun = await funName.getAttribute('class') as string;
+            const classNameDivide = await divideFloats.getAttribute('class') as string;
+            // error if not found
+            if (!classNameFun || !classNameDivide) {
+              test.fail(true, 'Class name not found for code highlighting elements');
+            }
+            const funColor = colorUsed[classNameFun];
+            const divideColor = colorUsed[classNameDivide];
+            await checkColor(funName, 'color', hexToRgb(funColor));
+            await checkColor(divideFloats, 'color', hexToRgb(divideColor));
+            // check also root variable
+            await checkColor(page.locator('body'), `--quarto-hl-${classNameFun}-color`, funColor);
+            await checkColor(page.locator('body'), `--quarto-hl-${classNameDivide}-color`, divideColor);
+          });
+        }
+        
       });
     }
   });