dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/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 </head>
  16 <body>
  17 <div id="description"></div>
  18 <div id="console"></div>
  19 <canvas id="example" width="64" height="64">
  20 </canvas>
  21 <script>
  22 "use strict";
  23 description("Test out of order cube map uploads.");
  24 debug("Regression test for crbug.com/473739 / Apple Radar 20444072.");
  25
  26 <!-- Thanks to Gregg Tavares for the original report and test case. -->
  27
  28 var wtu = WebGLTestUtils;
  29
  30 var canvas = document.getElementById("example");
  31 canvas.addEventListener('webglcontextlost', contextLost, false);
  32
  33 var contextWasLost = false;
  34
  35 function contextLost(e) {
  36   e.preventDefault();
  37   contextWasLost = true;
  38   debug("***context lost -- should not happen***");
  39 }
  40
  41 var dataWidth = 256;
  42 var dataHeight = 256;
  43 var gl = wtu.create3DContext(canvas);
  44 var tex = gl.createTexture();
  45 // start with 1x1 pixel cubemap
  46 gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  47 var color = new Uint8Array([128, 192, 255, 255]);
  48 for (var ii = 0; ii < 6; ++ii) {
  49     gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + ii, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, color);
  50 }
  51 gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  52 gl.generateMipmap(gl.TEXTURE_CUBE_MAP); // there's no need to call this but the code doesn't check the size.
  53
  54 var textureData = new Uint8Array(dataWidth * dataHeight * 4);
  55
  56 // The first texture has downloaded
  57 var first = 1;
  58 gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  59 gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + first, 0, gl.RGBA, dataWidth, dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
  60
  61 // Now because the first face downloaded doesn't match the other 5 faces upload the same image to the other 5
  62 // 1x1 faces
  63 for (var ii = 0; ii < 6; ++ii) {
  64     if (ii !== first) {
  65         gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  66         gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + ii, 0, gl.RGBA, dataWidth, dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
  67     }
  68 }
  69 gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
  70
  71 // Now as each new face comes in add it
  72 for (var ii = 0; ii < 6; ++ii) {
  73     if (ii !== first) {
  74         gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  75         gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + ii, 0, gl.RGBA, dataWidth, dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
  76         gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
  77     }
  78 }
  79
  80 gl.flush();
  81
  82 setTimeout(function() {
  83   shouldBe("contextWasLost", "false");
  84   finishTest();
  85 }, 1000);
  86
  87 var successfullyParsed = true;
  88 </script>
  89 </body>
  90 </html>