Bug 826546 - Delay WebGL reftest completion until subsequent rAF - r=vlad
authorJeff Gilbert <jgilbert@mozilla.com>
Thu, 10 Jan 2013 12:17:44 -0800
changeset 118457 9038e0975bdc29b2080de0145d17a83bbd36e870
parent 118456 00175d6d4839c1dff3b40d0aba7909d2674f4921
child 118458 4d0c643ddbae5bc791f256d5fdd6c4897098ffa2
push id24166
push userMs2ger@gmail.com
push dateFri, 11 Jan 2013 13:57:41 +0000
treeherdermozilla-central@63c4b0f66a0c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvlad
bugs826546
milestone21.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 826546 - Delay WebGL reftest completion until subsequent rAF - r=vlad
content/canvas/test/reftest/webgl-clear-test.html
content/canvas/test/reftest/webgl-color-alpha-test.html
content/canvas/test/reftest/webgl-color-test.html
content/canvas/test/reftest/webgl-disable-test.html
content/canvas/test/reftest/webgl-hanging-fb-test.html
content/canvas/test/reftest/webgl-hanging-scissor-test.html
content/canvas/test/reftest/webgl-orientation-test.html
content/canvas/test/reftest/webgl-utils.js
--- a/content/canvas/test/reftest/webgl-clear-test.html
+++ b/content/canvas/test/reftest/webgl-clear-test.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html class="reftest-wait">
 <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.
@@ -19,25 +19,31 @@ function renderGL(gl) {
 }
 
 function renderBackup(canvas) {
   var context = canvas.getContext("2d");
   context.fillStyle = "rgba(0, 255, 0, 1.0)";
   context.fillRect(0, 0, 256, 256);
 }
 
