@percy/dom 1.32.13-beta.1 → 1.32.13-beta.2

package/dist/bundle.js

@@ -434,7 +434,6 @@
         dom,
         clone,
         resources,
-        cache,
         warnings,
         ignoreStyleSheetSerializationErrors,
         styleSheetClones
@@ -496,12 +495,34 @@
           }
         }
       }
+      serializeAdoptedStyleSheets(ctx);
+    }
 
-      // clone Adopted Stylesheets
+    // Serializes constructed stylesheets adopted by a document or shadow root into <link> tags
+    // backed by CSS resources. Unlike the rest of the CSSOM, this also runs when JavaScript is
+    // enabled: adopted sheets have no DOM representation, so without this they are lost whenever
+    // the page's own JS doesn't re-adopt them at render time.
+    function serializeAdoptedStyleSheets(ctx) {
+      let {
+        dom,
+        clone,
+        resources,
+        cache,
+        warnings
+      } = ctx;
       // Regarding ordering of the adopted stylesheets - https://github.com/WICG/construct-stylesheets/issues/93
       /* istanbul ignore next: tested, but coverage is stripped */
       if (dom.adoptedStyleSheets) {
+        // Document and iframe clones are fragments carrying body/head/documentElement references; links
+        // go at the start of the body, else the head, else inside documentElement (the only part that is
+        // serialized). A shadow root has none of these and takes the links directly.
+        let container = clone && ['HTMLDocument', 'DocumentFragment', 'ShadowRoot'].includes(clone.constructor.name) ? clone.body || clone.head || clone.documentElement || clone : null;
+        // each link goes after the one before it, so the links keep the order the sheets were adopted in
+        let prevLink = null;
         for (let sheet of dom.adoptedStyleSheets) {
+          var _sheet$media;
+          // a disabled sheet doesn't apply on the live page, so it must not apply in the render
+          if (sheet.disabled) continue;
           const styleLink = document.createElement('link');
           styleLink.setAttribute('rel', 'stylesheet');
           if (!cache.has(sheet)) {
@@ -511,26 +532,15 @@
           }
           styleLink.setAttribute('data-percy-adopted-stylesheets-serialized', 'true');
           styleLink.setAttribute('data-percy-serialized-attribute-href', cache.get(sheet));
-
-          /* istanbul ignore next: tested, but coverage is stripped */
-          if (clone.constructor.name === 'HTMLDocument' || clone.constructor.name === 'DocumentFragment') {
-            // handle document and iframe
-            // We are checking if we have multiple stylesheets present for the same clone or clone.body then we add
-            // them in the same order in which we receive them.
-            const lastLink = clone.body.querySelector('link[data-percy-adopted-stylesheets-serialized]:last-of-type');
-            if (lastLink) {
-              lastLink.after(styleLink);
-            } else {
-              clone.body.prepend(styleLink);
-            }
-          } else if (clone.constructor.name === 'ShadowRoot') {
-            const lastLink = clone.querySelector('link[data-percy-adopted-stylesheets-serialized]:last-of-type');
-            if (lastLink) {
-              lastLink.after(styleLink);
-            } else {
-              clone.prepend(styleLink);
-            }
+          // a constructed sheet can carry a media condition (new CSSStyleSheet({ media })); keep it
+          if ((_sheet$media = sheet.media) !== null && _sheet$media !== void 0 && _sheet$media.mediaText) styleLink.setAttribute('media', sheet.media.mediaText);
+          if (!container) continue;
+          if (prevLink) {
+            prevLink.after(styleLink);
+          } else {
+            container.prepend(styleLink);
           }
+          prevLink = styleLink;
         }
       } else {
         warnings.add('Skipping `adoptedStyleSheets` as it is not supported.');
@@ -1641,6 +1651,14 @@
       if (!ctx.enableJavaScript) {
         serializeCSSOM(ctx);
         serializeCanvas(ctx);
+      } else {
+        // adopted stylesheets exist only in memory, so they must be captured even with JS enabled.
+        // This path is new for JS-enabled pages, so a failure here must not fail the snapshot.
+        try {
+          serializeAdoptedStyleSheets(ctx);
+        } catch (err) {
+          ctx.warnings.add(`Error serializing \`adoptedStyleSheets\`, some may be missing: ${err.message}`);
+        }
       }
       // Only process shadow hosts if forceShadowAsLightDOM is not enabled
       if (!ctx.forceShadowAsLightDOM) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.32.13-beta.1",
+  "version": "1.32.13-beta.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "ce1817a2a31d00c29821e26af150e985d5ba8bf6"
+  "gitHead": "dcca431a742a923312777825e05af9ac01706213"
 }