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
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111


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

<!DOCTYPE HTML>

<html>
<head>
<title>OffscreenCanvas 2d flow on main thread: Two Canvases</title>
<style type="text/css">
.nomargin {
  margin: 0px auto;
}
</style>
</head>
<body onload="main()">
<div style="position:relative; width:360px; height:200px; background-color:white">
</div>
<div id="container" style="position:absolute; top:0px; left:0px;font-size: 0">
<canvas id="canvas1" width="180" height="200" class="nomargin"></canvas>
<canvas id="canvas2" width="180" height="200" class="nomargin"></canvas>
</div>
<script>
/* This pixel test checks the following:
    1. Whether submission of frames for multiple canvases happen about the same
       time for OffscreenCanvas that are invoked in the same JS task.
    2. Whether overdraw frame in one animation loop is handled well.
    3. Whether the drawn 2d image is position upright.

    Correct end result of this test: The left canvas shows a seven-spike skyblue
    star on the top-left corner of a green background and the right canvas shows
    a sky-blue fill.
*/

var g_swapsBeforeAck = 15;
var g_asyncCallbackNumber = 2;

function getOffscreenContext(htmlCanvasId) {
  return document.getElementById(htmlCanvasId).transferControlToOffscreen().getContext("2d");
}

function startTest() {
  var ctx1 = getOffscreenContext("canvas1");
  var ctx2 = getOffscreenContext("canvas2");

  ctx1.fillStyle = "green";
  ctx1.fillRect(0, 0, 180, 200);

  requestAnimationFrame(() => {
    ctx2.fillRect(0, 0, 180, 200);
    // This ctx2 must happen after the other ctx2 below.
    if (--g_asyncCallbackNumber == 0) waitForFinish();
  });

  function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
    var rot = Math.PI / 2 * 3;
    var x = cx;
    var y = cy;
    var step = Math.PI / spikes;

    ctx.beginPath();
    ctx.moveTo(cx, cy - outerRadius);
    for (i = 0; i < spikes; i++) {
      x = cx + Math.cos(rot) * outerRadius;
      y = cy + Math.sin(rot) * outerRadius;
      ctx.lineTo(x, y);
      rot += step;

      x = cx + Math.cos(rot) * innerRadius;
      y = cy + Math.sin(rot) * innerRadius;
      ctx.lineTo(x, y);
      rot += step;
    }
    ctx.lineTo(cx, cy - outerRadius);
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'black';
    ctx.stroke();
    ctx.fillStyle = 'skyblue';
    ctx.fill();
  }

  // Do something complex to ctx2.
  ctx2.fillStyle = "blue";
  ctx2.fillRect(0, 0, 180, 200);
  drawStar(ctx2, 90, 100, 25, 60, 40);
  // This ctx2 must be resolved at about the same time as the first
  // ctx1 above because they are in the same JS task, no matter how
  // complex the drawing operation is.
  requestAnimationFrame(() => {
    drawStar(ctx1, 70, 80, 7, 60, 30);

    if (--g_asyncCallbackNumber == 0) waitForFinish();
  });

}

function main() {
  startTest();
}

function waitForFinish()
{
  if (g_swapsBeforeAck == 0) {
    domAutomationController.send("SUCCESS");
  } else {
    g_swapsBeforeAck--;
    document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;
    requestAnimationFrame(waitForFinish);
  }
}

</script>
</body>
</html>