Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-10-01 00:59:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Move WebGL reftests to wpt/mozilla

Browse source
This commit is contained in:
Emilio Cobos Álvarez 2015-11-01 14:48:57 +01:00
parent 938a05428a
commit 12d1464220
14 changed files with 72 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

72
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -4078,6 +4078,78 @@
],
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_9.html"
}
],
"mozilla/webgl/clearcolor.html": [
{
"path": "mozilla/webgl/clearcolor.html",
"references": [
[
"/_mozilla/mozilla/webgl/clearcolor_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/clearcolor.html"
}
],
"mozilla/webgl/tex_image_2d_canvas_no_context.html": [
{
"path": "mozilla/webgl/tex_image_2d_canvas_no_context.html",
"references": [
[
"/_mozilla/mozilla/webgl/tex_image_2d_canvas_no_context_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/tex_image_2d_canvas_no_context.html"
}
],
"mozilla/webgl/tex_image_2d_canvas2d.html": [
{
"path": "mozilla/webgl/tex_image_2d_canvas2d.html",
"references": [
[
"/_mozilla/mozilla/webgl/tex_image_2d_canvas_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/tex_image_2d_canvas2d.html"
}
],
"mozilla/webgl/tex_image_2d_canvas.html": [
{
"path": "mozilla/webgl/tex_image_2d_canvas.html",
"references": [
[
"/_mozilla/mozilla/webgl/tex_image_2d_canvas_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/tex_image_2d_canvas.html"
}
],
"mozilla/webgl/tex_image_2d_simple.html": [
{
"path": "mozilla/webgl/tex_image_2d_simple.html",
"references": [
[
"/_mozilla/mozilla/webgl/tex_image_2d_simple_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/tex_image_2d_simple.html"
}
],
"mozilla/webgl/draw_arrays_simple.html": [
{
"path": "mozilla/webgl/draw_arrays_simple.html",
"references": [
[
"/_mozilla/mozilla/webgl/draw_arrays_simple_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/draw_arrays_simple.html"
}
]
},
"testharness": {

25
tests/wpt/mozilla/tests/mozilla/webgl/clearcolor.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebGL ClearColor Test</title>
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
var gl = document.getElementById("canvas").getContext("webgl");
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</body>
</html>

20
tests/wpt/mozilla/tests/mozilla/webgl/clearcolor_ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL ClearColor Test</title>
</head>
<style>
html, body {
margin: 0;
}
#canvas {
width: 640px;
height: 480px;
background-color: red;
}
</style>
<body>
<div id="canvas"></canvas>
</body>
</html>

70
tests/wpt/mozilla/tests/mozilla/webgl/draw_arrays_simple.html Normal file
View file

@ -0,0 +1,70 @@
<!doctype html>
<meta charset="utf-8">
<title>WebGL drawArrays test</title>
<!--
This test should generate a 256x256 green square
on a 512x512 canvas
-->
<style>
html, body { margin: 0 }
</style>
<canvas id="c" width="512" height="512"></canvas>
<script id="vertex_shader" type="x-shader/x-vertex">
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(0, 1, 0, 1); // green
}
</script>
<script>
var gl = document.getElementById('c').getContext('webgl');
// Clear white
gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// Create the program
var vertex_shader = gl.createShader(gl.VERTEX_SHADER),
fragment_shader = gl.createShader(gl.FRAGMENT_SHADER),
program = gl.createProgram();
gl.shaderSource(vertex_shader,
document.getElementById('vertex_shader').textContent);
gl.shaderSource(fragment_shader,
document.getElementById('fragment_shader').textContent);
gl.compileShader(vertex_shader);
gl.compileShader(fragment_shader);
gl.attachShader(program, vertex_shader);
gl.attachShader(program, fragment_shader);
gl.linkProgram(program);
gl.useProgram(program);
// Get the position from the fragment shader
var position = gl.getAttribLocation(program, "a_position");
// Square as two triangles
var square_data = new Float32Array([
-0.5, 0.5, // top left
0.5, 0.5, // top right
-0.5, -0.5, // bottom left
-0.5, -0.5, // bottom left
0.5, 0.5, // top right
0.5, -0.5 // bottom right
]);
// Create a buffer for the square with the square
// vertex data
var square_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, square_buffer);
gl.bufferData(gl.ARRAY_BUFFER, square_data, gl.STATIC_DRAW);
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, square_data.length);
</script>

16
tests/wpt/mozilla/tests/mozilla/webgl/draw_arrays_simple_ref.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html>
<meta charset="utf-8">
<title>WebGL drawArrays test</title>
<style>
html, body { margin: 0 }
div {
position: absolute;
left: 128px;
top: 128px;
width: 256px;
height: 256px;
/* Totally green */
background-color: rgb(0, 255, 0);
}
</style>
<div></div>

BIN
tests/wpt/mozilla/tests/mozilla/webgl/img/rust-logo-256x256.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

111
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_canvas.html Normal file
View file

@ -0,0 +1,111 @@
<!doctype html>
<html>
<meta charset="utf-8">
<title>WebGL texture test</title>
<!--
This test should show a 256x256 red square
-->
<style>
html, body { margin: 0 }
</style>
<canvas id="c" width="256" height="256"></canvas>
<script id="vertex_shader" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 a_texCoord;
attribute vec2 a_position;
varying vec2 v_texCoord;
void main() {
gl_Position = vec4(a_position, 0, 1);
v_texCoord = a_texCoord;
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() {
gl_FragColor = texture2D(u_image, v_texCoord);
}
</script>
<script>
// We paint an offscreen red square and pass it as a texture to the on-screen canvas
var first_context = document.createElement('canvas').getContext('webgl');
first_context.canvas.width = first_context.canvas.height = 256;
first_context.clearColor(1, 0, 0, 1);
first_context.clear(first_context.COLOR_BUFFER_BIT);
var gl = document.getElementById('c').getContext('webgl');
// Clear white
gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// Create the program
var vertex_shader = gl.createShader(gl.VERTEX_SHADER),
fragment_shader = gl.createShader(gl.FRAGMENT_SHADER),
program = gl.createProgram();
gl.shaderSource(vertex_shader,
document.getElementById('vertex_shader').textContent);
gl.shaderSource(fragment_shader,
document.getElementById('fragment_shader').textContent);
gl.compileShader(vertex_shader);
gl.compileShader(fragment_shader);
gl.attachShader(program, vertex_shader);
gl.attachShader(program, fragment_shader);
console.log(gl.getShaderInfoLog(vertex_shader));
console.log(gl.getShaderInfoLog(fragment_shader));
gl.linkProgram(program);
gl.useProgram(program);
// Get the position from the fragment shader
var position = gl.getAttribLocation(program, "a_position");
var tex_position = gl.getAttribLocation(program, "a_texCoord");
var texture_coordinates = new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0
]);
var texture_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texture_buffer);
gl.bufferData(gl.ARRAY_BUFFER, texture_coordinates, gl.STATIC_DRAW);
gl.enableVertexAttribArray(tex_position);
gl.vertexAttribPointer(tex_position, 2, gl.FLOAT, false, 0, 0);
var square_data = new Float32Array([
-1.0, 1.0, // top left
1.0, 1.0, // top right
-1.0, -1.0, // bottom left
-1.0, -1.0, // bottom left
1.0, 1.0, // top right
1.0, -1.0 // bottom right
]);
// Create a buffer for the square with the square
// vertex data
var square_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, square_buffer);
gl.bufferData(gl.ARRAY_BUFFER, square_data, gl.STATIC_DRAW);
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
// pass the first canvas as texture
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, first_context.canvas);
gl.drawArrays(gl.TRIANGLES, 0, 6);
console.log(gl.getError() == gl.NO_ERROR);
</script>
</html>

111
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_canvas2d.html Normal file
View file

@ -0,0 +1,111 @@
<!doctype html>
<html>
<meta charset="utf-8">
<title>WebGL texture test</title>
<!--
This test should show a 256x256 red square
-->
<style>
html, body { margin: 0 }
</style>
<canvas id="c" width="256" height="256"></canvas>
<script id="vertex_shader" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 a_texCoord;
attribute vec2 a_position;
varying vec2 v_texCoord;
void main() {
gl_Position = vec4(a_position, 0, 1);
v_texCoord = a_texCoord;
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() {
gl_FragColor = texture2D(u_image, v_texCoord);
}
</script>
<script>
// We paint an offscreen red square with a 2d canvas and pass it as a texture to the on-screen canvas
var first_context = document.createElement('canvas').getContext('2d');
first_context.canvas.width = first_context.canvas.height = 256;
first_context.fillStyle = "red";
first_context.fillRect(0, 0, 256, 256);
var gl = document.getElementById('c').getContext('webgl');
// Clear white
gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// Create the program
var vertex_shader = gl.createShader(gl.VERTEX_SHADER),
fragment_shader = gl.createShader(gl.FRAGMENT_SHADER),
program = gl.createProgram();
gl.shaderSource(vertex_shader,
document.getElementById('vertex_shader').textContent);
gl.shaderSource(fragment_shader,
document.getElementById('fragment_shader').textContent);
gl.compileShader(vertex_shader);
gl.compileShader(fragment_shader);
gl.attachShader(program, vertex_shader);
gl.attachShader(program, fragment_shader);
console.log(gl.getShaderInfoLog(vertex_shader));
console.log(gl.getShaderInfoLog(fragment_shader));
gl.linkProgram(program);
gl.useProgram(program);
// Get the position from the fragment shader
var position = gl.getAttribLocation(program, "a_position");
var tex_position = gl.getAttribLocation(program, "a_texCoord");
var texture_coordinates = new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0
]);
var texture_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texture_buffer);
gl.bufferData(gl.ARRAY_BUFFER, texture_coordinates, gl.STATIC_DRAW);
gl.enableVertexAttribArray(tex_position);
gl.vertexAttribPointer(tex_position, 2, gl.FLOAT, false, 0, 0);
var square_data = new Float32Array([
-1.0, 1.0, // top left
1.0, 1.0, // top right
-1.0, -1.0, // bottom left
-1.0, -1.0, // bottom left
1.0, 1.0, // top right
1.0, -1.0 // bottom right
]);
// Create a buffer for the square with the square
// vertex data
var square_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, square_buffer);
gl.bufferData(gl.ARRAY_BUFFER, square_data, gl.STATIC_DRAW);
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
// pass the first canvas as texture
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, first_context.canvas);
gl.drawArrays(gl.TRIANGLES, 0, 6);
console.log(gl.getError() == gl.NO_ERROR);
</script>
</html>

