Add a wasm debugger test that uses a WebGL surface

Change-Id: I9fef343d8ae958ca6382f6a781a31b6a583728bd
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/241756
Commit-Queue: Nathaniel Nifong <nifong@google.com>
Reviewed-by: Kevin Lubick <kjlubick@google.com>

experimental/wasm-skp-debugger/karma.conf.js

@@ -14,6 +14,7 @@ module.exports = function(config) {
       { pattern: 'debugger/sample.skp', included:false, served:true},
       '../../modules/pathkit/tests/testReporter.js',
       'debugger/bin/debugger.js',
+      'tests/debuggerinit.js',
       'tests/*.spec.js'
     ],
 

experimental/wasm-skp-debugger/tests/debuggerinit.js

@@ -0,0 +1,15 @@
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
+
+let Debugger = null;
+const LoadDebugger = new Promise(function(resolve, reject) {
+    if (Debugger) {
+        resolve();
+    } else {
+        DebuggerInit({
+            locateFile: (file) => '/debugger/bin/'+file,
+        }).ready().then((_Debugger) => {
+            Debugger = _Debugger;
+            resolve();
+        });
+    }
+});

experimental/wasm-skp-debugger/tests/startup.spec.js

@@ -3,29 +3,20 @@
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
 
 describe('Debugger\'s Startup Behavior', function() {
-    // Note, don't try to print the CanvasKit object - it can cause Karma/Jasmine to lock up.
-    var Debugger = null;
-    const LoadDebugger = new Promise(function(resolve, reject) {
-        if (Debugger) {
-            resolve();
-        } else {
-            DebuggerInit({
-                locateFile: (file) => '/debugger/bin/'+file,
-            }).ready().then((_Debugger) => {
-                Debugger = _Debugger;
-                resolve();
-            });
-        }
-    });
-
     let container = document.createElement('div');
     document.body.appendChild(container);
-    container.innerHTML = `<canvas id=debugger_view width=720 height=1280></canvas>`;
 
-    it('can load and draw a skp file', function(done) {
+    beforeEach(function() {
+        container.innerHTML = `<canvas id=debugger_view width=720 height=1280></canvas>`;
+    });
+
+    afterEach(function() {
+        container.innerHTML = '';
+    });
+
+    it('can load and draw a skp file on an Canvas2D', function(done) {
         LoadDebugger.then(catchException(done, () => {
             const surface = Debugger.MakeSWCanvasSurface(document.getElementById('debugger_view'));
-            const player = new Debugger.SkpDebugPlayer();
 
             fetch('/debugger/sample.skp').then(function(response) {
                 // Load test file
@@ -33,19 +24,35 @@ describe('Debugger\'s Startup Behavior', function() {
                   throw new Error("HTTP error, status = " + response.status);
                 }
                 response.arrayBuffer().then(function(buffer) {
-                    let fileContents = new Uint8Array(buffer);
+                    const fileContents = new Uint8Array(buffer);
                     console.log('fetched /debugger/sample.skp');
-                    const size = fileContents.byteLength;
+                    const player = Debugger.SkpFilePlayer(fileContents);
-                    expect(size).toEqual(662976);
+                    // Draw picture
+                    player.drawTo(surface, 789); // number of commands in sample file
+                    surface.flush();
 
-                    // Allocate memory in wasm to hold the skp file selected by the user.
+                    console.log('drew picture to canvas element');
-                    const fileMemPtr = Debugger._malloc(size);
+                    surface.dispose();
-                    // Make a typed array view of that memory
+                    done();
-                    let fileMem = new Uint8Array(Debugger.buffer, fileMemPtr, size);
+                });
-                    // Copy the file into it
+              });
-                    fileMem.set(fileContents);
+        }));
-                    // Hand off pointer to wasm
+    });
-                    player.loadSkp(fileMemPtr, size);
+
+    it('can load and draw a skp file on a Web GL canvas', function(done) {
+        LoadDebugger.then(catchException(done, () => {
+            const surface = Debugger.MakeWebGLCanvasSurface(
+                document.getElementById('debugger_view'));
+
+            fetch('/debugger/sample.skp').then(function(response) {
+                // Load test file
+                if (!response.ok) {
+                  throw new Error("HTTP error, status = " + response.status);
+                }
+                response.arrayBuffer().then(function(buffer) {
+                    const fileContents = new Uint8Array(buffer);
+                    console.log('fetched /debugger/sample.skp');
+                    const player = Debugger.SkpFilePlayer(fileContents);
                     // Draw picture
                     player.drawTo(surface, 789); // number of commands in sample file
                     surface.flush();