dom/canvas/test/webgl-conf/checkout/conformance/offscreencanvas/context-attribute-preserve-drawing-buffer.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6 <!DOCTYPE html>
   7 <html>
   8 <head>
   9 <meta charset="utf-8">
  10 <title>OffscreenCanavs context attribute preserveDrawingBuffer</title>
  11 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
  12 <script src="../../js/js-test-pre.js"></script>
  13 <script src="../../js/webgl-test-utils.js"></script>
  14 <script src="../../js/tests/canvas-tests-utils.js"></script>
  15 </head>
  16 <body>
  17 <div id="description"></div>
  18 <div id="canvases"></div>
  19 <div id="console"></div>
  20 <script>
  21 "use strict";
  22 description("This test checks whether OffscreenCanvas webgl context honors the preserveDrawingBuffer flag.");
  23 const wtu = WebGLTestUtils;
  24 const pixels = new Uint8Array(4);
  25
  26 function checkPixels(color) {
  27   return (color[0] === pixels[0]) &&
  28     (color[1] === pixels[1]) &&
  29     (color[2] === pixels[2]) &&
  30     (color[3] === pixels[3]);
  31 }
  32
  33 const nextFrame = () => new Promise(r => requestAnimationFrame(r));
  34
  35 async function getPixelsFromOffscreenWebgl(preserveFlag, color, msg) {
  36   const canvas = document.createElement("canvas");
  37   document.getElementById("canvases").appendChild(canvas);
  38   const offscreenCanvas = transferredOffscreenCanvasCreation(canvas, 10, 10);
  39   const gl = offscreenCanvas.getContext("webgl", {preserveDrawingBuffer: preserveFlag});
  40
  41   // Draw some color on gl
  42   gl.clearColor(1, 0, 1, 1);
  43   gl.clear(gl.COLOR_BUFFER_BIT);
  44
  45   let t;
  46   const t0 = await nextFrame();
  47   const timeDuration = preserveFlag ? 500 : 2000;
  48   for (;;) {
  49     t = await nextFrame();
  50
  51     gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  52     if (preserveFlag) {
  53       if (!checkPixels(color)) {
  54         testFailed(msg + '\nexpected: ' + color.toString() + ' was ' + pixels.toString());
  55         return;
  56       }
  57     } else {
  58       if (checkPixels(color)) {
  59         testPassed(msg);
  60         return;
  61       }
  62     }
  63
  64     // Keep checking until it takes up to a certain time.
  65     // preserveDrawingBuffer:false seems flaky on Chrome's test bots; run that test for longer.
  66     if (t > t0 + timeDuration) {
  67       break;
  68     }
  69   }
  70
  71   if (preserveFlag) {
  72     testPassed(msg);
  73   } else {
  74     testFailed(msg + '\nafter ' + timeDuration + ' ms, expected: ' + color.toString() + ' was ' + pixels.toString());
  75   }
  76 }
  77
  78 (async () => {
  79   if (!window.OffscreenCanvas) {
  80       testPassed("No OffscreenCanvas support");
  81   } else {
  82     // Test if OffscreenCanvas.webgl retains contents if preserveDrawingBuffer is true.
  83     await getPixelsFromOffscreenWebgl(true, [255,0,255,255], "should be preserved");
  84
  85     // Test if OffscreenCanvas.webgl loses contents if preserveDrawingBuffer is false.
  86     await getPixelsFromOffscreenWebgl(false, [0, 0, 0, 0], "should not be preserved");
  87   }
  88   finishTest();
  89 })();
  90
  91 </script>
  92 </body>
  93 </html>