third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-webgl.html

   1 <html>
   2 <head>
   3 <script src="../../resources/js-test.js"></script>
   4 </head>
   5 <body onload="start();">
   6 <canvas id="webgl" width="200" height="200"></canvas>
   7 <script>
   8 /*
   9  * crbug.com/438986
  10  * window.createImageBitmap(HTMLCanvasElement) copies the back buffer of WebGL.
  11  * So createImageBitmap(HTMLCanvasElement) must create transparent ImageBuffer
  12  * 1 frame after WebGL draws contents.
  13  */
  14     window.jsTestIsAsync = true;
  15
  16     var canvas = document.createElement("canvas");
  17     canvas.width = 200;
  18     canvas.height = 200;
  19     var ctx = canvas.getContext("2d");
  20     function shouldBeGreen(x, y) {
  21         d = ctx.getImageData(x, y, 1, 1).data;
  22         shouldBeTrue("d[0] == 0");
  23         shouldBeTrue("d[1] == 255");
  24         shouldBeTrue("d[2] == 0");
  25         shouldBeTrue("d[3] == 255");
  26     }
  27
  28     function shouldBeTransparent(x, y) {
  29         d = ctx.getImageData(x, y, 1, 1).data;
  30         shouldBeTrue("d[0] == 0");
  31         shouldBeTrue("d[1] == 0");
  32         shouldBeTrue("d[2] == 0");
  33         shouldBeTrue("d[3] == 0");
  34     }
  35
  36     function start() {
  37         debug("Check the imageBitmap of webgl.")
  38         var webgl_canvas = document.getElementById("webgl");
  39         var gl = webgl_canvas.getContext("webgl", {preserveDrawingBuffer: false});
  40         gl.clearColor(0.0, 1.0, 0.0, 1.0);
  41         gl.clear(gl.COLOR_BUFFER_BIT);
  42         createImageBitmapAndCheck(webgl_canvas, false).then(function() {
  43             if (window.testRunner) {
  44                 testRunner.layoutAndPaintAsyncThen(asyncTest);
  45             } else {
  46                 window.requestAnimationFrame(asyncTest);
  47             }
  48         });
  49     }
  50
  51     function createImageBitmapAndCheck(webgl_canvas, discarded) {
  52         return createImageBitmap(webgl_canvas).then(function (imageBitmap) {
  53             ctx.clearRect(0, 0, 200, 200);
  54             ctx.drawImage(imageBitmap, 0, 0);
  55             if (!discarded) {
  56                 shouldBeGreen(50, 50);
  57                 shouldBeGreen(150, 150);
  58             } else {
  59                 shouldBeTransparent(50, 50);
  60                 shouldBeTransparent(150, 150);
  61             }
  62         }, function() {
  63             testFailed("Promise was rejected.");
  64             finishJSTest();
  65         });
  66     }
  67
  68     function asyncTest() {
  69         debug("Check the imageBitmap of webgl in the next frame. drawingBuffer is discarded.")
  70         var webgl_canvas = document.getElementById("webgl");
  71         createImageBitmapAndCheck(webgl_canvas, true).then(function() {
  72             finishJSTest();
  73         });
  74     }
  75 </script>
  76 </body>
  77 </html>