@percy/dom 1.31.3-beta.0 → 1.31.3-beta.2

package/dist/bundle.js

@@ -39,19 +39,22 @@
     }
     function styleSheetFromNode(node) {
       /* istanbul ignore if: sanity check */
-      if (node.sheet) return node.sheet;
-
-      // Cloned style nodes don't have a sheet instance unless they are within
-      // a document; we get it by temporarily adding the rules to DOM
-      const tempStyle = node.cloneNode();
-      tempStyle.setAttribute('data-percy-style-helper', '');
-      tempStyle.innerHTML = node.innerHTML;
-      const clone = document.cloneNode();
-      clone.appendChild(tempStyle);
-      const sheet = tempStyle.sheet;
-      // Cleanup node
-      tempStyle.remove();
-      return sheet;
+      try {
+        if (node.sheet) return node.sheet;
+        // Cloned style nodes don't have a sheet instance unless they are within
+        // a document; we get it by temporarily adding the rules to DOM
+        const scratch = document.implementation.createHTMLDocument('percy-scratch');
+        const tempStyle = node.cloneNode();
+        tempStyle.setAttribute('data-percy-style-helper', '');
+        tempStyle.textContent = node.textContent || '';
+        scratch.head.appendChild(tempStyle);
+        const sheet = tempStyle.sheet;
+        // Cleanup node
+        tempStyle.remove();
+        return sheet;
+      } catch (err) {
+        handleErrors(err, 'Failed to get stylesheet from node: ', node);
+      }
     }
     function rewriteLocalhostURL(url) {
       return url.replace(/(http[s]{0,1}:\/\/)(localhost|127.0.0.1)[:\d+]*/, '$1render.percy.local');
@@ -71,8 +74,10 @@
         ...additionalData,
         ...elementData
       };
-      error.message += `\n${prefixMessage} \n${JSON.stringify(additionalData)}`;
-      error.message += '\n Please validate that your DOM is as per W3C standards using any online tool';
+      let message = error.message;
+      message += `\n${prefixMessage} \n${JSON.stringify(additionalData)}`;
+      message += '\n Please validate that your DOM is as per W3C standards using any online tool';
+      error.message = message;
       error.handled = true;
       throw error;
     }
@@ -115,7 +120,7 @@
               }
               break;
             case 'textarea':
-              cloneEl.innerHTML = elem.value;
+              cloneEl.textContent = elem.value || '';
               break;
             default:
               cloneEl.setAttribute('value', elem.value);
@@ -223,10 +228,22 @@
 
     // Returns false if any stylesheet rules do not match between two stylesheets
     function styleSheetsMatch(sheetA, sheetB) {
-      for (let i = 0; i < sheetA.cssRules.length; i++) {
-        var _sheetB$cssRules$i;
-        let ruleA = sheetA.cssRules[i].cssText;
-        let ruleB = (_sheetB$cssRules$i = sheetB.cssRules[i]) === null || _sheetB$cssRules$i === void 0 ? void 0 : _sheetB$cssRules$i.cssText;
+      if (!sheetA || !sheetB) return false;
+      const hasOwnAccessor = (obj, prop) => {
+        if (!obj || typeof obj !== 'object') return false;
+        const desc = Object.getOwnPropertyDescriptor(obj, prop);
+        return !!(desc && (typeof desc.get === 'function' || typeof desc.set === 'function'));
+      };
+      if (hasOwnAccessor(sheetA, 'cssRules') || hasOwnAccessor(sheetB, 'cssRules')) {
+        return false;
+      }
+      if (!sheetA.cssRules || !sheetB.cssRules) return false;
+      const lenA = sheetA.cssRules.length;
+      const lenB = sheetB.cssRules.length;
+      if (lenA !== lenB) return false;
+      for (let i = 0; i < lenA; i++) {
+        const ruleA = sheetA.cssRules[i] && sheetA.cssRules[i].cssText;
+        const ruleB = sheetB.cssRules[i] && sheetB.cssRules[i].cssText;
         if (ruleA !== ruleB) return false;
       }
       return true;
@@ -266,7 +283,7 @@
               style.type = 'text/css';
               style.setAttribute('data-percy-element-id', styleId);
               style.setAttribute('data-percy-cssom-serialized', 'true');
-              style.innerHTML = Array.from(styleSheet.cssRules).map(cssRule => cssRule.cssText).join('\n');
+              style.textContent = Array.from(styleSheet.cssRules).map(cssRule => cssRule.cssText).join('\n');
               cloneOwnerNode.parentNode.insertBefore(style, cloneOwnerNode.nextSibling);
               cloneOwnerNode.remove();
             } catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.31.3-beta.0",
+  "version": "1.31.3-beta.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "5979f9463370916036b700109320b6e9f2d17bc5"
+  "gitHead": "88c987a1544fc803397b5298b88f7a254c729a75"
 }