dom/canvas/test/reftest/visible-occluded-ref.html

   1 <!DOCTYPE html>
   2 <meta charset='UTF-8'>
   3 <!--
   4 Color Test
   5
   6 Clear the four quadrants of the canvas as follows:
   7 +------+------+
   8 | blue |black |
   9 |      |      |
  10 +------+------+
  11 | red  |green |
  12 |      |      |
  13 +------+------+
  14
  15 Clear with a given alpha value. What effect this has depends on the
  16 context-creation args passed to this page.
  17 -->
  18 <html class='reftest-wait'>
  19
  20 <head>
  21   <script type='text/javascript' src='webgl-utils.js'></script>
  22   <script type='text/javascript'>
  23 'use strict';
  24
  25 var COLOR_VALUE = 127.0 / 255.0;
  26 var ALPHA_VALUE = 127.0 / 255.0;
  27
  28 function renderFrame(gl) {
  29   gl.enable(gl.SCISSOR_TEST);
  30
  31   gl.scissor(0, 0, 100, 100);
  32   gl.clearColor(COLOR_VALUE, 0.0, 0.0, ALPHA_VALUE);
  33   gl.clear(gl.COLOR_BUFFER_BIT);
  34
  35   gl.scissor(100, 0, 100, 100);
  36   gl.clearColor(0.0, COLOR_VALUE, 0.0, ALPHA_VALUE);
  37   gl.clear(gl.COLOR_BUFFER_BIT);
  38
  39   gl.scissor(0, 100, 100, 100);
  40   gl.clearColor(0.0, 0.0, COLOR_VALUE, ALPHA_VALUE);
  41   gl.clear(gl.COLOR_BUFFER_BIT);
  42
  43   gl.scissor(100, 100, 100, 100);
  44   gl.clearColor(0.0, 0.0, 0.0, ALPHA_VALUE);
  45   gl.clear(gl.COLOR_BUFFER_BIT);
  46
  47   gl.scissor(0, 75, 50, 50);
  48   gl.clearColor(0.0, 0.0, 1.0, 1.0);
  49   gl.clear(gl.COLOR_BUFFER_BIT);
  50 }
  51
  52 ////////////////////////////////////////////////////////////////////////////////
  53 // Boilerplate
  54
  55 var TIMEOUT_MS = 30 * 1000;
  56
  57 function setStatus(text) {
  58   var elem = document.getElementById('status');
  59   elem.innerHTML = text;
  60 }
  61
  62 var gIsComplete = false;
  63
  64 function markComplete(statusText) {
  65   if (!statusText)
  66     statusText = '';
  67
  68   if (gIsComplete)
  69     return;
  70   gIsComplete = true;
  71
  72   setStatus(statusText);
  73   document.documentElement.removeAttribute('class');
  74 }
  75
  76 function markError(text) {
  77   markComplete('Error: ' + text);
  78 }
  79
  80 function markTimedOut() {
  81   markError('Timed out waiting on test completion.');
  82 }
  83
  84 function runFrame(gl, frameCount, maxFrameCount) {
  85   renderFrame(gl);
  86   frameCount++;
  87
  88   if (frameCount >= maxFrameCount) {
  89     console.log('Rendered ' + frameCount + ' frames.');
  90     markComplete();
  91     return;
  92   }
  93
  94   requestAnimationFrame(function(){
  95     runFrame(gl, frameCount, maxFrameCount);
  96   });
  97 }
  98
  99 function runTest() {
 100   var canvas = document.getElementById('canvas');
 101
 102   var gl = initGL(canvas);
 103   if (!gl) {
 104     markError('WebGL context creation failed.');
 105     return;
 106   }
 107
 108   var maxFrameCount = arg('frame', 1);
 109   if (maxFrameCount < 1) {
 110     markError('Invalid `frame` arg: ' + maxFrameCount);
 111     return;
 112   }
 113
 114   setStatus('Waiting...');
 115
 116   runFrame(gl, 0, maxFrameCount);
 117   setTimeout(markTimedOut, TIMEOUT_MS);
 118 }
 119   </script>
 120 </head>
 121
 122 <body onload='runTest();'>
 123 <canvas style="position:fixed; left: 0px; top: 0px;" id='canvas' width='200' height='200'></canvas>
 124 <div id='status'></div>
 125 </body>
 126
 127 </html>