[PER-5758] fix canvas-to-image width handling (#1995)

* fix canvas-to-image width

* add test cases

Author: pranavz28

packages/dom/src/serialize-canvas.js

@@ -13,8 +13,10 @@ function createAndInsertImageElement(canvas, clone, percyElementId, imageUrl) {
   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%';
+  // set the maxWidth only if it was set on the canvas
+  if (canvas.style.maxWidth) {
+    img.style.maxWidth = canvas.style.maxWidth;
+  }
 
   // insert the image into the cloned DOM and remove the cloned canvas element
   let cloneEl = clone.querySelector(`[data-percy-element-id=${percyElementId}]`);

packages/dom/test/serialize-canvas.test.js

@@ -14,6 +14,12 @@ describe('serializeCanvas', () => {
           height="150px"
           style="border: 5px solid black;"
         ></canvas>
+        <canvas
+          id="canvas-with-maxwidth"
+          width="200px"
+          height="100px"
+          style="border: 2px solid red; max-width: 150px;"
+        ></canvas>
         <canvas
           id="empty"
           width="0px"
@@ -37,6 +43,14 @@ describe('serializeCanvas', () => {
         ctx.stroke();
 
         cache[plat].dataURL = canvas.toDataURL();
+
+        // Draw on canvas with maxWidth
+        let canvasWithMaxWidth = dom.getElementById('canvas-with-maxwidth');
+        let ctxWithMaxWidth = canvasWithMaxWidth.getContext('2d');
+        ctxWithMaxWidth.fillStyle = 'blue';
+        ctxWithMaxWidth.fillRect(10, 10, 50, 30);
+
+        cache[plat].dataURLWithMaxWidth = canvasWithMaxWidth.toDataURL();
       });
 
       serialized = serializeDOM();
@@ -54,7 +68,7 @@ describe('serializeCanvas', () => {
         expect($canvas[0].getAttribute('width')).toBe('150px');
         expect($canvas[0].getAttribute('height')).toBe('150px');
         expect($canvas[0].getAttribute('src')).toMatch('/__serialized__/\\w+\\.png');
-        expect($canvas[0].getAttribute('style')).toBe('border: 5px solid black; max-width: 100%;');
+        expect($canvas[0].getAttribute('style')).toBe('border: 5px solid black;');
         expect($canvas[0].matches('[data-percy-canvas-serialized]')).toBe(true);
 
         expect(serialized.resources).toContain(jasmine.objectContaining({
@@ -64,6 +78,22 @@ describe('serializeCanvas', () => {
         }));
       });
 
+      it(`${platform}: preserves maxWidth from canvas to image element`, () => {
+        let $canvas = $('#canvas-with-maxwidth');
+        expect($canvas[0].tagName).toBe('IMG');
+        expect($canvas[0].getAttribute('width')).toBe('200px');
+        expect($canvas[0].getAttribute('height')).toBe('100px');
+        expect($canvas[0].getAttribute('style')).toBe('border: 2px solid red; max-width: 150px;');
+        expect($canvas[0].style.maxWidth).toBe('150px');
+        expect($canvas[0].matches('[data-percy-canvas-serialized]')).toBe(true);
+
+        expect(serialized.resources).toContain(jasmine.objectContaining({
+          url: $canvas[0].getAttribute('src'),
+          content: cache[platform].dataURLWithMaxWidth.split(',')[1],
+          mimetype: 'image/png'
+        }));
+      });
+
       it(`${platform}: does not serialize canvas elements when JS is enabled`, () => {
         serialized = serializeDOM({ enableJavaScript: true });
         $ = parseDOM(serialized.html, platform);