dom/canvas/test/webgl-conf/checkout/extra/canvas-compositing-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>Canvas Compositing 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 Below are 2 50x50 pixel canvas but using CSS to display them at 100x100 pixels. <br/>
  18 They are solid black with a red triangle<br/>
  19 They each have a 10px CSS solid black border around them.<br/>
  20 Depending on how the browser composites the canvas with the page  they will get
  21 a white outline<hr/>
  22 <div>
  23 2d canvas<br/>
  24 <canvas id="example2" width="50" height="50" style="width: 100px; height: 100px; border: 10px solid black;"></canvas>
  25 </div>
  26 <hr/>
  27 3d canvas<br/>
  28 <div>
  29 <canvas id="example" width="50" height="50" style="width: 100px; height: 100px; border: 10px solid black;"></canvas>
  30 </div>
  31 <hr/>
  32 img tag<br/>
  33 <img src="50x50pixel-black-with-red-triangle.png" style="width: 100px; height: 100px; border: 10px solid black;"/>
  34 <div id="description"></div>
  35 <div id="console"></div>
  36     <script id="vshader" type="x-shader/x-vertex">
  37         attribute vec4 vPosition;
  38         void main()
  39         {
  40             gl_Position = vPosition;
  41         }
  42     </script>
  43
  44     <script id="fshader" type="x-shader/x-fragment">
  45         void main()
  46         {
  47             gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  48         }
  49     </script>
  50
  51     <script>
  52         "use strict";
  53         function init()
  54         {
  55             var wtu = WebGLTestUtils;
  56             var canvas2d = document.getElementById("example2");
  57             var ctx2d = canvas2d.getContext("2d");
  58             ctx2d.fillStyle = "rgba(0, 0, 0, 255)"
  59             ctx2d.fillRect(0, 0, 50, 50);
  60             ctx2d.fillStyle = "rgba(255, 0, 0, 255)"
  61             ctx2d.beginPath();
  62             ctx2d.moveTo(25, 12.5);
  63             ctx2d.lineTo(12.5, 37.5);
  64             ctx2d.lineTo(37.5, 37.5);
  65             ctx2d.lineTo(25, 12.5);
  66             ctx2d.fill();
  67
  68
  69             var gl = wtu.create3DContext("example");
  70             var program = wtu.setupProgram(gl, ["vshader", "fshader"], ["vPosition"]);
  71
  72             var vertexObject = gl.createBuffer();
  73             gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
  74             gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,0.5,0, -0.5,-0.5,0, 0.5,-0.5,0 ]), gl.STATIC_DRAW);
  75             gl.enableVertexAttribArray(0);
  76             gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
  77
  78             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  79             gl.drawArrays(gl.TRIANGLES, 0, 3);
  80        }
  81
  82        init();
  83        var successfullyParsed = true;
  84     </script>
  85 </body>
  86 <script src="../js/js-test-post.js"></script>
  87 </body>
  88 </html>