fix: set JPG background to white when omitBackground option is used (#3240)

Fixes #3234

lib/Page.js

@@ -872,11 +872,11 @@ class Page extends EventEmitter {
       const screenOrientation = landscape ? { angle: 90, type: 'landscapePrimary' } : { angle: 0, type: 'portraitPrimary' };
       await this._client.send('Emulation.setDeviceMetricsOverride', { mobile, width, height, deviceScaleFactor, screenOrientation });
     }
-
+    const shouldSetDefaultBackground = options.omitBackground && format === 'png';
-    if (options.omitBackground)
+    if (shouldSetDefaultBackground)
       await this._client.send('Emulation.setDefaultBackgroundColorOverride', { color: { r: 0, g: 0, b: 0, a: 0 } });
     const result = await this._client.send('Page.captureScreenshot', { format, quality: options.quality, clip });
-    if (options.omitBackground)
+    if (shouldSetDefaultBackground)
       await this._client.send('Emulation.setDefaultBackgroundColorOverride');
 
     if (options.fullPage)

package.json

@@ -51,6 +51,7 @@
     "cross-env": "^5.0.5",
     "eslint": "^4.19.1",
     "esprima": "^4.0.0",
+    "jpeg-js": "^0.3.4",
     "minimist": "^1.2.0",
     "ncp": "^2.0.0",
     "pixelmatch": "^4.0.2",

test/golden-utils.js

@@ -18,26 +18,30 @@ const fs = require('fs');
 const Diff = require('text-diff');
 const mime = require('mime');
 const PNG = require('pngjs').PNG;
+const jpeg = require('jpeg-js');
 const pixelmatch = require('pixelmatch');
 
 module.exports = {compare};
 
 const GoldenComparators = {
   'image/png': compareImages,
+  'image/jpeg': compareImages,
   'text/plain': compareText
 };
 
+
 /**
  * @param {?Object} actualBuffer
  * @param {!Buffer} expectedBuffer
+ * @param {!string} mimeType
  * @return {?{diff: (!Object:undefined), errorMessage: (string|undefined)}}
  */
-function compareImages(actualBuffer, expectedBuffer) {
+function compareImages(actualBuffer, expectedBuffer, mimeType) {
   if (!actualBuffer || !(actualBuffer instanceof Buffer))
     return { errorMessage: 'Actual result should be Buffer.' };
 
-  const actual = PNG.sync.read(actualBuffer);
+  const actual = mimeType === 'image/png' ? PNG.sync.read(actualBuffer) : jpeg.decode(actualBuffer);
-  const expected = PNG.sync.read(expectedBuffer);
+  const expected = mimeType === 'image/png' ? PNG.sync.read(expectedBuffer) : jpeg.decode(expectedBuffer);
   if (expected.width !== actual.width || expected.height !== actual.height) {
     return {
       errorMessage: `Sizes differ: expected image ${expected.width}px X ${expected.height}px, but got ${actual.width}px X ${actual.height}px. `
@@ -93,14 +97,15 @@ function compare(goldenPath, outputPath, actual, goldenName) {
     };
   }
   const expected = fs.readFileSync(expectedPath);
-  const comparator = GoldenComparators[mime.getType(goldenName)];
+  const mimeType = mime.getType(goldenName);
+  const comparator = GoldenComparators[mimeType];
   if (!comparator) {
     return {
       pass: false,
-      message: 'Failed to find comparator with type ' + mime.getType(goldenName) + ': '  + goldenName
+      message: 'Failed to find comparator with type ' + mimeType + ': '  + goldenName
     };
   }
-  const result = comparator(actual, expected);
+  const result = comparator(actual, expected, mimeType);
   if (!result)
     return { pass: true };
   ensureOutputDir();

test/page.spec.js

@@ -1656,6 +1656,12 @@ module.exports.addTests = function({testRunner, expect, headless}) {
       const screenshot = await page.screenshot({omitBackground: true});
       expect(screenshot).toBeGolden('transparent.png');
     });
+    it('should render white background on jpeg file', async({page, server}) => {
+      await page.setViewport({ width: 100, height: 100 });
+      await page.goto(server.EMPTY_PAGE);
+      const screenshot = await page.screenshot({omitBackground: true, type: 'jpeg'});
+      expect(screenshot).toBeGolden('white.jpg');
+    });
     it('should work with odd clip size on Retina displays', async({page, server}) => {
       const screenshot = await page.screenshot({
         clip: {