dom/canvas/test/webgl-conf/checkout/extra/cube-map-uploads-out-of-order.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>WebGL cube map out of order upload test.</title>
  12 <link rel="stylesheet" href="../resources/js-test-style.css"/>
  13 <script src="../js/js-test-pre.js"></script>
  14 <script src="../js/webgl-test-utils.js"></script>
  15 <script src="../js/glsl-conformance-test.js"></script>
  16 </head>
  17 <body>
  18 <div id="description"></div>
  19 <div id="console"></div>
  20 <canvas id="example" width="64" height="64">
  21 </canvas>
  22 <script>
  23 "use strict";
  24 description("Test out of order cube map uploads.");
  25 debug("Regression test for crbug.com/473739 / Apple Radar 20444072.");
  26
  27 <!-- Thanks to Gregg Tavares for the original report and test case. -->
  28
  29 var wtu = WebGLTestUtils;
  30
  31 var canvas = document.getElementById("example");
  32 canvas.addEventListener('webglcontextlost', contextLost, false);
  33
  34 var contextWasLost = false;
  35
  36 function contextLost(e) {
  37   e.preventDefault();
  38   contextWasLost = true;
  39   debug("***context lost -- should not happen***");
  40 }
  41
  42 var dataWidth = 256;
  43 var dataHeight = 256;
  44 var gl = wtu.create3DContext(canvas);
  45 var tex = gl.createTexture();
  46 // start with 1x1 pixel cubemap
  47 gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  48 var color = new Uint8Array([128, 192, 255, 255]);
  49 for (var ii = 0; ii < 6; ++ii) {
  50     gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + ii, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, color);
  51 }
  52 gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  53 gl.generateMipmap(gl.TEXTURE_CUBE_MAP); // there's no need to call this but the code doesn't check the size.
  54
  55 var textureData = new Uint8Array(dataWidth * dataHeight * 4);
  56
  57 // The first texture has downlaoded
  58 var first = 1;
  59 gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  60 gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + first, 0, gl.RGBA, dataWidth, dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
  61
  62 // Now because the first face downloaded doesn't match the other 5 faces upload the same image to the other 5
  63 // 1x1 faces
  64 for (var ii = 0; ii < 6; ++ii) {
  65     if (ii !== first) {
  66         gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  67         gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + ii, 0, gl.RGBA, dataWidth, dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
  68     }
  69 }
  70 gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
  71
  72 // Now as each new face comes in add it
  73 for (var ii = 0; ii < 6; ++ii) {
  74     if (ii !== first) {
  75         gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  76         gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + ii, 0, gl.RGBA, dataWidth, dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
  77         gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
  78     }
  79 }
  80
  81 gl.flush();
  82
  83 setTimeout(function() {
  84   shouldBe("contextWasLost", "false");
  85   finishTest();
  86 }, 1000);
  87
  88 var successfullyParsed = true;
  89 </script>
  90 </body>
  91 </html>