test(screenshots): add a bunch of screenshot tests (#448)

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>

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>

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>

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>

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');
+    });
   });
 
 };