Add new media image layout tests for video color profiles

third_party/WebKit/LayoutTests/media/resources/munsell-video-chart.js

-function log(message) {
-  document.getElementById('log').textContent += message + '\n';
-}
+window.ignoreCyan = false;
 
-function testImageColors(source) {
+function testImageColors(source, cyanInTargetGamut) {
+  window.ignoreCyan = !cyanInTargetGamut;
+
   var image = document.querySelector('img');
-
   image.onload = function() {
     runAfterLayoutAndPaint(window.testRunner ? changeColorProfile : profileChanged);
   };
 
   image.src = source;
 }
 
 function changeColorProfile() {
   /* The test image contains the Munsell colors in a known color space. Convert
    * the colors to sRGB color space and test the transformed color accuracy.
    */
   window.testRunner.setColorProfile('sRGB', profileChanged);
 }
 
 function profileChanged() {
   setTimeout(drawImageToCanvas, 0);
 }
 
 function drawImageToCanvas() {
   var image = document.querySelector('img');
 
   var canvas = document.querySelector('canvas');
   canvas.width = image.width;
   canvas.height = image.height;
 
   canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height);
   chartColorTransform(canvas);
 }
 
+function log(message) {
+  document.getElementById('log').textContent += message + '\n';
+}
+
 function getCanvasColor(canvas, i) {
   var x = 40 + (i % 6) * (canvas.width / 6);
-  var y = 40 + Math.floor(i / 6) * (canvas.height / 4);
+  var y = 40 + Math.floor(i / 6) * (canvas.height / 4 - 40);
   try {
     var data = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
     if (data[3] == 255)
       return { rgb: [data[0], data[1], data[2]] };
     return { rgb: [0, 0, 0] };
   } catch (error) {
     console.error(error);
     return { rgb: [255, 255, 255] };
   }
 }
@@ skipping 26 matching lines @@
       { color: 'Neutral 3.5',   rgb: [  83,  83,  83 ] },
       { color: 'Black',         rgb: [  50,  49,  50 ] }
     );
   }
 
   if (i < 0 && i >= munsell_srgb_colors.length)
     return { color: 'invalid-color', rgb: [ 0, 0, 0 ] };
   return munsell_srgb_colors[i];
 }
 
+function getStudioColor(i) {
+  if (!window.studio_srgb_colors) {
+    // Studio video range white & black and proportions thereof, in sRGB space.
+    window.studio_srgb_colors = new Array(
+      { color: 'SG White',      rgb: [ 237, 237, 237 ] },
+      { color: 'SG White 1/2',  rgb: [ 130, 130, 130 ] },
+      { color: 'SG White 1/4',  rgb: [  74,  74,  74 ] },
+      { color: 'SG Black 4x',   rgb: [  79,  79,  79 ] },
+      { color: 'SG Black 2x',   rgb: [  48,  48,  48 ] },
+      { color: 'SG Black',      rgb: [  31,  31,  31 ] }
+    );
+  }
+
+  if (i < 0 && i >= studio_srgb_colors.length)
+    return { color: 'invalid-color', rgb: [ 0, 0, 0 ] };
+  return studio_srgb_colors[i];
+}
+
 function getColorError(cx, cy) {
   var dr = (cx[0] - cy[0]);
   var dg = (cx[1] - cy[1]);
   var db = (cx[2] - cy[2]);
   return Math.round(Math.sqrt((dr * dr) + (dg * dg) + (db * db)));
 }
 
 function pad(string, size) {
   size = size || 14;
   if (string.length < size)
     string += ' '.repeat(size - string.length);
   return string;
 }
 
 function drawRule(size) {
   log('-'.repeat(size || 44));
 }
 
 function chartColorTransform(canvas) {
   /*
-   * Add header over table of color names, acutal and expected values, and the
+   * Add header over table of color names, actual and expected values, and the
    * per color error (Euclidean distance).
    */
   log(pad('Color') + pad('Actual') + pad('Expected') + 'dE');
   drawRule();
 
   var totalSquaredError = 0.0;
 
   /*
-   * Report per color error dE, by comparing with the expected Munsell colors.
+   * Report per color error dE, by comparing with the expected Munsell & Studio colors.
    */
-  for (var i = 0; i < 24;) {
-    var expected = getMunsellColor(i);
+  for (var i = 0; i < 30;) {
+    var expected = (i < 24) ? getMunsellColor(i) : getStudioColor(i - 24);
     var actual = getCanvasColor(canvas, i);
     var dE = getColorError(actual.rgb, expected.rgb);
 
     log(pad(expected.color) + pad(actual.rgb.join(',')) + pad(expected.rgb.join(',')) + dE);
-    totalSquaredError += dE * dE;
 
-    if (++i % 6 == 0 && i < 24)
+    if (ignoreCyan && (i + 1) == 18)
+      ; // Do not include the Munsell Cyan (out-of-srgb-gamut) color error.
+    else
+      totalSquaredError += dE * dE;
+
+    if (++i % 6 == 0 && i <= 24)
       drawRule();
   }
 
   /*
-   * Report the total RMS color error neglecting out-of-srgb-gamut color Cyan.
+   * Report the total RMS color error: lower is better, and should be << 2, which is the
+   * JND (Just Noticable Difference) perception threshold.  Above a JND, the color error
+   * is noticable to the human eye.
    */
   drawRule();
-  log('\nResult: total RMS color error: ' + Math.sqrt(totalSquaredError / 24.0).toFixed(2));
+  log('\nResult: total RMS color error: ' + Math.sqrt(totalSquaredError / 30.0).toFixed(2));
 
   if (window.testRunner)
     window.testRunner.notifyDone();
 }