1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98


content / test / data / gpu / pixel_repeated_webgl_to_2d.html [blame]

<!DOCTYPE HTML>

<html>
<head>
<title>Repeatedly Drawing WebGL to 2D Canvas Must Show Only Latest Result</title>
<style type="text/css">
.nomargin {
  margin: 0px auto;
}
</style>

<script>
function sendResult(status, detail) {
  console.log(detail);
  if (window.domAutomationController) {
    window.domAutomationController.send(status);
  } else {
    console.log(status);
  }
}

var gl;
var fbo;
const sz = 256;
var numFramesBeforeBlit = 15;
var numFramesBeforeEnd = 15;

function drawTo2DCanvas(c2, webGLCanvas) {
  // Always clear 2D canvas to solid green first.
  c2.clearRect(0, 0, sz, sz);
  c2.fillStyle = 'rgb(0,255,0)';
  c2.fillRect(0, 0, sz, sz);
  // Draw WebGL canvas to this canvas.
  c2.drawImage(webGLCanvas, 0, 0);
}

function main() {
  let c2 = document.getElementById('canvas-2d').getContext('2d');
  let webGLCanvas = document.createElement('canvas');
  webGLCanvas.width = sz;
  webGLCanvas.height = sz;
  // Even though alpha:true is the default, specify it explicitly in order
  // to make this clear. (The test won't pass without it, anyway.)
  let gl = webGLCanvas.getContext('webgl', {alpha: true});
  if (!gl) {
    sendResult("FAILURE", "WebGL context not supported");
    return;
  }

  // Clear left half of WebGL canvas to red and right half to
  // transparent black.
  gl.disable(gl.SCISSOR_TEST);
  gl.clearColor(0.0, 0.0, 0.0, 0.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.scissor(0, 0, sz / 2, sz);
  gl.enable(gl.SCISSOR_TEST);
  gl.clearColor(1.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  // Draw to 2D canvas.
  drawTo2DCanvas(c2, webGLCanvas);

  // Clear right half of WebGL canvas to red and left half to
  // transparent black.
  gl.disable(gl.SCISSOR_TEST);
  gl.clearColor(0.0, 0.0, 0.0, 0.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.scissor(sz / 2, 0, sz / 2, sz);
  gl.enable(gl.SCISSOR_TEST);
  gl.clearColor(1.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  // Draw to 2D canvas.
  drawTo2DCanvas(c2, webGLCanvas);

  // Clear WebGL canvas to transparent black.
  gl.disable(gl.SCISSOR_TEST);
  gl.clearColor(0.0, 0.0, 0.0, 0.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  // Draw to 2D canvas.
  drawTo2DCanvas(c2, webGLCanvas);

  // 2D canvas should be green. Harness will verify this.
  waitForFinish();
}

function waitForFinish() {
  if (--numFramesBeforeEnd == 0) {
    sendResult("SUCCESS", "Test complete");
  } else {
    window.requestAnimationFrame(waitForFinish);
  }
}
</script>
</head>
<body onload="main()">
<canvas id="canvas-2d" width="256" height="256" class="nomargin" style="position:absolute; top:0px; left:0px"></canvas>
</div>
</body>
</html>