OffscreenCanvas-2d-imageData-in-worker.html

<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='150' height='150'></canvas>
<script src="../../resources/js-test.js"></script>
<script id='myWorker' type='text/worker'>
function prefilledImageData() {
    var myImageData = new ImageData(10, 10);
    var dataArr = myImageData.data;
    for (var i = 0; i < dataArr.length; i+=4) {
        dataArr[i + 0] = 255;
        dataArr[i + 1] = 100;
        dataArr[i + 2] = 0;
        dataArr[i + 3] = 255;
    }
    return myImageData;
}
function postMessageToMain(t, c) {
    self.postMessage({topic: t, content: c});
}
self.onmessage = function(e) {
    var aCanvas = new OffscreenCanvas(10, 10);
    var ctx = aCanvas.getContext('2d', {willReadFrequently: true});
    
    // createImageData(sx, sy)
    try {
        var blankImageData = ctx.createImageData(10, 10);
        postMessageToMain("createImageData(sx, sy)", blankImageData.data[1]);
    } catch (err) {
        postMessageToMain("createImageData(sx, sy)", err);
    }

    // createImageData(ImageData)
    try {
        var blankImageData = ctx.createImageData(prefilledImageData());
        postMessageToMain('createImageData(ImageData)', blankImageData.data[1]);
    } catch (err) {
        postMessageToMain('createImageData(ImageData)', err);
    }

    // getImageData(sx, sy, sw, sh)
    try {
        ctx.fillStyle = "blue";
        ctx.fillRect(2, 0, 3, 1);
        var imageDataFromCanvas = ctx.getImageData(2, 0, 3, 1);
        postMessageToMain('getImageData(sx, sy, sw, sh)', imageDataFromCanvas.data[2]);
    } catch (err) {
        postMessageToMain('getImageData(sx, sy, sw, sh)', err);
    }

    // putImageData(ImageData, dx, dy)
    try {
        ctx.putImageData(prefilledImageData(), 0, 0);
        var imageDataFromCanvas = ctx.getImageData(0, 0, 1, 1);
        postMessageToMain("putImageData(ImageData, dx, dy)", imageDataFromCanvas.data[1]);
    } catch (err) {
        postMessageToMain("putImageData(ImageData, dx, dy)", err);
    }

    // putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
    ctx.clearRect(0, 0, aCanvas.width, aCanvas.height);
    try {
        ctx.putImageData(prefilledImageData(), 0, 0, 3, 0, 1, 1);
        var imageDataFromCanvas = ctx.getImageData(3, 0, 1, 1);
        postMessageToMain("putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)", imageDataFromCanvas.data[1]);
    } catch (err) {
        postMessageToMain("putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) failed: ", err);
    }

    postMessageToMain("", "");
};
</script>
<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
}

var blob = new Blob([document.getElementById('myWorker').textContent]);
var worker = new Worker(URL.createObjectURL(blob));
worker.addEventListener('message', msg => {
  var data = msg.data;
  switch (data.topic) {
      case "createImageData(sx, sy)":
          if (data.content == "0")
              testPassed("createImageData(sx, sy) creates blank image correctly");
          else
              testFailed("createImageData(ImageData) failed: " + data.content);
          break;
      case "createImageData(ImageData)":
          if (data.content == "0")
              testPassed("createImageData(ImageData) creates blank image correctly");
          else
              testFailed("createImageData(ImageData) failed: " + data.content);
          break;
      case "getImageData(sx, sy, sw, sh)":
          if (data.content == "255")
              testPassed("getImageData(sx, sy, sw, sh) is successful.");
          else
              testFailed("getImageData(sx, sy, sw, sh) failed: " + data.content);
          break;
      case "putImageData(ImageData, dx, dy)":
          if (data.content == "100")
              testPassed("putImageData(ImageData, dx, dy) is successful.");
          else
              testFailed("putImageData(ImageData, dx, dy) failed: " + data.content);
          break;
      case "putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)":
          if (data.content == "100")
              testPassed("putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) is successful.");
          else
              testFailed("putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) failed: " + data.content);
          break;
      default:
          if (window.testRunner) {
            testRunner.notifyDone();
          }
          break;
  }
});
worker.postMessage("");

</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/OffscreenCanvas-2d-imageData-in-worker.html
