From aa608283f0aa9caf155cc55e124d0039776f04d3 Mon Sep 17 00:00:00 2001 From: Pankaj Yadav Date: Wed, 24 Apr 2024 19:24:36 +0530 Subject: [PATCH] Cleanup InjectDeclarativeShadowDOMPolyfill script (#1579) * Inject DeclarativeShadowDOMPolyfill script directly to clone * Remove extra changes * Fallback to clone if head node is missing * Release alpha * Cleanup DeclarativeShadowDOMPolyfill script * Fix tests --- packages/dom/src/inject-polyfill.js | 42 ---------------------- packages/dom/src/serialize-dom.js | 2 -- packages/dom/src/serialize-frames.js | 2 +- packages/dom/test/inject-polyfill.test.js | 42 ---------------------- packages/dom/test/serialize-frames.test.js | 3 -- 5 files changed, 1 insertion(+), 90 deletions(-) delete mode 100644 packages/dom/src/inject-polyfill.js delete mode 100644 packages/dom/test/inject-polyfill.test.js diff --git a/packages/dom/src/inject-polyfill.js b/packages/dom/src/inject-polyfill.js deleted file mode 100644 index d68eb1cb4..000000000 --- a/packages/dom/src/inject-polyfill.js +++ /dev/null @@ -1,42 +0,0 @@ - -// we inject declarative shadow dom polyfill to allow shadow dom to load in non chromium infrastructure browsers -// Since only chromium currently supports declarative shadow DOM - https://caniuse.com/declarative-shadow-dom -export function injectDeclarativeShadowDOMPolyfill(ctx) { - let clone = ctx.clone; - let scriptEl = document.createElement('script'); - scriptEl.setAttribute('id', '__percy_shadowdom_helper'); - scriptEl.setAttribute('data-percy-injected', true); - - scriptEl.innerHTML = ` - function attachShadow(template, mode){ - const shadowRoot = template.parentNode.attachShadow({ mode }); - shadowRoot.appendChild(template.content); - template.remove(); - } - - function reversePolyFill(root=document){ - root.querySelectorAll('template[shadowroot]').forEach(template => { - const mode = template.getAttribute('shadowroot'); - attachShadow(template, mode); - }); - - root.querySelectorAll('template[shadowrootmode]').forEach(template => { - const mode = template.getAttribute('shadowrootmode'); - attachShadow(template, mode); - }); - - root.querySelectorAll('[data-percy-shadow-host]').forEach(shadowHost => reversePolyFill(shadowHost.shadowRoot)); - } - - if (["interactive", "complete"].includes(document.readyState)) { - reversePolyFill(); - } else { - document.addEventListener("DOMContentLoaded", () => reversePolyFill()); - } - `.replace(/(\n|\s{2}|\t)/g, ''); - - // run polyfill as first thing post dom content is loaded - clone.head.prepend(scriptEl); -} - -export default injectDeclarativeShadowDOMPolyfill; diff --git a/packages/dom/src/serialize-dom.js b/packages/dom/src/serialize-dom.js index 6840f9903..fe1f49c74 100644 --- a/packages/dom/src/serialize-dom.js +++ b/packages/dom/src/serialize-dom.js @@ -4,7 +4,6 @@ import serializeCSSOM from './serialize-cssom'; import serializeCanvas from './serialize-canvas'; import serializeVideos from './serialize-video'; import { cloneNodeAndShadow, getOuterHTML } from './clone-dom'; -import injectDeclarativeShadowDOMPolyfill from './inject-polyfill'; // Returns a copy or new doctype for a document. function doctype(dom) { @@ -95,7 +94,6 @@ export function serializeDOM(options) { } } - if (!disableShadowDOM) { injectDeclarativeShadowDOMPolyfill(ctx); } if (reshuffleInvalidTags) { let clonedBody = ctx.clone.body; while (clonedBody.nextSibling) { diff --git a/packages/dom/src/serialize-frames.js b/packages/dom/src/serialize-frames.js index fdf3d99d2..d692b2a28 100644 --- a/packages/dom/src/serialize-frames.js +++ b/packages/dom/src/serialize-frames.js @@ -9,7 +9,7 @@ function setBaseURI(dom) { let $base = document.createElement('base'); $base.href = dom.baseURI; - dom.querySelector('head').prepend($base); + dom.querySelector('head')?.prepend($base); } // Recursively serializes iframe documents into srcdoc attributes. diff --git a/packages/dom/test/inject-polyfill.test.js b/packages/dom/test/inject-polyfill.test.js deleted file mode 100644 index 3847626a1..000000000 --- a/packages/dom/test/inject-polyfill.test.js +++ /dev/null @@ -1,42 +0,0 @@ -import injectDeclarativeShadowDOMPolyfill from '../src/inject-polyfill'; -import { withExample } from './helpers'; - -describe('injectDeclarativeShadowDOMPolyfill', () => { - let dom; - - beforeEach(() => { - dom = withExample(` -
- -
-
- -
- `, { withShadow: false }); - - let ctx = { clone: dom }; - injectDeclarativeShadowDOMPolyfill(ctx); - }); - - it('All template tags are converted to Shadow DOM', () => { - expect(Array.from(dom.documentElement.innerHTML.matchAll(/<\/template>/g)).length).toBe(0); - }); -}); diff --git a/packages/dom/test/serialize-frames.test.js b/packages/dom/test/serialize-frames.test.js index 70acea66c..0f4e17ef6 100644 --- a/packages/dom/test/serialize-frames.test.js +++ b/packages/dom/test/serialize-frames.test.js @@ -98,7 +98,6 @@ describe('serializeFrames', () => { expect($('#frame-js')[0].getAttribute('src')).toBeNull(); expect($('#frame-js')[0].getAttribute('srcdoc')).toMatch(new RegExp([ '', - '', ``, '', '

made with js src

', @@ -108,7 +107,6 @@ describe('serializeFrames', () => { expect($('#frame-js-no-src')[0].getAttribute('src')).toBeNull(); expect($('#frame-js-no-src')[0].getAttribute('srcdoc')).toMatch([ '', - '', ``, '', '

generated iframe

', @@ -127,7 +125,6 @@ describe('serializeFrames', () => { it(`${platform}: serializes iframes that have been interacted with`, () => { expect($('#frame-input')[0].getAttribute('srcdoc')).toMatch(new RegExp([ '^', - '', '.*?', '', '$'