From 63f208bafb001a26c2845942e8d5e95257af2671 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 9 Jan 2020 16:43:11 -0800
Subject: [PATCH] test(screenshots): add a bunch of screenshot tests (#448)

---
 test/assets/screenshots/canvas.html           |  10 +++
 test/assets/screenshots/controls.html         |   7 ++
 test/assets/screenshots/translateZ.html       |   4 ++
 test/assets/screenshots/webgl.html            |  63 ++++++++++++++++++
 test/golden-chromium/screenshot-canvas.png    | Bin 0 -> 2265 bytes
 .../golden-chromium/screenshot-translateZ.png | Bin 0 -> 2146 bytes
 test/golden-chromium/screenshot-webgl.png     | Bin 0 -> 4016 bytes
 test/golden-firefox/screenshot-canvas.png     | Bin 0 -> 2265 bytes
 test/golden-firefox/screenshot-translateZ.png | Bin 0 -> 2146 bytes
 test/golden-firefox/screenshot-webgl.png      | Bin 0 -> 4016 bytes
 test/golden-webkit/screenshot-canvas.png      | Bin 0 -> 2265 bytes
 test/golden-webkit/screenshot-translateZ.png  | Bin 0 -> 2146 bytes
 test/golden-webkit/screenshot-webgl.png       | Bin 0 -> 4016 bytes
 test/screenshot.spec.js                       |  18 +++++
 14 files changed, 102 insertions(+)
 create mode 100644 test/assets/screenshots/canvas.html
 create mode 100644 test/assets/screenshots/controls.html
 create mode 100644 test/assets/screenshots/translateZ.html
 create mode 100644 test/assets/screenshots/webgl.html
 create mode 100644 test/golden-chromium/screenshot-canvas.png
 create mode 100644 test/golden-chromium/screenshot-translateZ.png
 create mode 100644 test/golden-chromium/screenshot-webgl.png
 create mode 100644 test/golden-firefox/screenshot-canvas.png
 create mode 100644 test/golden-firefox/screenshot-translateZ.png
 create mode 100644 test/golden-firefox/screenshot-webgl.png
 create mode 100644 test/golden-webkit/screenshot-canvas.png
 create mode 100644 test/golden-webkit/screenshot-translateZ.png
 create mode 100644 test/golden-webkit/screenshot-webgl.png

diff --git a/test/assets/screenshots/canvas.html b/test/assets/screenshots/canvas.html
new file mode 100644
index 0000000000..011148c5ff
--- /dev/null
+++ b/test/assets/screenshots/canvas.html
@@ -0,0 +1,10 @@
+<canvas width="150" height="150">
+</canvas>
+
+<script>
+	const canvas = document.querySelector('canvas');
+	const ctx = canvas.getContext('2d');
+  ctx.fillRect(25, 25, 100, 100);
+  ctx.clearRect(45, 45, 60, 60);
+  ctx.strokeRect(50, 50, 50, 50);
+</script>
diff --git a/test/assets/screenshots/controls.html b/test/assets/screenshots/controls.html
new file mode 100644
index 0000000000..64ab27980d
--- /dev/null
+++ b/test/assets/screenshots/controls.html
@@ -0,0 +1,7 @@
+<input type="checkbox" checked=true></input><br><br>
+<input type="color" value="#ff0000"></input><br><br>
+<input type="date" value="2000-01-01"></input><br><br>
+<input type="number" value="123"></input><br><br>
+<input type="password" value="password"></input><br><br>
+<input type="text"></input><br><br>
+<select><option>select</option></option></select><br><br>
diff --git a/test/assets/screenshots/translateZ.html b/test/assets/screenshots/translateZ.html
new file mode 100644
index 0000000000..2b4aae8c09
--- /dev/null
+++ b/test/assets/screenshots/translateZ.html
@@ -0,0 +1,4 @@
+<div style="background-color: red; position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; transform: translateZ(0)">
+</div>
+<div style="background-color: green; position: absolute; left: 150px; top: 150px; width: 100px; height: 100px">
+</div>
\ No newline at end of file
diff --git a/test/assets/screenshots/webgl.html b/test/assets/screenshots/webgl.html
new file mode 100644
index 0000000000..a5e3d4981a
--- /dev/null
+++ b/test/assets/screenshots/webgl.html
@@ -0,0 +1,63 @@
+<style>
+body { margin: 0 }
+</style>
+<canvas id="webgl" width="640" height="480"></canvas>
+<script type="text/javascript">
+
+function shaderProgram(gl, vs, fs) {
+	var prog = gl.createProgram();
+	var addshader = function(type, source) {
+		var s = gl.createShader((type == 'vertex') ?
+			gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
+		gl.shaderSource(s, source);
+		gl.compileShader(s);
+		if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+			throw "Could not compile "+type+
+				" shader:\n\n"+gl.getShaderInfoLog(s);
+		}
+		gl.attachShader(prog, s);
+	};
+	addshader('vertex', vs);
+	addshader('fragment', fs);
+	gl.linkProgram(prog);
+	if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+		throw "Could not link the shader program!";
+	}
+	return prog;
+}
+
+function attributeSetFloats(gl, prog, attr_name, rsize, arr) {
+	gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arr),
+		gl.STATIC_DRAW);
+	var attr = gl.getAttribLocation(prog, attr_name);
+	gl.enableVertexAttribArray(attr);
+	gl.vertexAttribPointer(attr, rsize, gl.FLOAT, false, 0, 0);
+}
+
+var gl = document.getElementById("webgl")
+	.getContext("experimental-webgl");
+gl.clearColor(0.8, 0.8, 0.8, 1);
+gl.clear(gl.COLOR_BUFFER_BIT);
+
+var prog = shaderProgram(gl,
+	"attribute vec3 pos;"+
+	"void main() {"+
+	"	gl_Position = vec4(pos, 2.0);"+
+	"}",
+	"void main() {"+
+	"	gl_FragColor = vec4(0.5, 0.5, 1.0, 1.0);"+
+	"}"
+);
+gl.useProgram(prog);
+
+attributeSetFloats(gl, prog, "pos", 3, [
+	-1, 0, 0,
+	0, 1, 0,
+	0, -1, 0,
+	1, 0, 0
+]);
+
+gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+</script>
diff --git a/test/golden-chromium/screenshot-canvas.png b/test/golden-chromium/screenshot-canvas.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfafbda63886a7f5346d95615ceb18127ae6974c
GIT binary patch
literal 2265
zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y9Be?5)7S2I0V&4fAa^H*b?0PWGB9vV_H=O!
zshIQj*1@&693<Q>7P`dmFu5~xWzMD!5!=+M9EU#WJr`-P+r0BvYJTxKONNI0x5r;G
zG8}l!BFn%uP*`s@dynC<ZMmz}KOCJ?{FQ~_-$ZUIItOU{AO7NVSB2xUZg0CP%n)&=
zm5+h335rjazo@r5Up(je&Z=X<Z+_c-tBtp1ZZQ8WC|;%d;`?vgk1`B4_uXS&B>&l!
zlfV7;D@lIKzQ>REJz#(EzUBzfpi-DYLyew(l{xNd-TwZ^7GdWrPE^i&T(x)IJjMgk
zzd9DY|7~|nBKh3Tij&FfuD^bt&e*Vi+fTNsx3|4rx&J#`|CgYD_6&QR*&7%fA-Lg*
zd*S)I<va}U&mjjbr6B@zA=nvJObj*IdL;}T0;6~|3`WzyXc`zz14AYa{NQ~0!)E>E
T1813mZ50MjS3j3^P6<r_bP$l6

