Code in callouts in smaller slides needs to be scaled down twice

This is because code-.*-font-size variables are set in px and not em, and we need to scaled down using `calc()` twice so that correct font is used.

Author: cderv

src/resources/formats/revealjs/quarto.scss

@@ -224,8 +224,10 @@ $overlayElementFgColor: 0, 0, 0 !default;
   }
 }
 
-@mixin make-smaller-font-size($element) {
-  font-size: calc(#{$element} * #{$presentation-font-smaller});
+@mixin make-smaller-font-size($element, $times: 1) {
+  font-size: calc(
+    #{$element} * #{quarto-math.pow($presentation-font-smaller, $times)}
+  );
 }
 
 @mixin undo-smaller-font-size($element) {
@@ -561,6 +563,21 @@ $panel-sidebar-padding: 0.5em;
         @include make-smaller-font-size($revealjs-code-inline-font-size);
       }
     }
+    // twice for code / pre inside callout if inside a smaller slide
+    // this is because they are passed in pixels
+    &.smaller div.callout {
+      // Though we want pre and code to be smaller and they are in px
+      pre {
+        @include make-smaller-font-size($revealjs-code-block-font-size, 2);
+        // Make sure code inside pre use code block font size
+        code {
+          font-size: inherit;
+        }
+      }
+      code {
+        @include make-smaller-font-size($revealjs-code-inline-font-size, 2);
+      }
+    }
   }
 }
 

tests/docs/playwright/revealjs/code-font-size.qmd

@@ -47,4 +47,15 @@ And block code:
 1 + 1
 ```
 
+## Smaller slide with callouts {#smaller-slide2 .smaller}
 
+::: {.callout-note}
+
+Some inline code: `1 + 1`
+
+And block code:
+
+```{.r}
+2 + 2
+```
+:::

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

@@ -49,13 +49,13 @@ test('Code font size in callouts and smaller slide is scaled down', async ({ pag
   // Font size for code block in callout should be scaled smaller that default code block
   const codeBlockFontSize = await getRevealCodeBlockFontSize(page)
   const computedBlockFontSize = scaleFactor * codeBlockFontSize;
-  expect(await getCSSProperty(page.locator('.callout pre code'), 'font-size', true)).toBeCloseTo(computedBlockFontSize);
+  expect(await getCSSProperty(page.locator('#callouts .callout pre code'), 'font-size', true)).toBeCloseTo(computedBlockFontSize);
 });
 
 test('Code font size in smaller slide is scaled down', async ({ page }) => {
   await page.goto('./revealjs/code-font-size.html#/smaller-slide');
   // Get smaller slide scale factor
-  const smallerFontSize = await getCSSProperty(page.getByText('And block code:', { exact: true }), "font-size", true) as number;
+  const smallerFontSize = await getCSSProperty(page.locator("#smaller-slide").getByText('And block code:', { exact: true }), "font-size", true) as number;
   const mainFontSize = await getRevealMainFontSize(page);
   const scaleFactor = smallerFontSize / mainFontSize;
   expect(scaleFactor).toBeLessThan(1);
@@ -74,6 +74,28 @@ test('Code font size in smaller slide is scaled down', async ({ page }) => {
   expect(await getCSSProperty(page.locator('#smaller-slide pre').getByRole('code'), 'font-size', true)).toBeCloseTo(computedBlockFontSize);
 });
 
+test('Code font size in callouts in smaller slide is scaled down twice', async ({ page }) => {
+  await page.goto('./revealjs/code-font-size.html#/smaller-slide2');
+  // Get smaller slide scale factor
+  const smallerFontSize = await getCSSProperty(page.locator('#smaller-slide2').getByText('And block code:', { exact: true }), "font-size", true) as number;
+  const mainFontSize = await getRevealMainFontSize(page);
+  const scaleFactor = smallerFontSize / mainFontSize;
+  expect(scaleFactor).toBeLessThan(1);
+  // Font size in callout for inline code should be scaled smaller than default inline code
+  const codeInlineFontSize = await getRevealCodeInlineFontSize(page);
+  const computedInlineFontSize = scaleFactor * codeInlineFontSize;
+  expect(await getCSSProperty(page.locator('#smaller-slide2').getByText('1 + 1'), 'font-size', true)).toBeCloseTo(computedInlineFontSize);
+  // Font size in callout for inline code should be same size as text by default
+  await checkFontSizeIdentical(
+    page.locator('#smaller-slide2').getByText('Some inline code'), 
+    page.locator('#smaller-slide2').getByText('1 + 1')
+  );
+  // Font size for code block in callout should be scaled smaller that default code block
+  const codeBlockFontSize = await getRevealCodeBlockFontSize(page)
+  const computedBlockFontSize = scaleFactor * codeBlockFontSize;
+  expect(await getCSSProperty(page.locator('#smaller-slide2 .callout pre code'), 'font-size', true)).toBeCloseTo(computedBlockFontSize);
+});
+
 test('Code font size is correctly set', async ({ page }) => {
   await page.goto('./revealjs/code-font-size.html');
   await page.locator('body').press('ArrowRight');