third_party/blink/web_tests/images/color-profile-munsell-adobe-to-srgb-webgl.html - chromium/src - Git at Google

 <!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>
	<!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>