1 files changed, 56 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html
new file mode 100644
index 0000000000..a53de72259
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.color.space.p3.toBlob.with.putImageData</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.color.space.p3.toBlob.with.putImageData</h1>
+<p class="desc">Use putImageData to put some p3 data in canvas and test if toBlob returns the same data</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Use putImageData to put some p3 data in canvas and test if toBlob returns the same data");
+_addTest(function(canvas, ctx) {
+
+  canvas.width = 2;
+  canvas.height = 2;
+
+  // Create an ImageData using createImageData and populate its data array.
+  var image_data = ctx.createImageData(canvas.width, canvas.height, {colorSpace: "display-p3"});
+  var color_data = [[255, 100, 150, 1.0], [255, 100, 150, 0.5],
+                   [255, 100, 150, 0.5], [255, 100, 150, 0]];
+  var data = image_data.data;
+  for (var i = 0; i < data.length / 4; ++i) {
+    data[4*i + 0] = color_data[i][0];
+    data[4*i + 1] = color_data[i][1];
+    data[4*i + 2] = color_data[i][2];
+    data[4*i + 3] = color_data[i][3];
+  }
+  ctx.putImageData(image_data, 0, 0);
+  expectedPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+
+  var image = new Image();
+  image.onload = t.step_func_done(function() {
+      var dstCanvas = document.createElement("canvas");
+      dstCanvas.width = 2;
+      dstCanvas.height = 2;
+      var ctx = dstCanvas.getContext('2d', {colorSpace: "display-p3"});
+      ctx.drawImage(image, 0, 0);
+      var actualPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+      assert_array_approx_equals(actualPixels, expectedPixels, 2);
+  });
+  canvas.toBlob(function(blob) {
+      var urlCreator = window.URL || window.webkitURL;
+      image.src = urlCreator.createObjectURL(blob);
+  }, 'image/png', 1);
+
+}, {colorSpace: "display-p3"});
+</script>
+