Add test to check SCSS color customization for callouts

Author: cderv

tests/docs/playwright/revealjs/callouts/custom-colors.qmd

@@ -0,0 +1,61 @@
+---
+title: callout colors
+format: 
+  revealjs:
+    theme: custom.scss
+---
+
+## Note
+
+::: {.callout-note}
+
+Content with inline code `1 + 1` and block
+
+```{.python}
+1 + 1
+```
+:::
+
+## Warning 
+
+::: {.callout-warning}
+
+Content with inline code `1 + 1` and block
+
+```{.python}
+1 + 1
+```
+:::
+
+## Important 
+
+::: {.callout-important}
+
+Content with inline code `1 + 1` and block
+
+```{.python}
+1 + 1
+```
+:::
+
+## Tip
+
+::: {.callout-tip}
+
+Content with inline code `1 + 1` and block
+
+```{.python}
+1 + 1
+```
+:::
+
+## caution
+
+::: {.callout-caution}
+
+Content with inline code `1 + 1` and block
+
+```{.python}
+1 + 1
+```
+:::

tests/docs/playwright/revealjs/callouts/custom.scss

@@ -0,0 +1,7 @@
+/*-- scss:defaults --*/
+
+$callout-color-note: rgb(128, 0, 128);
+$callout-color-tip: rgb(255, 255, 0);
+$callout-color-important: rgb(128, 128, 128);
+$callout-color-caution: rgb(0, 128, 0);
+$callout-color-warning: rgb(173, 216, 230);

tests/integration/playwright/tests/revealjs-themes.spec.ts

@@ -29,6 +29,16 @@ async function getRevealCodeInlineFontSize(page: any): Promise<number> {
   return await getCSSProperty(page.locator('body'), "--r-inline-code-font-size", true) as number;
 }
 
+async function checkColor(element, cssProperty, rgbColors) {
+  await expect(element).toHaveCSS(cssProperty, `rgb(${rgbColors.red}, ${rgbColors.green}, ${rgbColors.blue})`);
+}
+
+function asRGB(red, green, blue) {
+  return { red, green, blue };
+}
+
+
+
 test('Code font size in callouts and smaller slide is scaled down', async ({ page }) => {
   await page.goto('./revealjs/code-font-size.html');
   await page.locator('body').press('ArrowRight');
@@ -116,4 +126,13 @@ test('Code font size is correctly set', async ({ page }) => {
   expect(
     await getCSSProperty(page.locator("#non-highligted pre code"), 'font-size', true)
   ).toBeCloseTo(codeBlockFontSize);
+});
+
+test('Callouts colors can be customized', async ({ page }) => {
+  await page.goto('./revealjs/callouts/custom-colors.html');
+  await checkColor(page.locator('div.callout-note'), 'border-left-color', asRGB(128, 0, 128));
+  await checkColor(page.locator('div.callout-tip'), 'border-left-color', asRGB(255, 255, 0));
+  await checkColor(page.locator('div.callout-warning'), 'border-left-color', asRGB(173, 216, 230));
+  await checkColor(page.locator('div.callout-important'), 'border-left-color', asRGB(128, 128, 128));
+  await checkColor(page.locator('div.callout-caution'), 'border-left-color', asRGB(0, 128, 0));
 });