111
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_canvas_no_context.html Normal file
View file

@ -0,0 +1,111 @@
<!doctype html>
<html>
<meta charset="utf-8">
<title>WebGL texture test</title>
<!--
This test should show a 256x256 red square
with a 128x128 white square embedded in the
middle
-->
<style>
html, body { margin: 0 }
</style>
<canvas id="c" width="256" height="256"></canvas>
<script id="vertex_shader" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 a_texCoord;
attribute vec2 a_position;
varying vec2 v_texCoord;
void main() {
gl_Position = vec4(a_position, 0, 1);
v_texCoord = a_texCoord;
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() {
gl_FragColor = texture2D(u_image, v_texCoord);
}
</script>
<script>
// When passed a canvas with size but without context as a texture the
// source should be considered a white bitmap with the given size
var canvas_without_context = document.createElement('canvas');
canvas_without_context.width = canvas_without_context.height = 256;
var gl = document.getElementById('c').getContext('webgl');
// Clear with a non-white color
gl.clearColor(1, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// Create the program
var vertex_shader = gl.createShader(gl.VERTEX_SHADER),
fragment_shader = gl.createShader(gl.FRAGMENT_SHADER),
program = gl.createProgram();
gl.shaderSource(vertex_shader,
document.getElementById('vertex_shader').textContent);
gl.shaderSource(fragment_shader,
document.getElementById('fragment_shader').textContent);
gl.compileShader(vertex_shader);
gl.compileShader(fragment_shader);
gl.attachShader(program, vertex_shader);
gl.attachShader(program, fragment_shader);
console.log(gl.getShaderInfoLog(vertex_shader));
console.log(gl.getShaderInfoLog(fragment_shader));
gl.linkProgram(program);
gl.useProgram(program);
// Get the position from the fragment shader
var position = gl.getAttribLocation(program, "a_position");
var tex_position = gl.getAttribLocation(program, "a_texCoord");
var texture_coordinates = new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0
]);
var texture_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texture_buffer);
gl.bufferData(gl.ARRAY_BUFFER, texture_coordinates, gl.STATIC_DRAW);
gl.enableVertexAttribArray(tex_position);
gl.vertexAttribPointer(tex_position, 2, gl.FLOAT, false, 0, 0);
var square_data = new Float32Array([
-0.5, 0.5, // top left
0.5, 0.5, // top right
-0.5, -0.5, // bottom left
-0.5, -0.5, // bottom left
0.5, 0.5, // top right
0.5, -0.5 // bottom right
]);
// Create a buffer for the square with the square
// vertex data
var square_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, square_buffer);
gl.bufferData(gl.ARRAY_BUFFER, square_data, gl.STATIC_DRAW);
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
// pass the first canvas as texture
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas_without_context);
gl.drawArrays(gl.TRIANGLES, 0, 6);
console.log(gl.getError() == gl.NO_ERROR);
</script>
</html>

