Include draw to canvas

KhronosGroup · Sep 20, 2023 · 2469589 · 2469589
1 parent 2882995
commit 2469589
Showing 1 changed file with 88 additions and 33 deletions.
diff --git a/conformance-suites/2.0.0/conformance/canvas/drawingbuffer-storage-test.html b/conformance-suites/2.0.0/conformance/canvas/drawingbuffer-storage-test.html
@@ -89,32 +89,6 @@
   return 1.0;
 }
 
-function testClear(f, size, clearColor, expectedPixel, tolerance) {
-  format = f;
-  width = size[0];
-  height = size[1];
-
-  gl.drawingBufferStorage(format, width, height);
-  shouldBe('gl.getError()', 'gl.NO_ERROR');
-
-  shouldBe('gl.drawingBufferFormat', 'format');
-  shouldBe('gl.drawingBufferWidth', 'width');
-  shouldBe('gl.drawingBufferHeight', 'height');
-
-  gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-
-  var buf;
-  if (format == gl.RGBA16F) {
-    buf = new Float32Array(4);
-    gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.FLOAT, buf);
-  } else {
-    buf = new Uint8Array(4);
-    gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
-  }
-  testPixel(expectedPixel, buf, tolerance);
-}
-
 function testClearColor() {
   // Make a fresh canvas.
   var canvas = document.createElement("canvas");
@@ -129,24 +103,51 @@
   testPassed("context exists");
   shouldBe('gl.drawingBufferFormat', 'gl.RGBA8');
 
-  if (!(`drawingBufferStorage` in gl)) {
-    testPassed("drawingBufferStorage not present -- skipping test");
-    return;
+  let testCase = function(f, size, clearColor, expectedPixel, tolerance) {
+    format = f;
+    width = size[0];
+    height = size[1];
+
+    gl.drawingBufferStorage(format, width, height);
+    shouldBe('gl.getError()', 'gl.NO_ERROR');
+
+    shouldBe('gl.drawingBufferFormat', 'format');
+    shouldBe('gl.drawingBufferWidth', 'width');
+    shouldBe('gl.drawingBufferHeight', 'height');
+
+    gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    var buf;
+    if (format == gl.RGBA16F) {
+      buf = new Float32Array(4);
+      gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.FLOAT, buf);
+    } else {
+      buf = new Uint8Array(4);
+      gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
+    }
+    testPixel(expectedPixel, buf, tolerance);
   }
-  testPassed("context has drawingBufferStorage");
+
 
   debug('Testing RGBA8');
-  testClear(gl.RGBA8, [16, 32], [16 / 255, 32 / 255, 64 / 255, 128 / 255], [16, 32, 64, 128], 0);
+  testCase(gl.RGBA8, [16, 32],
+            [16 / 255, 32 / 255, 64 / 255, 128 / 255],
+            [16, 32, 64, 128],
+            0);
 
   debug('Testing SRGB8_ALPHA8');
-  testClear(gl.SRGB8_ALPHA8, [16, 32],
+  testCase(gl.SRGB8_ALPHA8, [16, 32],
       [srgbToLinear(64/255), srgbToLinear(16/255), srgbToLinear(32/255), 128 / 255],
       [64, 16, 32, 128],
       1);
 
   if (gl.getExtension('EXT_color_buffer_float')) {
     debug('Testing RGBA16F');
-    testClear(gl.RGBA16F,     [18, 28], [0.25, 0.5, 0.75, 0.125], [0.25, 0.5, 0.75, 0.125], 0.00001);
+    testCase(gl.RGBA16F, [18, 28],
+              [0.25, 0.5, 0.75, 0.125],
+              [0.25, 0.5, 0.75, 0.125],
+              0.00001);
   } else {
     debug('Skipping RGBA16F');
   }
@@ -213,13 +214,67 @@
  shouldBe('gl.drawingBufferHeight', 'maxRenderbufferSize');
 }
 
+function testDrawToCanvas() {
+  let canvasGL = document.createElement("canvas");
+  canvasGL.width = 16;
+  canvasGL.height = 16;
+  gl = wtu.create3DContext(canvasGL);
+  if (!gl) {
+    testFailed("context does not exist");
+    return;
+  }
+
+  let canvas2D = document.createElement("canvas");
+  canvas2D.width = 16;
+  canvas2D.height = 16;
+  let ctx = canvas2D.getContext('2d');
+  let imageData = new ImageData(16, 16);
+
+  let testCase = function(f, clearColor, canvasColor, tolerance) {
+    gl.drawingBufferStorage(f, 16, 16);
+    gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    ctx.putImageData(imageData, 0, 0);
+    ctx.drawImage(canvasGL, 0, 0);
+    testPixel(canvasColor, ctx.getImageData(8, 8, 1, 1).data, tolerance);
+  }
+
+  debug('Drawing RGBA to canvas');
+  testCase(gl.RGBA8, [16/255, 32/255, 64/255, 64/255], [64, 128, 255, 64], 0);
+
+  debug('Drawing opaque SRGB8_ALPHA8 to canvas');
+  testCase(gl.SRGB8_ALPHA8, 
+           [srgbToLinear(64/255), srgbToLinear(32/255), srgbToLinear(16/255), 1.0],
+           [64, 32, 16, 255],
+           1);
+
+  debug('Drawing transparent SRGB8_ALPHA8 to canvas');
+  // We set the tolerance to 5 because of compounding error. The backbuffer
+  // may be off by 1, and then un-premultiplying alpha of 64/55 will multiply
+  // that error by 4. Then add one to be safe.
+  testCase(gl.SRGB8_ALPHA8,
+           [srgbToLinear(32/255), srgbToLinear(64/255), srgbToLinear(16/255), 64/255],
+           [128, 255, 64, 64],
+           5);
+
+  if (gl.getExtension('EXT_color_buffer_float')) {
+    debug('Drawing transparent RGBA16F to canvas');
+    testCase(gl.RGBA16F,
+             [32/255, 64/255, 16/255, 64/255],
+             [128, 255, 64, 64],
+             1);
+  }
+}
+
 var wtu = WebGLTestUtils;
 initialize();
 if (hasDrawingBufferStorage) {
   testClearColor();
   testNoAlpha();
   testMissingExtension();
   testMaxSize();
+  testDrawToCanvas();
 }
 
 debug("")