Adding toBlob and toDataURL tests for p3 colorspace

Adding toBlob and toDataURL tests for p3 colorspace, which does the following: - create a p3 canvas, draw some image - getImageData from the p3 canvas - call toBlob/toDataURL and asking for data in p3 format - compare if result of toBlob/toDataURL is same as the result from getImageData from step 2 Bug: 1178707 Change-Id: I5b5caf8321841977f4e212b3577c89496d92bb6b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2832392 Auto-Submit: Yi Xu <yiyix@chromium.org> Commit-Queue: Juanmi Huertas <juanmihd@chromium.org> Reviewed-by: Juanmi Huertas <juanmihd@chromium.org> Cr-Commit-Position: refs/heads/master@{#873847}
web-platform-tests · Apr 19, 2021 · b301b06 · b301b06
1 parent a0abb88
commit b301b06
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 2 deletions.
diff --git a/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html b/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html
@@ -32,6 +32,7 @@ <h1>2d.color.space.p3.to.srgb</h1>
 assert_approx_equals(pixel[2], pixel_expected[2], 2);
 assert_approx_equals(pixel[3], pixel_expected[3], 2);
 
+
 }, {colorSpace: "display-p3"});
 </script>
 
diff --git a/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.p3.canvas.html b/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.p3.canvas.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.color.space.p3.toBlob.p3.canvas</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.p3.canvas</h1>
+<p class="desc">test if toblob returns p3 data from p3 color space canvas</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("test if toblob returns p3 data from p3 color space canvas");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = "rgba(155, 27, 27, 1)";
+ctx.fillRect(0, 0, 1, 1);
+ctx.fillStyle = "rgba(27, 155, 27, 0)";
+ctx.fillRect(1, 0, 1, 1);
+ctx.fillStyle = "rgba(27, 27, 155, 0.5)";
+ctx.fillRect(0, 1, 1, 1);
+ctx.fillStyle = "rgba(27, 27, 27, 0.5)";
+ctx.fillRect(1, 1, 1, 1);
+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>
+
diff --git a/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.p3.canvas.html b/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.p3.canvas.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.color.space.p3.toDataURL.p3.canvas</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.toDataURL.p3.canvas</h1>
+<p class="desc">test if toblob returns p3 data from canvas with p3 color space</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("test if toblob returns p3 data from canvas with p3 color space");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = "rgba(155, 27, 27, 1)";
+ctx.fillRect(0, 0, 1, 1);
+ctx.fillStyle = "rgba(27, 155, 27, 0)";
+ctx.fillRect(1, 0, 1, 1);
+ctx.fillStyle = "rgba(27, 27, 155, 0.5)";
+ctx.fillRect(0, 1, 1, 1);
+ctx.fillStyle = "rgba(27, 27, 27, 0.5)";
+ctx.fillRect(1, 1, 1, 1);
+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);
+});
+image.src = canvas.toDataURL();
+
+
+}, {colorSpace: "display-p3"});
+</script>
+
diff --git a/html/canvas/offscreen/manual/wide-gamut-canvas/2d.color.space.p3.convertToBlobp3.canvas.html b/html/canvas/offscreen/manual/wide-gamut-canvas/2d.color.space.p3.convertToBlobp3.canvas.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>OffscreenCanvas test: 2d.color.space.p3.convertToBlob.p3.canvas</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.color.space.p3.convertToBlob.p3.canvas</h1>
+<p class="desc">test if toblob returns p3 data from p3 color space canvas</p>
+
+
+<script>
+var t = async_test("test if toblob returns p3 data from p3 color space canvas");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+var offscreenCanvas = new OffscreenCanvas(100, 50);
+var ctx = offscreenCanvas.getContext('2d', {colorSpace: "display-p3"});
+
+ctx.fillStyle = "rgba(155, 27, 27, 1)";
+ctx.fillRect(0, 0, 1, 1);
+ctx.fillStyle = "rgba(27, 155, 27, 0)";
+ctx.fillRect(1, 0, 1, 1);
+ctx.fillStyle = "rgba(27, 27, 155, 0.5)";
+ctx.fillRect(0, 1, 1, 1);
+ctx.fillStyle = "rgba(27, 27, 27, 0.5)";
+ctx.fillRect(1, 1, 1, 1);
+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);
+});
+
+offscreenCanvas.convertToBlob(function(blob) {
+    var urlCreator = window.URL || window.webkitURL;
+    image.src = urlCreator.createObjectURL(blob);
+}, 'image/png', 1);
+t.done()
+
+});
+</script>
diff --git a/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.html b/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.html
@@ -33,5 +33,6 @@ <h1>2d.color.space.p3.to.srgb</h1>
 assert_approx_equals(pixel[2], pixel_expected[2], 2);
 assert_approx_equals(pixel[3], pixel_expected[3], 2);
 t.done();
