[skottieWASM] make sure we are using CPU or GPU correctly

Change-Id: Ib9013fa9bedbbbf8a7787ef2a75d707dd6360cf8
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/257635
Reviewed-by: Brian Osman <brianosman@google.com>
Reviewed-by: Ravi Mistry <rmistry@google.com>
diff --git a/tools/skottie-wasm-perf/skottie-wasm-perf.html b/tools/skottie-wasm-perf/skottie-wasm-perf.html
index 2d53a73..f7fd4a1 100644
--- a/tools/skottie-wasm-perf/skottie-wasm-perf.html
+++ b/tools/skottie-wasm-perf/skottie-wasm-perf.html
@@ -49,22 +49,33 @@
 
     const animation = CK.MakeManagedAnimation(json, null);
     if (!animation) {
-      console.error('Could not process JSON');
+      window._error = 'Could not process JSON';
       return
     }
 
-    const surface = CK.MakeCanvasSurface("anim");
-    if (!surface) {
-      console.error('Could not make surface');
-      return;
+    let surface = null;
+    if (window.location.hash.indexOf('gpu') !== -1) {
+      surface = CK.MakeWebGLCanvasSurface('anim');
+      if (!surface) {
+        window._error = 'Could not make GPU surface';
+        return;
+      }
+      let c = document.getElementById('anim');
+      // If CanvasKit was unable to instantiate a WebGL context, it will fallback
+      // to CPU and add a ck-replaced class to the canvas element.
+      if (c.classList.contains('ck-replaced')) {
+        window._error = 'fell back to CPU';
+        return;
+      }
+    } else {
+      surface = CK.MakeSWCanvasSurface('anim');
+      if (!surface) {
+        window._error = 'Could not make CPU surface';
+        return;
+      }
     }
     const canvas = surface.getCanvas();
 
-    let c = document.getElementById('anim');
-    // If CanvasKit was unable to instantiate a WebGL context, it will fallback
-    // to CPU and add a ck-replaced class to the canvas element.
-    window._gpu = CK.gpu && !c.classList.contains('ck-replaced');
-
     const t_rate = 1.0 / (maxFrames-1);
     let seek = 0;
     let frame = 0;
@@ -93,7 +104,7 @@
                          });
         surface.flush();
       }
-      console.log("Used seek: " + seek);
+      console.log(`Used seek: ${seek}`);
       seek += t_rate;
       frame++;
       window.requestAnimationFrame(drawFrame);
diff --git a/tools/skottie-wasm-perf/skottie-wasm-perf.js b/tools/skottie-wasm-perf/skottie-wasm-perf.js
index 3f25ae4..4d87af3 100644
--- a/tools/skottie-wasm-perf/skottie-wasm-perf.js
+++ b/tools/skottie-wasm-perf/skottie-wasm-perf.js
@@ -115,7 +115,11 @@
     return ms;
 }
 
-const targetURL = "http://localhost:" + options.port + "/";
+let hash = "#cpu";
+if (options.use_gpu) {
+  hash = "#gpu";
+}
+const targetURL = `http://localhost:${options.port}/${hash}`;
 const viewPort = {width: 1000, height: 1000};
 
 // Drive chrome to load the web page from the server we have running.
@@ -158,10 +162,16 @@
     });
 
     console.log('Waiting 60s for run to be done');
-    await page.waitForFunction('window._skottieDone === true', {
+    await page.waitForFunction(`(window._skottieDone === true) || window._error`, {
       timeout: 60000,
     });
 
+    const err = await page.evaluate('window._error');
+    if (err) {
+      console.log(`ERROR: ${err}`)
+      process.exit(1);
+    }
+
     // Stop Trace.
     await page.tracing.stop();
   } catch(e) {