@percy/dom 1.31.1 → 1.31.2-beta.1

package/README.md

@@ -65,7 +65,7 @@ to a new stylesheet inserted into the document's head.
 Canvas elements' drawing buffers are serialized as data URIs and the canvas elements are replaced
 with image elements. The image elements reference the serialized data URI and have the same HTML
 attributes as their respective canvas elements. The image elements also have a max-width of 100% to
-accomidate responsive layouts in situations where canvases may be expected to resize with JS.
+accommodate responsive layouts in situations where canvases may be expected to resize with JS.
 
 ### Video elements
 

package/dist/bundle.js

@@ -336,14 +336,50 @@
       }
     }
 
+    // Helper function to create and insert image element
+    function createAndInsertImageElement(canvas, clone, percyElementId, imageUrl) {
+      let img = document.createElement('img');
+
+      // copy canvas element attributes to the image element
+      for (let {
+        name,
+        value
+      } of canvas.attributes) {
+        img.setAttribute(name, value);
+      }
+
+      // mark the image as serialized and set src attribute
+      img.setAttribute('data-percy-canvas-serialized', '');
+      img.setAttribute('data-percy-serialized-attribute-src', imageUrl);
+
+      // set a default max width to account for canvases that might resize with JS
+      img.style.maxWidth = img.style.maxWidth || '100%';
+
+      // insert the image into the cloned DOM and remove the cloned canvas element
+      let cloneEl = clone.querySelector(`[data-percy-element-id=${percyElementId}]`);
+      if (!cloneEl) {
+        throw new Error(`Clone element not found for percy-element-id: ${percyElementId}`);
+      }
+
+      // `parentElement` for elements directly under shadow root is `null` -> Incase of Nested Shadow DOM.
+      if (cloneEl.parentElement) {
+        cloneEl.parentElement.insertBefore(img, cloneEl);
+      } else {
+        clone.insertBefore(img, cloneEl);
+      }
+      cloneEl.remove();
+    }
+
     // Serialize in-memory canvas elements into images.
     function serializeCanvas(ctx) {
       let {
         dom,
         clone,
-        resources
+        resources,
+        ignoreCanvasSerializationErrors
       } = ctx;
       for (let canvas of dom.querySelectorAll('canvas')) {
+        let percyElementId = canvas.getAttribute('data-percy-element-id');
         try {
           // Note: the `.toDataURL` API requires WebGL canvas elements to use
           // `preserveDrawingBuffer: true`. This is because `.toDataURL` uses the
@@ -353,41 +389,25 @@
           // skip empty canvases
           if (!dataUrl || dataUrl === 'data:,') continue;
 
-          // get the element's percy id and create a resource for it
-          let percyElementId = canvas.getAttribute('data-percy-element-id');
+          // create a resource for the canvas data
           let resource = resourceFromDataURL(percyElementId, dataUrl);
           resources.add(resource);
 
-          // create an image element in the cloned dom
-          let img = document.createElement('img');
-          // use a data attribute to avoid making a real request
-          img.setAttribute('data-percy-serialized-attribute-src', resource.url);
-
-          // copy canvas element attributes to the image element such as style, class,
-          // or data attributes that may be targeted by CSS
-          for (let {
-            name,
-            value
-          } of canvas.attributes) {
-            img.setAttribute(name, value);
-          }
-
-          // mark the image as serialized (can be targeted by CSS)
-          img.setAttribute('data-percy-canvas-serialized', '');
-          // set a default max width to account for canvases that might resize with JS
-          img.style.maxWidth = img.style.maxWidth || '100%';
-
-          // insert the image into the cloned DOM and remove the cloned canvas element
-          let cloneEl = clone.querySelector(`[data-percy-element-id=${percyElementId}]`);
-          // `parentElement` for elements directly under shadow root is `null` -> Incase of Nested Shadow DOM.
-          if (cloneEl.parentElement) {
-            cloneEl.parentElement.insertBefore(img, cloneEl);
+          // create and insert image element with the resource URL
+          createAndInsertImageElement(canvas, clone, percyElementId, resource.url);
+        } catch (err) {
+          if (ignoreCanvasSerializationErrors) {
+            try {
+              // create and insert image element with empty src
+              ctx.warnings.add('Canvas Serialization failed, Replaced canvas with empty Image');
+              ctx.warnings.add('Error: ' + err.message);
+              createAndInsertImageElement(canvas, clone, percyElementId, '');
+            } catch (fallbackErr) {
+              ctx.warnings.add('Error creating fallback image element: ' + fallbackErr.message);
+            }
           } else {
-            clone.insertBefore(img, cloneEl);
+            handleErrors(err, 'Error serializing canvas element: ', canvas);
           }
-          cloneEl.remove();
-        } catch (err) {
-          handleErrors(err, 'Error serializing canvas element: ', canvas);
         }
       }
     }
@@ -439,10 +459,24 @@
       if (!['img', 'iframe'].includes((_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase())) return;
       domElement.removeAttribute('loading');
     }
+    function serializeScrollState(original, clone) {
+      if (!original || !clone) return;
+
+      // Check and set scrollTop if it exists and has a value
+      if (typeof original.scrollTop === 'number' && original.scrollTop !== 0) {
+        clone.setAttribute('data-percy-scrolltop', original.scrollTop.toString());
+      }
+
+      // Check and set scrollLeft if it exists and has a value
+      if (typeof original.scrollLeft === 'number' && original.scrollLeft !== 0) {
+        clone.setAttribute('data-percy-scrollleft', original.scrollLeft.toString());
+      }
+    }
 
     // All transformations that we need to apply for a successful discovery and stable render
-    function applyElementTransformations(domElement) {
+    function applyElementTransformations(originalElement, domElement) {
       dropLoadingAttribute(domElement);
+      serializeScrollState(originalElement, domElement);
     }
 
     let mimetype = null;
@@ -572,7 +606,7 @@
           }
 
           // We apply any element transformations here to avoid another treeWalk
-          applyElementTransformations(clone);
+          applyElementTransformations(node, clone);
           serializeBase64(clone, resources, cache);
           parent.appendChild(clone);
 
@@ -729,7 +763,8 @@
         domTransformation = options === null || options === void 0 ? void 0 : options.dom_transformation,
         stringifyResponse = options === null || options === void 0 ? void 0 : options.stringify_response,
         disableShadowDOM = options === null || options === void 0 ? void 0 : options.disable_shadow_dom,
-        reshuffleInvalidTags = options === null || options === void 0 ? void 0 : options.reshuffle_invalid_tags
+        reshuffleInvalidTags = options === null || options === void 0 ? void 0 : options.reshuffle_invalid_tags,
+        ignoreCanvasSerializationErrors = options === null || options === void 0 ? void 0 : options.ignore_canvas_serialization_errors
       } = options || {};
 
       // keep certain records throughout serialization
@@ -740,7 +775,8 @@
         cache: new Map(),
         shadowRootElements: [],
         enableJavaScript,
-        disableShadowDOM
+        disableShadowDOM,
+        ignoreCanvasSerializationErrors
       };
       ctx.dom = dom;
       ctx.clone = cloneNodeAndShadow(ctx);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.31.1",
+  "version": "1.31.2-beta.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "latest"
+    "tag": "beta"
   },
   "main": "dist/bundle.js",
   "browser": "dist/bundle.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "56d0fe4722eea63cfe8a6ea7aa02cf00d465a85d"
+  "gitHead": "c8ba03fdd3ab7543f741a68eb5c357e38b48129e"
 }