add playwright test for dracula theme tweak regaring color-title

aims to prevent problem at next revealjs update

Author: cderv

tests/docs/playwright/revealjs/callouts/dracula-theme-tweaks.qmd

@@ -0,0 +1,19 @@
+---
+title: callout title in dracula theme is tweak
+format: 
+  revealjs:
+    theme: dracula
+---
+
+`dracula` theme in revealjs does use a color for `<strong>` and `<b>` element. We don't want that to apply on Callout title which are using this HTML element. 
+So we tweaked dracula theme et this test checks that color of title is like in other themes => the same as the body color. 
+
+## Note
+
+::: {.callout-note}
+
+## Title of the callout
+
+Content
+
+:::

tests/integration/playwright/src/utils.ts

@@ -151,15 +151,26 @@ export async function getCSSProperty(loc: Locator, variable: string, asNumber =
   }
 }
 
+export async function checkCSSproperty(loc1: Locator, loc2: Locator, property: string, asNumber: false | true, checkType: 'identical' | 'similar', factor: number = 1) {
+  let loc1Property = await getCSSProperty(loc1, property, asNumber);
+  let loc2Property = await getCSSProperty(loc2, property, asNumber);
+  if (checkType === 'identical') {
+    await expect(loc2).toHaveCSS(property, loc1Property as string);
+  } else {
+    await expect(loc1Property).toBeCloseTo(loc2Property as number * factor);
+  }
+}
+
 export async function checkFontSizeIdentical(loc1: Locator, loc2: Locator) {
-  const loc1FontSize = await getCSSProperty(loc1, 'font-size', false) as string;
-  await expect(loc2).toHaveCSS('font-size', loc1FontSize);
+  await checkCSSproperty(loc1, loc2, 'font-size', false, 'identical');
 }
 
 export async function checkFontSizeSimilar(loc1: Locator, loc2: Locator, factor: number = 1) {
-  const loc1FontSize = await getCSSProperty(loc1, 'font-size', true) as number;
-  const loc2FontSize = await getCSSProperty(loc2, 'font-size', true) as number;
-  await expect(loc1FontSize).toBeCloseTo(loc2FontSize * factor);
+  await checkCSSproperty(loc1, loc2, 'font-size', true, 'similar', factor);
+}
+
+export async function checkColorIdentical(loc1: Locator, loc2: Locator, property: string) {
+  await checkCSSproperty(loc1, loc2, property, false, 'identical');
 }
 
 export async function checkBorderProperties(element: Locator, side: string, color: RGBColor, width: string) {

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

@@ -1,5 +1,5 @@
 import { test, expect, Locator } from '@playwright/test';
-import { asRGB, checkColor, checkFontSizeIdentical, checkFontSizeSimilar, getCSSProperty, RGBColor } from '../src/utils';
+import { asRGB, checkColor, checkColorIdentical, checkFontSizeSimilar, getCSSProperty, RGBColor } from '../src/utils';
 
 async function getRevealMainFontSize(page: any): Promise<number> {
   return await getCSSProperty(page.locator('body'), "--r-main-font-size", true) as number;
@@ -71,4 +71,11 @@ test('Callouts can be customized using SCSS variables', async ({ page }) => {
   await checkCustom(page.locator('div.callout-warning'), '10px', asRGB(173, 216, 230));
   await checkCustom(page.locator('div.callout-important'), '10px', asRGB(128, 128, 128));
   await checkCustom(page.locator('div.callout-caution'), '10px', asRGB(0, 128, 0));
+});
+
+test('Callout title color in dracula theme is correctly tweaked to use same as body color', async ({ page }) => {
+  await page.goto('./revealjs/callouts/dracula-theme-tweaks.html#/note');
+  const calloutTitleLoc = page.getByText('Title of the callout', { exact: true });
+  const calloutContentLoc = page.getByText('Content', { exact: true });
+  await checkColorIdentical(calloutTitleLoc, calloutContentLoc, 'color');
 });