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

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

<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Uses CALayerOverlay Test</title>

<script>
// '--enable-gpu-benchmarking' is required for this test.

// Diagnostics:
// * Page is blank: something fundamental is broken with workers,
//   OffscreenCanvas, ImageBitmap, or ImageBitmapRendering context.
//   Check the console output.
// * Black square: You probably forgot to run with the
//   --enable-gpu-benchmarking flag or
//   addCoreAnimationStatusEventListener failed for some reason.
// * Red square: Test failed, CALayerOverlay is not being used.
// * Green square: Test passed, CALayerOverlay is being used.
// * None of the above: You're in big trouble!

async function main() {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('bitmaprenderer');
  const bg_canvas = new OffscreenCanvas(canvas.width, canvas.height);
  const bg_ctx = bg_canvas.getContext('2d');

  bg_ctx.clearRect(0, 0, canvas.width, canvas.height);
  bg_ctx.fillStyle = "Black";
  bg_ctx.fillRect(0, 0, 100, 100);

  const image1 = await createImageBitmap(bg_canvas);
  context.transferFromImageBitmap(image1);

  async function errorCodeHandler(errorCode) {
    // gfx::kCALayerSuccess = 0
    bg_ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (errorCode == 0) {
      console.log("CALayerOverlay is being used");
      bg_ctx.fillStyle = "DarkGreen";
      if (window.domAutomationController) {
        window.domAutomationController.send("SUCCESS");
      }
    } else {
      console.log("CALayerOverlay is not used. Error code:" , errorCode);
      bg_ctx.fillStyle = "Red";
      if (window.domAutomationController) {
        window.domAutomationController.send("FAILED");
      }
    }
    bg_ctx.fillRect(0, 0, 100, 100);
    const image = await createImageBitmap(bg_canvas);
    context.transferFromImageBitmap(image);
  }

  async function draw() {
    if (!chrome.gpuBenchmarking.addCoreAnimationStatusEventListener(errorCodeHandler)) {
      console.log("addCoreAnimationStatusEventListener fails!");
      if (window.domAutomationController) {
        window.domAutomationController.send("FAILED");
      }
    }
  }

  window.requestAnimationFrame(draw);
}

</script>
</head>
<body onload="main()">
<canvas id="canvas" width="100" height="100">
</body>
</html>