DioxusLabs / DioxusLabs/blitz

Dispatch CSS animation/transition events and <style>/<link> load events (unblocks quarantined WPTs)

Open
#863 3 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
Rust
Stars
4.1k
Forks
203
Avg merge
8h 58m
Merged PRs (30d)
112

Description

## Summary

Blitz does not dispatch three families of DOM events. With the CSSOM stylesheet API landing in #860, several WPTs that previously failed synchronously on `style.sheet` now get past setup and hang waiting on these events, so they were added to `wpt/runner/timeout-quarantine.txt`. This issue tracks implementing the events and lists which quarantined tests to re-enable when each lands.

Quarantine entries are tagged by reason, so the simplest way to find candidates is `grep '$' wpt/runner/timeout-quarantine.txt`.

### 1. CSS Animations events (`animation-events`)

`animationstart`, `animationiteration`, `animationend`, `animationcancel` (`AnimationEvent` with `animationName`, `elapsedTime`, `pseudoElement`). Nothing in `blitz-dom` / `blitz-vibey-script` dispatches these today.

Newly quarantined by #860 — unquarantine first once implemented:

- `css/css-logical/animation-002.html` (9/15 subtests pass, last one awaits `animationend`)
- `css/css-logical/animation-004.html` (10/16 pass, same)

Pre-existing entries with the same tag (23 total), e.g.:

- `css/css-animations/animationevent-types.html`
- `css/css-animations/animation-iteration-event-001.html` / `-002.html`
- `css/css-animations/animationevent-pseudoelement.html`
- `css/css-animations/animationevent-marker-pseudoelement.html`
- `css/css-animations/Element-getAnimations.tentative.html`
- `css/css-variables/variable-animation-*.html` (9 tests)
- `css/css-fonts/animations/*font-palette-animation*.html`
- `css/css-transitions/transition-after-animation-001.html`

### 2. CSS Transitions events (`transition-events`)

`transitionrun`, `transitionstart`, `transitionend`, `transitioncancel` (`TransitionEvent` with `propertyName`, `elapsedTime`, `pseudoElement`). Also not dispatched anywhere.

Newly quarantined by #860:

- `css/css-transitions/non-rendered-element-002.html` (awaits `transitionrun` then `transitioncancel` on `::before`/`::after`)
- `css/css-transitions/non-rendered-element-004.tentative.html`

Pre-existing entries with the same tag (27 total), e.g.:

- `css/css-transitions/events-001.html` … `events-008.html`
- `css/css-transitions/transitioncancel-001.html` … `-003.html`
- `css/css-transitions/properties-value-*.html`
- `css/css-transitions/non-rendered-element-001.html`
- `css/css-variables/variable-transitions-*.html`

### 3. `load` / `error` events on `` and `<link rel=stylesheet>` (`dynamic-load-events`)

Per the HTML spec, a `<style>` element (and `<link rel=stylesheet>`) fires `load` once its sheet **and all its `@import`s** have finished loading (or `error` on failure). Blitz attaches `@import`ed sheets asynchronously (#861) but never fires the element event, so tests that `await` it hang.

Newly quarantined by #860:

- `css/css-cascade/layer-rules-cssom.html` (6/9 pass; the 3 `@import` cases await `style.onload`)

Pre-existing stylesheet-related entries with the same tag:

- `css/css-cascade/import-conditions.html`
- `css/css-cascade/layer-import.html`
- `css/css-cascade/layer-media-query.html`
- `css/css-cascade/layer-statement-before-import.html`
- `css/css-cascade/scope-implicit-external.html`
- `css/css-fonts/generic-family-keywords-003.html`
- `css/css-fonts/variations/at-font-face-font-matching.html`
- `css/css-values/urls/referrer-policy/no-referrer/url-import-referrer-policy.html`

(The `dynamic-load-events` tag also covers `<img>`/`<iframe>` load events, which are a separate piece of work — only the stylesheet ones are listed here.)

Implementation note: the natural hook is `BaseDocument::load_resource` — the `Resource::Css` arm (for `<link>`) and the new `Resource::ImportedCss` arm (#861) know when a sheet arrives; a per-owner-node count of outstanding imports would let the document fire `load` on the owning element once it reaches zero. Inline `<style>` with no imports should fire `load` asynchronously right after parsing.

### Process

When implementing any of the above, remove the corresponding lines from `wpt/runner/timeout-quarantine.txt` and confirm with `WPT_DIR=... cargo run --release --package wpt -- <test paths>` that they no longer time out.

[Written by Devin](https://dioxus.staging.devinenterprise.com/sessions/6288a6e4544b464e9891e948ea81f912)

Contributor guide

Open the contributing guide

Research direction

Start with event handling in blitz-dom and blitz-vibey-script, then inspect BaseDocument::load_resource and its Resource::Css and Resource::ImportedCss arms. Use the tagged entries in wpt/runner/timeout-quarantine.txt and run the listed WPT command for the event family you implement. Done means the relevant tests no longer time out and their quarantine entries are removed.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, rust
Domain
frontend, testing-qa, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.