1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/content/canvas/test/webgl-conformance/extra/canvas-compositing-test.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,125 @@
1.4 +<!--
1.5 +Copyright (C) 2009 Apple Computer, Inc. All rights reserved.
1.6 +
1.7 +Redistribution and use in source and binary forms, with or without
1.8 +modification, are permitted provided that the following conditions
1.9 +are met:
1.10 +1. Redistributions of source code must retain the above copyright
1.11 + notice, this list of conditions and the following disclaimer.
1.12 +2. Redistributions in binary form must reproduce the above copyright
1.13 + notice, this list of conditions and the following disclaimer in the
1.14 + documentation and/or other materials provided with the distribution.
1.15 +
1.16 +THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
1.17 +EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
1.18 +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
1.19 +PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR
1.20 +CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
1.21 +EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
1.22 +PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
1.23 +PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
1.24 +OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
1.25 +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
1.26 +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
1.27 +-->
1.28 +
1.29 +<!DOCTYPE html>
1.30 +<html>
1.31 + <head>
1.32 +<meta charset="utf-8">
1.33 + <title>Canvas Compositing Test</title>
1.34 + <link rel="stylesheet" href="../resources/js-test-style.css"/>
1.35 + <script src="../resources/js-test-pre.js"></script>
1.36 + <script src="../conformance/resources/webgl-test.js"> </script>
1.37 +</head>
1.38 +<body>
1.39 +Below are 2 50x50 pixel canvas but using CSS to display them at 100x100 pixels. <br/>
1.40 +They are solid black with a red triangle<br/>
1.41 +They each have a 10px CSS solid black border around them.<br/>
1.42 +Depending on how the browser composites the canvas with the page they will get
1.43 +a white outline<hr/>
1.44 +<div>
1.45 +2d canvas<br/>
1.46 +<canvas id="example2" width="50" height="50" style="width: 100px; height: 100px; border: 10px solid black;"></canvas>
1.47 +</div>
1.48 +<hr/>
1.49 +3d canvas<br/>
1.50 +<div>
1.51 +<canvas id="example" width="50" height="50" style="width: 100px; height: 100px; border: 10px solid black;"></canvas>
1.52 +</div>
1.53 +<hr/>
1.54 +img tag<br/>
1.55 +<img src="50x50pixel-black-with-red-triangle.png" style="width: 100px; height: 100px; border: 10px solid black;"/>
1.56 +<div id="description"></div>
1.57 +<div id="console"></div>
1.58 + <script id="vshader" type="x-shader/x-vertex">
1.59 + attribute vec4 vPosition;
1.60 + void main()
1.61 + {
1.62 + gl_Position = vPosition;
1.63 + }
1.64 + </script>
1.65 +
1.66 + <script id="fshader" type="x-shader/x-fragment">
1.67 + void main()
1.68 + {
1.69 + gl_FragColor = vec4(1.0,0.0,0.0,1.0);
1.70 + }
1.71 + </script>
1.72 +
1.73 + <script>
1.74 + function fail(x,y, buf, shouldBe)
1.75 + {
1.76 + var i = (y*50+x) * 4;
1.77 + var reason = "pixel at ("+x+","+y+") is ("+buf[i]+","+buf[i+1]+","+buf[i+2]+","+buf[i+3]+"), should be "+shouldBe;
1.78 + testFailed(reason);
1.79 + }
1.80 +
1.81 + function pass()
1.82 + {
1.83 + testPassed("drawing is correct");
1.84 + }
1.85 +
1.86 + function init()
1.87 + {
1.88 + var canvas2d = document.getElementById("example2");
1.89 + var ctx2d = canvas2d.getContext("2d");
1.90 + ctx2d.fillStyle = "rgba(0, 0, 0, 255)"
1.91 + ctx2d.fillRect(0, 0, 50, 50);
1.92 + ctx2d.fillStyle = "rgba(255, 0, 0, 255)"
1.93 + ctx2d.beginPath();
1.94 + ctx2d.moveTo(25, 12.5);
1.95 + ctx2d.lineTo(12.5, 37.5);
1.96 + ctx2d.lineTo(37.5, 37.5);
1.97 + ctx2d.lineTo(25, 12.5);
1.98 + ctx2d.fill();
1.99 +
1.100 +
1.101 + if (window.initNonKhronosFramework) {
1.102 + window.initNonKhronosFramework(false);
1.103 + }
1.104 +
1.105 + gl = initWebGL("example", "vshader", "fshader", [ "vPosition"], [ 0, 0, 0, 1 ], 1);
1.106 + gl.viewport(0, 0, 50, 50);
1.107 +
1.108 + var vertexObject = gl.createBuffer();
1.109 + gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
1.110 + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,0.5,0, -0.5,-0.5,0, 0.5,-0.5,0 ]), gl.STATIC_DRAW);
1.111 + gl.enableVertexAttribArray(0);
1.112 + gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
1.113 +
1.114 + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
1.115 + gl.drawArrays(gl.TRIANGLES, 0, 3);
1.116 + }
1.117 +
1.118 + init();
1.119 + successfullyParsed = true;
1.120 + </script>
1.121 +</body>
1.122 +<script>finishTest();</script>
1.123 +
1.124 +<script>
1.125 +</script>
1.126 +
1.127 +</body>
1.128 +</html>
