wip: add a screenshot test for svg rendering

[Madoshakalaka]

Description

Current master branch renders a white screen (at least on Chrome) because it converts svg element names to lower case:

#[function_component]
pub fn App() -> Html {
    html! {
    <svg>
        <defs>
            <filter id="glow">
                <feDropShadow dx="0" dy="0" stdDeviation="10" flood-color="red"/>
            </filter>
        </defs>
        <rect width="100" height="100" filter="url(#glow)" />
    </svg>
    }
}

here is a minimal repo https://github.com/Madoshakalaka/svg-dropshadow

Trying to add a test with screenshot to confirm this.

But I keep getting a green pacman

to reproduce

1. install chromedriver
2. cd packages/yew
3. CHROMEDRIVER=$(which chromedriver) cargo test --features csr --target wasm32-unknown-unknown svg_camel_case_elements_render -- --nocapture

it will print a base64 pacman image somehow

[Madoshakalaka]

Screenshot code is adapted from https://github.com/xataio/screenshot/

[Madoshakalaka]

other options can be found here: https://peter.sh/experiments/chromium-command-line-switches/

[github-actions]

Visit the preview URL for this PR (updated for commit b6de2dd):

https://yew-rs-api--pr3895-screenshot-a3qpjxg5.web.app

_{(expires Sun, 17 Aug 2025 14:56:32 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[github-actions]

Benchmark - core

Yew Master

vnode           fastest       │ slowest       │ median        │ mean          │ samples │ iters
╰─ vnode_clone  2.484 ns      │ 2.563 ns      │ 2.487 ns      │ 2.489 ns      │ 100     │ 1000000000

Pull Request

vnode           fastest       │ slowest       │ median        │ mean          │ samples │ iters
╰─ vnode_clone  2.484 ns      │ 3.814 ns      │ 2.488 ns      │ 2.599 ns      │ 100     │ 1000000000

[github-actions]

Benchmark - SSR

Yew Master

Details

Benchmark	Round	Min (ms)	Max (ms)	Mean (ms)	Standard Deviation
Baseline	10	290.776	300.826	292.741	3.532
Hello World	10	462.902	483.518	469.019	7.154
Function Router	10	1565.999	1588.095	1579.040	9.694
Concurrent Task	10	1006.364	1007.128	1006.825	0.218
Many Providers	10	1056.550	1108.301	1069.699	15.431

Pull Request

Details

Benchmark	Round	Min (ms)	Max (ms)	Mean (ms)	Standard Deviation
Baseline	10	290.917	291.225	291.045	0.120
Hello World	10	463.804	482.885	475.986	5.899
Function Router	10	1590.394	1608.028	1602.535	4.971
Concurrent Task	10	1005.183	1007.232	1006.485	0.563
Many Providers	10	1093.780	1122.173	1106.836	11.148

[github-actions]

Size Comparison

Details

examples	master (KB)	pull request (KB)	diff (KB)	diff (%)
async_clock	99.421	99.421	0	0.000%
boids	168.201	168.201	0	0.000%
communication_child_to_parent	91.780	91.780	0	0.000%
communication_grandchild_with_grandparent	102.800	102.800	0	0.000%
communication_grandparent_to_grandchild	97.798	97.798	0	0.000%
communication_parent_to_child	87.694	87.694	0	0.000%
contexts	103.902	103.902	0	0.000%
counter	84.495	84.495	0	0.000%
counter_functional	84.851	84.851	0	0.000%
dyn_create_destroy_apps	87.430	87.430	0	0.000%
file_upload	98.548	98.548	0	0.000%
function_memory_game	169.780	169.780	0	0.000%
function_router	336.910	336.910	0	0.000%
function_todomvc	162.883	162.883	0	0.000%
futures	235.953	235.953	0	0.000%
game_of_life	104.456	104.456	0	0.000%
immutable	194.165	194.165	0	0.000%
inner_html	80.152	80.152	0	0.000%
js_callback	107.565	107.565	0	0.000%
keyed_list	195.413	195.413	0	0.000%
mount_point	83.513	83.513	0	0.000%
nested_list	112.625	112.625	0	0.000%
node_refs	90.870	90.870	0	0.000%
password_strength	1782.886	1782.886	0	0.000%
portals	92.658	92.658	0	0.000%
router	306.364	306.364	0	0.000%
suspense	111.577	111.577	0	0.000%
timer	88.664	88.664	0	0.000%
timer_functional	94.691	94.691	0	0.000%
todomvc	143.130	143.130	0	0.000%
two_apps	85.872	85.872	0	0.000%
web_worker_fib	134.949	134.949	0	0.000%
web_worker_prime	185.107	185.107	0	0.000%
webgl	83.009	83.009	0	0.000%

✅ None of the examples has changed their size significantly.