1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/content/canvas/test/webgl-conformance/conformance/textures/tex-image-and-sub-image-2d-with-image.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,149 @@
1.4 +<!--
1.5 +Copyright (c) 2011 The Chromium Authors. All rights reserved.
1.6 +Use of this source code is governed by a BSD-style license that can be
1.7 +found in the LICENSE file.
1.8 + -->
1.9 +<!DOCTYPE html>
1.10 +<html>
1.11 +<head>
1.12 +<meta charset="utf-8">
1.13 +<link rel="stylesheet" href="../../resources/js-test-style.css"/>
1.14 +<script src="../../resources/js-test-pre.js"></script>
1.15 +<script src="../resources/webgl-test.js"></script>
1.16 +<script src="../resources/webgl-test-utils.js"></script>
1.17 +<script>
1.18 +var wtu = WebGLTestUtils;
1.19 +var gl = null;
1.20 +var textureLoc = null;
1.21 +var successfullyParsed = false;
1.22 +var imgCanvas;
1.23 +var red = [255, 0, 0];
1.24 +var green = [0, 255, 0];
1.25 +
1.26 +function init()
1.27 +{
1.28 + if (window.initNonKhronosFramework) {
1.29 + window.initNonKhronosFramework(true);
1.30 + }
1.31 +
1.32 + description('Verify texImage2D and texSubImage2D code paths taking Images');
1.33 +
1.34 + gl = wtu.create3DContext("example");
1.35 + var program = wtu.setupTexturedQuad(gl);
1.36 +
1.37 + gl.clearColor(0,0,0,1);
1.38 + gl.clearDepth(1);
1.39 +
1.40 + textureLoc = gl.getUniformLocation(program, "tex");
1.41 +
1.42 + wtu.loadTexture(gl, "../resources/red-green.png", runTest);
1.43 +}
1.44 +
1.45 +// These two declarations need to be global for "shouldBe" to see them
1.46 +var buf = null;
1.47 +var idx = 0;
1.48 +var pixel = [0, 0, 0];
1.49 +var correctColor = null;
1.50 +
1.51 +function runOneIteration(image, useTexSubImage2D, flipY, topColor, bottomColor)
1.52 +{
1.53 + debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') +
1.54 + ' with flipY=' + flipY);
1.55 + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
1.56 + // Disable any writes to the alpha channel
1.57 + gl.colorMask(1, 1, 1, 0);
1.58 + var texture = gl.createTexture();
1.59 + // Bind the texture to texture unit 0
1.60 + gl.bindTexture(gl.TEXTURE_2D, texture);
1.61 + // Set up texture parameters
1.62 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
1.63 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
1.64 + // Set up pixel store parameters
1.65 + gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
1.66 + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
1.67 + gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
1.68 + // Upload the image into the texture
1.69 + if (useTexSubImage2D) {
1.70 + // Initialize the texture to black first
1.71 + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, image.width, image.height, 0,
1.72 + gl.RGBA, gl.UNSIGNED_BYTE, null);
1.73 + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
1.74 + } else {
1.75 + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
1.76 + }
1.77 +
1.78 + // Point the uniform sampler to texture unit 0
1.79 + gl.uniform1i(textureLoc, 0);
1.80 + // Draw the triangles
1.81 + wtu.drawQuad(gl, [0, 0, 0, 255]);
1.82 + // Check a few pixels near the top and bottom and make sure they have
1.83 + // the right color.
1.84 + debug("Checking lower left corner");
1.85 + wtu.checkCanvasRect(gl, 4, 4, 2, 2, bottomColor,
1.86 + "shouldBe " + bottomColor);
1.87 + debug("Checking upper left corner");
1.88 + wtu.checkCanvasRect(gl, 4, gl.canvas.height - 8, 2, 2, topColor,
1.89 + "shouldBe " + topColor);
1.90 +}
1.91 +
1.92 +function runTestOnImage(image) {
1.93 + runOneIteration(image, false, true, red, green);
1.94 + runOneIteration(image, false, false, green, red);
1.95 + runOneIteration(image, true, true, red, green);
1.96 + runOneIteration(image, true, false, green, red);
1.97 +}
1.98 +
1.99 +function runTest(image)
1.100 +{
1.101 + runTestOnImage(image);
1.102 +
1.103 + imgCanvas = document.createElement("canvas");
1.104 + imgCanvas.width = 1;
1.105 + imgCanvas.height = 2;
1.106 + var imgCtx = imgCanvas.getContext("2d");
1.107 + var imgData = imgCtx.createImageData(1, 2);
1.108 + imgData.data[0] = red[0];
1.109 + imgData.data[1] = red[1];
1.110 + imgData.data[2] = red[2];
1.111 + imgData.data[3] = 255;
1.112 + imgData.data[4] = green[0];
1.113 + imgData.data[5] = green[1];
1.114 + imgData.data[6] = green[2];
1.115 + imgData.data[7] = 255;
1.116 + imgCtx.putImageData(imgData, 0, 0);
1.117 +
1.118 + // apparently Image is different than <img>.
1.119 + var newImage = new Image();
1.120 + newImage.onload = function() {
1.121 + runTest2(newImage);
1.122 + };
1.123 + newImage.src = imgCanvas.toDataURL();
1.124 +}
1.125 +
1.126 +function runTest2(image) {
1.127 + runTestOnImage(image);
1.128 +
1.129 + var newImage = document.createElement("img");
1.130 + newImage.onload = function() {
1.131 + runTest3(newImage);
1.132 + };
1.133 + newImage.src = imgCanvas.toDataURL();
1.134 +}
1.135 +
1.136 +function runTest3(image) {
1.137 + runTestOnImage(image);
1.138 +
1.139 + glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
1.140 + finishTest();
1.141 +}
1.142 +
1.143 +</script>
1.144 +</head>
1.145 +<body onload="init()">
1.146 +<canvas id="example" width="32px" height="32px"></canvas>
1.147 +<div id="description"></div>
1.148 +<div id="console"></div>
1.149 +</body>
1.150 +</html>
1.151 +
1.152 +
