diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 4e25df7bc13..c10975e3b35 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/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); + } + } } } diff --git a/tests/docs/playwright/revealjs/code-font-size.qmd b/tests/docs/playwright/revealjs/code-font-size.qmd index 0627f0b4d24..28c1c0de2c2 100644 --- a/tests/docs/playwright/revealjs/code-font-size.qmd +++ b/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 +``` +::: \ No newline at end of file diff --git a/tests/integration/playwright/tests/revealjs-themes.spec.ts b/tests/integration/playwright/tests/revealjs-themes.spec.ts index 4f21f77da62..b8e77769ca2 100644 --- a/tests/integration/playwright/tests/revealjs-themes.spec.ts +++ b/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');