-function onLoad() {
+function runTest() {
   var canvas = document.getElementById("canvas");
   var gl = initGL(canvas);
 
   if (gl)
     renderGL(gl);
   else
     renderBackup(canvas);
+
+  rAF(testComplete);
+}
+
+function testComplete() {
+  document.documentElement.removeAttribute("class");
 }
 </script>
 </head>
 
-<body onload="onLoad();">
+<body onload="rAF(runTest);">
   <canvas id="canvas" width="256" height="256"></canvas>
 </body>
 
 </html>
--- a/content/canvas/test/reftest/webgl-color-alpha-test.html
+++ b/content/canvas/test/reftest/webgl-color-alpha-test.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html class="reftest-wait">
 <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:
@@ -68,29 +68,34 @@ function renderBackup(canvas, value, alp
 
   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() {
+function runTest() {
   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);
+
+  rAF(testComplete);
 }
 
+function testComplete() {
+  document.documentElement.removeAttribute("class");
+}
 </script>
 </head>
 
-<body onload="onLoad();">
+<body onload="rAF(runTest);">
   <canvas id="canvas" width="256" height="256"></canvas>
 </body>
 
 </html>
--- a/content/canvas/test/reftest/webgl-color-test.html
+++ b/content/canvas/test/reftest/webgl-color-test.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html class="reftest-wait">
 <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:
@@ -55,26 +55,31 @@ function renderBackup(canvas) {
 
   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() {
+function runTest() {
   var canvas = document.getElementById("canvas");
   var gl = initGL(canvas);
 
   if (gl)
     renderGL(gl);
   else
     renderBackup(canvas);
+
+  rAF(testComplete);
 }
 
+function testComplete() {
+  document.documentElement.removeAttribute("class");
+}
 </script>
 </head>
 
-<body onload="onLoad();">
+<body onload="rAF(runTest);">
   <canvas id="canvas" width="256" height="256"></canvas>
 </body>
 
 </html>
--- a/content/canvas/test/reftest/webgl-disable-test.html
+++ b/content/canvas/test/reftest/webgl-disable-test.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html class="reftest-wait">
 <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
@@ -30,26 +30,31 @@ function renderGL(gl) {
 }
 
 function renderBackup(canvas) {
   var context = canvas.getContext("2d");
   context.fillStyle = "rgba(0, 255, 0, 1.0)";
   context.fillRect(0, 0, 256, 256);
 }
 
-function onLoad() {
+function runTest() {
   var canvas = document.getElementById("canvas");
   var gl = initGL(canvas);
 
   if (gl)
     renderGL(gl);
   else
     renderBackup(canvas);
+
+  rAF(testComplete);
 }
 
+function testComplete() {
+  document.documentElement.removeAttribute("class");
+}
 </script>
 </head>
 
-<body onload="onLoad();">
+<body onload="rAF(runTest);">
   <canvas id="canvas" width="256" height="256"></canvas>
 </body>
 
 </html>
--- a/content/canvas/test/reftest/webgl-hanging-fb-test.html
+++ b/content/canvas/test/reftest/webgl-hanging-fb-test.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html class="reftest-wait">
 <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
@@ -28,26 +28,31 @@ function renderGL(gl) {
 }
 
 function renderBackup(canvas) {
   var context = canvas.getContext("2d");
   context.fillStyle = "rgba(0, 255, 0, 1.0)";
   context.fillRect(0, 0, 256, 256);
 }
 
-function onLoad() {
+function runTest() {
   var canvas = document.getElementById("canvas");
   var gl = initGL(canvas);
 
   if (gl)
     renderGL(gl);
   else
     renderBackup(canvas);
+
+  rAF(testComplete);
 }
 
+function testComplete() {
+  document.documentElement.removeAttribute("class");
+}
 </script>
 </head>
 
-<body onload="onLoad();">
+<body onload="rAF(runTest);">
   <canvas id="canvas" width="256" height="256"></canvas>
 </body>
 
 </html>
--- a/content/canvas/test/reftest/webgl-hanging-scissor-test.html
+++ b/content/canvas/test/reftest/webgl-hanging-scissor-test.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html class="reftest-wait">
 <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
@@ -27,26 +27,31 @@ function renderGL(gl) {
 }
 
 function renderBackup(canvas) {
   var context = canvas.getContext("2d");
   context.fillStyle = "rgba(0, 255, 0, 1.0)";
   context.fillRect(0, 0, 256, 256);
 }
 
-function onLoad() {
+function runTest() {
   var canvas = document.getElementById("canvas");
   var gl = initGL(canvas);
 
   if (gl)
     renderGL(gl);
   else
     renderBackup(canvas);
+
+  rAF(testComplete);
 }
 
+function testComplete() {
+  document.documentElement.removeAttribute("class");
+}
 </script>
 </head>
 
-<body onload="onLoad();">
+<body onload="rAF(runTest);">
   <canvas id="canvas" width="256" height="256"></canvas>
 </body>
 
 </html>
--- a/content/canvas/test/reftest/webgl-orientation-test.html
+++ b/content/canvas/test/reftest/webgl-orientation-test.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html class="reftest-wait">
 <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
@@ -30,26 +30,31 @@ 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() {
+function runTest() {
   var canvas = document.getElementById("canvas");
   var gl = initGL(canvas);
 
   if (gl)
     renderGL(gl);
   else
     renderBackup(canvas);
+
+  rAF(testComplete);
 }
 
+function testComplete() {
+  document.documentElement.removeAttribute("class");
+}
 </script>
 </head>
 
-<body onload="onLoad();">
+<body onload="rAF(runTest);">
   <canvas id="canvas" width="256" height="256"></canvas>
 </body>
 
 </html>
--- a/content/canvas/test/reftest/webgl-utils.js
+++ b/content/canvas/test/reftest/webgl-utils.js
@@ -56,8 +56,13 @@ function initGL(canvas) {
       premultipliedAlpha: withPremult,
       preserveDrawingBuffer: withPreserve,
     };
     gl = canvas.getContext("experimental-webgl", argDict);
   } catch(e) {}
 
   return gl;
 }
+
+function rAF(func) {
+  var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame;
+  raf(func);
+}