Bug 782860 - Add basic WebGL reftests - r=bjacob

content/canvas/test/reftest/reftest.list

@@ -0,0 +1,187 @@
+# WebGL Reftests!
+# If you add new tests, don't forget to add sanity (&nogl) tests! (if needed)
+
+# Check that disabling works:
+                           == webgl-disable-test.html?nogl  wrapper.html?green.png
+pref(webgl.disabled,true)  == webgl-disable-test.html       wrapper.html?green.png
+
+# Basic WebGL tests:
+# Do we get pixels to the screen at all?
+# Try to just hit the different rendering paths here.
+# Test: {aa, alpha, preserve, readback} = 16
+== webgl-clear-test.html?nogl  wrapper.html?green.png
+
+== webgl-clear-test.html?__&_____&________  wrapper.html?green.png
+== webgl-clear-test.html?aa&_____&________  wrapper.html?green.png
+== webgl-clear-test.html?__&alpha&________  wrapper.html?green.png
+== webgl-clear-test.html?aa&alpha&________  wrapper.html?green.png
+== webgl-clear-test.html?__&_____&preserve  wrapper.html?green.png
+== webgl-clear-test.html?aa&_____&preserve  wrapper.html?green.png
+== webgl-clear-test.html?__&alpha&preserve  wrapper.html?green.png
+== webgl-clear-test.html?aa&alpha&preserve  wrapper.html?green.png
+
+pref(webgl.force-layers-readback,true)  == webgl-clear-test.html?readback&__&_____&________  wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-clear-test.html?readback&aa&_____&________  wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-clear-test.html?readback&__&alpha&________  wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-clear-test.html?readback&aa&alpha&________  wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-clear-test.html?readback&__&_____&preserve  wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-clear-test.html?readback&aa&_____&preserve  wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-clear-test.html?readback&__&alpha&preserve  wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-clear-test.html?readback&aa&alpha&preserve  wrapper.html?green.png
+
+# Check orientation:
+== webgl-orientation-test.html?nogl  wrapper.html?white-top-left.png
+
+== webgl-orientation-test.html?__&_____&________  wrapper.html?white-top-left.png
+== webgl-orientation-test.html?aa&_____&________  wrapper.html?white-top-left.png
+== webgl-orientation-test.html?__&alpha&________  wrapper.html?white-top-left.png
+== webgl-orientation-test.html?aa&alpha&________  wrapper.html?white-top-left.png
+== webgl-orientation-test.html?__&_____&preserve  wrapper.html?white-top-left.png
+== webgl-orientation-test.html?aa&_____&preserve  wrapper.html?white-top-left.png
+== webgl-orientation-test.html?__&alpha&preserve  wrapper.html?white-top-left.png
+== webgl-orientation-test.html?aa&alpha&preserve  wrapper.html?white-top-left.png
+
+pref(webgl.force-layers-readback,true)  == webgl-orientation-test.html?readback&__&_____&________  wrapper.html?white-top-left.png
+pref(webgl.force-layers-readback,true)  == webgl-orientation-test.html?readback&aa&_____&________  wrapper.html?white-top-left.png
+pref(webgl.force-layers-readback,true)  == webgl-orientation-test.html?readback&__&alpha&________  wrapper.html?white-top-left.png
+pref(webgl.force-layers-readback,true)  == webgl-orientation-test.html?readback&aa&alpha&________  wrapper.html?white-top-left.png
+pref(webgl.force-layers-readback,true)  == webgl-orientation-test.html?readback&__&_____&preserve  wrapper.html?white-top-left.png
+pref(webgl.force-layers-readback,true)  == webgl-orientation-test.html?readback&aa&_____&preserve  wrapper.html?white-top-left.png
+pref(webgl.force-layers-readback,true)  == webgl-orientation-test.html?readback&__&alpha&preserve  wrapper.html?white-top-left.png
+pref(webgl.force-layers-readback,true)  == webgl-orientation-test.html?readback&aa&alpha&preserve  wrapper.html?white-top-left.png
+
+# Does we draw the correct color in the correct places with all context creation options?
+# (Note that our context creation option matrix is 2^6 = 64)
+== webgl-color-test.html?nogl  wrapper.html?colors.png
+
+== webgl-color-test.html?__&_____&_____&_______&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&_____&_______&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&_____&_______&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&_____&_______&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&depth&_______&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&depth&_______&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&depth&_______&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&depth&_______&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&_____&premult&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&_____&premult&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&_____&premult&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&_____&premult&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&depth&premult&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&depth&premult&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&depth&premult&________&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&depth&premult&________&_______  wrapper.html?colors.png
+
+== webgl-color-test.html?__&_____&_____&_______&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&_____&_______&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&_____&_______&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&_____&_______&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&depth&_______&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&depth&_______&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&depth&_______&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&depth&_______&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&_____&premult&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&_____&premult&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&_____&premult&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&_____&premult&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&depth&premult&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&depth&premult&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&depth&premult&preserve&_______  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&depth&premult&preserve&_______  wrapper.html?colors.png
+
+== webgl-color-test.html?__&_____&_____&_______&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&_____&_______&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&_____&_______&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&_____&_______&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&depth&_______&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&depth&_______&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&depth&_______&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&depth&_______&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&_____&premult&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&_____&premult&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&_____&premult&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&_____&premult&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&depth&premult&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&depth&premult&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&depth&premult&________&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&depth&premult&________&stencil  wrapper.html?colors.png
+
+== webgl-color-test.html?__&_____&_____&_______&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&_____&_______&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&_____&_______&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&_____&_______&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&depth&_______&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&depth&_______&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&depth&_______&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&depth&_______&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&_____&premult&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&_____&premult&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&_____&premult&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&_____&premult&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&_____&depth&premult&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&_____&depth&premult&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?__&alpha&depth&premult&preserve&stencil  wrapper.html?colors.png
+== webgl-color-test.html?aa&alpha&depth&premult&preserve&stencil  wrapper.html?colors.png
+
+
+# Check a smaller selection for readback:
+pref(webgl.force-layers-readback,true)  == webgl-color-test.html?readback&__&_____&________  wrapper.html?colors.png
+pref(webgl.force-layers-readback,true)  == webgl-color-test.html?readback&aa&_____&________  wrapper.html?colors.png
+pref(webgl.force-layers-readback,true)  == webgl-color-test.html?readback&__&alpha&________  wrapper.html?colors.png
+pref(webgl.force-layers-readback,true)  == webgl-color-test.html?readback&aa&alpha&________  wrapper.html?colors.png
+pref(webgl.force-layers-readback,true)  == webgl-color-test.html?readback&__&_____&preserve  wrapper.html?colors.png
+pref(webgl.force-layers-readback,true)  == webgl-color-test.html?readback&aa&_____&preserve  wrapper.html?colors.png
+pref(webgl.force-layers-readback,true)  == webgl-color-test.html?readback&__&alpha&preserve  wrapper.html?colors.png
+pref(webgl.force-layers-readback,true)  == webgl-color-test.html?readback&aa&alpha&preserve  wrapper.html?colors.png
+
+
+# Check alpha behavior:
+== webgl-color-alpha-test.html?colorVal=1.0&alphaVal=1.0&nogl        wrapper.html?colors.png
+== webgl-color-alpha-test.html?colorVal=1.0&alphaVal=1.0             wrapper.html?colors.png
+fuzzy(1,65536) == webgl-color-alpha-test.html?colorVal=0.5&alphaVal=1.0&nogl        wrapper.html?half-colors.png
+fuzzy(1,65536) == webgl-color-alpha-test.html?colorVal=0.5&alphaVal=1.0             wrapper.html?half-colors.png
+== webgl-color-alpha-test.html?colorVal=0.0&alphaVal=1.0&nogl        wrapper.html?black.png
+== webgl-color-alpha-test.html?colorVal=0.0&alphaVal=1.0             wrapper.html?black.png
+
+== webgl-color-alpha-test.html?colorVal=1.0&alphaVal=0.0&nogl        wrapper.html?colors.png
+== webgl-color-alpha-test.html?colorVal=1.0&alphaVal=0.0             wrapper.html?colors.png
+== webgl-color-alpha-test.html?colorVal=1.0&alphaVal=0.0&alpha&nogl  wrapper.html?white.png
+== webgl-color-alpha-test.html?colorVal=1.0&alphaVal=0.0&alpha       wrapper.html?white.png
+
+# Test premult:
+fuzzy(1,65536) == webgl-color-alpha-test.html?colorVal=1.0&alphaVal=0.5&alpha&nogl          wrapper.html?colors-half-alpha.png
+fuzzy(1,65536) == webgl-color-alpha-test.html?colorVal=1.0&alphaVal=0.5&alpha               wrapper.html?colors-half-alpha.png
+fuzzy(1,65536) == webgl-color-alpha-test.html?colorVal=0.5&alphaVal=0.5&alpha&nogl          wrapper.html?half-colors-half-alpha.png
+fuzzy(1,65536) == webgl-color-alpha-test.html?colorVal=0.5&alphaVal=0.5&alpha               wrapper.html?half-colors-half-alpha.png
+fuzzy(1,65536) == webgl-color-alpha-test.html?colorVal=0.5&alphaVal=0.5&alpha&premult&nogl  wrapper.html?colors-half-alpha.png
+fuzzy(1,65536) == webgl-color-alpha-test.html?colorVal=0.5&alphaVal=0.5&alpha&premult       wrapper.html?colors-half-alpha.png
+
+# Test over-bright premult:
+fuzzy(1,65536) == webgl-color-alpha-test.html?colorVal=1.0&alphaVal=0.5&alpha&premult&nogl  wrapper.html?colors-half-alpha.png
+fuzzy(1,65536) == webgl-color-alpha-test.html?colorVal=1.0&alphaVal=0.5&alpha&premult       wrapper.html?colors-half-alpha.png
+
+
+# Check for hanging framebuffer bindings:
+== webgl-hanging-fb-test.html?nogl  wrapper.html?green.png
+
+== webgl-hanging-fb-test.html       wrapper.html?green.png
+== webgl-hanging-fb-test.html?aa    wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-hanging-fb-test.html?readback     wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-hanging-fb-test.html?readback&aa  wrapper.html?green.png
+
+== webgl-hanging-scissor-test.html       wrapper.html?green.png
+== webgl-hanging-scissor-test.html?aa    wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-hanging-scissor-test.html?readback     wrapper.html?green.png
+pref(webgl.force-layers-readback,true)  == webgl-hanging-scissor-test.html?readback&aa  wrapper.html?green.png
+
+
+# Check that our experimental prefs still work:
+
+# 16bpp:
+pref(webgl.prefer-16bpp,true)                                        == webgl-color-test.html?16bpp           wrapper.html?colors.png
+pref(webgl.prefer-16bpp,true) pref(webgl.force-layers-readback,true) == webgl-color-test.html?16bpp&readback  wrapper.html?colors.png
+
+# Force native GL (Windows):
+skip-if(!winWidget) pref(webgl.prefer-native-gl,true)                                == webgl-clear-test.html?native-gl        wrapper.html?green.png
+skip-if(!winWidget) pref(webgl.prefer-native-gl,true)                                == webgl-orientation-test.html?native-gl  wrapper.html?white-top-left.png
+skip-if(!winWidget) pref(webgl.prefer-native-gl,true)                                == webgl-color-test.html?native-gl        wrapper.html?colors.png
+skip-if(!winWidget) pref(webgl.prefer-native-gl,true) pref(webgl.prefer-16bpp,true)  == webgl-color-test.html?native-gl&16bpp  wrapper.html?colors.png

