draft of testing in the browser

Author: ajakubowicz-canva

.github/workflows/ci.yml

@@ -306,9 +306,27 @@ jobs:
 
   test-stable-wasm:
     name: cargo test (wasm32)
+    needs: prime-lfs-cache
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        # We intentionally do not use lfs: true here, instead using the caching method to save LFS bandwidth.
+
+      - name: Restore lfs cache
+        id: lfs-cache
+        uses: actions/cache/restore@v4
+        with:
+          path: .git/lfs
+          # The files targeted with git lfs
+          key: vello-lfs-${{ needs.prime-lfs-cache.outputs.lfs-hash }}
+          enableCrossOsArchive: true
+  
+      - name: Checkout LFS files
+        # `git lfs checkout` requires that each individual glob is a separate command line argument.
+        # The string `''' '''` is how you write `' '` in GitHub's expression context (i.e. two quotes separated by a space)
+        # The quotes are to avoid the shell from evaluating the globs itself.
+        run: git lfs checkout '${{ join(fromJson(env.LFS_FILES), ''' ''') }}'
+        continue-on-error: true
 
       - name: install stable toolchain
         uses: dtolnay/rust-toolchain@master
@@ -337,6 +355,10 @@ jobs:
         run: wasm-pack test --headless --chrome
         working-directory: sparse_strips/vello_hybrid/examples/native_webgl
 
+      - name: check vello_hybrid webgl backend passes vello_sparse_tests suite
+        run: wasm-pack test --headless --chrome --features webgl
+        working-directory: sparse_strips/vello_sparse_tests
+
 
   check-stable-android:
     name: cargo check (aarch64-android)

Cargo.lock

@@ -61,6 +61,10 @@ pub(crate) fn vello_test_inner(attr: TokenStream, item: TokenStream) -> TokenStr
     let u8_fn_name = Ident::new(&format!("{}_cpu_u8", input_fn_name), input_fn_name.span());
     let f32_fn_name = Ident::new(&format!("{}_cpu_f32", input_fn_name), input_fn_name.span());
     let hybrid_fn_name = Ident::new(&format!("{}_hybrid", input_fn_name), input_fn_name.span());
+    let webgl_fn_name = Ident::new(
+        &format!("{}_hybrid_webgl", input_fn_name),
+        input_fn_name.span(),
+    );
 
     // TODO: Tests with the same names in different modules can clash, see
     // https://github.com/linebender/vello/pull/925#discussion_r2070710362.
@@ -70,6 +74,7 @@ pub(crate) fn vello_test_inner(attr: TokenStream, item: TokenStream) -> TokenStr
     let u8_fn_name_str = u8_fn_name.to_string();
     let f32_fn_name_str = f32_fn_name.to_string();
     let hybrid_fn_name_str = hybrid_fn_name.to_string();
+    let webgl_fn_name_str = webgl_fn_name.to_string();
 
     let Arguments {
         width,
@@ -127,6 +132,7 @@ pub(crate) fn vello_test_inner(attr: TokenStream, item: TokenStream) -> TokenStr
                        render_mode: proc_macro2::TokenStream| {
         quote! {
             #ignore_cpu
+            #[cfg(not(all(target_arch = "wasm32", feature = "webgl")))]
             #[test]
             fn #fn_name() {
                 use crate::util::{
@@ -166,6 +172,7 @@ pub(crate) fn vello_test_inner(attr: TokenStream, item: TokenStream) -> TokenStr
         #f32_snippet
 
         #ignore_hybrid
+        #[cfg(not(all(target_arch = "wasm32", feature = "webgl")))]
         #[test]
         fn #hybrid_fn_name() {
             use crate::util::{
@@ -180,6 +187,23 @@ pub(crate) fn vello_test_inner(attr: TokenStream, item: TokenStream) -> TokenStr
                 check_ref(&ctx, #input_fn_name_str, #hybrid_fn_name_str, #hybrid_tolerance, false, RenderMode::OptimizeSpeed);
             }
         }
+
+        #ignore_hybrid
+        #[cfg(all(target_arch = "wasm32", feature = "webgl"))]
+        #[wasm_bindgen_test::wasm_bindgen_test]
+        async fn #webgl_fn_name() {
+            use crate::util::{
+                check_ref, get_ctx
+            };
+            use vello_hybrid::Scene;
+            use vello_cpu::RenderMode;
+
+            let mut ctx = get_ctx::<Scene>(#width, #height, #transparent);
+            #input_fn_name(&mut ctx);
+            if !#no_ref {
+                check_ref(&ctx, #input_fn_name_str, #webgl_fn_name_str, #hybrid_tolerance, false, RenderMode::OptimizeSpeed);
+            }
+        }
     };
 
     expanded.into()

sparse_strips/vello_dev_macros/src/test.rs

@@ -28,5 +28,24 @@ image = { workspace = true, features = ["png"] }
 skrifa = { workspace = true }
 smallvec = { workspace = true }
 
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+wasm-bindgen-test = "0.3.50"
+web-sys = { version = "0.3.77", features = [
+    "HtmlCanvasElement",
+    "WebGl2RenderingContext",
+    "Document",
+    "Window",
+    "Element",
+    "HtmlElement",
+    "HtmlImageElement",
+    "Blob",
+    "BlobPropertyBag",
+    "Url",
+] }
+wasm-bindgen = "0.2.100"
+
+[features]
+webgl = ["vello_hybrid/webgl"]
+
 [lints]
 workspace = true

sparse_strips/vello_sparse_tests/Cargo.toml

@@ -0,0 +1,27 @@
+<div align="center">
+
+# Vello Sparse Tests
+
+[![Apache 2.0 or MIT license.](https://img.shields.io/badge/license-Apache--2.0_OR_MIT-blue.svg)](#license)
+\
+[![Linebender Zulip chat.](https://img.shields.io/badge/Linebender-%23vello-blue?logo=Zulip)](https://xi.zulipchat.com/#narrow/channel/197075-vello)
+[![GitHub Actions CI status.](https://img.shields.io/github/actions/workflow/status/linebender/vello/ci.yml?logo=github&label=CI)](https://github.com/linebender/vello/actions)
+
+</div>
+
+This is a development only crate for testing the sparse_strip renderers across a corpus of reference
+images:
+ - cpu
+ - wgpu
+ - wasm32 WebGL
+
+## Testing WebGL on the Browser
+
+To run the `vello_sparse_tests` suite on WebGL headless:
+
+```
+wasm-pack test --headless --chrome --features webgl
+```
+
+To debug the output images in webgl, run the same command without `--headless`. Any tests that fail
+will have their diff image appended to the bottom of the page.

sparse_strips/vello_sparse_tests/README.md

@@ -0,0 +1,54 @@
+// Copyright 2025 the Vello Authors
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+
+//! Build step for `vello_sparse_tests`.
+//!
+//! This build step exists primarily for the wasm32 target testing the browser exclusive "webgl"
+//! feature which cannot read snapshot images from the file system. Instead, the reference images
+//! are inlined into the binary.
+#[cfg(not(feature = "webgl"))]
+fn main() {}
+#[cfg(feature = "webgl")]
+fn main() {
+    use std::fs;
+    use std::io::Write;
+    use std::path::Path;
+    println!("cargo:rerun-if-changed=snapshots");
+
+    let out_dir = std::env::var("OUT_DIR").unwrap();
+    let dest_path = Path::new(&out_dir).join("reference_images.rs");
+    let mut f = fs::File::create(&dest_path).unwrap();
+
+    writeln!(
+        f,
+        "// Generated by build.rs: Inlined reference images for WASM tests"
+    )
+    .unwrap();
+    writeln!(f).unwrap();
+    writeln!(
+        f,
+        "fn get_reference_image(name: &str) -> Option<&'static [u8]> {{"
+    )
+    .unwrap();
+    writeln!(f, "    match name {{").unwrap();
+
+    let snapshot_dir = Path::new("../vello_sparse_tests/snapshots");
+    if snapshot_dir.exists() {
+        for entry in fs::read_dir(snapshot_dir).unwrap() {
+            let entry = entry.unwrap();
+            let path = entry.path();
+            if path.extension().and_then(|s| s.to_str()) == Some("png") {
+                let name = path.file_stem().unwrap().to_str().unwrap();
+                writeln!(
+                    f,
+                    r#"        "{}" => Some(include_bytes!(concat!(env!("CARGO_MANIFEST_DIR"), "/../vello_sparse_tests/snapshots/{}.png"))),"#,
+                    name, name
+                ).unwrap();
+            }
+        }
+    }
+
+    writeln!(f, "        _ => None,").unwrap();
+    writeln!(f, "    }}").unwrap();
+    writeln!(f, "}}").unwrap();
+}

sparse_strips/vello_sparse_tests/build.rs

@@ -20,6 +20,8 @@
 
 #![allow(missing_docs, reason = "we don't need docs for testing")]
 #![allow(clippy::cast_possible_truncation, reason = "not critical for testing")]
+#![cfg(all(target_arch = "wasm32", feature = "webgl"))]
+wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser);
 
 mod basic;
 mod blurred_rounded_rect;

sparse_strips/vello_sparse_tests/tests/mod.rs

@@ -219,6 +219,7 @@ impl Renderer for Scene {
     // This method creates device resources every time it is called. This does not matter much for
     // testing, but should not be used as a basis for implementing something real. This would be a
     // very bad example for that.
+    #[cfg(not(all(target_arch = "wasm32", feature = "webgl")))]
     fn render_to_pixmap(&self, pixmap: &mut Pixmap, _: RenderMode) {
         // On some platforms using `cargo test` triggers segmentation faults in wgpu when the GPU
         // tests are run in parallel (likely related to the number of device resources being
@@ -362,6 +363,57 @@ impl Renderer for Scene {
         texture_copy_buffer.unmap();
     }
 
+    #[cfg(all(target_arch = "wasm32", feature = "webgl"))]
+    fn render_to_pixmap(&self, pixmap: &mut Pixmap, _: RenderMode) {
+        use wasm_bindgen::JsCast;
+        use web_sys::{HtmlCanvasElement, WebGl2RenderingContext};
+
+        let width = self.width();
+        let height = self.height();
+
+        // Create an offscreen HTMLCanvasElement, render the test image to it, and finally read off
+        // the pixmap for diff checking.
+        let document = web_sys::window().unwrap().document().unwrap();
+
+        let canvas = document
+            .create_element("canvas")
+            .unwrap()
+            .dyn_into::<HtmlCanvasElement>()
+            .unwrap();
+
+        canvas.set_width(width.into());
+        canvas.set_height(height.into());
+
+        let mut renderer = vello_hybrid::WebGlRenderer::new(&canvas);
+        let render_size = vello_hybrid::RenderSize {
+            width: width.into(),
+            height: height.into(),
+        };
+
+        renderer.render(self, &render_size).unwrap();
+
+        let gl = canvas
+            .get_context("webgl2")
+            .unwrap()
+            .unwrap()
+            .dyn_into::<WebGl2RenderingContext>()
+            .unwrap();
+        let mut pixels = vec![0_u8; (width as usize) * (height as usize) * 4];
+        gl.read_pixels_with_opt_u8_array(
+            0,
+            0,
+            width.into(),
+            height.into(),
+            WebGl2RenderingContext::RGBA,
+            WebGl2RenderingContext::UNSIGNED_BYTE,
+            Some(&mut pixels),
+        )
+        .unwrap();
+
+        let pixmap_data = pixmap.data_as_u8_slice_mut();
+        pixmap_data.copy_from_slice(&pixels);
+    }
+
     fn width(&self) -> u16 {
         Self::width(self)
     }