+
 });
 </script>
diff --git a/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.worker.js b/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.worker.js
@@ -29,5 +29,6 @@ assert_approx_equals(pixel[1], pixel_expected[1], 2);
 assert_approx_equals(pixel[2], pixel_expected[2], 2);
 assert_approx_equals(pixel[3], pixel_expected[3], 2);
 t.done();
+
 });
 done();
diff --git a/html/canvas/tools/yaml/element/color_space.yaml b/html/canvas/tools/yaml/element/color_space.yaml
@@ -37,4 +37,66 @@
     assert_approx_equals(pixel[0], pixel_expected[0], 2);
     assert_approx_equals(pixel[1], pixel_expected[1], 2);
     assert_approx_equals(pixel[2], pixel_expected[2], 2);
-    assert_approx_equals(pixel[3], pixel_expected[3], 2);
+    assert_approx_equals(pixel[3], pixel_expected[3], 2);
+
+- name: 2d.color.space.p3.toBlob.p3.canvas
+  testing:
+  - 2d.color.space.p3.and.uint8
+  desc: test if toblob returns p3 data from p3 color space canvas
+  attributes: |
+    {colorSpace: "display-p3"}
+  code: |
+    ctx.fillStyle = "rgba(155, 27, 27, 1)";
+    ctx.fillRect(0, 0, 1, 1);
+    ctx.fillStyle = "rgba(27, 155, 27, 0)";
+    ctx.fillRect(1, 0, 1, 1);
+    ctx.fillStyle = "rgba(27, 27, 155, 0.5)";
+    ctx.fillRect(0, 1, 1, 1);
+    ctx.fillStyle = "rgba(27, 27, 27, 0.5)";
+    ctx.fillRect(1, 1, 1, 1);
+    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);
+
+- name: 2d.color.space.p3.toDataURL.p3.canvas
+  testing:
+  - 2d.color.space.p3.and.uint8
+  desc: test if toblob returns p3 data from canvas with p3 color space
+  attributes: |
+    {colorSpace: "display-p3"}
+  code: |
+    ctx.fillStyle = "rgba(155, 27, 27, 1)";
+    ctx.fillRect(0, 0, 1, 1);
+    ctx.fillStyle = "rgba(27, 155, 27, 0)";
+    ctx.fillRect(1, 0, 1, 1);
+    ctx.fillStyle = "rgba(27, 27, 155, 0.5)";
+    ctx.fillRect(0, 1, 1, 1);
+    ctx.fillStyle = "rgba(27, 27, 27, 0.5)";
+    ctx.fillRect(1, 1, 1, 1);
+    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);
+    });
+    image.src = canvas.toDataURL();
diff --git a/html/canvas/tools/yaml/offscreen/color_space.yaml b/html/canvas/tools/yaml/offscreen/color_space.yaml
@@ -39,4 +39,4 @@
     assert_approx_equals(pixel[1], pixel_expected[1], 2);
     assert_approx_equals(pixel[2], pixel_expected[2], 2);
     assert_approx_equals(pixel[3], pixel_expected[3], 2);
-    t.done();
+    t.done();