content/canvas/test/reftest/webgl-clear-test.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script type="text/javascript" src="webgl-utils.js"></script>
+<script type="text/javascript">
+/* Clear Test
+ *
+ * Clear the canvas to green to test that we get pixels to the screen.
+ */
+
+"use strict";
+
+function renderGL(gl) {
+  gl.clearColor(0.0, 1.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.finish();
+}
+
+function renderBackup(canvas) {
+  var context = canvas.getContext("2d");
+  context.fillStyle = "rgba(0, 255, 0, 1.0)";
+  context.fillRect(0, 0, 256, 256);
+}
+
+function onLoad() {
+  var canvas = document.getElementById("canvas");
+  var gl = initGL(canvas);
+
+  if (gl)
+    renderGL(gl);
+  else
+    renderBackup(canvas);
+}
+</script>
+</head>
+
+<body onload="onLoad();">
+  <canvas id="canvas" width="256" height="256"></canvas>
+</body>
+
+</html>

content/canvas/test/reftest/webgl-color-alpha-test.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script type="text/javascript" src="webgl-utils.js"></script>
+<script type="text/javascript">
+/* Color-Alpha Test
+ *
+ * Clear the four quadrants of the canvas as follows:
+ * +------+------+
+ * | red  |green |
+ * |      |      |
+ * +------+------+
+ * | blue |white |
+ * |      |      |
+ * +------+------+
+ * However, unlike the Color test, clear with a given alpha value.
+ * What effect this has depends on the context-creation args passed
+ * to this page.
+ *
+ * Here we check that we handle various combinations of alpha and
+ * premultipliedAlpha correctly.
+ */
+
+"use strict";
+
+function renderGL(gl, value, alpha) {
+  gl.enable(gl.SCISSOR_TEST);
+
+  gl.scissor(0, 128, 128, 128);
+  gl.clearColor(value, 0.0, 0.0, alpha);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.scissor(128, 128, 128, 128);
+  gl.clearColor(0.0, value, 0.0, alpha);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.scissor(0, 0, 128, 128);
+  gl.clearColor(0.0, 0.0, value, alpha);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.scissor(128, 0, 128, 128);
+  gl.clearColor(value, value, value, alpha);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.finish();
+}
+
+function renderBackup(canvas, value, alpha) {
+  if (!arg("alpha"))
+    alpha = 1.0;
+
+  if (arg("alpha") && arg("premult")) {
+    if (alpha == 0.0)
+      value = 1.0;
+    else
+      value /= alpha;
+  }
+
+  var intValue = (value * 255) | 0;
+  var context = canvas.getContext("2d");
+  context.fillStyle = "rgba(" + intValue + ", 0, 0, " + alpha + ")";
+  context.fillRect(0, 0, 128, 128);
+
+  context.fillStyle = "rgba(0, " + intValue + ", 0, " + alpha + ")";
+  context.fillRect(128, 0, 128, 128);
+
+  context.fillStyle = "rgba(0, 0, " + intValue + ", " + alpha + ")";
+  context.fillRect(0, 128, 128, 128);
+
+  context.fillStyle = "rgba(" + intValue + ", " + intValue + ", " + intValue + ", " + alpha + ")";
+  context.fillRect(128, 128, 128, 128);
+}
+
+function onLoad() {
+  var canvas = document.getElementById("canvas");
+  var gl = initGL(canvas);
+
+  var value = arg("colorVal");
+  var alpha = arg("alphaVal");
+
+  if (gl)
+    renderGL(gl, value, alpha);
+  else
+    renderBackup(canvas, value, alpha);
+}
+
+</script>
+</head>
+
+<body onload="onLoad();">
+  <canvas id="canvas" width="256" height="256"></canvas>
+</body>
+
+</html>

content/canvas/test/reftest/webgl-color-test.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script type="text/javascript" src="webgl-utils.js"></script>
+<script type="text/javascript">
+/* Color Test
+ *
+ * Clear the four quadrants of the canvas as follows:
+ * +------+------+
+ * | red  |green |
+ * |      |      |
+ * +------+------+
+ * | blue |white |
+ * |      |      |
+ * +------+------+
+ *
+ * This is for checking that we're getting the right colors when
+ * we ask for them. This combined with the Orientation test assure
+ * that we are getting the correct colors in the correct places.
+ */
+
+"use strict";
+
+function renderGL(gl) {
+  gl.enable(gl.SCISSOR_TEST);
+
+  gl.scissor(0, 128, 128, 128);
+  gl.clearColor(1.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.scissor(128, 128, 128, 128);
+  gl.clearColor(0.0, 1.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.scissor(0, 0, 128, 128);
+  gl.clearColor(0.0, 0.0, 1.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.scissor(128, 0, 128, 128);
+  gl.clearColor(1.0, 1.0, 1.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.finish();
+}
+
+function renderBackup(canvas) {
+  var context = canvas.getContext("2d");
+  context.fillStyle = "rgba(255, 0, 0, 1.0)";
+  context.fillRect(0, 0, 128, 128);
+
+  context.fillStyle = "rgba(0, 255, 0, 1.0)";
+  context.fillRect(128, 0, 128, 128);
+
+  context.fillStyle = "rgba(0, 0, 255, 1.0)";
+  context.fillRect(0, 128, 128, 128);
+
+  context.fillStyle = "rgba(255, 255, 255, 1.0)";
+  context.fillRect(128, 128, 128, 128);
+}
+
+function onLoad() {
+  var canvas = document.getElementById("canvas");
+  var gl = initGL(canvas);
+
+  if (gl)
+    renderGL(gl);
+  else
+    renderBackup(canvas);
+}
+
+</script>
+</head>
+
+<body onload="onLoad();">
+  <canvas id="canvas" width="256" height="256"></canvas>
+</body>
+
+</html>

content/canvas/test/reftest/webgl-disable-test.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script type="text/javascript" src="webgl-utils.js"></script>
+<script type="text/javascript">
+/* Disable Test
+ *
+ * If we succeed in getting a WebGL context, we will fill
+ * the canvas with red. If we fail to acquire a WebGL context,
+ * we will use Canvas2D to instead fill it with green.
+ *
+ * Note that this test differs from the others in that
+ * it will draw differently if it receives a WebGL context.
+ * Other tests are designed to fallback silently to Canvas2D.
+ *
+ * We use this test to assure that when we disable WebGL,
+ * WebGL does not function. This is trivially true for systems
+ * that don't support WebGL. This test is not viable for testing
+ * that WebGL works, as blocklisted systems will always draw green.
+ */
+
+"use strict";
+
+function renderGL(gl) {
+  gl.clearColor(1.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.finish();
+}
+
+function renderBackup(canvas) {
+  var context = canvas.getContext("2d");
+  context.fillStyle = "rgba(0, 255, 0, 1.0)";
+  context.fillRect(0, 0, 256, 256);
+}
+
+function onLoad() {
+  var canvas = document.getElementById("canvas");
+  var gl = initGL(canvas);
+
+  if (gl)
+    renderGL(gl);
+  else
+    renderBackup(canvas);
+}
+
+</script>
+</head>
+
+<body onload="onLoad();">
+  <canvas id="canvas" width="256" height="256"></canvas>
+</body>
+
+</html>

content/canvas/test/reftest/webgl-hanging-fb-test.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script type="text/javascript" src="webgl-utils.js"></script>
+<script type="text/javascript">
+/* Hanging Framebuffer Test
+ *
+ * Clear the canvas to green, but create and bind a new framebuffer
+ * before returning. This will fail if we blindly read from the bound
+ * framebuffer, instead of binding to the screen and reading from that.
+ *
+ * How failure looks isn't well defined, since this is an empty framebuffer,
+ * thus is incomplete, and should cause errors if it's read from.
+ */
+
+"use strict";
+
+function renderGL(gl) {
+  gl.clearColor(0.0, 1.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  var fb = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+
+  gl.finish();
+}
+
+function renderBackup(canvas) {
+  var context = canvas.getContext("2d");
+  context.fillStyle = "rgba(0, 255, 0, 1.0)";
+  context.fillRect(0, 0, 256, 256);
+}
+
+function onLoad() {
+  var canvas = document.getElementById("canvas");
+  var gl = initGL(canvas);
+
+  if (gl)
+    renderGL(gl);
+  else
+    renderBackup(canvas);
+}
+
+</script>
+</head>
+
+<body onload="onLoad();">
+  <canvas id="canvas" width="256" height="256"></canvas>
+</body>
+
+</html>

content/canvas/test/reftest/webgl-hanging-scissor-test.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script type="text/javascript" src="webgl-utils.js"></script>
+<script type="text/javascript">
+/* Hanging Scissor Test
+ *
+ * Clear the canvas to green, but create and enable and set scissor values
+ * before returning. This can fail if we blindly blit or read from the screen
+ * without disabling scissor-test.
+ *
+ * Failure should look like only the top-left quadrant is rendered.
+ */
+
+"use strict";
+
+function renderGL(gl) {
+  gl.clearColor(0.0, 1.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.enable(gl.SCISSOR_TEST);
+  gl.scissor(0, 128, 128, 128);
+
+  gl.finish();
+}
+
+function renderBackup(canvas) {
+  var context = canvas.getContext("2d");
+  context.fillStyle = "rgba(0, 255, 0, 1.0)";
+  context.fillRect(0, 0, 256, 256);
+}
+
+function onLoad() {
+  var canvas = document.getElementById("canvas");
+  var gl = initGL(canvas);
+
+  if (gl)
+    renderGL(gl);
+  else
+    renderBackup(canvas);
+}
+
+</script>
+</head>
+
+<body onload="onLoad();">
+  <canvas id="canvas" width="256" height="256"></canvas>
+</body>
+
+</html>

content/canvas/test/reftest/webgl-orientation-test.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script type="text/javascript" src="webgl-utils.js"></script>
+<script type="text/javascript">
+/* Orientation Test
+ *
+ * Clear the canvas to black, and clear the upper-left quadrant
+ * to white. If this doesn't pass, but the Clear test does, then
+ * likely y-flip is wrong.
+ */
+
+"use strict";
+
+function renderGL(gl) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.enable(gl.SCISSOR_TEST);
+  gl.scissor(0, 128, 128, 128);
+  gl.clearColor(1.0, 1.0, 1.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+  gl.finish();
+}
+
+function renderBackup(canvas) {
+  var context = canvas.getContext("2d");
+  context.fillStyle = "rgba(0, 0, 0, 1.0)";
+  context.fillRect(0, 0, 256, 256);
+
+  context.fillStyle = "rgba(255, 255, 255, 1.0)";
+  context.fillRect(0, 0, 128, 128);
+}
+
+function onLoad() {
+  var canvas = document.getElementById("canvas");
+  var gl = initGL(canvas);
+
+  if (gl)
+    renderGL(gl);
+  else
+    renderBackup(canvas);
+}
+
+</script>
+</head>
+
+<body onload="onLoad();">
+  <canvas id="canvas" width="256" height="256"></canvas>
+</body>
+
+</html>

content/canvas/test/reftest/webgl-utils.js

@@ -0,0 +1,63 @@
+"use strict";
+
+function parseArgs() {
+  var query = window.location.search.substring(1);
+
+  var split = query.split("&");
+
+  var args = {}
+  for (var i = 0; i < split.length; i++) {
+    var pair = split[i].split("=");
+
+    var key = pair[0];
+    var value = true;
+    if (pair.length >= 2) {
+      eval("value = " + decodeURIComponent(pair[1]) + ";");
+    }
+
+    args[key] = value;
+  }
+
+  return args;
+}
+
+var gArgs = null;
+function arg(key) {
+  if (gArgs === null) {
+    gArgs = parseArgs();
+  }
+
+  var ret = gArgs[key];
+  if (ret === undefined)
+    ret = false;
+
+  return ret;
+}
+
+function initGL(canvas) {
+  if (arg("nogl"))
+    return null;
+
+  var gl = null;
+
+  var withAA = arg("aa");
+  var withAlpha = arg("alpha");
+  var withDepth = arg("depth");
+  var withPremult = arg("premult");
+  var withPreserve = arg("preserve");
+  var withStencil = arg("stencil");
+
+  try {
+    var argDict = {
+      alpha: withAlpha,
+      depth: withDepth,
+      stencil: withStencil,
+      antialias: withAA,
+      premultipliedAlpha: withPremult,
+      preserveDrawingBuffer: withPreserve,
+    };
+    gl = canvas.getContext("experimental-webgl", argDict);
+  } catch(e) {}
+
+  return gl;
+}

content/canvas/test/reftest/wrapper.html

@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+<title>Image reftest wrapper</title>
+<style type="text/css">
+  #image1 { background-color: rgb(10, 100, 250); }
+</style>
+<script>
+  // The image is loaded async after the page loads
+  // wait for it to finish loading
+  function onImageLoad() { 
+    document.documentElement.removeAttribute("class");
+  };
+</script>
+</head>
+<body>
+<img id="image1">
+<script>
+  // Use as "wrapper.html?image.png"
+  var imgURL = document.location.search.substr(1);
+  document.images[0].onload = onImageLoad;
+  document.images[0].onerror = onImageLoad;
+  document.images[0].src = imgURL;
+</script>
+</body>
+</html>
+

content/test/reftest/reftest.list

@@ -1,3 +1,8 @@
+# Canvas reftests
+# From: /content/test/reftest
+# To:   /content/canvas/test/reftest
+include ../../canvas/test/reftest/reftest.list
+
 == bug453105.html bug453105-ref.html
 == optiontext.html optiontext-ref.html
 == bug456008.xhtml bug456008-ref.html

image/test/reftest/bmp/bmp-corrupted/wrapper.html

@@ -16,7 +16,7 @@
 <body>
 <img id="image1">
 <script>
-  // Use as "wrapper.html?image.png
+  // Use as "wrapper.html?image.png"
   var imgURL = document.location.search.substr(1);
   document.images[0].onload = onImageLoad;
   document.images[0].onerror = onImageLoad;