draft of testing in the browser

Author: ajakubowicz-canva

.github/workflows/ci.yml

@@ -337,6 +337,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,55 @@
+// 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();
+
+    // Read all PNG files from the snapshots directory
+    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)
     }

sparse_strips/vello_sparse_tests/tests/renderer.rs

@@ -21,9 +21,14 @@ use vello_common::peniko::{Blob, ColorStop, ColorStops, Font};
 use vello_common::pixmap::Pixmap;
 use vello_cpu::RenderMode;
 
+#[cfg(target_arch = "wasm32")]
+include!(concat!(env!("OUT_DIR"), "/reference_images.rs"));
+
+#[cfg(not(target_arch = "wasm32"))]
 static REFS_PATH: LazyLock<PathBuf> = LazyLock::new(|| {
     PathBuf::from(env!("CARGO_MANIFEST_DIR")).join("../vello_sparse_tests/snapshots")
 });
+#[cfg(not(target_arch = "wasm32"))]
 static DIFFS_PATH: LazyLock<PathBuf> =
     LazyLock::new(|| PathBuf::from(env!("CARGO_MANIFEST_DIR")).join("../vello_sparse_tests/diffs"));
 
@@ -225,6 +230,7 @@ pub(crate) fn pixmap_to_png(pixmap: Pixmap, width: u32, height: u32) -> Vec<u8>
     png_data
 }
 
+#[cfg(not(target_arch = "wasm32"))]
 pub(crate) fn check_ref(
     ctx: &impl Renderer,
     // The name of the test.
@@ -286,6 +292,102 @@ pub(crate) fn check_ref(
     }
 }
 
+#[cfg(target_arch = "wasm32")]
+pub(crate) fn check_ref(
+    ctx: &impl Renderer,
+    // The name of the test.
+    test_name: &str,
+    _: &str,
+    // Tolerance for pixel differences.
+    threshold: u8,
+    // Must be `false` on `wasm32` as reference image cannot be written to filesystem.
+    is_reference: bool,
+    render_mode: RenderMode,
+) {
+    assert!(!is_reference, "WASM cannot create new reference images");
+
+    let pixmap = render_pixmap(ctx, render_mode);
+    let encoded_image = pixmap_to_png(pixmap, ctx.width() as u32, ctx.height() as u32);
+    let actual = load_from_memory(&encoded_image).unwrap().into_rgba8();
+
+    let ref_data = get_reference_image(test_name).expect("no reference image exists");
+    let ref_image = load_from_memory(ref_data).unwrap().into_rgba8();
+
+    let diff_image = get_diff(&ref_image, &actual, threshold);
+    if let Some(ref img) = diff_image {
+        append_diff_image_to_browser_document(test_name, img);
+        panic!("test didn't match reference image. Scroll to bottom of browser to view diff.");
+    }
+}
+
+#[cfg(target_arch = "wasm32")]
+fn append_diff_image_to_browser_document(test_name: &str, diff_image: &RgbaImage) {
+    use wasm_bindgen::JsCast;
+    use web_sys::js_sys::{Array, Uint8Array};
+    use web_sys::{Blob, BlobPropertyBag, HtmlImageElement, Url, window};
+
+    let window = window().unwrap();
+    let document = window.document().unwrap();
+    let body = document.body().unwrap();
+
+    let container = document.create_element("div").unwrap();
+    container
+        .set_attribute(
+            "style",
+            "border: 2px solid red; \
+         margin: 20px; \
+         padding: 20px; \
+         background: #f0f0f0; \
+         display: inline-block;",
+        )
+        .unwrap();
+
+    let title = document.create_element("h3").unwrap();
+    title.set_text_content(Some(&format!("Test Failed: {}", test_name)));
+    title
+        .set_attribute("style", "color: red; margin-top: 0;")
+        .unwrap();
+    container.append_child(&title).unwrap();
+
+    let diff_png = {
+        let mut png_data = Vec::new();
+        let cursor = std::io::Cursor::new(&mut png_data);
+        let encoder = image::codecs::png::PngEncoder::new(cursor);
+        encoder
+            .write_image(
+                diff_image.as_raw(),
+                diff_image.width(),
+                diff_image.height(),
+                image::ExtendedColorType::Rgba8,
+            )
+            .unwrap();
+        png_data
+    };
+
+    let uint8_array = Uint8Array::new_with_length(diff_png.len() as u32);
+    uint8_array.copy_from(&diff_png);
+    let array = Array::new();
+    array.push(&uint8_array.buffer());
+    let mut blob_property_bag = BlobPropertyBag::new();
+    blob_property_bag.set_type("image/png");
+    let blob = Blob::new_with_u8_array_sequence_and_options(&array, &blob_property_bag).unwrap();
+    let url = Url::create_object_url_with_blob(&blob).unwrap();
+
+    let img = document
+        .create_element("img")
+        .unwrap()
+        .dyn_into::<HtmlImageElement>()
+        .unwrap();
+    img.set_src(&url);
+    img.set_attribute("style", "border: 1px solid #ccc; max-width: 100%;")
+        .unwrap();
+    img.set_attribute("title", "Expected | Diff | Actual")
+        .unwrap();
+
+    container.append_child(&img).unwrap();
+    body.append_child(&container).unwrap();
+}
+
 fn get_diff(
     expected_image: &RgbaImage,
     actual_image: &RgbaImage,