Merge ac07cdb into 3822eee

offscreen-canvas/filter/offscreencanvas.filter.html

@@ -0,0 +1,27 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="offscreencanvas.filter.js"></script>
+<script>
+var patternCanvas = createPatternCanvas();
+
+var getOffscreenContextForFilter = function(filter, pattern) {
+  var oc = new OffscreenCanvas(80, 80);
+  var offCtx = oc.getContext('2d');
+  offCtx.filter = filter;
+  offCtx.drawImage(pattern, 5, 5);
+  offCtx.drawImage(pattern, 25, 25);
+  offCtx.drawImage(pattern, 45, 45);
+  return offCtx;
+};
+
+var testFilter = function(filter) {
+  var offCtx = getOffscreenContextForFilter(filter, patternCanvas);
+  var ctx = getRegularContextForFilter(filter, patternCanvas);
+  var offImageData = offCtx.getImageData(0, 0, 80, 80).data;
+  var imageData = ctx.getImageData(0, 0, 80, 80).data;
+  matchImageDataResults(offImageData, imageData, filter);
+};
+
+generate_tests(testFilter, [filters]);
+
+</script>

offscreen-canvas/filter/offscreencanvas.filter.js

@@ -0,0 +1,48 @@
+var getRegularContextForFilter = function(filter, pattern) {
+  var c = document.createElement("canvas");
+  c.width = c.height = 80;
+  var ctx = c.getContext('2d');
+  ctx.filter = filter;
+  ctx.drawImage(pattern, 5, 5);
+  ctx.drawImage(pattern, 25, 25);
+  ctx.drawImage(pattern, 45, 45);
+  return ctx;
+};
+
+var matchImageDataResults = function(offscreenImage, regularImage, filter) {
+  assert_array_equals(offscreenImage, regularImage,
+      "The image data generated by filter " +
+      filter +
+      " should be the same for both OffscreenCanvas and regular canvas");
+};
+
+var createPatternCanvas = function() {
+  var patternCanvas = document.createElement('canvas');
+  patternCanvas.width = 20;
+  patternCanvas.height = 20;
+  var patternCtx = patternCanvas.getContext('2d');
+  patternCtx.fillStyle = '#A00';
+  patternCtx.fillRect(0, 0, 10, 10);
+  patternCtx.fillStyle = '#0A0';
+  patternCtx.fillRect(10, 0, 10, 10);
+  patternCtx.fillStyle = '#00A';
+  patternCtx.fillRect(0, 10, 10, 10);
+  patternCtx.fillStyle = "#AA0";
+  patternCtx.fillRect(10, 10, 10, 10);
+  return patternCanvas;
+};
+
+var filters =    [ "none"          ,
+      "blur(10px)"                 ,
+      "brightness(40%)"            ,
+      "contrast(20%)"              ,
+      "drop-shadow(0 0 5px green)" ,
+      "grayscale(100%)"            ,
+      "invert(100%)"               ,
+      "opacity(50%)"               ,
+      "saturate(20%)"              ,
+      "sepia(100%)"                ,
+      "sepia(1) hue-rotate(200deg)",
+      "url(#url)"                  ];
+
+

offscreen-canvas/filter/offscreencanvas.filter.w.html

@@ -0,0 +1,54 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="offscreencanvas.filter.js"></script>
+<script id='myWorker' type='text/worker'>
+self.onmessage = function(e) {
+  var getOffscreenCanvasForFilter = function(filter, pattern) {
+    var oc = new OffscreenCanvas(80, 80);
+    var offCtx = oc.getContext('2d');
+    offCtx.filter = filter;
+    offCtx.drawImage(pattern, 5, 5);
+    offCtx.drawImage(pattern, 25, 25);
+    offCtx.drawImage(pattern, 45, 45);
+    return oc;
+  };
+
+  var filters = e.data.filters;
+  var pattern = e.data.pattern;
+  var ret = [];
+  for (var i = 0; i < filters.length; i++) {
+     var oc = getOffscreenCanvasForFilter(filters[i], pattern);
+     var imageBitmap = oc.transferToImageBitmap();
+     ret.push(imageBitmap);
+  }
+  self.postMessage(ret, ret);
+};
+</script>
+<script>
+var patternCanvas = createPatternCanvas();
+
+// Build a list of image data on regular canvas with different filters
+var listCanvasImageData = [];
+for (var j = 0; j < filters.length; j++) {
+  var ctx = getRegularContextForFilter(filters[j], patternCanvas);
+  listCanvasImageData.push(ctx.getImageData(0, 0, 80, 80).data);
+}
+
+function consumeImageBitmap(patternImage) {
+  async_test(t => {
+    var blob = new Blob([document.getElementById('myWorker').textContent]);
+    var worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      for (var i = 0; i < msg.data.length; ++i) {
+        var outputCtx = document.createElement("canvas").getContext('2d');
+        outputCtx.drawImage(msg.data[i], 0, 0, 80, 80);
+        matchImageDataResults(outputCtx.getImageData(0, 0, 80, 80).data, listCanvasImageData[i], filters[i]);
+      }
+      t.done();
+    });
+  worker.postMessage({filters: filters, pattern: patternImage}, [patternImage]);
+  });
+}
+
+createImageBitmap(patternCanvas).then(consumeImageBitmap);
+</script>