literal 0
HcmV?d00001

diff --git a/test/golden-chromium/screenshot-translateZ.png b/test/golden-chromium/screenshot-translateZ.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3f5642e6082b2effc3f7ee39d2dfbfbc6038f5e
GIT binary patch
literal 2146
zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y9Be?5)7S2I0V&4fAa^H*b?0PWGB9w+c)B=-
zRLpsM-H?mPQNY#Feb4rLdwj)}6OUeW7xno!`QgRvv}a5Vf407U$H;J?vWbs@aTE`H
z7;L}GT(R-mJ64&qZ{ip}h>2S<uy71<yk_RiyUG?3+25P`Bl_=hTg=*>&sVBf!oVRg
z)bW>i<I5EcHB%QbJ2VV&d|=kho3>007ROsh3xd&ta5N1J>onl+7+6tZaX{)lu+hNa
M>FVdQ&MBb@0Ke99JOBUy

literal 0
HcmV?d00001

diff --git a/test/golden-chromium/screenshot-webgl.png b/test/golden-chromium/screenshot-webgl.png
new file mode 100644
index 0000000000000000000000000000000000000000..76109512b5e2c48c3486dc154e078879925dd12e
GIT binary patch
literal 4016
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
IWYatU1^x<1#{d8T

literal 0
HcmV?d00001

diff --git a/test/golden-firefox/screenshot-canvas.png b/test/golden-firefox/screenshot-canvas.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfafbda63886a7f5346d95615ceb18127ae6974c
GIT binary patch
literal 2265
zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y9Be?5)7S2I0V&4fAa^H*b?0PWGB9vV_H=O!
zshIQj*1@&693<Q>7P`dmFu5~xWzMD!5!=+M9EU#WJr`-P+r0BvYJTxKONNI0x5r;G
zG8}l!BFn%uP*`s@dynC<ZMmz}KOCJ?{FQ~_-$ZUIItOU{AO7NVSB2xUZg0CP%n)&=
zm5+h335rjazo@r5Up(je&Z=X<Z+_c-tBtp1ZZQ8WC|;%d;`?vgk1`B4_uXS&B>&l!
zlfV7;D@lIKzQ>REJz#(EzUBzfpi-DYLyew(l{xNd-TwZ^7GdWrPE^i&T(x)IJjMgk
zzd9DY|7~|nBKh3Tij&FfuD^bt&e*Vi+fTNsx3|4rx&J#`|CgYD_6&QR*&7%fA-Lg*
zd*S)I<va}U&mjjbr6B@zA=nvJObj*IdL;}T0;6~|3`WzyXc`zz14AYa{NQ~0!)E>E
T1813mZ50MjS3j3^P6<r_bP$l6

