wip: add a screenshot test for svg rendering
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
- install
chromedriver - cd packages/yew
- 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
Screenshot code is adapted from https://github.com/xataio/screenshot/
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 🌎
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
Benchmark - SSR
Yew Master
| 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
| 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 |
Size Comparison
| 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.