From 7c737db823e3639f1597deadbadfa5a36040a948 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Fri, 12 Aug 2022 03:55:15 +0900 Subject: [PATCH 1/3] Trigger flushing auto-scaling SVG when resized wrapper --- .../browser/marp-auto-scaling.ts | 36 +++++++++---------- test/custom-elements/browser.ts | 6 +--- 2 files changed, 19 insertions(+), 23 deletions(-) diff --git a/src/custom-elements/browser/marp-auto-scaling.ts b/src/custom-elements/browser/marp-auto-scaling.ts index 1f5ddad1..a08d2f8f 100644 --- a/src/custom-elements/browser/marp-auto-scaling.ts +++ b/src/custom-elements/browser/marp-auto-scaling.ts @@ -31,9 +31,10 @@ export class MarpAutoScaling extends HTMLElement { this.containerObserver = new ResizeObserver( generateObserverCallback('containerSize') ) - this.wrapperObserver = new ResizeObserver( - generateObserverCallback('wrapperSize') - ) + this.wrapperObserver = new ResizeObserver((...args) => { + generateObserverCallback('wrapperSize')(...args) + this.flushSvgDisplay() + }) } static get observedAttributes() { @@ -70,25 +71,11 @@ export class MarpAutoScaling extends HTMLElement { : undefined } - // Workaround for the latest Chromium browser (>= 105?) - // TODO: Remove this workaround when the bug is fixed - if (this.svg) { - const { svg: connectedSvg } = this - - // I don't know why but a nested SVG may require to flush the display style for rendering correctly - requestAnimationFrame(() => { - connectedSvg.style.display = 'inline' - - requestAnimationFrame(() => { - connectedSvg.style.display = '' - }) - }) - } - this.container = this.svg?.querySelector(`span[${dataContainer}]`) ?? undefined + this.flushSvgDisplay() this.observe() } @@ -105,6 +92,19 @@ export class MarpAutoScaling extends HTMLElement { this.observe() } + // Workaround for Chromium 105+ + private flushSvgDisplay() { + const { svg: connectedSvg } = this + + if (connectedSvg) { + connectedSvg.style.display = 'inline' + + requestAnimationFrame(() => { + connectedSvg.style.display = '' + }) + } + } + private observe() { this.containerObserver.disconnect() this.wrapperObserver.disconnect() diff --git a/test/custom-elements/browser.ts b/test/custom-elements/browser.ts index 5face3b8..3ba0a1e0 100644 --- a/test/custom-elements/browser.ts +++ b/test/custom-elements/browser.ts @@ -279,11 +279,7 @@ describe('The hydration script for custom elements', () => { ) as MarpAutoScaling const svg = autoScaling.shadowRoot.querySelector('svg') as SVGElement - // Initially SVG's display style is not set - expect(svg.style.display).toBe('') - - // At the next rendering frame, display style is set as `inline` - await waitNextRendering() + // display style sets as `inline` expect(svg.style.display).toBe('inline') // After that, display style is reverted to empty string From df07c5663825cd1e1b44071d3eca13168e740ff3 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Fri, 12 Aug 2022 22:38:43 +0900 Subject: [PATCH 2/3] Flush auto-scaling component only when resized --- src/custom-elements/browser/marp-auto-scaling.ts | 1 - test/custom-elements/browser.ts | 5 +++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/custom-elements/browser/marp-auto-scaling.ts b/src/custom-elements/browser/marp-auto-scaling.ts index a08d2f8f..888d5c43 100644 --- a/src/custom-elements/browser/marp-auto-scaling.ts +++ b/src/custom-elements/browser/marp-auto-scaling.ts @@ -75,7 +75,6 @@ export class MarpAutoScaling extends HTMLElement { this.svg?.querySelector(`span[${dataContainer}]`) ?? undefined - this.flushSvgDisplay() this.observe() } diff --git a/test/custom-elements/browser.ts b/test/custom-elements/browser.ts index 3ba0a1e0..d87fe581 100644 --- a/test/custom-elements/browser.ts +++ b/test/custom-elements/browser.ts @@ -268,7 +268,7 @@ describe('The hydration script for custom elements', () => { const waitNextRendering = () => new Promise((resolve) => requestAnimationFrame(() => resolve())) - it("flushes SVG's display style on mounted", async () => { + it("flushes SVG's display style when resized", async () => { expect.hasAssertions() browser.applyCustomElements() @@ -279,7 +279,8 @@ describe('The hydration script for custom elements', () => { ) as MarpAutoScaling const svg = autoScaling.shadowRoot.querySelector('svg') as SVGElement - // display style sets as `inline` + // display style sets as `inline` by an initial callback of ResizeObserver + // (If not yet rendered DOM, running callback would be delayed until the component was painted) expect(svg.style.display).toBe('inline') // After that, display style is reverted to empty string From 5edcef6c49384ef4c8df16d769382c982100ce12 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Fri, 12 Aug 2022 22:44:43 +0900 Subject: [PATCH 3/3] [ci skip] Update CHANGELOG.md --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 261fdbc1..8c1c6597 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## [Unreleased] +### Fixed + +- Flush display of `` only when resized the scaling wrapper ([#313](https://github.com/marp-team/marp-core/pull/313)) + ## v3.3.1 - 2022-08-11 ### Fixed