literal 0
HcmV?d00001

diff --git a/test/golden-firefox/screenshot-translateZ.png b/test/golden-firefox/screenshot-translateZ.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3f5642e6082b2effc3f7ee39d2dfbfbc6038f5e
GIT binary patch
literal 2146
zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y9Be?5)7S2I0V&4fAa^H*b?0PWGB9w+c)B=-
zRLpsM-H?mPQNY#Feb4rLdwj)}6OUeW7xno!`QgRvv}a5Vf407U$H;J?vWbs@aTE`H
z7;L}GT(R-mJ64&qZ{ip}h>2S<uy71<yk_RiyUG?3+25P`Bl_=hTg=*>&sVBf!oVRg
z)bW>i<I5EcHB%QbJ2VV&d|=kho3>007ROsh3xd&ta5N1J>onl+7+6tZaX{)lu+hNa
M>FVdQ&MBb@0Ke99JOBUy

literal 0
HcmV?d00001

diff --git a/test/golden-firefox/screenshot-webgl.png b/test/golden-firefox/screenshot-webgl.png
new file mode 100644
index 0000000000000000000000000000000000000000..76109512b5e2c48c3486dc154e078879925dd12e
GIT binary patch
literal 4016
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
IWYatU1^x<1#{d8T

literal 0
HcmV?d00001

diff --git a/test/golden-webkit/screenshot-canvas.png b/test/golden-webkit/screenshot-canvas.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfafbda63886a7f5346d95615ceb18127ae6974c
GIT binary patch
literal 2265
zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y9Be?5)7S2I0V&4fAa^H*b?0PWGB9vV_H=O!
zshIQj*1@&693<Q>7P`dmFu5~xWzMD!5!=+M9EU#WJr`-P+r0BvYJTxKONNI0x5r;G
zG8}l!BFn%uP*`s@dynC<ZMmz}KOCJ?{FQ~_-$ZUIItOU{AO7NVSB2xUZg0CP%n)&=
zm5+h335rjazo@r5Up(je&Z=X<Z+_c-tBtp1ZZQ8WC|;%d;`?vgk1`B4_uXS&B>&l!
zlfV7;D@lIKzQ>REJz#(EzUBzfpi-DYLyew(l{xNd-TwZ^7GdWrPE^i&T(x)IJjMgk
zzd9DY|7~|nBKh3Tij&FfuD^bt&e*Vi+fTNsx3|4rx&J#`|CgYD_6&QR*&7%fA-Lg*
zd*S)I<va}U&mjjbr6B@zA=nvJObj*IdL;}T0;6~|3`WzyXc`zz14AYa{NQ~0!)E>E
T1813mZ50MjS3j3^P6<r_bP$l6

