dom/canvas/test/webgl-conf/checkout/conformance2/samplers/sampler-drawing-test.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 Sampler Drawing 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 <canvas id="canvas_drawing" width="12" height="12"></canvas>
  18 <canvas id="canvas_texture" width="2" height="2"></canvas>
  19 <div id="description"></div>
  20 <div id="console"></div>
  21 <script>
  22 "use strict";
  23 description("Tests drawing with sampler works as expected");
  24 debug("");
  25
  26 var wtu = WebGLTestUtils;
  27 var gl = wtu.create3DContext("canvas_drawing", null, 2);
  28 var canvas_texture = null;
  29 var samplerParam = [
  30     gl.REPEAT,
  31     gl.CLAMP_TO_EDGE,
  32     gl.MIRRORED_REPEAT,
  33 ];
  34 var color = [200, 0, 254, 255];
  35
  36 if (!gl) {
  37     testFailed("WebGL context does not exist");
  38 } else {
  39     testPassed("WebGL context exists");
  40
  41     wtu.setupTexturedQuadWithTexCoords(gl, [-2.5, -2.5], [3.5, 3.5]);
  42
  43     setupCanvasTexture();
  44     for (var ii = 0; ii < samplerParam.length; ++ii) {
  45         runDrawingTest(samplerParam[ii]);
  46     }
  47
  48     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors");
  49 }
  50
  51 function setupCanvasTexture() {
  52     canvas_texture = document.getElementById("canvas_texture");
  53     var ctx2d = canvas_texture.getContext("2d");
  54     ctx2d.fillStyle = "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + color[3] + ")";
  55     ctx2d.fillRect(0, 0, 1, 1);
  56 }
  57
  58 function runDrawingTest(param) {
  59     var texture = gl.createTexture();
  60     gl.bindTexture(gl.TEXTURE_2D, texture);
  61     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas_texture);
  62
  63     var sampler = gl.createSampler();
  64     gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  65     gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  66     gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, param);
  67     gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, param);
  68
  69     gl.clearColor(1,1,1,1);
  70     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  71
  72     gl.bindTexture(gl.TEXTURE_2D, texture);
  73     gl.bindSampler(0, sampler);
  74     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 6);
  75
  76     checkPixels(param);
  77 }
  78
  79 function checkPixels(param) {
  80     var buf = new Uint8Array(12 * 12 * 4);
  81     gl.readPixels(0, 0, 12, 12, gl.RGBA, gl.UNSIGNED_BYTE, buf);
  82     var passed = true;
  83     for (var yy = 0; yy < 12; ++yy) {
  84         for (var xx = 0; xx < 12; ++xx) {
  85             var ec = [0, 0, 0, 0];
  86             switch (param) {
  87                 case gl.REPEAT:
  88                     if (xx % 2 == 1 && yy % 2 == 1) {
  89                         ec = color;
  90                     }
  91                     break;
  92                 case gl.CLAMP_TO_EDGE:
  93                     if (xx < 6 && yy < 6) {
  94                         ec = color;
  95                     }
  96                     break;
  97                 case gl.MIRRORED_REPEAT:
  98                     if (xx % 4 < 2 && yy % 4 < 2) {
  99                         ec = color;
 100                     }
 101                     break;
 102             }
 103             var off = (yy * 12 + xx) * 4;
 104             if (buf[off + 0] != ec[0] || buf[off + 1] != ec[1] ||
 105                 buf[off + 2] != ec[2] || buf[off + 3] != ec[3]) {
 106                 var msg = 'at (' + xx + ', ' + yy + ') expected: ' +
 107                     ec[0] + ', ' + ec[1] + ', ' + ec[2] + ', ' + ec[3] + ' found: ' +
 108                     buf[off + 0] + ', ' + buf[off + 1] + ', ' + buf[off + 2] + ', ' + buf[off + 3];
 109                 testFailed(msg);
 110                 passed = false;
 111             }
 112         }
 113     }
 114     if (passed) {
 115         testPassed("Drawing with wrap " + wtu.glEnumToString(gl, param) + " as expected");
 116     }
 117 }
 118
 119 var successfullyParsed = true;
 120 </script>
 121 <script src="../../js/js-test-post.js"></script>
 122
 123 </body>
 124 </html>