dom/canvas/test/reftest/visible-occluded.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
  48 ////////////////////////////////////////////////////////////////////////////////
  49 // Boilerplate
  50
  51 var TIMEOUT_MS = 30 * 1000;
  52
  53 function setStatus(text) {
  54   var elem = document.getElementById('status');
  55   elem.innerHTML = text;
  56 }
  57
  58 var gIsComplete = false;
  59
  60 function markComplete(statusText) {
  61   if (!statusText)
  62     statusText = '';
  63
  64   if (gIsComplete)
  65     return;
  66   gIsComplete = true;
  67
  68   setStatus(statusText);
  69   document.documentElement.removeAttribute('class');
  70 }
  71
  72 function markError(text) {
  73   markComplete('Error: ' + text);
  74 }
  75
  76 function markTimedOut() {
  77   markError('Timed out waiting on test completion.');
  78 }
  79
  80 function runFrame(gl, frameCount, maxFrameCount) {
  81   renderFrame(gl);
  82   frameCount++;
  83
  84   if (frameCount >= maxFrameCount) {
  85     console.log('Rendered ' + frameCount + ' frames.');
  86     markComplete();
  87     return;
  88   }
  89
  90   requestAnimationFrame(function(){
  91     runFrame(gl, frameCount, maxFrameCount);
  92   });
  93 }
  94
  95 function runTest() {
  96   var canvas = document.getElementById('canvas');
  97
  98   var gl = initGL(canvas);
  99   if (!gl) {
 100     markError('WebGL context creation failed.');
 101     return;
 102   }
 103
 104   var maxFrameCount = arg('frame', 1);
 105   if (maxFrameCount < 1) {
 106     markError('Invalid `frame` arg: ' + maxFrameCount);
 107     return;
 108   }
 109
 110   setStatus('Waiting...');
 111
 112   runFrame(gl, 0, maxFrameCount);
 113   setTimeout(markTimedOut, TIMEOUT_MS);
 114 }
 115   </script>
 116 </head>
 117
 118 <body onload='runTest();'>
 119 <canvas style="position:fixed; left: 0px; top: 0px;" id='canvas' width='200' height='200'></canvas>
 120 <div style="display:block; background-color: blue; position: fixed; top: 75px; left: 0px; width: 50px; height: 50px;"></div>
 121 <div id='status'></div>
 122 </body>
 123
 124 </html>