Merge ImageData::data_union into ImageData::data

The ImageData interface has two data entries: data(array of uint8) and
data_union(could be array of uint8, float16 or float32). In this cl, I
deleted data and rename data_union to data. This cl prepares canvas to
work with more data types, which will help us to enable canvas to work
with p3 and rec2020.

Note that some part of the code works with uint8 only, i have put a TODO
for each of the occurrence. I will address them in the next cl.

Bug: 1115317

Change-Id: Ia7f203e627547eceb6da479522b3130bc6eaef12
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2379653
Reviewed-by: Fernando Serboncini <fserb@chromium.org>
Reviewed-by: Jeremy Roman <jbroman@chromium.org>
Reviewed-by: Yi Xu <yiyix@chromium.org>
Reviewed-by: Juanmi Huertas <juanmihd@chromium.org>
Reviewed-by: ccameron <ccameron@chromium.org>
Commit-Queue: Yi Xu <yiyix@chromium.org>
Cr-Commit-Position: refs/heads/master@{#807179}

html/canvas/element/manual/wide-gamut-canvas/canvas-colorManaged-convertToBlob-roundtrip.html

@@ -78,7 +78,7 @@
     var ctx = srcCanvas.getContext('2d', testScenario.canvasColorParam);
     var compositeOverBlack = (testScenario.encodeOptions.type == "image/jpeg");
     drawPatternOnCanvsa(ctx, testScenario.alpha, compositeOverBlack);
-    var refPixels = ctx.getImageData(0, 0, 2, 2).dataUnion;
+    var refPixels = ctx.getImageData(0, 0, 2, 2).data;
 
     var t = async_test("Test canvas convertToBlob(): " +
         testScenarioToString(testScenario));
@@ -88,7 +88,7 @@
         var dstCanvas = createCanvas(testScenario);
         var dstCtx = dstCanvas.getContext('2d', testScenario.canvasColorParam);
         dstCtx.drawImage(image, 0, 0);
-        var actualPixels = dstCtx.getImageData(0, 0, 2, 2).dataUnion;
+        var actualPixels = dstCtx.getImageData(0, 0, 2, 2).data;
         testPixels(actualPixels, refPixels, testScenario);
     });
 

html/canvas/element/manual/wide-gamut-canvas/canvas-createImageBitmap-e_srgb.html

