varying-arrays-should-not-be-reversed.html

Enable keyboard shortcuts

<!--

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

<title>Varying arrays should not be reversed</title>

<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="canvas" width="512" height="256"> </canvas>

<div id="description"></div>

<div id="console"></div>

<script id="vshader" type="x-shader/x-vertex">

varying float colors[3];

uniform vec3 testData;

attribute vec3 position;

void main(){

  gl_Position = vec4(position, 1.0);

  colors[0] = testData.x;

  colors[1] = testData.y;

  colors[2] = testData.z;

</script>

<script id="fshader" type="x-shader/x-fragment">

precision mediump float;

varying float colors[3];

void main() {

  gl_FragColor = vec4(colors[0], colors[1], colors[2], 1.0);

</script>

<script>

"use strict";

description("Varying arrays should not be reversed.");

debug("This issue has been seen in Chrome on Nexus 7 2013 (Adreno 320) and Moto G3 (Adreno 306).");

debug("");

debug("If things are working correctly, the vertical stripes should be: red, green, blue, light blue, orange");

debug("");

debug("If they are not, the red and blue channels will appear to be swapped and you will see: blue, green, red, orange, light blue");

var wtu = WebGLTestUtils;

function test() {

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

  if (!gl) {

    testFailed("context does not exist");

    return;

  wtu.setupUnitQuad(gl);

  var program = wtu.setupProgram(gl, ["vshader", "fshader"], ["position"], undefined, true);

  var loc = gl.getUniformLocation(program, 'testData');

  var triples = [

    [255, 0, 0],

    [0, 255, 0],

    [0, 0, 255],

    [0, 128, 255],

    [255, 128, 0]

];

  for (var i = 0; i < triples.length; i++) {

    var triple = triples[i];

    var x = i * 64;

    gl.viewport(x, 0, 64, 256);

    gl.uniform3f(loc, triple[0] / 255, triple[1] / 255, triple[2] / 255);

    wtu.drawUnitQuad(gl);

    wtu.checkCanvasRect(gl, x, 0, 64, 256, [triple[0], triple[1], triple[2], 255]);

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

test();

var successfullyParsed = true;

</script>

<script src="../../../js/js-test-post.js"></script>

</body>

</html>