<!--
Copyright (c) 2019 The Khronos Group Inc.
Use of this source code is governed by an MIT-style license that can be
found in the LICENSE.txt file.
-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../../resources/js-test-style.css"/>
<script src="../../../js/js-test-pre.js"></script>
<script src="../../../js/webgl-test-utils.js"></script>
</head>
<body>
<canvas id="example" width="16" height="16"></canvas>
<div id="description"></div>
<div id="console"></div>
<script>
"use strict";
description('Verifies texImage2D and texSubImage2D code paths taking ArrayBufferView');

var wtu = WebGLTestUtils;

function roundUpToAlignment(value, alignment) {
  return Math.floor((value + alignment - 1) / alignment) * alignment;
}

function generateRGBAData(type, unpackAlignment, sourceData, width, height)
{
    var numColors = sourceData.length / 4;
    var colorOffset = function(y) {
      return 4 * Math.floor(y * numColors / height);
    };

    switch (type) {
    case gl.UNSIGNED_BYTE: {
        var rowWidth = roundUpToAlignment(width * 4, unpackAlignment);
        var data = new Uint8Array(height * rowWidth);
        for (var y = 0; y < height; ++y) {
            var index = y * rowWidth;
            var offset = colorOffset(y);
            for (var element = 0; element < width * 4; ++element) {
                data[index + element] = sourceData[offset + element % 4];
            }
        }
        return data;
    }
    case gl.UNSIGNED_SHORT_4_4_4_4: {
        var rowWidth = roundUpToAlignment(width * 2, unpackAlignment) / 2;
        var data = new Uint16Array(height * rowWidth);
        for (var y = 0; y < height; ++y) {
            var offset = colorOffset(y);
            for (var x = 0; x < width; ++x) {
                var index = y * rowWidth + x;
                data[index] = (((sourceData[offset + 0] & 0xF0) << 8)
                             | ((sourceData[offset + 1] & 0xF0) << 4)
                             | ((sourceData[offset + 2] & 0xF0) >> 0)
                             | ((sourceData[offset + 3] & 0xF0) >> 4));
            }
        }
        return data;
    }
    case gl.UNSIGNED_SHORT_5_5_5_1: {
        var rowWidth = roundUpToAlignment(width * 2, unpackAlignment) / 2;
        var data = new Uint16Array(height * rowWidth);
        for (var y = 0; y < height; ++y) {
            var offset = colorOffset(y);
            for (var x = 0; x < width; ++x) {
                var index = y * rowWidth + x;
                data[index] = (((sourceData[offset + 0] & 0xF8) << 8)
                             | ((sourceData[offset + 1] & 0xF8) << 3)
                             | ((sourceData[offset + 2] & 0xF8) >> 2)
                             | ((sourceData[offset + 3] & 0x80) >> 7));
            }
        }
        return data;
    }
    }
}

function typeToString(type)
{
    switch (type) {
    case gl.UNSIGNED_BYTE:           return 'UNSIGNED_BYTE';
    case gl.UNSIGNED_SHORT_5_5_5_1:  return 'UNSIGNED_SHORT_5_5_5_1';
    case gl.UNSIGNED_SHORT_4_4_4_4:  return 'UNSIGNED_SHORT_4_4_4_4';
    }
    return 'Unknown type ' + type;
}

