color-profile-munsell-adobe-to-srgb-webgl.html

<!doctype html>
<html>
<script src="../resources/run-after-layout-and-paint.js"></script>
<script src="resources/color-checker-munsell-chart.js"></script>

<style>
  div { position: relative; top: -556px; left: 470px }
  a:hover { background-color: #ccc }
  a:link { text-decoration: none }
</style>

<!-- Color accuracy test case: you should not rebaseline this test. -->

<body style="overflow: hidden">
 <img><p><canvas></canvas></p>
 <div>
  <pre id="log" style="font-size: 9pt"></pre>
  <a href="http://www.brucelindbloom.com/index.html?ColorCheckerRGB.html">
   <pre>* Munsell Cyan is outside 255 sRGB gamut<pre></a>
 <div>
</body>

<script id="vs" type="vertex-shader">
  attribute vec2 aVertex;
  attribute vec2 aTex;
  varying vec2 vTex;
  void main() {
    gl_Position = vec4(aVertex, 0.0, 1.0);
    vTex = aTex;
  }
</script>

<script id="fs" type="fragment-shader">
  precision mediump float;
  uniform sampler2D uTexture;
  varying vec2 vTex;
  void main() {
    gl_FragColor = texture2D(uTexture, vTex);
  }
</script>

<script>
/*
 * Overrides the color-checker-munsell-chart.js drawImageToCanvas() function
 * to render the test image on a webgl <canvas>, instead of a 2d <canvas>.
 *
 * Calls chartColorTransform(canvas) to GPU readback the rendered test image
 * colors and tabulate them in the Munsell chart test result.
 */
function drawImageToCanvas() {
  var image = document.querySelector('img');
  if (!image.src || !image.src.length)
    throw new Error('FAIL: test image source is not defined');

  var canvas = document.querySelector('canvas');
  canvas.width = image.width;
  canvas.height = image.height;

  var enablePixelReadback = { preserveDrawingBuffer: true };
  var gl = canvas.getContext('webgl', enablePixelReadback);
  if (!gl)
    throw new Error('FAIL: could not create webgl canvas context');

  var colorConvert = gl.BROWSER_DEFAULT_WEBGL;
  gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, colorConvert);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  if (gl.getError() != gl.NONE)
    throw new Error('FAIL: webgl canvas context setup failed');

  function createShader(id, type) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, document.getElementById(id).text);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
      throw new Error('FAIL: webgl shader ' + id + ' compilation failed');
    return shader;
  }

  var program = gl.createProgram();
  gl.attachShader(program, createShader('vs', gl.VERTEX_SHADER));
  gl.attachShader(program, createShader('fs', gl.FRAGMENT_SHADER));
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS))
    throw new Error('FAIL: webgl shader program linking failed');
  gl.useProgram(program);

  var texture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  if (gl.getError() != gl.NONE)
    throw new Error('FAIL: creating webgl image texture failed');

  function createBuffer(data) {
    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    return buffer;
  }

  var vertexCoords = new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]);
  var vertexBuffer = createBuffer(vertexCoords);
  var location = gl.getAttribLocation(program, 'aVertex');
  gl.enableVertexAttribArray(location);
  gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);
  if (gl.getError() != gl.NONE)
    throw new Error('FAIL: webgl vertex-coord setup failed');

  var texCoords = new Float32Array([0, 1, 0, 0, 1, 0, 1, 1]);
  var texBuffer = createBuffer(texCoords);
  var location = gl.getAttribLocation(program, 'aTex');
  gl.enableVertexAttribArray(location);
  gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);
  if (gl.getError() != gl.NONE)
    throw new Error('FAIL: webgl tex-coord setup failed');

  gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);  // Render the image.

  // Tabulate the rendered image colors in the Munsell chart test result.
  runAfterLayoutAndPaint(function() {
    chartColorTransform(canvas);
  });
};

if (window.testRunner) {
  testRunner.dumpAsTextWithPixelResults();
  testRunner.waitUntilDone();
}

window.onload = function() {
  testImageColors('resources/color-checker-adobe-color-profile.png');
};
</script>
</html>
chromium/third_party/blink/web_tests/images/color-profile-munsell-adobe-to-srgb-webgl.html
