Ensure iOS layout traits are used for media controls in modern compatibility mode
[WebKit-https.git] / LayoutTests / webgl / webgl-texture-image-buffer-reuse.html
1 <style>
2     canvas {
3         width: 100px;
4         height: 100px;
5         border: 1px green solid;
6     }    
7 </style>
8 <body>
9     <p>Ensure if an image buffer is reused for a webgl texture, it will be cleared before drawing.</p>
10     <canvas width="100" height="100"></canvas>
11     <script>
12         (function() {
13             const canvas = document.querySelector('canvas');
14             const gl = canvas.getContext("webgl");
15             const program = createProgram(gl);
16             gl.useProgram(program);
17
18             createTextureBuffer(program, gl, new Float32Array([ 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), "a_texCoord");
19
20             const images = [
21                 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><rect width="100%" height="100%" fill="green"/></svg>',
22                 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><rect x="25%" y="25%" width="50%" height="50%" fill="green"/></svg>',
23             ];
24
25             const promises = [];
26             for (var index = 0; index < images.length; ++index)
27                 promises.push(drawTexture(program, gl, images[index]));
28
29             if (window.testRunner) {
30                 testRunner.waitUntilDone();
31                 Promise.all(promises).then(() => {
32                     testRunner.notifyDone();
33                 });
34             }
35         })();
36
37         function createProgram(gl) {
38             const vsSource = `
39                 attribute vec4 a_position;
40                 uniform vec2 u_resolution;
41                 attribute vec2 a_texCoord;
42                 varying vec2 v_texCoord;
43
44                 void main() {
45                     gl_Position = a_position;
46                     v_texCoord = a_texCoord;
47                 }
48             `;
49
50             const fsSource = `
51                 precision mediump float;
52
53                 uniform sampler2D u_sampler;
54                 varying vec2 v_texCoord;
55
56                 void main() {
57                     gl_FragColor = texture2D(u_sampler, v_texCoord);
58                 } 
59             `;
60
61             const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
62             const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
63
64             const program = gl.createProgram();
65             gl.attachShader(program, vertexShader);
66             gl.attachShader(program, fragmentShader);
67             gl.linkProgram(program);
68             return program;
69         }
70
71         function loadShader(gl, type, source) {
72             const shader = gl.createShader(type);
73             gl.shaderSource(shader, source);
74             gl.compileShader(shader);
75             return shader;
76         }
77
78         function drawTexture(program, gl, url) {
79             return loadTexture(gl, url).then(function() {
80                 createTextureBuffer(program, gl, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), "a_position");
81                 gl.drawArrays(gl.TRIANGLES, 0, 6);
82             });
83         }
84
85         function loadTexture(gl, url) {
86             return new Promise((resolve) => {
87                 const image = new Image();
88                 image.onload = function() {
89                     const texture = gl.createTexture();
90                     gl.bindTexture(gl.TEXTURE_2D, texture);
91                     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
92                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
93                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
94                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
95                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
96                     resolve();
97                 };
98                 image.src = url;
99             });
100         }
101
102         function createTextureBuffer(program, gl, bufferData, positionAttribute) {
103             const buffer = gl.createBuffer();
104             gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
105             gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);
106
107             const positionLocation = gl.getAttribLocation(program, positionAttribute);
108             gl.enableVertexAttribArray(positionLocation);
109             gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
110         }
111     </script>
112 </body>