From ed287e08135b29a7b86cb35929821f51a18acae7 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 12:15:21 +0000 Subject: [PATCH 01/14] Move definition up in file with other from Quarto --- src/resources/formats/revealjs/quarto.scss | 30 +++++++++++----------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index d552e1d467c..6ecfe8c41ac 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -104,6 +104,21 @@ $dark-bg-link-color: #42affa !default; $light-bg-code-color: #4758ab !default; $dark-bg-code-color: #ffa07a !default; +// KBD variables +$kbd-padding-y: 0.4rem !default; +$kbd-padding-x: 0.4rem !default; +$kbd-font-size: $presentation-font-size-root !default; +$kbd-color: $body-color !default; +$kbd-bg: $gray-100 !default; // like in bootstrap style + +// variables required by _brand.yml +$font-family-monospace-block: $font-family-monospace !default; +$font-family-monospace-inline: $font-family-monospace !default; +$font-weight-monospace: $font-weight-base !default; +$font-weight-monospace-block: $font-weight-monospace !default; +$font-weight-monospace-inline: $font-weight-monospace !default; +$code-inline-font-size: $code-font-size !default; + // --- derive reveal versions of presentation variables for finer-grained override --- $revealjs-font-size-root: $presentation-font-size-root !default; @@ -173,21 +188,6 @@ $overlayElementFgColor: 0, 0, 0 !default; // -- END setting.scss -- -// KBD variables -$kbd-padding-y: 0.4rem !default; -$kbd-padding-x: 0.4rem !default; -$kbd-font-size: $presentation-font-size-root !default; -$kbd-color: $body-color !default; -$kbd-bg: $gray-100 !default; // like in bootstrap style - -// variables required by _brand.yml -$font-family-monospace-block: $font-family-monospace !default; -$font-family-monospace-inline: $font-family-monospace !default; -$font-weight-monospace: $font-weight-base !default; -$font-weight-monospace-block: $font-weight-monospace !default; -$font-weight-monospace-inline: $font-weight-monospace !default; -$code-inline-font-size: $code-font-size !default; - /*-- scss:functions --*/ @function colorToRGB($color) { From 2008c8b79d25e8eddd7655b112c719c4924cd5e1 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 12:26:58 +0000 Subject: [PATCH 02/14] Add revealjs specific variable like for other fontsize --- src/resources/formats/revealjs/quarto.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 6ecfe8c41ac..2ad607d3a8d 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -139,6 +139,9 @@ $revealjs-block-margin: $presentation-block-margin !default; $revealjs-line-height: $presentation-line-height !default; $revealjs-list-bullet-color: $presentation-list-bullet-color !default; +$revealjs-code-inline-font-size: $code-inline-font-size !default; +$revealjs-code-block-font-size: $code-block-font-size !default; + // ---- map to reveal scss variables --- // ---- This is based from the revealjs setting.scss // -- START setting.scss -- @@ -310,7 +313,7 @@ div.reveal div.slides section.quarto-title-block { background-color: $code-block-bg; border: none; margin: 0; - font-size: $code-block-font-size; + font-size: $revealjs-code-block-font-size; line-height: $code-block-line-height; } @@ -322,7 +325,7 @@ div.reveal div.slides section.quarto-title-block { .reveal code { color: $code-color; - font-size: $code-inline-font-size; + font-size: $revealjs-code-inline-font-size; background-color: $code-bg; white-space: pre-wrap; } @@ -339,7 +342,7 @@ div.reveal div.slides section.quarto-title-block { .reveal pre code { background-color: $body-bg; - font-size: $code-block-font-size; + font-size: $revealjs-code-block-font-size; color: $code-block-color; } From 9941409279abebe0748940dd58d2613d51c984fe Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 12:30:49 +0000 Subject: [PATCH 03/14] Regroup all relade code rules together --- src/resources/formats/revealjs/quarto.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 2ad607d3a8d..ef154456ddc 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -315,6 +315,14 @@ div.reveal div.slides section.quarto-title-block { margin: 0; font-size: $revealjs-code-block-font-size; line-height: $code-block-line-height; + font-family: $blockCodeFont; + + code { + background-color: $body-bg; + font-size: inherit; + color: $code-block-color; + font-family: inherit; + } } // Inside code-file-name div, we want to use the same background color as decorated codeblock header @@ -328,6 +336,7 @@ div.reveal div.slides section.quarto-title-block { font-size: $revealjs-code-inline-font-size; background-color: $code-bg; white-space: pre-wrap; + font-family: $inlineCodeFont; } .reveal pre.sourceCode code { @@ -820,11 +829,3 @@ kbd { --r-inline-code-font: #{$inlineCodeFont}; --r-block-code-font: #{$blockCodeFont}; } - -.reveal code { - font-family: var(--r-inline-code-font); -} - -.reveal pre code { - font-family: var(--r-block-code-font); -} From 7dbb1429c29ce36ed5ad487bc3ceebbe199000bc Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 12:38:09 +0000 Subject: [PATCH 04/14] Keep in setting.scss part only the variables that are copming from setting.scss revealjs own file --- src/resources/formats/revealjs/quarto.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index ef154456ddc..394ab4b6fbb 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -173,8 +173,6 @@ $heading3Size: $revealjs-h3-font-size !default; $heading4Size: $revealjs-h4-font-size !default; $codeFont: $font-family-monospace !default; -$inlineCodeFont: $font-family-monospace-inline !default; -$blockCodeFont: $font-family-monospace-block !default; // Links and actions $linkColor: $link-color !default; @@ -315,7 +313,7 @@ div.reveal div.slides section.quarto-title-block { margin: 0; font-size: $revealjs-code-block-font-size; line-height: $code-block-line-height; - font-family: $blockCodeFont; + font-family: $font-family-monospace-block; code { background-color: $body-bg; @@ -336,7 +334,7 @@ div.reveal div.slides section.quarto-title-block { font-size: $revealjs-code-inline-font-size; background-color: $code-bg; white-space: pre-wrap; - font-family: $inlineCodeFont; + font-family: $font-family-monospace-inline; } .reveal pre.sourceCode code { @@ -826,6 +824,6 @@ kbd { } :root { - --r-inline-code-font: #{$inlineCodeFont}; - --r-block-code-font: #{$blockCodeFont}; + --r-inline-code-font: #{$font-family-monospace-inline}; + --r-block-code-font: #{$font-family-monospace-block}; } From 864c8307bb3fab418f6b3a6cbf6e66680bfd0d50 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 12:40:26 +0000 Subject: [PATCH 05/14] fixup - move pre code --- src/resources/formats/revealjs/quarto.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 394ab4b6fbb..509921a6843 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -347,12 +347,6 @@ div.reveal div.slides section.quarto-title-block { white-space: pre; } -.reveal pre code { - background-color: $body-bg; - font-size: $revealjs-code-block-font-size; - color: $code-block-color; -} - .reveal .column-output-location { display: flex; align-items: stretch; From 4c0d22bdde0aa5b976c82dd89913ecf1ff69f43f Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 12:41:58 +0000 Subject: [PATCH 06/14] clean code as code-block-color always exist in reveal --- src/resources/formats/revealjs/quarto.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 509921a6843..53dfcd69cd5 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -338,9 +338,7 @@ div.reveal div.slides section.quarto-title-block { } .reveal pre.sourceCode code { - @if variable-exists(code-block-color) { color: $code-block-color; - } background-color: $code-block-bg; padding: 6px 9px; max-height: $code-block-height; From 81be94c362eabb2e343b96be935731c1b2b20dde Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 12:45:17 +0000 Subject: [PATCH 07/14] Move `.sourceCode` specific with other pre code definition --- src/resources/formats/revealjs/quarto.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 53dfcd69cd5..16424a2cba4 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -321,6 +321,14 @@ div.reveal div.slides section.quarto-title-block { color: $code-block-color; font-family: inherit; } + + &.sourceCode code { + color: $code-block-color; + background-color: $code-block-bg; + padding: 6px 9px; + max-height: $code-block-height; + white-space: pre; + } } // Inside code-file-name div, we want to use the same background color as decorated codeblock header @@ -337,14 +345,6 @@ div.reveal div.slides section.quarto-title-block { font-family: $font-family-monospace-inline; } -.reveal pre.sourceCode code { - color: $code-block-color; - background-color: $code-block-bg; - padding: 6px 9px; - max-height: $code-block-height; - white-space: pre; -} - .reveal .column-output-location { display: flex; align-items: stretch; From f4d01db2370fa0b7a0a716456127c4f48dff324d Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 12:57:00 +0000 Subject: [PATCH 08/14] Make pre code and pre.sourceCode code more coherent --- src/resources/formats/revealjs/quarto.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 16424a2cba4..168e420fec8 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -316,7 +316,7 @@ div.reveal div.slides section.quarto-title-block { font-family: $font-family-monospace-block; code { - background-color: $body-bg; + background-color: $body-bg; // Insure we color output and code cell differently font-size: inherit; color: $code-block-color; font-family: inherit; @@ -324,10 +324,12 @@ div.reveal div.slides section.quarto-title-block { &.sourceCode code { color: $code-block-color; - background-color: $code-block-bg; + font-size: inherit; + background-color: inherit; + white-space: pre; + font-family: inherit; padding: 6px 9px; max-height: $code-block-height; - white-space: pre; } } From 9698b03263d20502df27a524d3e2fb20f2a45ad2 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 15:13:52 +0000 Subject: [PATCH 09/14] Rewrite smaller font size logic and handle code and pre code font size this fixes https://github.com/quarto-dev/quarto-cli/issues/11215 as we need to apply smaller font-size factor to those element specifically now that $code-block-font-size and $code-inline-font-size applies to them in px. --- src/resources/formats/revealjs/quarto.scss | 109 +++++++++++++++++---- 1 file changed, 88 insertions(+), 21 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 168e420fec8..256c2f53986 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -224,6 +224,14 @@ $overlayElementFgColor: 0, 0, 0 !default; } } +@mixin make-smaller-font-size($element) { + font-size: calc(#{$element} * #{$presentation-font-smaller}); +} + +@mixin undo-smaller-font-size($element) { + font-size: calc(#{$element} / #{$presentation-font-smaller}); +} + // -- START setting.scss -- // Generates the presentation background, can be overridden @@ -460,29 +468,88 @@ $panel-sidebar-padding: 0.5em; line-height: $revealjs-line-height; } -.reveal.smaller .slides section, -.reveal .slides section.smaller, -.reveal .slides section .callout { - font-size: #{$presentation-font-smaller}em; -} -// avoid applying twice the reduction when using nested section -.reveal.smaller .slides section section { - font-size: inherit; -} - -.reveal.smaller .slides h1, -.reveal .slides section.smaller h1 { - font-size: calc(#{$revealjs-h1-font-size} / #{$presentation-font-smaller}); -} +// Smaller font size logic +.reveal { + // When smaller is set globally + &.smaller { + .slides { + // We make the all slide font-size smaller by a factor of $presentation-font-smaller + section { + font-size: #{$presentation-font-smaller}em; + + // avoid applying twice the reduction when using nested section + section { + font-size: inherit; + } + } + + // But we don't want headers to change size and they are in em + h1 { + @include undo-smaller-font-size($revealjs-h1-font-size); + } + h2 { + @include undo-smaller-font-size($revealjs-h2-font-size); + } + h3 { + @include undo-smaller-font-size($revealjs-h3-font-size); + } + // 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); + } + code { + @include make-smaller-font-size($revealjs-code-inline-font-size); + } + } + } -.reveal.smaller .slides h2, -.reveal .slides section.smaller h2 { - font-size: calc(#{$revealjs-h2-font-size} / #{$presentation-font-smaller}); -} + .slides section { + // when smaller is set on slide + &.smaller { + font-size: #{$presentation-font-smaller}em; + + // But we don't want headers to change size and they are in em + h1 { + @include undo-smaller-font-size($revealjs-h1-font-size); + } + h2 { + @include undo-smaller-font-size($revealjs-h2-font-size); + } + h3 { + @include undo-smaller-font-size($revealjs-h3-font-size); + } + // 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); + } + code { + @include make-smaller-font-size($revealjs-code-inline-font-size); + } + } -.reveal.smaller .slides h3, -.reveal .slides section.smaller h3 { - font-size: calc(#{$revealjs-h3-font-size} / #{$presentation-font-smaller}); + // On callout we want to make the font-size smaller too + .callout { + font-size: #{$presentation-font-smaller}em; + + // But we don't want headers to change size and they are in em + h1 { + @include undo-smaller-font-size($revealjs-h1-font-size); + } + h2 { + @include undo-smaller-font-size($revealjs-h2-font-size); + } + h3 { + @include undo-smaller-font-size($revealjs-h3-font-size); + } + // 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); + } + code { + @include make-smaller-font-size($revealjs-code-inline-font-size); + } + } + } } .reveal .columns > .column > :not(ul, ol) { From a8bf8ddb44928776e7d33c1e3bf70b4adb5e60f3 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 15:20:35 +0000 Subject: [PATCH 10/14] Refactor callout scss rule for better understanding --- src/resources/formats/revealjs/quarto.scss | 46 ++++++++++++---------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 256c2f53986..9e238526b67 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -654,30 +654,34 @@ $panel-sidebar-padding: 0.5em; z-index: 1; } -.reveal .callout.callout-style-simple .callout-body, -.reveal .callout.callout-style-default .callout-body, -.reveal .callout.callout-style-simple div.callout-title, -.reveal .callout.callout-style-default div.callout-title { - font-size: inherit; -} - -.reveal .callout.callout-style-default .callout-icon::before, -.reveal .callout.callout-style-simple .callout-icon::before { - height: 2rem; - width: 2rem; - background-size: 2rem 2rem; -} +/* Callout styles */ +.reveal .callout { + &.callout-style-simple, + &.callout-style-default { + .callout-body, + div.callout-title { + font-size: inherit; + } + .callout-icon::before { + height: 2rem; + width: 2rem; + background-size: 2rem 2rem; + } + } -.reveal .callout.callout-titled .callout-title p { - margin-top: 0.5em; -} + &.callout-titled { + .callout-title p { + margin-top: 0.5em; + } -.reveal .callout.callout-titled .callout-icon::before { - margin-top: 1rem; -} + .callout-icon::before { + margin-top: 1rem; + } -.reveal .callout.callout-titled .callout-body > .callout-content > :last-child { - margin-bottom: 1rem; + .callout-body > .callout-content > :last-child { + margin-bottom: 1rem; + } + } } .reveal .panel-tabset [role="tab"] { From fddf21043533ff2376012bd0d3719e5db7c44a45 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 15:49:09 +0000 Subject: [PATCH 11/14] Correct get code block font size in callout and other smaller font-size context --- src/resources/formats/revealjs/quarto.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 9e238526b67..5119bdc86f4 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -496,6 +496,10 @@ $panel-sidebar-padding: 0.5em; // 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); + // 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); @@ -521,6 +525,10 @@ $panel-sidebar-padding: 0.5em; // 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); + // 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); @@ -544,6 +552,10 @@ $panel-sidebar-padding: 0.5em; // 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); + // 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); From c760de311f8d3a55ebc31ca983701c1aaa48e61b Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 16:28:25 +0000 Subject: [PATCH 12/14] Expose code font size as CSS root variable in revealjs --- src/resources/formats/revealjs/quarto.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 5119bdc86f4..4e25df7bc13 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/src/resources/formats/revealjs/quarto.scss @@ -903,4 +903,6 @@ kbd { :root { --r-inline-code-font: #{$font-family-monospace-inline}; --r-block-code-font: #{$font-family-monospace-block}; + --r-inline-code-font-size: #{$revealjs-code-inline-font-size}; + --r-block-code-font-size: #{$revealjs-code-block-font-size}; } From 0313dbd55e242be0a76dfbb3f95331d18790278b Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 16:29:13 +0000 Subject: [PATCH 13/14] Add a first test for font size in revealjs --- .../playwright/revealjs/code-font-size.qmd | 50 +++++++++++++++++++ .../playwright/tests/revealjs-themes.spec.ts | 29 +++++++++++ 2 files changed, 79 insertions(+) create mode 100644 tests/docs/playwright/revealjs/code-font-size.qmd create mode 100644 tests/integration/playwright/tests/revealjs-themes.spec.ts diff --git a/tests/docs/playwright/revealjs/code-font-size.qmd b/tests/docs/playwright/revealjs/code-font-size.qmd new file mode 100644 index 00000000000..0627f0b4d24 --- /dev/null +++ b/tests/docs/playwright/revealjs/code-font-size.qmd @@ -0,0 +1,50 @@ +--- +title: "Code font size" +format: revealjs +--- + +## Callouts + +:::{.callout-tip} + +## Example test file + +- Every test is a call to `testthat::test_that()` function. + +````{.python} +1 + 1 +```` + +::: + +## No callout inline + +Every test is a call to `testthat::test_that()` function. + +- And inside a list : `1+1` + +## Highlited Cell + +````{.python} +1 + 1 +```` + +## Non Highligted + +```` +1 + 1 +```` + +## Smaller slide {.smaller} + +### With a h3 + +Some inline code: `1 + 1` + +And block code: + +```{.r} +1 + 1 +``` + + diff --git a/tests/integration/playwright/tests/revealjs-themes.spec.ts b/tests/integration/playwright/tests/revealjs-themes.spec.ts new file mode 100644 index 00000000000..bd4eaa5bf71 --- /dev/null +++ b/tests/integration/playwright/tests/revealjs-themes.spec.ts @@ -0,0 +1,29 @@ +import { test, expect, Locator } from '@playwright/test'; + +async function getCSSProperty(loc: Locator, variable: string) { + return await loc.evaluate((element) => + window.getComputedStyle(element).getPropertyValue(variable) + ); +} + +async function checkFontSizeIdentical(loc1: Locator, loc2: Locator) { + const loc1FontSize = await getCSSProperty(loc1, 'font-size'); + await expect(loc2).toHaveCSS('font-size', loc1FontSize); +} + +test('Code block font size did not change and still equals to pre size', async ({ page }) => { + await page.goto('./revealjs/code-font-size.html'); + await page.locator('body').press('ArrowRight'); + // Font size in callout for inline code should be same size as text by default + await checkFontSizeIdentical( + page.locator('#callouts').getByText('Every test is a call to'), + page.locator('#callouts').getByText('testthat::test_that()') + ); + // Font size for code block in callout should be scaled smaller that default code block + const calloutsFontSize = parseFloat(await getCSSProperty(page.locator('#callouts'), "font-size")); + const bodyFontSize = parseFloat(await getCSSProperty(page.locator('body'), "font-size")); + const scaleFactor = calloutsFontSize / bodyFontSize; + const codeBlockFontSize = await getCSSProperty(page.locator('body'), "--r-block-code-font-size"); + const computedCodeFont = `${scaleFactor * parseFloat(codeBlockFontSize)}px`; + await expect(page.locator('#callout pre code')).toHaveCSS('font-size', computedCodeFont); +}); \ No newline at end of file From 570fb4410d054068984a9c91948a2e0687a5c620 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 29 Oct 2024 17:33:07 +0000 Subject: [PATCH 14/14] Add some playwright test to avoid regression on code font size in the future --- .../playwright/tests/revealjs-themes.spec.ts | 90 ++++++++++++++++--- 1 file changed, 79 insertions(+), 11 deletions(-) diff --git a/tests/integration/playwright/tests/revealjs-themes.spec.ts b/tests/integration/playwright/tests/revealjs-themes.spec.ts index bd4eaa5bf71..4f21f77da62 100644 --- a/tests/integration/playwright/tests/revealjs-themes.spec.ts +++ b/tests/integration/playwright/tests/revealjs-themes.spec.ts @@ -1,29 +1,97 @@ import { test, expect, Locator } from '@playwright/test'; -async function getCSSProperty(loc: Locator, variable: string) { - return await loc.evaluate((element) => - window.getComputedStyle(element).getPropertyValue(variable) +async function getCSSProperty(loc: Locator, variable: string, asNumber = false): Promise { + const property = await loc.evaluate((element, variable) => + window.getComputedStyle(element).getPropertyValue(variable), + variable ); + if (asNumber) { + return parseFloat(property); + } else { + return property; + } } async function checkFontSizeIdentical(loc1: Locator, loc2: Locator) { - const loc1FontSize = await getCSSProperty(loc1, 'font-size'); + const loc1FontSize = await getCSSProperty(loc1, 'font-size', false) as string; await expect(loc2).toHaveCSS('font-size', loc1FontSize); } -test('Code block font size did not change and still equals to pre size', async ({ page }) => { +async function getRevealMainFontSize(page: any): Promise { + return await getCSSProperty(page.locator('body'), "--r-main-font-size", true) as number; +} + +async function getRevealCodeBlockFontSize(page: any): Promise { + return await getCSSProperty(page.locator('body'), "--r-block-code-font-size", true) as number; +} + +async function getRevealCodeInlineFontSize(page: any): Promise { + return await getCSSProperty(page.locator('body'), "--r-inline-code-font-size", true) as number; +} + +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'); + // Get smaller slide scale factor + const calloutsFontSize = await getCSSProperty(page.locator('#callouts div.callout'), "font-size", true) as number; + const mainFontSize = await getRevealMainFontSize(page); + const scaleFactor = calloutsFontSize / 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('#callouts').getByText('testthat::test_that()'), 'font-size', true)).toBeCloseTo(computedInlineFontSize); // Font size in callout for inline code should be same size as text by default await checkFontSizeIdentical( page.locator('#callouts').getByText('Every test is a call to'), page.locator('#callouts').getByText('testthat::test_that()') ); // Font size for code block in callout should be scaled smaller that default code block - const calloutsFontSize = parseFloat(await getCSSProperty(page.locator('#callouts'), "font-size")); - const bodyFontSize = parseFloat(await getCSSProperty(page.locator('body'), "font-size")); - const scaleFactor = calloutsFontSize / bodyFontSize; - const codeBlockFontSize = await getCSSProperty(page.locator('body'), "--r-block-code-font-size"); - const computedCodeFont = `${scaleFactor * parseFloat(codeBlockFontSize)}px`; - await expect(page.locator('#callout pre code')).toHaveCSS('font-size', computedCodeFont); + const codeBlockFontSize = await getRevealCodeBlockFontSize(page) + const computedBlockFontSize = scaleFactor * codeBlockFontSize; + expect(await getCSSProperty(page.locator('.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 mainFontSize = await getRevealMainFontSize(page); + const scaleFactor = smallerFontSize / mainFontSize; + expect(scaleFactor).toBeLessThan(1); + // Code Font size in smaller slide 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-slide p').filter({ hasText: 'Some inline code' }).getByRole('code'), + 'font-size', true + ) + ).toBeCloseTo(computedInlineFontSize); + // 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-slide pre').getByRole('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'); + await page.locator('body').press('ArrowRight'); + const codeInlineFontSize = await getRevealCodeInlineFontSize(page); + expect( + await getCSSProperty(page.locator('#no-callout-inline').getByText('testthat::test_that()'), 'font-size', true) + ).toBeCloseTo(codeInlineFontSize); + expect( + await getCSSProperty(page.getByText('1+1', { exact: true }), 'font-size', true) + ).toBeCloseTo(codeInlineFontSize); + await page.locator('body').press('ArrowRight'); + const codeBlockFontSize = await getRevealCodeBlockFontSize(page); + expect( + await getCSSProperty(page.locator("#highlited-cell div.sourceCode pre code"), 'font-size', true) + ).toBeCloseTo(codeBlockFontSize); + await page.locator('body').press('ArrowRight'); + expect( + await getCSSProperty(page.locator("#non-highligted pre code"), 'font-size', true) + ).toBeCloseTo(codeBlockFontSize); }); \ No newline at end of file