Add float16 support 2d context

Allow users to create 2d context with pixelFormat float16, i.e., users can now create context like: ctx = canvas.getContext('2d', {pixelFormat: 'float16'}). Note that the default colortype for getImageData is uint8, so calls like `ctx.getImageData(x, y, w, h)` without `colortype` returns pixels in format uint8 with context of type float16. proposal: w3c/ColorWeb-CG#105 Bug: 1468666 Change-Id: I0309c6d8c573edc84a6a6643ea8ae9563986a242
web-platform-tests · Jul 28, 2023 · 04899e4 · 04899e4
1 parent a02414f
commit 04899e4
Show file tree

Hide file tree

Showing 8 changed files with 307 additions and 0 deletions.
diff --git a/html/canvas/element/manual/wide-gamut-canvas/canvas-pixelFormat-settings.html b/html/canvas/element/manual/wide-gamut-canvas/canvas-pixelFormat-settings.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+
+var testScenarios = [
+    ["Test default context creation parameters: srgb/uint8",
+        {},
+        {colorSpace: "srgb", pixelFormat: "uint8"}],
+    ["Test CanvasColorSpace value srgb",
+        {colorSpace: "srgb"},
+        {colorSpace: "srgb", pixelFormat: "uint8"}],
+    ["Test CanvasColorSpace value p3, no pixel format, falls back to p3/uint8",
+        {colorSpace: "display-p3"},
+        {colorSpace: "display-p3", pixelFormat: "uint8"}],
+    ["Test CanvasPixelFormat value uint8",
+        {pixelFormat: "uint8"},
+        {colorSpace: "srgb", pixelFormat: "uint8"}],
+    ["Test CanvasPixelFormat value float16",
+        {pixelFormat: "float16"},
+        {colorSpace: "srgb", pixelFormat: "float16"}],
+    ["Test supported color settings srgb/uint8",
+        {colorSpace: "srgb", pixelFormat: "uint8"},
+        {colorSpace: "srgb", pixelFormat: "uint8"}],
+    ["Test supported color settings srgb/float16",
+        {colorSpace: "srgb", pixelFormat: "float16"},
+        {colorSpace: "srgb", pixelFormat: "float16"}],
+    ["Test supported color settings p3/uint8, falls back to srgb/uint8",
+        {colorSpace: "display-p3", pixelFormat: "uint8"},
+        {colorSpace: "display-p3", pixelFormat: "uint8"}],
+    ["Test supported color settings p3/float16",
+        {colorSpace: "display-p3", pixelFormat: "float16"},
+        {colorSpace: "display-p3", pixelFormat: "float16"}],
+];
+
+async_test(function(t) {
+    function runTestScenario(disc, contextCreationParameters, expectedContextAttributes) {
+        var canvas = document. createElement('canvas');
+        var ctx = canvas.getContext('2d', contextCreationParameters);
+        var contextAttributes = ctx.getContextAttributes();
+        assert_equals(contextAttributes.colorSpace, expectedContextAttributes.colorSpace, disc);
+        assert_equals(contextAttributes.pixelFormat, expectedContextAttributes.pixelFormat, disc);
+    }
+
+    for (let [disc, setting, expect] of testScenarios) {
+        runTestScenario(disc, setting, expect);
+    }
+    t.done();
+})
+
+</script>
+
diff --git a/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.f16.to.p3.html b/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.f16.to.p3.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.color.space.p3.f16.to.p3</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.f16.to.p3</h1>
+<p class="desc">test getImageData with display-p3 and uint8 from display p3 float16 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 getImageData with display-p3 and uint8 from display p3 float16 canvas");
+_addTest(function(canvas, ctx) {
+
+  var color_style = 'rgb(50, 100, 150)';
+  // [0.24304, 0.38818, 0.57227, 1.0] * 255 = [62, 99, 146, 255]
+  var pixel_expected = [62, 99, 146, 255];
+  var epsilon = 2;
+  ctx.fillStyle = color_style;
+  ctx.fillRect(0, 0, 10, 10);
+
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3", storageFormat: "uint8"}).data;
+  _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
+  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);
+
+}, {colorSpace: "display-p3", pixelFormat: "float16"});
+</script>
+
diff --git a/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.f16.to.srgb.html b/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.f16.to.srgb.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.color.space.p3.f16.to.srgb</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.f16.to.srgb</h1>
+<p class="desc">test getImageData with srsb and uint8 from display p3 uint8 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 getImageData with srsb and uint8 from display p3 uint8 canvas");
+_addTest(function(canvas, ctx) {
+
+  var color_style = 'rgb(50, 100, 150)';
+  var pixel_expected = [50, 100, 150, 255];
+  var epsilon = 2;
+  ctx.fillStyle = color_style;
+  ctx.fillRect(0, 0, 10, 10);
+
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+  _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
+  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);
+
+}, {colorSpace: "display-p3", pixelFormat: "float16"});
+</script>
+
diff --git a/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.f16.to.p3.html b/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.f16.to.p3.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>OffscreenCanvas test: 2d.color.space.p3.f16.to.p3</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.f16.to.p3</h1>
+<p class="desc">test getImageData with display-p3 and uint8 from display p3 float16 canvas</p>
+
+
+<script>
+var t = async_test("test getImageData with display-p3 and uint8 from display p3 float16 canvas");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorSpace: "display-p3", pixelFormat: "float16"});
+
+  var color_style = 'rgb(50, 100, 150)';
+  // [0.24304, 0.38818, 0.57227, 1.0] * 255 = [62, 99, 146, 255]
+  var pixel_expected = [62, 99, 146, 255];
+  var epsilon = 2;
+  ctx.fillStyle = color_style;
+  ctx.fillRect(0, 0, 10, 10);
+
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3", storageFormat: "uint8"}).data;
+  _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
+  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);
+  t.done();
+
+});
+</script>
diff --git a/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.f16.to.p3.worker.js b/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.f16.to.p3.worker.js
@@ -0,0 +1,34 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.color.space.p3.f16.to.p3
+// Description:test getImageData with display-p3 and uint8 from display p3 float16 canvas
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("test getImageData with display-p3 and uint8 from display p3 float16 canvas");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorSpace: "display-p3", pixelFormat: "float16"});
+
+  var color_style = 'rgb(50, 100, 150)';
+  // [0.24304, 0.38818, 0.57227, 1.0] * 255 = [62, 99, 146, 255]
+  var pixel_expected = [62, 99, 146, 255];
+  var epsilon = 2;
+  ctx.fillStyle = color_style;
+  ctx.fillRect(0, 0, 10, 10);
+
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3", storageFormat: "uint8"}).data;
+  _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
+  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);
+  t.done();
+});
+done();
diff --git a/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.f16.to.srgb.html b/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.f16.to.srgb.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>OffscreenCanvas test: 2d.color.space.p3.f16.to.srgb</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.f16.to.srgb</h1>
+<p class="desc">test getImageData with srsb and uint8 from display p3 uint8 canvas</p>
+
+
+<script>
+var t = async_test("test getImageData with srsb and uint8 from display p3 uint8 canvas");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorSpace: "display-p3", pixelFormat: "float16"});
+
+  var color_style = 'rgb(50, 100, 150)';
+  var pixel_expected = [50, 100, 150, 255];
+  var epsilon = 2;
+  ctx.fillStyle = color_style;
+  ctx.fillRect(0, 0, 10, 10);
+
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+  _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
+  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);
+  t.done();
+
+});
+</script>
diff --git a/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.f16.to.srgb.worker.js b/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.f16.to.srgb.worker.js
@@ -0,0 +1,33 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.color.space.p3.f16.to.srgb
+// Description:test getImageData with srsb and uint8 from display p3 uint8 canvas
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("test getImageData with srsb and uint8 from display p3 uint8 canvas");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorSpace: "display-p3", pixelFormat: "float16"});
+
+  var color_style = 'rgb(50, 100, 150)';
+  var pixel_expected = [50, 100, 150, 255];
+  var epsilon = 2;
+  ctx.fillStyle = color_style;
+  ctx.fillRect(0, 0, 10, 10);
+
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+  _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
+  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);
+  t.done();
+});
+done();
diff --git a/html/canvas/tools/yaml-new/color_space.yaml b/html/canvas/tools/yaml-new/color_space.yaml
@@ -16,6 +16,24 @@
     assert_approx_equals(pixel[2], pixel_expected[2], 2);
     assert_approx_equals(pixel[3], pixel_expected[3], 2);
 