function runOneIteration(useTexSubImage2D, type, unpackAlignment, flipY, premultiplyAlpha,
                         topColor, bottomColor, extraColor, bindingTarget, program)
{
    debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') +
          ' with type=' + typeToString(type) +
          ', unpackAlignment=' + unpackAlignment +
          ', flipY=' + flipY + ', premultiplyAlpha=' + premultiplyAlpha +
          ', bindingTarget=' + (bindingTarget == gl.TEXTURE_2D ? 'TEXTURE_2D' : 'TEXTURE_CUBE_MAP'));
    gl.colorMask(true, true, true, true);
    gl.clearColor(0, 0, 0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    // Enable writes to the RGB channels
    gl.colorMask(true, true, true, false);
    var texture = gl.createTexture();
    // Bind the texture to texture unit 0
    gl.bindTexture(bindingTarget, texture);
    // Set up texture parameters
    gl.texParameteri(bindingTarget, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(bindingTarget, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(bindingTarget, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(bindingTarget, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    // Set up pixel store parameters
    gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultiplyAlpha);
    // Generate the data
    var sourceData = [ 255,   0,   0, 255,
                       0,   255,   0,   0 ];
    var texWidth = 5;   // this must be mod 4 + 1 to test unpackAlignment
    // cube map texture must be square.
    if (bindingTarget == gl.TEXTURE_CUBE_MAP)
        texWidth = 16;
    var texHeight = 16;
    var data = generateRGBAData(type, unpackAlignment, sourceData, texWidth, texHeight);
    if (gl.getError() != gl.NO_ERROR)
        testFailed("GL error before texture upload");
    var targets = [gl.TEXTURE_2D];
    if (bindingTarget == gl.TEXTURE_CUBE_MAP) {
        targets = [gl.TEXTURE_CUBE_MAP_POSITIVE_X,
                   gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
                   gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
                   gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
                   gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
                   gl.TEXTURE_CUBE_MAP_NEGATIVE_Z];
    }
    // Upload the image into the texture
    for (var tt = 0; tt < targets.length; ++tt) {
        if (useTexSubImage2D) {
            // Initialize the texture to black first
            gl.texImage2D(targets[tt], 0, gl.RGBA, texWidth, texHeight, 0,
                          gl.RGBA, type, null);
            if (gl.getError() != gl.NO_ERROR)
                testFailed("GL error after texImage2D(null)");
            gl.texSubImage2D(targets[tt], 0, 0, 0, texWidth, texHeight, gl.RGBA, type, data);
            if (gl.getError() != gl.NO_ERROR)
                testFailed("GL error after texSubImage2D");
        } else {
            gl.texImage2D(targets[tt], 0, gl.RGBA, texWidth, texHeight, 0, gl.RGBA, type, data);
            if (gl.getError() != gl.NO_ERROR)
                testFailed("GL error after texImage2D");
        }
    }

    var testWidth  = gl.drawingBufferWidth;
    var testHeight = gl.drawingBufferHeight / 2;

    var loc;
    if (bindingTarget == gl.TEXTURE_CUBE_MAP) {
        loc = gl.getUniformLocation(program, "face");
    }

    for (var tt = 0; tt < targets.length; ++tt) {
        if (bindingTarget == gl.TEXTURE_CUBE_MAP) {
            gl.uniform1i(loc, targets[tt]);
        }

        // Draw the triangles
        wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]);

        // Check the top pixel and bottom pixel and make sure they have
        // the right color.
        var rects = [wtu.makeCheckRect(0, 0, testWidth, testHeight, bottomColor, "bottom pixel should be " + bottomColor, 0),
                     wtu.makeCheckRect(0, testHeight, testWidth, testHeight, topColor, "top pixel should be " + topColor, 0)];
        wtu.checkCanvasRects(gl, rects);
      }

    // Change part of the texture.
    var partWidth = 16;
    var partHeight = 16;
    // make texture double res of part.
    var data = generateRGBAData(type, unpackAlignment, sourceData, partWidth * 2, partHeight * 2);
    for (var tt = 0; tt < targets.length; ++tt) {
        gl.texImage2D(targets[tt], 0, gl.RGBA, partWidth * 2, partHeight * 2, 0, gl.RGBA, type, data);
    }
    // set part.
    var extraData = [
      255,   0,   0, 255,
        0,   0, 255,   0
    ];
    var data = generateRGBAData(type, unpackAlignment, extraData, partWidth, partHeight);
    for (var tt = 0; tt < targets.length; ++tt) {
        gl.texSubImage2D(targets[tt], 0, 0, 0, partWidth, partHeight, gl.RGBA, type, data);
    }
    var halfWidth  = gl.drawingBufferWidth / 2;
    var halfHeight = gl.drawingBufferHeight / 2;
    var quarterHeight = gl.drawingBufferHeight / 4;
    var red = [255, 0, 0, 255];
    var tcolor0 = flipY ? extraColor : red;
    var tcolor1 = flipY ? red : extraColor;

    for (var tt = 0; tt < targets.length; ++tt) {
        if (bindingTarget == gl.TEXTURE_CUBE_MAP) {
            gl.uniform1i(loc, targets[tt]);
        }

        wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]);
        wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]);
        var rects = [wtu.makeCheckRect(0, 0, halfWidth, quarterHeight, tcolor0, "bottom left bottom pixels should be " + tcolor0, 0),
                     wtu.makeCheckRect(0, quarterHeight, halfWidth, quarterHeight, tcolor1, "bottom left top pixels should be " + tcolor1, 0),
                     wtu.makeCheckRect(halfWidth, 0, halfWidth, halfHeight, bottomColor, "bottom right pixels should be " + bottomColor, 0),
                     wtu.makeCheckRect(0, halfHeight, testWidth, halfHeight, topColor, "top pixels should be " + topColor, 0)];
        wtu.checkCanvasRects(gl, rects);
      }

    // set far corner.
    for (var tt = 0; tt < targets.length; ++tt) {
        gl.texSubImage2D(targets[tt], 0, partWidth, partHeight, partWidth, partHeight, gl.RGBA, type, data);
    }
    for (var tt = 0; tt < targets.length; ++tt) {
        if (bindingTarget == gl.TEXTURE_CUBE_MAP) {
            gl.uniform1i(loc, targets[tt]);
        }

        wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]);
        var rects = [wtu.makeCheckRect(0, 0, halfWidth, quarterHeight, tcolor0, "bottom left bottom pixels should be " + tcolor0, 0),
                     wtu.makeCheckRect(0, quarterHeight, halfWidth, quarterHeight, tcolor1, "bottom left top pixels should be " + tcolor1, 0),
                     wtu.makeCheckRect(halfWidth, 0, halfWidth, halfHeight, bottomColor, "bottom left pixels should be " + bottomColor, 0),
                     wtu.makeCheckRect(0, halfHeight, halfWidth, halfHeight, topColor, "top right pixels should be " + topColor, 0),
                     wtu.makeCheckRect(halfWidth, halfHeight, halfWidth, quarterHeight, tcolor0, "top right bottom pixels should be " + tcolor0, 0),
                     wtu.makeCheckRect(halfWidth, halfHeight + quarterHeight, halfWidth, quarterHeight, tcolor1, "top right top pixels should be " + tcolor1, 0)];
        wtu.checkCanvasRects(gl, rects);
      }
}

