@applitools/dom-snapshot - npm Package Compare versions

Comparing version 1.4.9 to 2.0.1

dist/processPage.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-snapshot@1.4.8 */
+/* @applitools/dom-snapshot@2.0.0 */
 
@@ -69,3 +69,3 @@ function __processPage() {
     const cdt = [{nodeType: Node.DOCUMENT_NODE}];
-    const documents = [docNode];
+    const docRoots = [docNode];
     const canvasElements = [];
@@ -75,3 +75,3 @@ const inlineFrames = [];
     cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
-    return {cdt, documents, canvasElements, inlineFrames};
+    return {cdt, docRoots, canvasElements, inlineFrames};
 
@@ -114,3 +114,3 @@ function childrenFactory(cdt, elementNodes) {
             node.shadowRootIndex = elementNodeFactory(cdt, elementNode.shadowRoot);
-            documents.push(elementNode.shadowRoot);
+            docRoots.push(elementNode.shadowRoot);
           }
@@ -310,12 +310,19 @@
   function makeExtractResourcesFromStyle({extractResourcesFromStyleSheet}) {
-    return function extractResourcesFromStyle(styleSheet, cssContent, doc = document) {
+    return function extractResourcesFromStyle(cssArrayBuffer, styleSheet, doc = document) {
       let corsFreeStyleSheet;
-      try {
-        styleSheet.cssRules;
-        corsFreeStyleSheet = styleSheet;
-      } catch (e) {
-        console.log(
-          `[dom-snapshot] could not access cssRules for ${styleSheet.href} ${e}\ncreating temp style for access.`,
-        );
-        corsFreeStyleSheet = createTempStyleSheet(cssContent);
+      let cssText;
+      if (styleSheet) {
+        try {
+          styleSheet.cssRules;
+          corsFreeStyleSheet = styleSheet;
+        } catch (e) {
+          console.log(
+            `[dom-snapshot] could not access cssRules for ${styleSheet.href} ${e}\ncreating temp style for access.`,
+          );
+          cssText = new TextDecoder('utf-8').decode(cssArrayBuffer);
+          corsFreeStyleSheet = createTempStyleSheet(cssText);
+        }
+      } else {
+        cssText = new TextDecoder('utf-8').decode(cssArrayBuffer);
+        corsFreeStyleSheet = createTempStyleSheet(cssText);
       }
@@ -340,2 +347,3 @@
   }) {
+    let isFromSvgResource;
     const extractResourcesFromStyle$$1 = extractResourcesFromStyle({extractResourcesFromStyleSheet});
@@ -359,23 +367,23 @@ return function processResource(absoluteUrl, documents, baseUrl, getResourceUrlsAndBlobs) {
 
+            let result = {blobsObj: {[url]: {type, value}}};
             let resourceUrls;
-            let result = {blobsObj: {[url]: {type, value}}};
             if (/text\/css/.test(type)) {
-              const styleSheet = findStyleSheetByUrl(url, documents);
-              if (styleSheet) {
-                resourceUrls = extractResourcesFromStyle$$1(styleSheet, value, documents[0]);
+              let styleSheet = findStyleSheetByUrl(url, documents);
+              if (styleSheet || isFromSvgResource) {
+                resourceUrls = extractResourcesFromStyle$$1(value, styleSheet, documents[0]);
               }
             } else if (/image\/svg/.test(type)) {
-              resourceUrls = extractResourcesFromSvg(value);
+              try {
+                resourceUrls = extractResourcesFromSvg(value);
+                if (resourceUrls && !isFromSvgResource) {
+                  isFromSvgResource = url;
+                }
+              } catch (e) {
+                console.log('could not parse svg content', e);
+              }
             }
 
             if (resourceUrls) {
-              resourceUrls = resourceUrls
-                .map(toUnAnchoredUri_1)
-                .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
-                .filter(filterInlineUrl_1);
-              result = getResourceUrlsAndBlobs(documents, baseUrl, resourceUrls).then(
-                ({resourceUrls, blobsObj}) => ({
-                  resourceUrls,
-                  blobsObj: Object.assign(blobsObj, {[url]: {type, value}}),
-                }),
+              result = mapUrlsAndGetResult({resourceUrls, url, type, value}).then(
+                res => (res),
               );
@@ -391,8 +399,19 @@ }
 
+      function mapUrlsAndGetResult({resourceUrls, url, type, value}) {
+        const urls = resourceUrls
+          .map(toUnAnchoredUri_1)
+          .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
+          .filter(filterInlineUrl_1);
+        return getResourceUrlsAndBlobs(documents, baseUrl, urls).then(({resourceUrls, blobsObj}) => ({
+          resourceUrls,
+          blobsObj: Object.assign(blobsObj, {[url]: {type, value}}),
+        }));
+      }
+
       function probablyCORS(err) {
-        const msgCORS =
+        const msg =
           err.message &&
           (err.message.includes('Failed to fetch') || err.message.includes('Network request failed'));
-        const nameCORS = err.name && err.name.includes('TypeError');
-        return msgCORS && nameCORS;
+        const name = err.name && err.name.includes('TypeError');
+        return msg && name;
       }
@@ -404,26 +423,53 @@ };
 
-  function makeExtractResourcesFromSvg({parser, decoder}) {
+  function getUrlFromCssText(cssText) {
+    const re = /url\((?!['"]?:)['"]?([^'")]*)['"]?\)/g;
+    const ret = [];
+    let result;
+    while ((result = re.exec(cssText)) !== null) {
+      ret.push(result[1]);
+    }
+    return ret;
+  }
+
+  var getUrlFromCssText_1 = getUrlFromCssText;
+
+  function flat(arr) {
+    return [].concat(...arr);
+  }
+
+  var flat_1 = flat;
+
+  function makeExtractResourcesFromSvg({parser, decoder, extractResourceUrlsFromStyleTags}) {
     return function(svgArrayBuffer) {
-      let svgStr;
-      let urls = [];
-      try {
-        const decooder = decoder || new TextDecoder('utf-8');
-        svgStr = decooder.decode(svgArrayBuffer);
-        const domparser = parser || new DOMParser();
-        const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
+      const decooder = decoder || new TextDecoder('utf-8');
+      const svgStr = decooder.decode(svgArrayBuffer);
+      const domparser = parser || new DOMParser();
+      const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
 
-        const fromImages = Array.from(doc.getElementsByTagName('image'))
-          .concat(Array.from(doc.getElementsByTagName('use')))
-          .map(e => e.getAttribute('href') || e.getAttribute('xlink:href'));
-        const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
-          e.getAttribute('data'),
-        );
-        urls = fromImages.concat(fromObjects).filter(u => u[0] !== '#');
-      } catch (e) {
-        console.log('could not parse svg content', e);
-      }
-      return urls;
+      const fromHref = Array.from(doc.querySelectorAll('image,use,link[rel="stylesheet"]')).map(
+        e => e.getAttribute('href') || e.getAttribute('xlink:href'),
+      );
+      const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
+        e.getAttribute('data'),
+      );
+      const fromStyleTags = extractResourceUrlsFromStyleTags(doc, false);
+      const fromStyleAttrs = urlsFromStyleAttrOfDoc(doc);
+
+      return fromHref
+        .concat(fromObjects)
+        .concat(fromStyleTags)
+        .concat(fromStyleAttrs)
+        .filter(u => u[0] !== '#');
     };
   }
 
+  function urlsFromStyleAttrOfDoc(doc) {
+    return flat_1(
+      Array.from(doc.querySelectorAll('*[style]'))
+        .map(e => e.style.cssText)
+        .map(getUrlFromCssText_1)
+        .filter(Boolean),
+    );
+  }
+
   var makeExtractResourcesFromSvg_1 = makeExtractResourcesFromSvg;
@@ -447,8 +493,2 @@
 
-  function flat(arr) {
-    return [].concat(...arr);
-  }
-
-  var flat_1 = flat;
-
   function makeFindStyleSheetByUrl({styleSheetCache}) {
@@ -466,17 +506,5 @@ return function findStyleSheetByUrl(url, documents) {
 
-  function getUrlFromCssText(cssText) {
-    const re = /url\((?!['"]?:)['"]?([^'")]*)['"]?\)/g;
-    const ret = [];
-    let result;
-    while ((result = re.exec(cssText)) !== null) {
-      ret.push(result[1]);
-    }
-    return ret;
-  }
-
-  var getUrlFromCssText_1 = getUrlFromCssText;
-
   function makeExtractResourcesFromStyleSheet({styleSheetCache}) {
-    return function extractResourcesFromStyleSheet(styleSheet, doc = document) {
-      const win = doc.defaultView || doc.ownerDocument.defaultView;
+    return function extractResourcesFromStyleSheet(styleSheet, doc) {
+      const win = doc.defaultView || (doc.ownerDocument && doc.ownerDocument.defaultView) || window;
       return uniq_1(
@@ -523,8 +551,8 @@ Array.from(styleSheet.cssRules || []).reduce((acc, rule) => {
   function makeExtractResourceUrlsFromStyleTags(extractResourcesFromStyleSheet) {
-    return function extractResourceUrlsFromStyleTags(doc) {
+    return function extractResourceUrlsFromStyleTags(doc, onlyDocStylesheet = true) {
       return uniq_1(
         Array.from(doc.querySelectorAll('style')).reduce((resourceUrls, styleEl) => {
-          const styleSheet = Array.from(doc.styleSheets).find(
-            styleSheet => styleSheet.ownerNode === styleEl,
-          );
+          const styleSheet = onlyDocStylesheet
+            ? Array.from(doc.styleSheets).find(styleSheet => styleSheet.ownerNode === styleEl)
+            : styleEl.sheet;
           return styleSheet
@@ -612,4 +640,8 @@ ? resourceUrls.concat(extractResourcesFromStyleSheet(styleSheet, doc))
     const extractResourcesFromStyleSheet$$1 = extractResourcesFromStyleSheet({styleSheetCache});
-    const extractResourcesFromSvg = makeExtractResourcesFromSvg_1({});
     const findStyleSheetByUrl$$1 = findStyleSheetByUrl({styleSheetCache});
+    const extractResourceUrlsFromStyleTags$$1 = extractResourceUrlsFromStyleTags(
+      extractResourcesFromStyleSheet$$1,
+    );
+
+    const extractResourcesFromSvg = makeExtractResourcesFromSvg_1({extractResourceUrlsFromStyleTags: extractResourceUrlsFromStyleTags$$1});
     const processResource$$1 = processResource({
@@ -628,6 +660,2 @@ fetchUrl: fetchUrl_1,
 
-    const extractResourceUrlsFromStyleTags$$1 = extractResourceUrlsFromStyleTags(
-      extractResourcesFromStyleSheet$$1,
-    );
-
     return doProcessPage(doc);
@@ -637,6 +665,6 @@
       const url = baesUrl || getBaseUrl(doc);
-      const {cdt, documents, canvasElements, inlineFrames} = domNodesToCdt_1(doc, url);
+      const {cdt, docRoots, canvasElements, inlineFrames} = domNodesToCdt_1(doc, url);
 
-      const linkUrls = flat_1(documents.map(extractLinks_1));
-      const styleTagUrls = flat_1(documents.map(extractResourceUrlsFromStyleTags$$1));
+      const linkUrls = flat_1(docRoots.map(extractLinks_1));
+      const styleTagUrls = flat_1(docRoots.map(extractResourceUrlsFromStyleTags$$1));
       const absolutizeThisUrl = getAbsolutizeByUrl(url);
@@ -653,6 +681,6 @@ const links = uniq_1(
 
-      const resourceUrlsAndBlobsPromise = getResourceUrlsAndBlobs$$1(documents, url, links);
+      const resourceUrlsAndBlobsPromise = getResourceUrlsAndBlobs$$1(docRoots, url, links);
       const canvasBlobs = buildCanvasBlobs_1(canvasElements);
 
-      const frameDocs = extractFrames_1(documents);
+      const frameDocs = extractFrames_1(docRoots);
       const processFramesPromise = frameDocs.map(f => doProcessPage(f, null));
@@ -659,0 +687,0 @@ const processInlineFramesPromise = inlineFrames.map(({element, url}) =>

dist/processPageAndPoll.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-snapshot@1.4.8 */
+/* @applitools/dom-snapshot@2.0.0 */
 
@@ -121,3 +121,3 @@ function __processPageAndPoll() {
     const cdt = [{nodeType: Node.DOCUMENT_NODE}];
-    const documents = [docNode];
+    const docRoots = [docNode];
     const canvasElements = [];
@@ -127,3 +127,3 @@ const inlineFrames = [];
     cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
-    return {cdt, documents, canvasElements, inlineFrames};
+    return {cdt, docRoots, canvasElements, inlineFrames};
 
@@ -166,3 +166,3 @@ function childrenFactory(cdt, elementNodes) {
             node.shadowRootIndex = elementNodeFactory(cdt, elementNode.shadowRoot);
-            documents.push(elementNode.shadowRoot);
+            docRoots.push(elementNode.shadowRoot);
           }
@@ -362,12 +362,19 @@
   function makeExtractResourcesFromStyle({extractResourcesFromStyleSheet}) {
-    return function extractResourcesFromStyle(styleSheet, cssContent, doc = document) {
+    return function extractResourcesFromStyle(cssArrayBuffer, styleSheet, doc = document) {
       let corsFreeStyleSheet;
-      try {
-        styleSheet.cssRules;
-        corsFreeStyleSheet = styleSheet;
-      } catch (e) {
-        console.log(
-          `[dom-snapshot] could not access cssRules for ${styleSheet.href} ${e}\ncreating temp style for access.`,
-        );
-        corsFreeStyleSheet = createTempStyleSheet(cssContent);
+      let cssText;
+      if (styleSheet) {
+        try {
+          styleSheet.cssRules;
+          corsFreeStyleSheet = styleSheet;
+        } catch (e) {
+          console.log(
+            `[dom-snapshot] could not access cssRules for ${styleSheet.href} ${e}\ncreating temp style for access.`,
+          );
+          cssText = new TextDecoder('utf-8').decode(cssArrayBuffer);
+          corsFreeStyleSheet = createTempStyleSheet(cssText);
+        }
+      } else {
+        cssText = new TextDecoder('utf-8').decode(cssArrayBuffer);
+        corsFreeStyleSheet = createTempStyleSheet(cssText);
       }
@@ -392,2 +399,3 @@
   }) {
+    let isFromSvgResource;
     const extractResourcesFromStyle$$1 = extractResourcesFromStyle({extractResourcesFromStyleSheet});
@@ -411,23 +419,23 @@ return function processResource(absoluteUrl, documents, baseUrl, getResourceUrlsAndBlobs) {
 
+            let result = {blobsObj: {[url]: {type, value}}};
             let resourceUrls;
-            let result = {blobsObj: {[url]: {type, value}}};
             if (/text\/css/.test(type)) {
-              const styleSheet = findStyleSheetByUrl(url, documents);
-              if (styleSheet) {
-                resourceUrls = extractResourcesFromStyle$$1(styleSheet, value, documents[0]);
+              let styleSheet = findStyleSheetByUrl(url, documents);
+              if (styleSheet || isFromSvgResource) {
+                resourceUrls = extractResourcesFromStyle$$1(value, styleSheet, documents[0]);
               }
             } else if (/image\/svg/.test(type)) {
-              resourceUrls = extractResourcesFromSvg(value);
+              try {
+                resourceUrls = extractResourcesFromSvg(value);
+                if (resourceUrls && !isFromSvgResource) {
+                  isFromSvgResource = url;
+                }
+              } catch (e) {
+                console.log('could not parse svg content', e);
+              }
             }
 
             if (resourceUrls) {
-              resourceUrls = resourceUrls
-                .map(toUnAnchoredUri_1)
-                .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
-                .filter(filterInlineUrl_1);
-              result = getResourceUrlsAndBlobs(documents, baseUrl, resourceUrls).then(
-                ({resourceUrls, blobsObj}) => ({
-                  resourceUrls,
-                  blobsObj: Object.assign(blobsObj, {[url]: {type, value}}),
-                }),
+              result = mapUrlsAndGetResult({resourceUrls, url, type, value}).then(
+                res => (res),
               );
@@ -443,8 +451,19 @@ }
 
+      function mapUrlsAndGetResult({resourceUrls, url, type, value}) {
+        const urls = resourceUrls
+          .map(toUnAnchoredUri_1)
+          .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
+          .filter(filterInlineUrl_1);
+        return getResourceUrlsAndBlobs(documents, baseUrl, urls).then(({resourceUrls, blobsObj}) => ({
+          resourceUrls,
+          blobsObj: Object.assign(blobsObj, {[url]: {type, value}}),
+        }));
+      }
+
       function probablyCORS(err) {
-        const msgCORS =
+        const msg =
           err.message &&
           (err.message.includes('Failed to fetch') || err.message.includes('Network request failed'));
-        const nameCORS = err.name && err.name.includes('TypeError');
-        return msgCORS && nameCORS;
+        const name = err.name && err.name.includes('TypeError');
+        return msg && name;
       }
@@ -456,26 +475,53 @@ };
 
-  function makeExtractResourcesFromSvg({parser, decoder}) {
+  function getUrlFromCssText(cssText) {
+    const re = /url\((?!['"]?:)['"]?([^'")]*)['"]?\)/g;
+    const ret = [];
+    let result;
+    while ((result = re.exec(cssText)) !== null) {
+      ret.push(result[1]);
+    }
+    return ret;
+  }
+
+  var getUrlFromCssText_1 = getUrlFromCssText;
+
+  function flat(arr) {
+    return [].concat(...arr);
+  }
+
+  var flat_1 = flat;
+
+  function makeExtractResourcesFromSvg({parser, decoder, extractResourceUrlsFromStyleTags}) {
     return function(svgArrayBuffer) {
-      let svgStr;
-      let urls = [];
-      try {
-        const decooder = decoder || new TextDecoder('utf-8');
-        svgStr = decooder.decode(svgArrayBuffer);
-        const domparser = parser || new DOMParser();
-        const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
+      const decooder = decoder || new TextDecoder('utf-8');
+      const svgStr = decooder.decode(svgArrayBuffer);
+      const domparser = parser || new DOMParser();
+      const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
 
-        const fromImages = Array.from(doc.getElementsByTagName('image'))
-          .concat(Array.from(doc.getElementsByTagName('use')))
-          .map(e => e.getAttribute('href') || e.getAttribute('xlink:href'));
-        const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
-          e.getAttribute('data'),
-        );
-        urls = fromImages.concat(fromObjects).filter(u => u[0] !== '#');
-      } catch (e) {
-        console.log('could not parse svg content', e);
-      }
-      return urls;
+      const fromHref = Array.from(doc.querySelectorAll('image,use,link[rel="stylesheet"]')).map(
+        e => e.getAttribute('href') || e.getAttribute('xlink:href'),
+      );
+      const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
+        e.getAttribute('data'),
+      );
+      const fromStyleTags = extractResourceUrlsFromStyleTags(doc, false);
+      const fromStyleAttrs = urlsFromStyleAttrOfDoc(doc);
+
+      return fromHref
+        .concat(fromObjects)
+        .concat(fromStyleTags)
+        .concat(fromStyleAttrs)
+        .filter(u => u[0] !== '#');
     };
   }
 
+  function urlsFromStyleAttrOfDoc(doc) {
+    return flat_1(
+      Array.from(doc.querySelectorAll('*[style]'))
+        .map(e => e.style.cssText)
+        .map(getUrlFromCssText_1)
+        .filter(Boolean),
+    );
+  }
+
   var makeExtractResourcesFromSvg_1 = makeExtractResourcesFromSvg;
@@ -499,8 +545,2 @@
 
-  function flat(arr) {
-    return [].concat(...arr);
-  }
-
-  var flat_1 = flat;
-
   function makeFindStyleSheetByUrl({styleSheetCache}) {
@@ -518,17 +558,5 @@ return function findStyleSheetByUrl(url, documents) {
 
-  function getUrlFromCssText(cssText) {
-    const re = /url\((?!['"]?:)['"]?([^'")]*)['"]?\)/g;
-    const ret = [];
-    let result;
-    while ((result = re.exec(cssText)) !== null) {
-      ret.push(result[1]);
-    }
-    return ret;
-  }
-
-  var getUrlFromCssText_1 = getUrlFromCssText;
-
   function makeExtractResourcesFromStyleSheet({styleSheetCache}) {
-    return function extractResourcesFromStyleSheet(styleSheet, doc = document) {
-      const win = doc.defaultView || doc.ownerDocument.defaultView;
+    return function extractResourcesFromStyleSheet(styleSheet, doc) {
+      const win = doc.defaultView || (doc.ownerDocument && doc.ownerDocument.defaultView) || window;
       return uniq_1(
@@ -575,8 +603,8 @@ Array.from(styleSheet.cssRules || []).reduce((acc, rule) => {
   function makeExtractResourceUrlsFromStyleTags(extractResourcesFromStyleSheet) {
-    return function extractResourceUrlsFromStyleTags(doc) {
+    return function extractResourceUrlsFromStyleTags(doc, onlyDocStylesheet = true) {
       return uniq_1(
         Array.from(doc.querySelectorAll('style')).reduce((resourceUrls, styleEl) => {
-          const styleSheet = Array.from(doc.styleSheets).find(
-            styleSheet => styleSheet.ownerNode === styleEl,
-          );
+          const styleSheet = onlyDocStylesheet
+            ? Array.from(doc.styleSheets).find(styleSheet => styleSheet.ownerNode === styleEl)
+            : styleEl.sheet;
           return styleSheet
@@ -664,4 +692,8 @@ ? resourceUrls.concat(extractResourcesFromStyleSheet(styleSheet, doc))
     const extractResourcesFromStyleSheet$$1 = extractResourcesFromStyleSheet({styleSheetCache});
-    const extractResourcesFromSvg = makeExtractResourcesFromSvg_1({});
     const findStyleSheetByUrl$$1 = findStyleSheetByUrl({styleSheetCache});
+    const extractResourceUrlsFromStyleTags$$1 = extractResourceUrlsFromStyleTags(
+      extractResourcesFromStyleSheet$$1,
+    );
+
+    const extractResourcesFromSvg = makeExtractResourcesFromSvg_1({extractResourceUrlsFromStyleTags: extractResourceUrlsFromStyleTags$$1});
     const processResource$$1 = processResource({
@@ -680,6 +712,2 @@ fetchUrl: fetchUrl_1,
 
-    const extractResourceUrlsFromStyleTags$$1 = extractResourceUrlsFromStyleTags(
-      extractResourcesFromStyleSheet$$1,
-    );
-
     return doProcessPage(doc);
@@ -689,6 +717,6 @@
       const url = baesUrl || getBaseUrl(doc);
-      const {cdt, documents, canvasElements, inlineFrames} = domNodesToCdt_1(doc, url);
+      const {cdt, docRoots, canvasElements, inlineFrames} = domNodesToCdt_1(doc, url);
 
-      const linkUrls = flat_1(documents.map(extractLinks_1));
-      const styleTagUrls = flat_1(documents.map(extractResourceUrlsFromStyleTags$$1));
+      const linkUrls = flat_1(docRoots.map(extractLinks_1));
+      const styleTagUrls = flat_1(docRoots.map(extractResourceUrlsFromStyleTags$$1));
       const absolutizeThisUrl = getAbsolutizeByUrl(url);
@@ -705,6 +733,6 @@ const links = uniq_1(
 
-      const resourceUrlsAndBlobsPromise = getResourceUrlsAndBlobs$$1(documents, url, links);
+      const resourceUrlsAndBlobsPromise = getResourceUrlsAndBlobs$$1(docRoots, url, links);
       const canvasBlobs = buildCanvasBlobs_1(canvasElements);
 
-      const frameDocs = extractFrames_1(documents);
+      const frameDocs = extractFrames_1(docRoots);
       const processFramesPromise = frameDocs.map(f => doProcessPage(f, null));
@@ -711,0 +739,0 @@ const processInlineFramesPromise = inlineFrames.map(({element, url}) =>

dist/processPageAndSerialize.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-snapshot@1.4.8 */
+/* @applitools/dom-snapshot@2.0.0 */
 
@@ -121,3 +121,3 @@ function __processPageAndSerialize() {
     const cdt = [{nodeType: Node.DOCUMENT_NODE}];
-    const documents = [docNode];
+    const docRoots = [docNode];
     const canvasElements = [];
@@ -127,3 +127,3 @@ const inlineFrames = [];
     cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
-    return {cdt, documents, canvasElements, inlineFrames};
+    return {cdt, docRoots, canvasElements, inlineFrames};
 
@@ -166,3 +166,3 @@ function childrenFactory(cdt, elementNodes) {
             node.shadowRootIndex = elementNodeFactory(cdt, elementNode.shadowRoot);
-            documents.push(elementNode.shadowRoot);
+            docRoots.push(elementNode.shadowRoot);
           }
@@ -362,12 +362,19 @@
   function makeExtractResourcesFromStyle({extractResourcesFromStyleSheet}) {
-    return function extractResourcesFromStyle(styleSheet, cssContent, doc = document) {
+    return function extractResourcesFromStyle(cssArrayBuffer, styleSheet, doc = document) {
       let corsFreeStyleSheet;
-      try {
-        styleSheet.cssRules;
-        corsFreeStyleSheet = styleSheet;
-      } catch (e) {
-        console.log(
-          `[dom-snapshot] could not access cssRules for ${styleSheet.href} ${e}\ncreating temp style for access.`,
-        );
-        corsFreeStyleSheet = createTempStyleSheet(cssContent);
+      let cssText;
+      if (styleSheet) {
+        try {
+          styleSheet.cssRules;
+          corsFreeStyleSheet = styleSheet;
+        } catch (e) {
+          console.log(
+            `[dom-snapshot] could not access cssRules for ${styleSheet.href} ${e}\ncreating temp style for access.`,
+          );
+          cssText = new TextDecoder('utf-8').decode(cssArrayBuffer);
+          corsFreeStyleSheet = createTempStyleSheet(cssText);
+        }
+      } else {
+        cssText = new TextDecoder('utf-8').decode(cssArrayBuffer);
+        corsFreeStyleSheet = createTempStyleSheet(cssText);
       }
@@ -392,2 +399,3 @@
   }) {
+    let isFromSvgResource;
     const extractResourcesFromStyle$$1 = extractResourcesFromStyle({extractResourcesFromStyleSheet});
@@ -411,23 +419,23 @@ return function processResource(absoluteUrl, documents, baseUrl, getResourceUrlsAndBlobs) {
 
+            let result = {blobsObj: {[url]: {type, value}}};
             let resourceUrls;
-            let result = {blobsObj: {[url]: {type, value}}};
             if (/text\/css/.test(type)) {
-              const styleSheet = findStyleSheetByUrl(url, documents);
-              if (styleSheet) {
-                resourceUrls = extractResourcesFromStyle$$1(styleSheet, value, documents[0]);
+              let styleSheet = findStyleSheetByUrl(url, documents);
+              if (styleSheet || isFromSvgResource) {
+                resourceUrls = extractResourcesFromStyle$$1(value, styleSheet, documents[0]);
               }
             } else if (/image\/svg/.test(type)) {
-              resourceUrls = extractResourcesFromSvg(value);
+              try {
+                resourceUrls = extractResourcesFromSvg(value);
+                if (resourceUrls && !isFromSvgResource) {
+                  isFromSvgResource = url;
+                }
+              } catch (e) {
+                console.log('could not parse svg content', e);
+              }
             }
 
             if (resourceUrls) {
-              resourceUrls = resourceUrls
-                .map(toUnAnchoredUri_1)
-                .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
-                .filter(filterInlineUrl_1);
-              result = getResourceUrlsAndBlobs(documents, baseUrl, resourceUrls).then(
-                ({resourceUrls, blobsObj}) => ({
-                  resourceUrls,
-                  blobsObj: Object.assign(blobsObj, {[url]: {type, value}}),
-                }),
+              result = mapUrlsAndGetResult({resourceUrls, url, type, value}).then(
+                res => (res),
               );
@@ -443,8 +451,19 @@ }
 
+      function mapUrlsAndGetResult({resourceUrls, url, type, value}) {
+        const urls = resourceUrls
+          .map(toUnAnchoredUri_1)
+          .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
+          .filter(filterInlineUrl_1);
+        return getResourceUrlsAndBlobs(documents, baseUrl, urls).then(({resourceUrls, blobsObj}) => ({
+          resourceUrls,
+          blobsObj: Object.assign(blobsObj, {[url]: {type, value}}),
+        }));
+      }
+
       function probablyCORS(err) {
-        const msgCORS =
+        const msg =
           err.message &&
           (err.message.includes('Failed to fetch') || err.message.includes('Network request failed'));
-        const nameCORS = err.name && err.name.includes('TypeError');
-        return msgCORS && nameCORS;
+        const name = err.name && err.name.includes('TypeError');
+        return msg && name;
       }
@@ -456,26 +475,53 @@ };
 
-  function makeExtractResourcesFromSvg({parser, decoder}) {
+  function getUrlFromCssText(cssText) {
+    const re = /url\((?!['"]?:)['"]?([^'")]*)['"]?\)/g;
+    const ret = [];
+    let result;
+    while ((result = re.exec(cssText)) !== null) {
+      ret.push(result[1]);
+    }
+    return ret;
+  }
+
+  var getUrlFromCssText_1 = getUrlFromCssText;
+
+  function flat(arr) {
+    return [].concat(...arr);
+  }
+
+  var flat_1 = flat;
+
+  function makeExtractResourcesFromSvg({parser, decoder, extractResourceUrlsFromStyleTags}) {
     return function(svgArrayBuffer) {
-      let svgStr;
-      let urls = [];
-      try {
-        const decooder = decoder || new TextDecoder('utf-8');
-        svgStr = decooder.decode(svgArrayBuffer);
-        const domparser = parser || new DOMParser();
-        const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
+      const decooder = decoder || new TextDecoder('utf-8');
+      const svgStr = decooder.decode(svgArrayBuffer);
+      const domparser = parser || new DOMParser();
+      const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
 
-        const fromImages = Array.from(doc.getElementsByTagName('image'))
-          .concat(Array.from(doc.getElementsByTagName('use')))
-          .map(e => e.getAttribute('href') || e.getAttribute('xlink:href'));
-        const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
-          e.getAttribute('data'),
-        );
-        urls = fromImages.concat(fromObjects).filter(u => u[0] !== '#');
-      } catch (e) {
-        console.log('could not parse svg content', e);
-      }
-      return urls;
+      const fromHref = Array.from(doc.querySelectorAll('image,use,link[rel="stylesheet"]')).map(
+        e => e.getAttribute('href') || e.getAttribute('xlink:href'),
+      );
+      const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
+        e.getAttribute('data'),
+      );
+      const fromStyleTags = extractResourceUrlsFromStyleTags(doc, false);
+      const fromStyleAttrs = urlsFromStyleAttrOfDoc(doc);
+
+      return fromHref
+        .concat(fromObjects)
+        .concat(fromStyleTags)
+        .concat(fromStyleAttrs)
+        .filter(u => u[0] !== '#');
     };
   }
 
+  function urlsFromStyleAttrOfDoc(doc) {
+    return flat_1(
+      Array.from(doc.querySelectorAll('*[style]'))
+        .map(e => e.style.cssText)
+        .map(getUrlFromCssText_1)
+        .filter(Boolean),
+    );
+  }
+
   var makeExtractResourcesFromSvg_1 = makeExtractResourcesFromSvg;
@@ -499,8 +545,2 @@
 
-  function flat(arr) {
-    return [].concat(...arr);
-  }
-
-  var flat_1 = flat;
-
   function makeFindStyleSheetByUrl({styleSheetCache}) {
@@ -518,17 +558,5 @@ return function findStyleSheetByUrl(url, documents) {
 
-  function getUrlFromCssText(cssText) {
-    const re = /url\((?!['"]?:)['"]?([^'")]*)['"]?\)/g;
-    const ret = [];
-    let result;
-    while ((result = re.exec(cssText)) !== null) {
-      ret.push(result[1]);
-    }
-    return ret;
-  }
-
-  var getUrlFromCssText_1 = getUrlFromCssText;
-
   function makeExtractResourcesFromStyleSheet({styleSheetCache}) {
-    return function extractResourcesFromStyleSheet(styleSheet, doc = document) {
-      const win = doc.defaultView || doc.ownerDocument.defaultView;
+    return function extractResourcesFromStyleSheet(styleSheet, doc) {
+      const win = doc.defaultView || (doc.ownerDocument && doc.ownerDocument.defaultView) || window;
       return uniq_1(
@@ -575,8 +603,8 @@ Array.from(styleSheet.cssRules || []).reduce((acc, rule) => {
   function makeExtractResourceUrlsFromStyleTags(extractResourcesFromStyleSheet) {
-    return function extractResourceUrlsFromStyleTags(doc) {
+    return function extractResourceUrlsFromStyleTags(doc, onlyDocStylesheet = true) {
       return uniq_1(
         Array.from(doc.querySelectorAll('style')).reduce((resourceUrls, styleEl) => {
-          const styleSheet = Array.from(doc.styleSheets).find(
-            styleSheet => styleSheet.ownerNode === styleEl,
-          );
+          const styleSheet = onlyDocStylesheet
+            ? Array.from(doc.styleSheets).find(styleSheet => styleSheet.ownerNode === styleEl)
+            : styleEl.sheet;
           return styleSheet
@@ -664,4 +692,8 @@ ? resourceUrls.concat(extractResourcesFromStyleSheet(styleSheet, doc))
     const extractResourcesFromStyleSheet$$1 = extractResourcesFromStyleSheet({styleSheetCache});
-    const extractResourcesFromSvg = makeExtractResourcesFromSvg_1({});
     const findStyleSheetByUrl$$1 = findStyleSheetByUrl({styleSheetCache});
+    const extractResourceUrlsFromStyleTags$$1 = extractResourceUrlsFromStyleTags(
+      extractResourcesFromStyleSheet$$1,
+    );
+
+    const extractResourcesFromSvg = makeExtractResourcesFromSvg_1({extractResourceUrlsFromStyleTags: extractResourceUrlsFromStyleTags$$1});
     const processResource$$1 = processResource({
@@ -680,6 +712,2 @@ fetchUrl: fetchUrl_1,
 
-    const extractResourceUrlsFromStyleTags$$1 = extractResourceUrlsFromStyleTags(
-      extractResourcesFromStyleSheet$$1,
-    );
-
     return doProcessPage(doc);
@@ -689,6 +717,6 @@
       const url = baesUrl || getBaseUrl(doc);
-      const {cdt, documents, canvasElements, inlineFrames} = domNodesToCdt_1(doc, url);
+      const {cdt, docRoots, canvasElements, inlineFrames} = domNodesToCdt_1(doc, url);
 
-      const linkUrls = flat_1(documents.map(extractLinks_1));
-      const styleTagUrls = flat_1(documents.map(extractResourceUrlsFromStyleTags$$1));
+      const linkUrls = flat_1(docRoots.map(extractLinks_1));
+      const styleTagUrls = flat_1(docRoots.map(extractResourceUrlsFromStyleTags$$1));
       const absolutizeThisUrl = getAbsolutizeByUrl(url);
@@ -705,6 +733,6 @@ const links = uniq_1(
 
-      const resourceUrlsAndBlobsPromise = getResourceUrlsAndBlobs$$1(documents, url, links);
+      const resourceUrlsAndBlobsPromise = getResourceUrlsAndBlobs$$1(docRoots, url, links);
       const canvasBlobs = buildCanvasBlobs_1(canvasElements);
 
-      const frameDocs = extractFrames_1(documents);
+      const frameDocs = extractFrames_1(docRoots);
       const processFramesPromise = frameDocs.map(f => doProcessPage(f, null));
@@ -711,0 +739,0 @@ const processInlineFramesPromise = inlineFrames.map(({element, url}) =>

dist/processPageCjs.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-snapshot@1.4.8 */
+/* @applitools/dom-snapshot@2.0.0 */
 'use strict';
@@ -66,3 +66,3 @@
   const cdt = [{nodeType: Node.DOCUMENT_NODE}];
-  const documents = [docNode];
+  const docRoots = [docNode];
   const canvasElements = [];
@@ -72,3 +72,3 @@ const inlineFrames = [];
   cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
-  return {cdt, documents, canvasElements, inlineFrames};
+  return {cdt, docRoots, canvasElements, inlineFrames};
 
@@ -111,3 +111,3 @@ function childrenFactory(cdt, elementNodes) {
           node.shadowRootIndex = elementNodeFactory(cdt, elementNode.shadowRoot);
-          documents.push(elementNode.shadowRoot);
+          docRoots.push(elementNode.shadowRoot);
         }
@@ -307,12 +307,19 @@
 function makeExtractResourcesFromStyle({extractResourcesFromStyleSheet}) {
-  return function extractResourcesFromStyle(styleSheet, cssContent, doc = document) {
+  return function extractResourcesFromStyle(cssArrayBuffer, styleSheet, doc = document) {
     let corsFreeStyleSheet;
-    try {
-      styleSheet.cssRules;
-      corsFreeStyleSheet = styleSheet;
-    } catch (e) {
-      console.log(
-        `[dom-snapshot] could not access cssRules for ${styleSheet.href} ${e}\ncreating temp style for access.`,
-      );
-      corsFreeStyleSheet = createTempStyleSheet(cssContent);
+    let cssText;
+    if (styleSheet) {
+      try {
+        styleSheet.cssRules;
+        corsFreeStyleSheet = styleSheet;
+      } catch (e) {
+        console.log(
+          `[dom-snapshot] could not access cssRules for ${styleSheet.href} ${e}\ncreating temp style for access.`,
+        );
+        cssText = new TextDecoder('utf-8').decode(cssArrayBuffer);
+        corsFreeStyleSheet = createTempStyleSheet(cssText);
+      }
+    } else {
+      cssText = new TextDecoder('utf-8').decode(cssArrayBuffer);
+      corsFreeStyleSheet = createTempStyleSheet(cssText);
     }
@@ -337,2 +344,3 @@
 }) {
+  let isFromSvgResource;
   const extractResourcesFromStyle$$1 = extractResourcesFromStyle({extractResourcesFromStyleSheet});
@@ -356,23 +364,23 @@ return function processResource(absoluteUrl, documents, baseUrl, getResourceUrlsAndBlobs) {
 
+          let result = {blobsObj: {[url]: {type, value}}};
           let resourceUrls;
-          let result = {blobsObj: {[url]: {type, value}}};
           if (/text\/css/.test(type)) {
-            const styleSheet = findStyleSheetByUrl(url, documents);
-            if (styleSheet) {
-              resourceUrls = extractResourcesFromStyle$$1(styleSheet, value, documents[0]);
+            let styleSheet = findStyleSheetByUrl(url, documents);
+            if (styleSheet || isFromSvgResource) {
+              resourceUrls = extractResourcesFromStyle$$1(value, styleSheet, documents[0]);
             }
           } else if (/image\/svg/.test(type)) {
-            resourceUrls = extractResourcesFromSvg(value);
+            try {
+              resourceUrls = extractResourcesFromSvg(value);
+              if (resourceUrls && !isFromSvgResource) {
+                isFromSvgResource = url;
+              }
+            } catch (e) {
+              console.log('could not parse svg content', e);
+            }
           }
 
           if (resourceUrls) {
-            resourceUrls = resourceUrls
-              .map(toUnAnchoredUri_1)
-              .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
-              .filter(filterInlineUrl_1);
-            result = getResourceUrlsAndBlobs(documents, baseUrl, resourceUrls).then(
-              ({resourceUrls, blobsObj}) => ({
-                resourceUrls,
-                blobsObj: Object.assign(blobsObj, {[url]: {type, value}}),
-              }),
+            result = mapUrlsAndGetResult({resourceUrls, url, type, value}).then(
+              res => (res),
             );
@@ -388,8 +396,19 @@ }
 
+    function mapUrlsAndGetResult({resourceUrls, url, type, value}) {
+      const urls = resourceUrls
+        .map(toUnAnchoredUri_1)
+        .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
+        .filter(filterInlineUrl_1);
+      return getResourceUrlsAndBlobs(documents, baseUrl, urls).then(({resourceUrls, blobsObj}) => ({
+        resourceUrls,
+        blobsObj: Object.assign(blobsObj, {[url]: {type, value}}),
+      }));
+    }
+
     function probablyCORS(err) {
-      const msgCORS =
+      const msg =
         err.message &&
         (err.message.includes('Failed to fetch') || err.message.includes('Network request failed'));
-      const nameCORS = err.name && err.name.includes('TypeError');
-      return msgCORS && nameCORS;
+      const name = err.name && err.name.includes('TypeError');
+      return msg && name;
     }
@@ -401,26 +420,53 @@ };
 
-function makeExtractResourcesFromSvg({parser, decoder}) {
+function getUrlFromCssText(cssText) {
+  const re = /url\((?!['"]?:)['"]?([^'")]*)['"]?\)/g;
+  const ret = [];
+  let result;
+  while ((result = re.exec(cssText)) !== null) {
+    ret.push(result[1]);
+  }
+  return ret;
+}
+
+var getUrlFromCssText_1 = getUrlFromCssText;
+
+function flat(arr) {
+  return [].concat(...arr);
+}
+
+var flat_1 = flat;
+
+function makeExtractResourcesFromSvg({parser, decoder, extractResourceUrlsFromStyleTags}) {
   return function(svgArrayBuffer) {
-    let svgStr;
-    let urls = [];
-    try {
-      const decooder = decoder || new TextDecoder('utf-8');
-      svgStr = decooder.decode(svgArrayBuffer);
-      const domparser = parser || new DOMParser();
-      const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
+    const decooder = decoder || new TextDecoder('utf-8');
+    const svgStr = decooder.decode(svgArrayBuffer);
+    const domparser = parser || new DOMParser();
+    const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
 
-      const fromImages = Array.from(doc.getElementsByTagName('image'))
-        .concat(Array.from(doc.getElementsByTagName('use')))
-        .map(e => e.getAttribute('href') || e.getAttribute('xlink:href'));
-      const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
-        e.getAttribute('data'),
-      );
-      urls = fromImages.concat(fromObjects).filter(u => u[0] !== '#');
-    } catch (e) {
-      console.log('could not parse svg content', e);
-    }
-    return urls;
+    const fromHref = Array.from(doc.querySelectorAll('image,use,link[rel="stylesheet"]')).map(
+      e => e.getAttribute('href') || e.getAttribute('xlink:href'),
+    );
+    const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
+      e.getAttribute('data'),
+    );
+    const fromStyleTags = extractResourceUrlsFromStyleTags(doc, false);
+    const fromStyleAttrs = urlsFromStyleAttrOfDoc(doc);
+
+    return fromHref
+      .concat(fromObjects)
+      .concat(fromStyleTags)
+      .concat(fromStyleAttrs)
+      .filter(u => u[0] !== '#');
   };
 }
 
+function urlsFromStyleAttrOfDoc(doc) {
+  return flat_1(
+    Array.from(doc.querySelectorAll('*[style]'))
+      .map(e => e.style.cssText)
+      .map(getUrlFromCssText_1)
+      .filter(Boolean),
+  );
+}
+
 var makeExtractResourcesFromSvg_1 = makeExtractResourcesFromSvg;
@@ -444,8 +490,2 @@
 
-function flat(arr) {
-  return [].concat(...arr);
-}
-
-var flat_1 = flat;
-
 function makeFindStyleSheetByUrl({styleSheetCache}) {
@@ -463,17 +503,5 @@ return function findStyleSheetByUrl(url, documents) {
 
-function getUrlFromCssText(cssText) {
-  const re = /url\((?!['"]?:)['"]?([^'")]*)['"]?\)/g;
-  const ret = [];
-  let result;
-  while ((result = re.exec(cssText)) !== null) {
-    ret.push(result[1]);
-  }
-  return ret;
-}
-
-var getUrlFromCssText_1 = getUrlFromCssText;
-
 function makeExtractResourcesFromStyleSheet({styleSheetCache}) {
-  return function extractResourcesFromStyleSheet(styleSheet, doc = document) {
-    const win = doc.defaultView || doc.ownerDocument.defaultView;
+  return function extractResourcesFromStyleSheet(styleSheet, doc) {
+    const win = doc.defaultView || (doc.ownerDocument && doc.ownerDocument.defaultView) || window;
     return uniq_1(
@@ -520,8 +548,8 @@ Array.from(styleSheet.cssRules || []).reduce((acc, rule) => {
 function makeExtractResourceUrlsFromStyleTags(extractResourcesFromStyleSheet) {
-  return function extractResourceUrlsFromStyleTags(doc) {
+  return function extractResourceUrlsFromStyleTags(doc, onlyDocStylesheet = true) {
     return uniq_1(
       Array.from(doc.querySelectorAll('style')).reduce((resourceUrls, styleEl) => {
-        const styleSheet = Array.from(doc.styleSheets).find(
-          styleSheet => styleSheet.ownerNode === styleEl,
-        );
+        const styleSheet = onlyDocStylesheet
+          ? Array.from(doc.styleSheets).find(styleSheet => styleSheet.ownerNode === styleEl)
+          : styleEl.sheet;
         return styleSheet
@@ -609,4 +637,8 @@ ? resourceUrls.concat(extractResourcesFromStyleSheet(styleSheet, doc))
   const extractResourcesFromStyleSheet$$1 = extractResourcesFromStyleSheet({styleSheetCache});
-  const extractResourcesFromSvg = makeExtractResourcesFromSvg_1({});
   const findStyleSheetByUrl$$1 = findStyleSheetByUrl({styleSheetCache});
+  const extractResourceUrlsFromStyleTags$$1 = extractResourceUrlsFromStyleTags(
+    extractResourcesFromStyleSheet$$1,
+  );
+
+  const extractResourcesFromSvg = makeExtractResourcesFromSvg_1({extractResourceUrlsFromStyleTags: extractResourceUrlsFromStyleTags$$1});
   const processResource$$1 = processResource({
@@ -625,6 +657,2 @@ fetchUrl: fetchUrl_1,
 
-  const extractResourceUrlsFromStyleTags$$1 = extractResourceUrlsFromStyleTags(
-    extractResourcesFromStyleSheet$$1,
-  );
-
   return doProcessPage(doc);
@@ -634,6 +662,6 @@
     const url = baesUrl || getBaseUrl(doc);
-    const {cdt, documents, canvasElements, inlineFrames} = domNodesToCdt_1(doc, url);
+    const {cdt, docRoots, canvasElements, inlineFrames} = domNodesToCdt_1(doc, url);
 
-    const linkUrls = flat_1(documents.map(extractLinks_1));
-    const styleTagUrls = flat_1(documents.map(extractResourceUrlsFromStyleTags$$1));
+    const linkUrls = flat_1(docRoots.map(extractLinks_1));
+    const styleTagUrls = flat_1(docRoots.map(extractResourceUrlsFromStyleTags$$1));
     const absolutizeThisUrl = getAbsolutizeByUrl(url);
@@ -650,6 +678,6 @@ const links = uniq_1(
 
-    const resourceUrlsAndBlobsPromise = getResourceUrlsAndBlobs$$1(documents, url, links);
+    const resourceUrlsAndBlobsPromise = getResourceUrlsAndBlobs$$1(docRoots, url, links);
     const canvasBlobs = buildCanvasBlobs_1(canvasElements);
 
-    const frameDocs = extractFrames_1(documents);
+    const frameDocs = extractFrames_1(docRoots);
     const processFramesPromise = frameDocs.map(f => doProcessPage(f, null));
@@ -656,0 +684,0 @@ const processInlineFramesPromise = inlineFrames.map(({element, url}) =>

package.json

 {
   "name": "@applitools/dom-snapshot",
-  "version": "1.4.9",
+  "version": "2.0.1",
   "main": "index.js",
@@ -52,4 +52,3 @@ "license": "MIT",
     "url-polyfill": "^1.1.5",
-    "whatwg-fetch": "^3.0.0",
-    "xmldom": "^0.1.27"
+    "whatwg-fetch": "^3.0.0"
   },
@@ -56,0 +55,0 @@ "dependencies": {

src/browser/domNodesToCdt.js

@@ -9,3 +9,3 @@ /* eslint-disable no-use-before-define */
   const cdt = [{nodeType: Node.DOCUMENT_NODE}];
-  const documents = [docNode];
+  const docRoots = [docNode];
   const canvasElements = [];
@@ -15,3 +15,3 @@ const inlineFrames = [];
   cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
-  return {cdt, documents, canvasElements, inlineFrames};
+  return {cdt, docRoots, canvasElements, inlineFrames};
 
@@ -54,3 +54,3 @@ function childrenFactory(cdt, elementNodes) {
           node.shadowRootIndex = elementNodeFactory(cdt, elementNode.shadowRoot);
-          documents.push(elementNode.shadowRoot);
+          docRoots.push(elementNode.shadowRoot);
         }
@@ -57,0 +57,0 @@

src/browser/extractResourcesFromStyle.js

@@ -5,12 +5,19 @@ 'use strict';
 function makeExtractResourcesFromStyle({extractResourcesFromStyleSheet}) {
-  return function extractResourcesFromStyle(styleSheet, cssContent, doc = document) {
+  return function extractResourcesFromStyle(cssArrayBuffer, styleSheet, doc = document) {
     let corsFreeStyleSheet;
-    try {
-      styleSheet.cssRules;
-      corsFreeStyleSheet = styleSheet;
-    } catch (e) {
-      console.log(
-        `[dom-snapshot] could not access cssRules for ${styleSheet.href} ${e}\ncreating temp style for access.`,
-      );
-      corsFreeStyleSheet = createTempStyleSheet(cssContent);
+    let cssText;
+    if (styleSheet) {
+      try {
+        styleSheet.cssRules;
+        corsFreeStyleSheet = styleSheet;
+      } catch (e) {
+        console.log(
+          `[dom-snapshot] could not access cssRules for ${styleSheet.href} ${e}\ncreating temp style for access.`,
+        );
+        cssText = new TextDecoder('utf-8').decode(cssArrayBuffer);
+        corsFreeStyleSheet = createTempStyleSheet(cssText);
+      }
+    } else {
+      cssText = new TextDecoder('utf-8').decode(cssArrayBuffer);
+      corsFreeStyleSheet = createTempStyleSheet(cssText);
     }
@@ -17,0 +24,0 @@

src/browser/extractResourcesFromStyleSheet.js

@@ -6,4 +6,4 @@ 'use strict';
 function makeExtractResourcesFromStyleSheet({styleSheetCache}) {
-  return function extractResourcesFromStyleSheet(styleSheet, doc = document) {
-    const win = doc.defaultView || doc.ownerDocument.defaultView;
+  return function extractResourcesFromStyleSheet(styleSheet, doc) {
+    const win = doc.defaultView || (doc.ownerDocument && doc.ownerDocument.defaultView) || window;
     return uniq(
@@ -10,0 +10,0 @@ Array.from(styleSheet.cssRules || []).reduce((acc, rule) => {

src/browser/extractResourceUrlsFromStyleTags.js

@@ -5,8 +5,8 @@ 'use strict';
 function makeExtractResourceUrlsFromStyleTags(extractResourcesFromStyleSheet) {
-  return function extractResourceUrlsFromStyleTags(doc) {
+  return function extractResourceUrlsFromStyleTags(doc, onlyDocStylesheet = true) {
     return uniq(
       Array.from(doc.querySelectorAll('style')).reduce((resourceUrls, styleEl) => {
-        const styleSheet = Array.from(doc.styleSheets).find(
-          styleSheet => styleSheet.ownerNode === styleEl,
-        );
+        const styleSheet = onlyDocStylesheet
+          ? Array.from(doc.styleSheets).find(styleSheet => styleSheet.ownerNode === styleEl)
+          : styleEl.sheet;
         return styleSheet
@@ -13,0 +13,0 @@ ? resourceUrls.concat(extractResourcesFromStyleSheet(styleSheet, doc))

src/browser/makeExtractResourcesFromSvg.js

 'use strict';
+const getUrlFromCssText = require('./getUrlFromCssText');
+const flat = require('./flat');
 
-function makeExtractResourcesFromSvg({parser, decoder}) {
+function makeExtractResourcesFromSvg({parser, decoder, extractResourceUrlsFromStyleTags}) {
   return function(svgArrayBuffer) {
-    let svgStr;
-    let urls = [];
-    try {
-      const decooder = decoder || new TextDecoder('utf-8');
-      svgStr = decooder.decode(svgArrayBuffer);
-      const domparser = parser || new DOMParser();
-      const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
+    const decooder = decoder || new TextDecoder('utf-8');
+    const svgStr = decooder.decode(svgArrayBuffer);
+    const domparser = parser || new DOMParser();
+    const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
 
-      const fromImages = Array.from(doc.getElementsByTagName('image'))
-        .concat(Array.from(doc.getElementsByTagName('use')))
-        .map(e => e.getAttribute('href') || e.getAttribute('xlink:href'));
-      const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
-        e.getAttribute('data'),
-      );
-      urls = fromImages.concat(fromObjects).filter(u => u[0] !== '#');
-    } catch (e) {
-      console.log('could not parse svg content', e);
-    }
-    return urls;
+    const fromHref = Array.from(doc.querySelectorAll('image,use,link[rel="stylesheet"]')).map(
+      e => e.getAttribute('href') || e.getAttribute('xlink:href'),
+    );
+    const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
+      e.getAttribute('data'),
+    );
+    const fromStyleTags = extractResourceUrlsFromStyleTags(doc, false);
+    const fromStyleAttrs = urlsFromStyleAttrOfDoc(doc);
+
+    return fromHref
+      .concat(fromObjects)
+      .concat(fromStyleTags)
+      .concat(fromStyleAttrs)
+      .filter(u => u[0] !== '#');
   };
 }
 
+function urlsFromStyleAttrOfDoc(doc) {
+  return flat(
+    Array.from(doc.querySelectorAll('*[style]'))
+      .map(e => e.style.cssText)
+      .map(getUrlFromCssText)
+      .filter(Boolean),
+  );
+}
+
 module.exports = makeExtractResourcesFromSvg;

src/browser/processPage.js

@@ -26,4 +26,8 @@ 'use strict';
   const extractResourcesFromStyleSheet = makeExtractResourcesFromStyleSheet({styleSheetCache});
-  const extractResourcesFromSvg = makeExtractResourcesFromSvg({});
   const findStyleSheetByUrl = makeFindStyleSheetByUrl({styleSheetCache});
+  const extractResourceUrlsFromStyleTags = makeExtractResourceUrlsFromStyleTags(
+    extractResourcesFromStyleSheet,
+  );
+
+  const extractResourcesFromSvg = makeExtractResourcesFromSvg({extractResourceUrlsFromStyleTags});
   const processResource = makeProcessResource({
@@ -42,6 +46,2 @@ fetchUrl,
 
-  const extractResourceUrlsFromStyleTags = makeExtractResourceUrlsFromStyleTags(
-    extractResourcesFromStyleSheet,
-  );
-
   return doProcessPage(doc);
@@ -51,6 +51,6 @@
     const url = baesUrl || getBaesUrl(doc);
-    const {cdt, documents, canvasElements, inlineFrames} = domNodesToCdt(doc, url);
+    const {cdt, docRoots, canvasElements, inlineFrames} = domNodesToCdt(doc, url);
 
-    const linkUrls = flat(documents.map(extractLinks));
-    const styleTagUrls = flat(documents.map(extractResourceUrlsFromStyleTags));
+    const linkUrls = flat(docRoots.map(extractLinks));
+    const styleTagUrls = flat(docRoots.map(extractResourceUrlsFromStyleTags));
     const absolutizeThisUrl = getAbsolutizeByUrl(url);
@@ -67,6 +67,6 @@ const links = uniq(
 
-    const resourceUrlsAndBlobsPromise = getResourceUrlsAndBlobs(documents, url, links);
+    const resourceUrlsAndBlobsPromise = getResourceUrlsAndBlobs(docRoots, url, links);
     const canvasBlobs = buildCanvasBlobs(canvasElements);
 
-    const frameDocs = extractFrames(documents);
+    const frameDocs = extractFrames(docRoots);
     const processFramesPromise = frameDocs.map(f => doProcessPage(f, null));
@@ -73,0 +73,0 @@ const processInlineFramesPromise = inlineFrames.map(({element, url}) =>

src/browser/processResource.js

@@ -14,2 +14,3 @@ 'use strict';
 }) {
+  let isFromSvgResource;
   const extractResourcesFromStyle = makeExtractResourcesFromStyle({extractResourcesFromStyleSheet});
@@ -33,23 +34,23 @@ return function processResource(absoluteUrl, documents, baseUrl, getResourceUrlsAndBlobs) {
 
+          let result = {blobsObj: {[url]: {type, value}}};
           let resourceUrls;
-          let result = {blobsObj: {[url]: {type, value}}};
           if (/text\/css/.test(type)) {
-            const styleSheet = findStyleSheetByUrl(url, documents);
-            if (styleSheet) {
-              resourceUrls = extractResourcesFromStyle(styleSheet, value, documents[0]);
+            let styleSheet = findStyleSheetByUrl(url, documents);
+            if (styleSheet || isFromSvgResource) {
+              resourceUrls = extractResourcesFromStyle(value, styleSheet, documents[0]);
             }
           } else if (/image\/svg/.test(type)) {
-            resourceUrls = extractResourcesFromSvg(value);
+            try {
+              resourceUrls = extractResourcesFromSvg(value);
+              if (resourceUrls && !isFromSvgResource) {
+                isFromSvgResource = url;
+              }
+            } catch (e) {
+              console.log('could not parse svg content', e);
+            }
           }
 
           if (resourceUrls) {
-            resourceUrls = resourceUrls
-              .map(toUnAnchoredUri)
-              .map(resourceUrl => absolutizeUrl(resourceUrl, url.replace(/^blob:/, '')))
-              .filter(filterInlineUrl);
-            result = getResourceUrlsAndBlobs(documents, baseUrl, resourceUrls).then(
-              ({resourceUrls, blobsObj}) => ({
-                resourceUrls,
-                blobsObj: Object.assign(blobsObj, {[url]: {type, value}}),
-              }),
+            result = mapUrlsAndGetResult({resourceUrls, url, type, value}).then(
+              res => (isFromSvgResource === url ? false : isFromSvgResource, res),
             );
@@ -65,8 +66,19 @@ }
 
+    function mapUrlsAndGetResult({resourceUrls, url, type, value}) {
+      const urls = resourceUrls
+        .map(toUnAnchoredUri)
+        .map(resourceUrl => absolutizeUrl(resourceUrl, url.replace(/^blob:/, '')))
+        .filter(filterInlineUrl);
+      return getResourceUrlsAndBlobs(documents, baseUrl, urls).then(({resourceUrls, blobsObj}) => ({
+        resourceUrls,
+        blobsObj: Object.assign(blobsObj, {[url]: {type, value}}),
+      }));
+    }
+
     function probablyCORS(err) {
-      const msgCORS =
+      const msg =
         err.message &&
         (err.message.includes('Failed to fetch') || err.message.includes('Network request failed'));
-      const nameCORS = err.name && err.name.includes('TypeError');
-      return msgCORS && nameCORS;
+      const name = err.name && err.name.includes('TypeError');
+      return msg && name;
     }
@@ -73,0 +85,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

586958

increased by1.21%

Dev dependency count

28

decreased by-3.45%

Lines of code

12477

increased by1.29%

No dependency changes