@@ -43,8 +43,8 @@
     if (sourceType === 'video')
         tolerance = 0.03;
     for (var i = 0; i < tests.length; i++) {
-        actual = ctx.getImageData(tests[i][0], tests[i][1], 1, 1).dataUnion;
-        assert_implements(actual, 'ImageData dataUnion not supported');
+        actual = ctx.getImageData(tests[i][0], tests[i][1], 1, 1).data;
+        assert_implements(actual, 'ImageData data not supported');
         expected = tests[i][2];
         assert_equals(actual.length, expected.length);
         for (var j = 0; j < actual.length; j++)
@@ -171,10 +171,10 @@
     ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
     ctx1.drawImage(bitmap1, 0, 0);
     ctx2.drawImage(bitmap2, 0, 0);
-    var data1 = ctx1.getImageData(0, 0, 50, 50).dataUnion;
-    assert_implements(data1, 'ImageData dataUnion not supported');
-    var data2 = ctx2.getImageData(0, 0, 50, 50).dataUnion;
-    assert_implements(data2, 'ImageData dataUnion not supported');
+    var data1 = ctx1.getImageData(0, 0, 50, 50).data;
+    assert_implements(data1, 'ImageData data not supported');
+    var data2 = ctx2.getImageData(0, 0, 50, 50).data;
+    assert_implements(data2, 'ImageData data not supported');
     var dataMatched = true;
     for (var i = 0; i < data1.length; i++) {
         if (data1[i] != data2[i]) {

html/canvas/element/manual/wide-gamut-canvas/canvas-createPutGetImageData-colorManaged.html

@@ -14,7 +14,7 @@
     assert_equals(imageData.data.length, 4 * xWidth * xHeight);
   } else {
     assert_equals("float32", imageDataColorSettings.storageFormat);
-    assert_equals(imageData.dataUnion.length, 4 * xWidth * xHeight);
+    assert_equals(imageData.data.length, 4 * xWidth * xHeight);
   }
 }
 

html/canvas/element/manual/wide-gamut-canvas/canvas-draw-high-bit-depth-images.html

@@ -29,14 +29,14 @@
             var refCtx = refCanvas.getContext(
                 '2d', testScenario.canvasColorParams);
             refCtx.drawImage(_8bitImage, 0, 0);
-            var refPixels = refCtx.getImageData(0, 0, 2, 2).dataUnion;
+            var refPixels = refCtx.getImageData(0, 0, 2, 2).data;
 
             var testCanvas = document.createElement("canvas");
             testCanvas.width = testCanvas.height = 2;
             var testCtx = testCanvas.getContext(
                 '2d', testScenario.canvasColorParams);
             testCtx.drawImage(_16bitImage, 0, 0);
-            var testPixels = testCtx.getImageData(0, 0, 2, 2).dataUnion;
+            var testPixels = testCtx.getImageData(0, 0, 2, 2).data;
 
             assert_array_approx_equals(refPixels, testPixels, tolerance);
 

html/canvas/element/manual/wide-gamut-canvas/canvas-drawImage-e_srgb.html

@@ -16,7 +16,7 @@
 {
     var actual, expected, tolerance = 0.01;
     for (var i = 0; i < tests.length; i++) {
-      actual = ctx.getImageData(tests[i].x, tests[i].y, 1, 1).dataUnion;
+      actual = ctx.getImageData(tests[i].x, tests[i].y, 1, 1).data;
       expected = tests[i].color;
       assert_true(actual.length === expected.length);
       for (var j = 0; j < actual.length; j++)

html/canvas/element/manual/wide-gamut-canvas/canvas-drawImage-offscreenCanvas.html

@@ -90,8 +90,8 @@
 
 function testPixels(testCtx, refCtx, pixelFormat, isTrnasparent)
 {
-    var actual = testCtx.getImageData(0, 0, 4, 4).dataUnion;
-    var expected = refCtx.getImageData(0, 0, 4, 4).dataUnion;
+    var actual = testCtx.getImageData(0, 0, 4, 4).data;
+    var expected = refCtx.getImageData(0, 0, 4, 4).data;
 
     var tolerance = 4;
     if (pixelFormat === 'float16')

html/canvas/element/manual/wide-gamut-canvas/canvas-getImageData-e_srgb.html

@@ -27,7 +27,7 @@
         {colorSpace: 'srgb', pixelFormat:'float16'});
     ctx.fillStyle = 'rgba(51, 102, 153, 0.8)';
     ctx.fillRect(0, 0, 10, 10);
-    var pixel = ctx.getImageData(5, 5, 1, 1).dataUnion;
+    var pixel = ctx.getImageData(5, 5, 1, 1).data;
     // Check against the same color in e-sRGB. 0.01 protects the test against
     // color conversion deviations.
     assert_array_approx_equals(pixel, [0.2, 0.4, 0.6, 0.8], 0.01);
@@ -41,12 +41,12 @@
         {colorSpace: 'srgb', pixelFormat:'float16'})
     var imageData = ctx.createImageData(1, 1,
         {colorSpace: 'srgb', storageFormat:'float32'});
-    imageData.dataUnion[0] = 0.2;
-    imageData.dataUnion[1] = 0.4;
-    imageData.dataUnion[2] = 0.6;
-    imageData.dataUnion[3] = 0.8;
+    imageData.data[0] = 0.2;
+    imageData.data[1] = 0.4;
+    imageData.data[2] = 0.6;
+    imageData.data[3] = 0.8;
     ctx.putImageData(imageData, 5, 5);
-    var pixel = ctx.getImageData(5, 5, 1, 1).dataUnion;
+    var pixel = ctx.getImageData(5, 5, 1, 1).data;
     // Check against the same color in e-sRGB. 0.001 protects the test against
     // rounding errors.
     assert_array_approx_equals(pixel, [0.2, 0.4, 0.6, 0.8], 0.01);
@@ -60,12 +60,12 @@
         {colorSpace: 'srgb', pixelFormat:'float16'})
     var imageData = ctx.createImageData(1, 1,
         {colorSpace: 'srgb', storageFormat:'float32'});
-    imageData.dataUnion[0] = 1.3;
-    imageData.dataUnion[1] = -1.13;
-    imageData.dataUnion[2] = 0.7;
-    imageData.dataUnion[3] = 1.8;
+    imageData.data[0] = 1.3;
+    imageData.data[1] = -1.13;
+    imageData.data[2] = 0.7;
+    imageData.data[3] = 1.8;
     ctx.putImageData(imageData, 5, 5);
-    var pixel = ctx.getImageData(5, 5, 1, 1).dataUnion;
+    var pixel = ctx.getImageData(5, 5, 1, 1).data;
     // Check against the same color in e-sRGB. 0.001 protects the test against
     // rounding errors.
     assert_array_approx_equals(pixel, [1.3, -1.13, 0.7, 1.8], 0.01);
@@ -85,7 +85,7 @@
     imageData.data[2] = 153;
     imageData.data[3] = 204;
     ctx.putImageData(imageData, 5, 5);
-    var pixel = ctx.getImageData(5, 5, 1, 1).dataUnion;
+    var pixel = ctx.getImageData(5, 5, 1, 1).data;
     // Check against the same color in e-sRGB. 0.01 protects the test against
     // color conversion deviations.
     assert_array_approx_equals(pixel, [0.2, 0.4, 0.6, 0.8], 0.01);

html/canvas/element/manual/wide-gamut-canvas/imageData-colorManagedBehavior.html

@@ -51,7 +51,7 @@
 
 function checkImageDataColorValues(canvasColorSettings, imageData, isBlank = '',
   width = xWidth, height = xHeight, isWCG_U8toSRGB_U8 = '') {
-  var data = imageData.dataUnion;
+  var data = imageData.data;
   if (isBlank === 'isBlank') {
     testBlankPixels(data, width, height);
   } else {
@@ -105,10 +105,10 @@
 
   for (var i = 0; i < xWidth * xHeight; i++)
     for (var j = 0; j < 4; j++) {
-      srgbImageDataU8.dataUnion[i*4+j] = srgbPixels[i][j];
-      e_srgbImageDataU16.dataUnion[i*4+j] =
+      srgbImageDataU8.data[i*4+j] = srgbPixels[i][j];
+      e_srgbImageDataU16.data[i*4+j] =
           Math.round(e_srgbPixels[i][j] * 65535);
-      e_srgbImageDataF32.dataUnion[i*4+j] = e_srgbPixels[i][j];
+      e_srgbImageDataF32.data[i*4+j] = e_srgbPixels[i][j];
     }
 }
 
@@ -282,7 +282,7 @@
                 imageDataColorSettings.storageFormat,
                 "storageFormat should match");
   var blankData = new Array(4 * width * height).fill(0);
-  assert_array_equals(imageData.dataUnion, blankData,
+  assert_array_equals(imageData.data, blankData,
                       "ImageData should be transparent black");
 }
 
@@ -317,7 +317,7 @@
 // CanvasColorSpace which is given in imageDataColorSettings.
 
 function runTestCreateImageDataDWHC(canvasColorSettings, imageData) {
-  var data = imageData.dataUnion;
+  var data = imageData.data;
   width = xWidth;
   height = xHeight;
   var colorSettings = imageData.getColorSettings();
@@ -332,7 +332,7 @@
   assert_equals(newColorSettings.storageFormat,
                 colorSettings.storageFormat,
                 "storageFormat should match");
-  assert_array_equals(newImageData.dataUnion, imageData.dataUnion,
+  assert_array_equals(newImageData.data, imageData.data,
                       "ImageData should be transparent black");
 }
 

html/canvas/element/manual/wide-gamut-canvas/imagedata-no-color-settings-crash.html

@@ -10,7 +10,7 @@
     var imageData = ctx.createImageData(dataFloat32, 1, 1,
         {});
     ctx.putImageData(imageData, 5, 5);
-    var data = ctx.getImageData(5,5,1,1).dataUnion;
+    var data = ctx.getImageData(5,5,1,1).data;
 }, "Putting a float-32 ImageData with no color settings on a context 2D should not crash.");
 
 test(function() {
@@ -21,6 +21,6 @@
     var imageData = ctx.createImageData(dataUint16, 1, 1,
         {});
     ctx.putImageData(imageData, 5, 5);
-    var data = ctx.getImageData(5,5,1,1).dataUnion;
+    var data = ctx.getImageData(5,5,1,1).data;
 }, "Putting a uint-16 ImageData with no color settings on a context 2D should not crash.");
 </script>

html/canvas/element/manual/wide-gamut-canvas/transferFromImageBitmap.html

@@ -41,7 +41,7 @@
     ctx.fillRect(0, 1, 1, 1);
     ctx.fillStyle = generateFillStyle(27, 27, 27, testScenario.alpha);
     ctx.fillRect(1, 1, 1, 1);
-    return ctx.getImageData(0, 0, 2, 2).dataUnion;
+    return ctx.getImageData(0, 0, 2, 2).data;
 }
 
 function generateTestName(testScenario) {
@@ -79,7 +79,7 @@
                 {colorSpace: testScenario.colorSpace,
                  pixelFormat: testScenario.pixelFormat});
             ctx.drawImage(dstCanvas, 0, 0);
-            var actualPixels = ctx.getImageData(0, 0, 2, 2).dataUnion;
+            var actualPixels = ctx.getImageData(0, 0, 2, 2).data;
             testPixels(actualPixels, expectedPixels, testScenario);
         });
        }, generateTestName(testScenario));