function runTest(bindingTarget, program)
{
    var red = [255, 0, 0, 255];
    var green = [0, 255, 0, 255];
    var blue = [0, 0, 255, 255];
    var redPremultiplyAlpha = [255, 0, 0, 255];
    var greenPremultiplyAlpha = [0, 0, 0, 255];
    var bluePremultiplyAlpha = [0, 0, 0, 255];

    var types = [ gl.UNSIGNED_BYTE, gl.UNSIGNED_SHORT_5_5_5_1, gl.UNSIGNED_SHORT_4_4_4_4 ];
    var unpackAlignments = [ 1, 2, 4, 8 ];

    var cases = [
        { sub: false, flipY: true, premultiplyAlpha: false, topColor: red, bottomColor: green, extraColor: blue },
        { sub: false, flipY: false, premultiplyAlpha: false, topColor: green, bottomColor: red, extraColor: blue },
        { sub: false, flipY: true, premultiplyAlpha: true, topColor: redPremultiplyAlpha, bottomColor: greenPremultiplyAlpha, extraColor: bluePremultiplyAlpha },
        { sub: false, flipY: false, premultiplyAlpha: true, topColor: greenPremultiplyAlpha, bottomColor: redPremultiplyAlpha, extraColor: bluePremultiplyAlpha },
        { sub: true, flipY: true, premultiplyAlpha: false, topColor: red, bottomColor: green, extraColor: blue },
        { sub: true, flipY: false, premultiplyAlpha: false, topColor: green, bottomColor: red, extraColor: blue },
        { sub: true, flipY: true, premultiplyAlpha: true, topColor: redPremultiplyAlpha, bottomColor: greenPremultiplyAlpha, extraColor: bluePremultiplyAlpha },
        { sub: true, flipY: false, premultiplyAlpha: true, topColor: greenPremultiplyAlpha, bottomColor: redPremultiplyAlpha, extraColor: bluePremultiplyAlpha },
    ];

    for (var i in types) {
        for (var j in unpackAlignments) {
            for (var k in cases) {
                runOneIteration(cases[k].sub, types[i], unpackAlignments[j], cases[k].flipY, cases[k].premultiplyAlpha,
                                cases[k].topColor, cases[k].bottomColor, cases[k].extraColor, bindingTarget, program);
            }
        }
    }
}

var gl = wtu.create3DContext("example");

var program = wtu.setupTexturedQuad(gl);
runTest(gl.TEXTURE_2D, program);
program = wtu.setupTexturedQuadWithCubeMap(gl);
runTest(gl.TEXTURE_CUBE_MAP, program);

wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");

const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);

const validDatas = [
  `new Uint8Array(4)`,
  `new Uint8Array(new ArrayBuffer(4))`,
  `new Uint8ClampedArray(4)`,
  `new Uint8ClampedArray(new ArrayBuffer(4))`,
];
if (window.SharedArrayBuffer) {
  validDatas.push(
    `new Uint8Array(new SharedArrayBuffer(4))`,
    `new Uint8ClampedArray(new SharedArrayBuffer(4))`
  );
}
for (const x of validDatas) {
  shouldNotThrow(`gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1,1, 0, gl.RGBA, gl.UNSIGNED_BYTE, ${x});`);
  wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
  shouldNotThrow(`gl.texSubImage2D(gl.TEXTURE_2D, 0, 0,0, 1,1, gl.RGBA, gl.UNSIGNED_BYTE, ${x});`);
  wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
}

var successfullyParsed = true;
</script>
<script src="../../../js/js-test-post.js"></script>
</body>
</html>
