canvas-getImageData-rec2020.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/canvas/color-space/canvas-getImageData-rec2020.html
