diff --git a/tests/ref/basic.list b/tests/ref/basic.list
index 694fd477774..4388089bca6 100644
--- a/tests/ref/basic.list
+++ b/tests/ref/basic.list
@@ -402,6 +402,8 @@ prefs:"layout.viewport.enabled" == viewport_rule.html viewport_rule_ref.html
 
 == webgl-context/clearcolor.html webgl-context/clearcolor_ref.html
 == webgl-context/draw_arrays_simple.html webgl-context/draw_arrays_simple_ref.html
+== webgl-context/tex_image_2d_canvas.html webgl-context/tex_image_2d_canvas_ref.html
+== webgl-context/tex_image_2d_canvas2d.html webgl-context/tex_image_2d_canvas_ref.html
 == webgl-context/tex_image_2d_simple.html webgl-context/tex_image_2d_simple_ref.html
 
 flaky_macos == white_space_intrinsic_sizes_a.html white_space_intrinsic_sizes_ref.html
diff --git a/tests/ref/webgl-context/tex_image_2d_canvas.html b/tests/ref/webgl-context/tex_image_2d_canvas.html
new file mode 100644
index 00000000000..0b21aad94bf
--- /dev/null
+++ b/tests/ref/webgl-context/tex_image_2d_canvas.html
@@ -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>
diff --git a/tests/ref/webgl-context/tex_image_2d_canvas2d.html b/tests/ref/webgl-context/tex_image_2d_canvas2d.html
new file mode 100644
index 00000000000..e360f9ceddf
--- /dev/null
+++ b/tests/ref/webgl-context/tex_image_2d_canvas2d.html
@@ -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>
diff --git a/tests/ref/webgl-context/tex_image_2d_canvas_ref.html b/tests/ref/webgl-context/tex_image_2d_canvas_ref.html
new file mode 100644
index 00000000000..2015696fc30
--- /dev/null
+++ b/tests/ref/webgl-context/tex_image_2d_canvas_ref.html
@@ -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>