+- name: 2d.color.space.p3.f16.to.p3
+  desc: test getImageData with display-p3 and uint8 from display p3 float16 canvas
+  attributes: '{colorSpace: "display-p3", pixelFormat: "float16"}'
+  code: |
+    var color_style = 'rgb(50, 100, 150)';
+    // [0.24304, 0.38818, 0.57227, 1.0] * 255 = [62, 99, 146, 255]
+    var pixel_expected = [62, 99, 146, 255];
+    var epsilon = 2;
+    ctx.fillStyle = color_style;
+    ctx.fillRect(0, 0, 10, 10);
+
+    var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3", storageFormat: "uint8"}).data;
+    @assert pixel.length === pixel_expected.length;
+    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);
+
 - name: 2d.color.space.p3.to.srgb
   desc: test getImageData with srsb and uint8 from display p3 uint8 canvas
   attributes: '{colorSpace: "display-p3"}'
@@ -33,6 +51,24 @@
     assert_approx_equals(pixel[2], pixel_expected[2], 2);
     assert_approx_equals(pixel[3], pixel_expected[3], 2);
 
+- name: 2d.color.space.p3.f16.to.srgb
+  desc: test getImageData with srsb and uint8 from display p3 uint8 canvas
+  attributes: '{colorSpace: "display-p3", pixelFormat: "float16"}'
+  code: |
+    var color_style = 'rgb(50, 100, 150)';
+    var pixel_expected = [50, 100, 150, 255];
+    var epsilon = 2;
+    ctx.fillStyle = color_style;
+    ctx.fillRect(0, 0, 10, 10);
+
+    var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+    @assert pixel.length === pixel_expected.length;
+    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);
+
+
 - name: 2d.color.space.p3.toBlob.p3.canvas
   desc: test if toblob returns p3 data from p3 color space canvas
   attributes: '{colorSpace: "display-p3"}'