26
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_canvas_no_context_ref.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<meta charset="utf-8">
<title>WebGL texture test</title>
<!--
This test should show a 256x256 red square
with a 128x128 white square embedded in the
middle
-->
<style>
html, body { margin: 0 }
.a {
width: 256px;
height: 256px;
background: red;
position: relative;
}
.b {
width: 128px;
height: 128px;
background: white;
position: absolute;
top: 64px;
left: 64px;
}
</style>
<div class="a"><div class="b"></div></div>

11
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_canvas_ref.html Normal file
View file

@ -0,0 +1,11 @@
<!doctype html>
<meta charset="utf-8">
<title>WebGL texture test</title>
<!--
This test should show a 256x256 red square
-->
<style>
html, body { margin: 0 }
div { width: 256px; height: 256px; background: red; }
</style>
<div></div>

114
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_simple.html Normal file
View file

@ -0,0 +1,114 @@
<!doctype html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>WebGL texture test</title>
<!--
This test should show a 256x256 rust logo
-->
<style>
html, body { margin: 0 }
</style>
<canvas id="c" width="256" height="256"></canvas>
<script id="vertex_shader" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 a_texCoord;
attribute vec2 a_position;
varying vec2 v_texCoord;
void main() {
gl_Position = vec4(a_position, 0, 1);
v_texCoord = a_texCoord;
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() {
gl_FragColor = texture2D(u_image, v_texCoord);
}
</script>
<script>
var gl = document.getElementById('c').getContext('webgl');
// Clear white
gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// Create the program
var vertex_shader = gl.createShader(gl.VERTEX_SHADER),
fragment_shader = gl.createShader(gl.FRAGMENT_SHADER),
program = gl.createProgram();
gl.shaderSource(vertex_shader,
document.getElementById('vertex_shader').textContent);
gl.shaderSource(fragment_shader,
document.getElementById('fragment_shader').textContent);
gl.compileShader(vertex_shader);
gl.compileShader(fragment_shader);
gl.attachShader(program, vertex_shader);
gl.attachShader(program, fragment_shader);
console.log(gl.getShaderInfoLog(vertex_shader));
console.log(gl.getShaderInfoLog(fragment_shader));
gl.linkProgram(program);
gl.useProgram(program);
// Get the position from the fragment shader
var position = gl.getAttribLocation(program, "a_position");
var tex_position = gl.getAttribLocation(program, "a_texCoord");
var texture_coordinates = new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0
]);
var texture_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texture_buffer);
gl.bufferData(gl.ARRAY_BUFFER, texture_coordinates, gl.STATIC_DRAW);
gl.enableVertexAttribArray(tex_position);
gl.vertexAttribPointer(tex_position, 2, gl.FLOAT, false, 0, 0);
var square_data = new Float32Array([
-1.0, 1.0, // top left
1.0, 1.0, // top right
-1.0, -1.0, // bottom left
-1.0, -1.0, // bottom left
1.0, 1.0, // top right
1.0, -1.0 // bottom right
]);
// Create a buffer for the square with the square
// vertex data
var square_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, square_buffer);
gl.bufferData(gl.ARRAY_BUFFER, square_data, gl.STATIC_DRAW);
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
// Load the texture and draw
var image = new Image();
image.width = image.height = 256;
// Base-64 to allow the reftest to finish
image.src = "img/rust-logo-256x256.png";
image.onload = function () {
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
console.log(gl.getError() == gl.NO_ERROR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.drawArrays(gl.TRIANGLES, 0, 6);
document.documentElement.classList.remove("reftest-wait");
}
</script>
</html>

10
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_simple_ref.html Normal file
View file

@ -0,0 +1,10 @@
<!doctype html>
<meta charset="utf-8">
<title>WebGL texture test</title>
<!--
This test should show a 256x256 rust logo
-->
<style>
html, body { margin: 0 }
</style>
<img src="img/rust-logo-256x256.png">