src/third_party/WebKit/LayoutTests/fast/canvas/webgl/draw-webgl-to-canvas-2d.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <span id="description" style="color: white">
   5 This test checks for drawing webgl to canvas 2d. The test process is as follows:
   6 1. draw a green rect on a webgl context.
   7 2. draw a red rect on a canvas 2d context, and check a pixel (should be red).
   8 3. draw the webgl contents on the canvas 2d context, and check a pixel (should be green).
   9 4. wait for few frames.
  10 5. draw a red rect on the canvas 2d context, and check a pixel (should be red).
  11 6. draw the webgl contents on the canvas 2d context, and check a pixel (see below explanation).
  12
  13 Above test is executed for both preserve and non-preserve webgl contexts.
  14 For the preserve webgl context, the pixel on #6 is green.
  15 For the non-preserve webgl context, the pixel on #6 is undefined.[1]
  16
  17 [1] http://www.khronos.org/registry/webgl/specs/latest/1.0/.
  18 "This default behavior can be changed by setting the preserveDrawingBuffer
  19 attribute of the WebGLContextAttributes object. If this flag is true, the
  20 contents of the drawing buffer shall be preserved until the author either clears
  21 or overwrites them. If this flag is false, attempting to perform operations
  22 using this context as a source image after the rendering function has returned
  23 can lead to undefined behavior.".
  24 </span>
  25 <canvas id="preserve-canvas3d" width="100" height="100"></canvas>
  26 <canvas id="preserve-canvas2d" width="100" height="100"></canvas>
  27 <canvas id="nonpreserve-canvas3d" width="100" height="100"></canvas>
  28 <canvas id="nonpreserve-canvas2d" width="100" height="100"></canvas>
  29 <script src="../../../resources/js-test.js"></script>
  30 <script>
  31 if (window.testRunner) {
  32     testRunner.dumpAsText();
  33     testRunner.waitUntilDone();
  34 }
  35
  36 var preserve_ctx2D;
  37 var preserve_canvas3D;
  38 var preserve_gl;
  39 var nonpreserve_ctx2D;
  40 var nonpreserve_canvas3D;
  41 var nonpreserve_gl;
  42 var imgdata;
  43
  44 function createContexts() {
  45     preserve_ctx2D = document.getElementById("preserve-canvas2d").getContext("2d");
  46     preserve_canvas3D = document.getElementById('preserve-canvas3d');
  47     preserve_gl = preserve_canvas3D.getContext('webgl', {'preserveDrawingBuffer': true});
  48     nonpreserve_ctx2D = document.getElementById("nonpreserve-canvas2d").getContext("2d");
  49     nonpreserve_canvas3D = document.getElementById('nonpreserve-canvas3d');
  50     nonpreserve_gl = nonpreserve_canvas3D.getContext('webgl', {'preserveDrawingBuffer': false});
  51 }
  52
  53 function renderWebGL(gl) {
  54     gl.clearColor(0, 1, 0, 1);
  55     gl.clear(gl.COLOR_BUFFER_BIT);
  56 }
  57
  58 function drawWebGLToCanvas2D(ctx2D, canvas3D, isDrawingBufferUndefined) {
  59     // draw red rect on canvas 2d.
  60     ctx2D.fillStyle = 'red';
  61     ctx2D.fillRect(0, 0, 100, 100);
  62     var imageData = ctx2D.getImageData(0, 0, 1, 1);
  63     imgdata = imageData.data;
  64     shouldBe("imgdata[0]", "255");
  65     shouldBe("imgdata[1]", "0");
  66     shouldBe("imgdata[2]", "0");
  67
  68     // draw the webgl contents (green rect) on the canvas 2d context.
  69     ctx2D.drawImage(canvas3D, 0, 0);
  70     ctx2D.getImageData(0, 0, 1, 1);
  71     imageData = ctx2D.getImageData(0, 0, 1, 1);
  72     imgdata = imageData.data;
  73     if (isDrawingBufferUndefined) {
  74         // Current implementation draws transparent texture on the canvas 2d context,
  75         // although the spec said it leads to undefined behavior.
  76         shouldBe("imgdata[0]", "255");
  77         shouldBe("imgdata[1]", "0");
  78         shouldBe("imgdata[2]", "0");
  79     } else {
  80         shouldBe("imgdata[0]", "0");
  81         shouldBe("imgdata[1]", "255");
  82         shouldBe("imgdata[2]", "0");
  83     }
  84
  85     if (isDrawingBufferUndefined && window.testRunner)
  86         testRunner.notifyDone();
  87 }
  88
  89 function asyncTest() {
  90     debug("Check for drawing webgl to canvas 2d several frames after drawing webgl contents.")
  91     debug("1) when drawingBuffer is preserved.")
  92     drawWebGLToCanvas2D(preserve_ctx2D, preserve_canvas3D, false);
  93     debug("2) when drawingBuffer is not preserved. It leads to undefined behavior.")
  94     drawWebGLToCanvas2D(nonpreserve_ctx2D, nonpreserve_canvas3D, true);
  95 }
  96
  97 function startTestAfterFirstPaint() {
  98     // create both canvas 2d and webgl contexts.
  99     createContexts();
 100     // prepare webgl contents.
 101     renderWebGL(preserve_gl);
 102     renderWebGL(nonpreserve_gl);
 103
 104     debug("Check for drawing webgl to canvas 2d on the same frame.")
 105     debug("1) when drawingBuffer is preserved.")
 106     drawWebGLToCanvas2D(preserve_ctx2D, preserve_canvas3D, false);
 107     debug("2) when drawingBuffer is not preserved.")
 108     drawWebGLToCanvas2D(nonpreserve_ctx2D, nonpreserve_canvas3D, false);
 109
 110     if (window.testRunner) {
 111         testRunner.waitUntilDone();
 112         testRunner.displayAsyncThen(asyncTest);
 113     } else {
 114         window.requestAnimationFrame(asyncTest);
 115     }
 116 }
 117
 118 window.onload = function () {
 119     window.requestAnimationFrame(startTestAfterFirstPaint);
 120 }
 121
 122 </script>
 123 </body>
 124 </html>