| OLD | NEW |
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <style> | |
| 4 #target { | |
| 5 width:200px; | |
| 6 height:200px; | |
| 7 border:2px solid black; | |
| 8 content: -webkit-canvas(triangle); | |
| 9 } | |
| 10 </style> | |
| 11 | |
| 12 <script id="vertexShader" type="x-shader/x-vertex"> | |
| 13 attribute vec4 vPosition; | |
| 14 | |
| 15 void main() { | |
| 16 gl_Position = vPosition; | |
| 17 } | |
| 18 </script> | |
| 19 | |
| 20 <script id="fragmentShader" type="x-shader/x-fragment"> | |
| 21 void main() { | |
| 22 gl_FragColor = vec4(0.8, 0.7, 0, 1.0); | |
| 23 } | |
| 24 </script> | |
| 25 | |
| 26 <script type="application/x-javascript"> | |
| 27 function getFragmentShader() | |
| 28 { | |
| 29 var shaderNode = document.getElementById("fragmentShader"); // f
ragmentShader has been defined at the top | |
| 30 var shaderSource = getShaderSource(shaderNode); | |
| 31 | |
| 32 var shader = gl.createShader(gl.FRAGMENT_SHADER); | |
| 33 gl.shaderSource(shader, shaderSource); | |
| 34 gl.compileShader(shader); | |
| 35 | |
| 36 return shader; | |
| 37 } | |
| 38 | |
| 39 function getShaderSource(shaderNode) | |
| 40 { | |
| 41 var shaderSource = ""; | |
| 42 var node = shaderNode.firstChild; | |
| 43 while (node) { | |
| 44 if (node.nodeType == 3) // Node.TEXT_NODE | |
| 45 shaderSource += node.textContent; | |
| 46 node = node.nextSibling; | |
| 47 } | |
| 48 | |
| 49 return shaderSource; | |
| 50 } | |
| 51 | |
| 52 function getVertexShader() | |
| 53 { | |
| 54 var shaderNode = document.getElementById("vertexShader"); | |
| 55 var shaderSource = getShaderSource(shaderNode); | |
| 56 | |
| 57 var shader = gl.createShader(gl.VERTEX_SHADER); | |
| 58 gl.shaderSource(shader, shaderSource); | |
| 59 gl.compileShader(shader); | |
| 60 | |
| 61 return shader; | |
| 62 } | |
| 63 | |
| 64 function initialize() | |
| 65 { | |
| 66 gl = document.getCSSCanvasContext("webgl", "triangle", 200, 200)
; | |
| 67 | |
| 68 var vertexShader = getVertexShader(); | |
| 69 var fragmentShader = getFragmentShader(); | |
| 70 | |
| 71 var shaderProgram = gl.createProgram(); | |
| 72 gl.attachShader(shaderProgram, vertexShader); | |
| 73 gl.attachShader(shaderProgram, fragmentShader); | |
| 74 gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // vPositi
on has been defined at the top | |
| 75 gl.linkProgram(shaderProgram); | |
| 76 | |
| 77 gl.useProgram(shaderProgram); | |
| 78 | |
| 79 var buffer = gl.createBuffer(); | |
| 80 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); | |
| 81 } | |
| 82 | |
| 83 function draw(r, g, b) | |
| 84 { | |
| 85 var vertices = [ 0.0, 0.8, 0.0, | |
| 86 -0.8, -0.8, 0.0, | |
| 87 0.8, -0.8, 0.0 ]; | |
| 88 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.ST
ATIC_DRAW); | |
| 89 | |
| 90 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the
vertex data | |
| 91 gl.enableVertexAttribArray(0); | |
| 92 gl.clearColor(r, g, b, 1); | |
| 93 gl.clear(gl.COLOR_BUFFER_BIT); | |
| 94 gl.drawArrays(gl.TRIANGLES, 0, 3); | |
| 95 } | |
| 96 | |
| 97 if (window.testRunner) | |
| 98 testRunner.overridePreference("WebKitWebGLEnabled", "1"); | |
| 99 | |
| 100 initialize(); | |
| 101 draw(0, 0.5, 0); | |
| 102 </script> | |
| 103 </head> | |
| 104 <body> | |
| 105 <div id="target"></div> | |
| 106 <div id="console"></div> | |
| 107 </body> | |
| 108 <script> | |
| 109 function log(str) { | |
| 110 var li = document.createElement("li"); | |
| 111 li.appendChild(document.createTextNode(str)); | |
| 112 var console = document.getElementById("console"); | |
| 113 console.appendChild(li); | |
| 114 } | |
| 115 function assert(bool, text) { | |
| 116 if (!bool) | |
| 117 log(text + "Failure"); | |
| 118 } | |
| 119 window.onload = function() { | |
| 120 if (window.testRunner && window.internals) { | |
| 121 window.testRunner.layoutAndPaintAsyncThen(function() { | |
| 122 assert(window.internals.isUseCounted(document, 753), "has -w
ebkit-canvas UseCounter: "); // 753 == UseCounter::Feature::WebkitCanvas | |
| 123 testRunner.notifyDone(); | |
| 124 }); | |
| 125 } | |
| 126 } | |
| 127 testRunner.waitUntilDone(); | |
| 128 </script> | |
| 129 </html> | |
| OLD | NEW |