| <!DOCTYPE html> |
| <body> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <script> |
| test(drawSRGBThenGetImageDataRec2020, 'tests drawing SRGB color on Rec2020 \ |
| canvas and getting Rec2020 image data.'); |
| test(putImageDataRec2020ThenGetImageDataRec2020, |
| 'tests putting and getting Rec2020 image data on Rec2020 canvas.'); |
| test(putImageDataSRGBThenGetImageDataRec2020, 'tests putting SRGB image data \ |
| on Rec2020 canvas and getting Rec2020 image data.'); |
| |
| function assert_array_approx_equals(actual, expected, epsilon) |
| { |
| assert_true(actual.length === expected.length); |
| for (var i=0; i < actual.length; i++) |
| assert_approx_equals(actual[i], expected[i], epsilon); |
| } |
| |
| function drawSRGBThenGetImageDataRec2020() { |
| var canvas = document.createElement('canvas'); |
| canvas.width = 10; |
| canvas.height = 10; |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'rec2020', pixelFormat:'float16'}); |
| var imageSetting = {colorSpace: 'rec2020', storageFormat:'float32'}; |
| ctx.fillStyle = 'rgb(50, 100, 150)'; |
| ctx.fillRect(0, 0, 10, 10); |
| var pixel = ctx.getImageData(5, 5, 1, 1, imageSetting).data; |
| // Check against the same color in Rec2020. 0.01 protects the test against |
| // color conversion deviations. |
| assert_array_approx_equals(pixel, [0.34106, 0.41553, 0.59180, 1.00000], 0.01); |
| } |
| |
| function putImageDataRec2020ThenGetImageDataRec2020() { |
| var canvas = document.createElement('canvas'); |
| canvas.width = 10; |
| canvas.height = 10; |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'rec2020', pixelFormat:'float16'}) |
| var imageData = ctx.createImageData(1, 1, |
| {colorSpace: 'rec2020', storageFormat:'float32'}); |
| var imageSetting = {colorSpace: 'rec2020', storageFormat:'float32'}; |
| imageData.data[0] = 0.34106; |
| imageData.data[1] = 0.41553; |
| imageData.data[2] = 0.59180; |
| imageData.data[3] = 1.00000; |
| ctx.putImageData(imageData, 5, 5); |
| var pixel = ctx.getImageData(5, 5, 1, 1, imageSetting).data; |
| // Check against the same color in Rec2020. 0.001 protects the test against |
| // rounding errors. |
| assert_array_approx_equals(pixel, [0.34106, 0.41553, 0.59180, 1.00000], 0.001); |
| } |
| |
| function putImageDataSRGBThenGetImageDataRec2020() { |
| var canvas = document.createElement('canvas'); |
| canvas.width = 10; |
| canvas.height = 10; |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'rec2020', pixelFormat:'float16'}); |
| var imageData = ctx.createImageData(1, 1, |
| {colorSpace: 'srgb', storageFormat:'uint8'}); |
| var imageSetting = {colorSpace: 'rec2020', storageFormat:'float32'}; |
| imageData.data[0] = 50; |
| imageData.data[1] = 100; |
| imageData.data[2] = 150; |
| imageData.data[3] = 255; |
| ctx.putImageData(imageData, 5, 5); |
| var pixel = ctx.getImageData(5, 5, 1, 1, imageSetting).data; |
| // Check against the same color in Rec2020. 0.01 protects the test against |
| // color conversion deviations. |
| assert_array_approx_equals(pixel, [0.34106, 0.41553, 0.59180, 1.00000], 0.01); |
| } |
| </script> |
| </body> |