offscreen-canvas/the-offscreen-canvas/offscreencanvas.resize.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<title>Test resizing an OffscreenCanvas with a 2d context</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+
+<script>
+test(function() {
+  var canvas = new OffscreenCanvas(10, 20);
+  canvas.width = 30;
+  canvas.height = 40;
+  assert_equals(canvas.width, 30);
+  assert_equals(canvas.height, 40);
+}, "Verify that writing to the width and height attributes of an OffscreenCanvas works when there is no context attached.");
+
+test(function() {
+  var canvas = new OffscreenCanvas(10, 20);
+  canvas.getContext('2d');
+  canvas.width = 30;
+  canvas.height = 40;
+  assert_equals(canvas.width, 30);
+  assert_equals(canvas.height, 40);
+  var image = canvas.transferToImageBitmap();
+  assert_equals(image.width, 30);
+  assert_equals(image.height, 40);
+}, "Verify that writing to the width and height attributes of an OffscreenCanvas works when there is a 2d context attached.");
+
+test(function() {
+  var canvas = new OffscreenCanvas(10, 20);
+  canvas.getContext('webgl');
+  canvas.width = 30;
+  canvas.height = 40;
+  assert_equals(canvas.width, 30);
+  assert_equals(canvas.height, 40);
+  var image = canvas.transferToImageBitmap();
+  assert_equals(image.width, 30);
+  assert_equals(image.height, 40);
+}, "Verify that writing to the width and height attributes of an OffscreenCanvas works when there is a webgl context attached.");
+
+test(function() {
+  var canvas = new OffscreenCanvas(10, 20);
+  var ctx = canvas.getContext('2d');
+  ctx.lineWidth = 5;
+  canvas.width = 30;
+  assert_equals(ctx.lineWidth, 1);
+  ctx.lineWidth = 5;
+  canvas.height = 40;
+  assert_equals(ctx.lineWidth, 1);
+
+}, "Verify that resizing a 2d context resets its state.");
+
+test(function() {
+  var canvas = new OffscreenCanvas(10, 20);
+  var ctx = canvas.getContext('2d');
+  ctx.lineWidth = 5;
+  canvas.width = canvas.width;
+  assert_equals(ctx.lineWidth, 1);
+  ctx.lineWidth = 5;
+  canvas.height = canvas.height;
+  assert_equals(ctx.lineWidth, 1);
+}, "Verify that setting the size of a 2d context to the same size it already had resets its state.");
+
+async_test(function(t) {
+  var placeholder = document.createElement('canvas');
+  placeholder.width = 10;
+  placeholder.height = 20;
+  var offscreen = placeholder.transferControlToOffscreen();
+  var ctx = offscreen.getContext('2d');
+  t.step(function() {
+    // Verify that setting the size of an OffscreenCanvas that has a placeholder works.
+    offscreen.width = 30;
+    offscreen.height = 40;
+    assert_equals(offscreen.width, 30);
+    assert_equals(offscreen.height, 40);
+    var image = offscreen.transferToImageBitmap();
+    assert_equals(image.width, 30);
+    assert_equals(image.height, 40);
+  });
+  t.step(function() {
+    // Verify that setting the size of an OffscreenCanvas does not directly update the size of its placeholder canvas.
+    assert_equals(placeholder.width, 10);
+    assert_equals(placeholder.height, 20);
+  });
+  var asyncStepsCompleted = 0;
+  ctx.commit();
+  createImageBitmap(placeholder).then(image => {
+    t.step(function() {
+      // Verify that the placeholder was not updated synchronously.
+      assert_equals(image.width, 10);
+      assert_equals(image.height, 20);
+    });
+    asyncStepsCompleted = asyncStepsCompleted + 1;
+    if (asyncStepsCompleted == 2) {
+      t.done();
+    }
+  });
+  // Set timeout acts as a sync barrier to allow commit to propagate
+  setTimeout(function(){
+    t.step(function() {
+      // Verify that commit() asynchronously updates the size of its placeholder canvas.
+      assert_equals(placeholder.width, 10);
+      assert_equals(placeholder.height, 20);
+    });
+    t.step(function() {
+      // Verify that width/height attributes are still settable even though they have no effect.
+      placeholder.width = 50;
+      placeholder.height = 60;
+      assert_equals(placeholder.width, 50);
+      assert_equals(placeholder.height, 60);
+    });
+    createImageBitmap(placeholder).then(image => {
+      t.step(function() {
+        // Verify that an image grabbed from the placeholder has the correct dimensions
+        assert_equals(image.width, 30);
+        assert_equals(image.height, 40);
+      });
+      asyncStepsCompleted = asyncStepsCompleted + 1;
+      if (asyncStepsCompleted == 2) {
+        t.done();
+      }
+    });
+  }, 0);
+}, "Verify that resizing an OffscreenCanvas with a 2d context propagates the new size to its placeholder canvas asynchronously, upon commit.");
+
+async_test(function(t) {
+  var placeholder = document.createElement('canvas');
+  placeholder.width = 10;
+  placeholder.height = 20;
+  var offscreen = placeholder.transferControlToOffscreen();
+  var ctx = offscreen.getContext('webgl');
+  t.step(function() {
+    // Verify that setting the size of an OffscreenCanvas that has a placeholder works.
+    offscreen.width = 30;
+    offscreen.height = 40;
+    assert_equals(offscreen.width, 30);
+    assert_equals(offscreen.height, 40);
+    var image = offscreen.transferToImageBitmap();
+    assert_equals(image.width, 30);
+    assert_equals(image.height, 40);
+  });
+  t.step(function() {
+    // Verify that setting the size of an OffscreenCanvas does not directly update the size of its placeholder canvas.
+    assert_equals(placeholder.width, 10);
+    assert_equals(placeholder.height, 20);
+  });
+  var asyncStepsCompleted = 0;
+  ctx.commit();
+  createImageBitmap(placeholder).then(image => {
+    t.step(function() {
+      // Verify that the placeholder was not updated synchronously.
+      assert_equals(image.width, 10);
+      assert_equals(image.height, 20);
+    });
+    asyncStepsCompleted = asyncStepsCompleted + 1;
+    if (asyncStepsCompleted == 2) {
+      t.done();
+    }
+  });
+  // Set timeout acts as a sync barrier to allow commit to propagate
+  setTimeout(function(){
+    t.step(function() {
+      // Verify that commit() asynchronously updates the size of its placeholder canvas.
+      assert_equals(placeholder.width, 10);
+      assert_equals(placeholder.height, 20);
+    });
+    t.step(function() {
+      // Verify that width/height attributes are still settable even though they have no effect.
+      placeholder.width = 50;
+      placeholder.height = 60;
+      assert_equals(placeholder.width, 50);
+      assert_equals(placeholder.height, 60);
+    });
+    createImageBitmap(placeholder).then(image => {
+      t.step(function() {
+        // Verify that an image grabbed from the placeholder has the correct dimensions
+        assert_equals(image.width, 30);
+        assert_equals(image.height, 40);
+      });
+      asyncStepsCompleted = asyncStepsCompleted + 1;
+      if (asyncStepsCompleted == 2) {
+        t.done();
+      }
+    });
+  }, 0);
+}, "Verify that resizing an OffscreenCanvas with a webgl context propagates the new size to its placeholder canvas asynchronously, upon commit.");
+
+async_test(function(t){
+  var placeholder = document.createElement('canvas');
+  placeholder.width = 1;
+  placeholder.height = 1;
+  var offscreen = placeholder.transferControlToOffscreen();
+  var ctx = offscreen.getContext('2d');
+  offscreen.width = offscreen.height = 10;
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 10, 10);
+  ctx.commit();
+  // Set timeout acts as a sync barrier to allow commit to propagate
+  setTimeout(function(){
+    var testCanvas = document.createElement('canvas');
+    testCanvas.width = testCanvas.height = 20;
+    testCtx = testCanvas.getContext('2d');
+    testCtx.drawImage(placeholder, 0, 0);
+    var pixel1 = testCtx.getImageData(9, 9, 1, 1).data;
+    var pixel2 = testCtx.getImageData(9, 10, 1, 1).data;
+    var pixel3 = testCtx.getImageData(10, 9, 1, 1).data;
+    t.step(function() {
+      assert_equals(placeholder.width, 1);
+      assert_equals(placeholder.height, 1);
+      assert_array_equals(pixel1, [0, 255, 0, 255]);
+      assert_array_equals(pixel2, [0, 0, 0, 0]);
+      assert_array_equals(pixel3, [0, 0, 0, 0]);
+    });
+    t.done();
+  });
+
+}, "Verify that drawImage uses the size of the committed frame as the intinsic size of a placeholder canvas.");
+</script>