literal 0
HcmV?d00001

diff --git a/test/golden-webkit/screenshot-translateZ.png b/test/golden-webkit/screenshot-translateZ.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3f5642e6082b2effc3f7ee39d2dfbfbc6038f5e
GIT binary patch
literal 2146
zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y9Be?5)7S2I0V&4fAa^H*b?0PWGB9w+c)B=-
zRLpsM-H?mPQNY#Feb4rLdwj)}6OUeW7xno!`QgRvv}a5Vf407U$H;J?vWbs@aTE`H
z7;L}GT(R-mJ64&qZ{ip}h>2S<uy71<yk_RiyUG?3+25P`Bl_=hTg=*>&sVBf!oVRg
z)bW>i<I5EcHB%QbJ2VV&d|=kho3>007ROsh3xd&ta5N1J>onl+7+6tZaX{)lu+hNa
M>FVdQ&MBb@0Ke99JOBUy

literal 0
HcmV?d00001

diff --git a/test/golden-webkit/screenshot-webgl.png b/test/golden-webkit/screenshot-webgl.png
new file mode 100644
index 0000000000000000000000000000000000000000..76109512b5e2c48c3486dc154e078879925dd12e
GIT binary patch
literal 4016
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
IWYatU1^x<1#{d8T

literal 0
HcmV?d00001

diff --git a/test/screenshot.spec.js b/test/screenshot.spec.js
index bf496a6f2e..4f358d107f 100644
--- a/test/screenshot.spec.js
+++ b/test/screenshot.spec.js
@@ -306,6 +306,24 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROME, W
       const screenshot = await elementHandle.screenshot();
       expect(screenshot).toBeGolden('screenshot-element-fractional-offset.png');
     });
+    it('should work for canvas', async({page, server}) => {
+      await page.setViewport({width: 500, height: 500});
+      await page.goto(server.PREFIX + '/screenshots/canvas.html');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toBeGolden('screenshot-canvas.png');
+    });
+    it('should work for translateZ', async({page, server}) => {
+      await page.setViewport({width: 500, height: 500});
+      await page.goto(server.PREFIX + '/screenshots/translateZ.html');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toBeGolden('screenshot-translateZ.png');
+    });
+    it.skip(FFOX || WEBKIT)('should work for webgl', async({page, server}) => {
+      await page.setViewport({width: 640, height: 480});
+      await page.goto(server.PREFIX + '/screenshots/webgl.html');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toBeGolden('screenshot-webgl.png');
+    });
   });
 
 };