Move Web backend to winit-web

winit-web/src/web_sys/animation_frame.rs

@@ -0,0 +1,61 @@
+use std::cell::Cell;
+use std::rc::Rc;
+
+use wasm_bindgen::closure::Closure;
+use wasm_bindgen::JsCast;
+
+pub struct AnimationFrameHandler {
+    window: web_sys::Window,
+    closure: Closure<dyn FnMut()>,
+    handle: Rc<Cell<Option<i32>>>,
+}
+
+impl AnimationFrameHandler {
+    pub fn new(window: web_sys::Window) -> Self {
+        let handle = Rc::new(Cell::new(None));
+        let closure = Closure::new({
+            let handle = handle.clone();
+            move || handle.set(None)
+        });
+
+        Self { window, closure, handle }
+    }
+
+    pub fn on_animation_frame<F>(&mut self, mut f: F)
+    where
+        F: 'static + FnMut(),
+    {
+        let handle = self.handle.clone();
+        self.closure = Closure::new(move || {
+            handle.set(None);
+            f();
+        })
+    }
+
+    pub fn request(&self) {
+        if let Some(handle) = self.handle.take() {
+            self.window.cancel_animation_frame(handle).expect("Failed to cancel animation frame");
+        }
+
+        let handle = self
+            .window
+            .request_animation_frame(self.closure.as_ref().unchecked_ref())
+            .expect("Failed to request animation frame");
+
+        self.handle.set(Some(handle));
+    }
+
+    pub fn cancel(&mut self) {
+        if let Some(handle) = self.handle.take() {
+            self.window.cancel_animation_frame(handle).expect("Failed to cancel animation frame");
+        }
+    }
+}
+
+impl Drop for AnimationFrameHandler {
+    fn drop(&mut self) {
+        if let Some(handle) = self.handle.take() {
+            self.window.cancel_animation_frame(handle).expect("Failed to cancel animation frame");
+        }
+    }
+}

winit-web/src/web_sys/canvas.rs

@@ -0,0 +1,594 @@
+use std::cell::{Cell, RefCell};
+use std::ops::Deref;
+use std::rc::Rc;
+use std::sync::{Arc, Mutex};
+
+use dpi::{LogicalPosition, PhysicalPosition, PhysicalSize};
+use smol_str::SmolStr;
+use wasm_bindgen::closure::Closure;
+use wasm_bindgen::JsCast;
+use web_sys::{
+    CssStyleDeclaration, Document, Event, FocusEvent, HtmlCanvasElement, KeyboardEvent, Navigator,
+    PointerEvent, WheelEvent,
+};
+use winit_core::error::RequestError;
+use winit_core::event::{
+    ButtonSource, DeviceId, ElementState, MouseScrollDelta, PointerKind, PointerSource,
+    SurfaceSizeWriter, WindowEvent,
+};
+use winit_core::keyboard::{Key, KeyLocation, ModifiersState, PhysicalKey};
+use winit_core::monitor::Fullscreen;
+use winit_core::window::{WindowAttributes, WindowId};
+
+use super::super::cursor::CursorHandler;
+use super::super::event_loop::runner;
+use super::super::main_thread::MainThreadMarker;
+use super::animation_frame::AnimationFrameHandler;
+use super::event_handle::EventListenerHandle;
+use super::intersection_handle::IntersectionObserverHandle;
+use super::media_query_handle::MediaQueryListHandle;
+use super::pointer::PointerHandler;
+use super::{event, fullscreen, ResizeScaleHandle};
+use crate::WindowAttributesWeb;
+
+#[allow(dead_code)]
+pub struct Canvas {
+    main_thread: MainThreadMarker,
+    common: Common,
+    id: WindowId,
+    pub has_focus: Rc<Cell<bool>>,
+    pub prevent_default: Rc<Cell<bool>>,
+    pub is_intersecting: Cell<Option<bool>>,
+    pub cursor: CursorHandler,
+    handlers: RefCell<Handlers>,
+}
+
+struct Handlers {
+    animation_frame_handler: AnimationFrameHandler,
+    on_touch_start: Option<EventListenerHandle<dyn FnMut(Event)>>,
+    on_focus: Option<EventListenerHandle<dyn FnMut(FocusEvent)>>,
+    on_blur: Option<EventListenerHandle<dyn FnMut(FocusEvent)>>,
+    on_keyboard_release: Option<EventListenerHandle<dyn FnMut(KeyboardEvent)>>,
+    on_keyboard_press: Option<EventListenerHandle<dyn FnMut(KeyboardEvent)>>,
+    on_mouse_wheel: Option<EventListenerHandle<dyn FnMut(WheelEvent)>>,
+    on_dark_mode: Option<MediaQueryListHandle>,
+    pointer_handler: PointerHandler,
+    on_resize_scale: Option<ResizeScaleHandle>,
+    on_intersect: Option<IntersectionObserverHandle>,
+    on_touch_end: Option<EventListenerHandle<dyn FnMut(Event)>>,
+    on_context_menu: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+}
+
+pub struct Common {
+    pub window: web_sys::Window,
+    navigator: Navigator,
+    pub document: Document,
+    /// Note: resizing the HTMLCanvasElement should go through `backend::set_canvas_size` to ensure
+    /// the DPI factor is maintained. Note: this is read-only because we use a pointer to this
+    /// for [`WindowHandle`][rwh_06::WindowHandle].
+    raw: Rc<HtmlCanvasElement>,
+    style: Style,
+    old_size: Rc<Cell<PhysicalSize<u32>>>,
+    current_size: Rc<Cell<PhysicalSize<u32>>>,
+}
+
+#[derive(Clone, Debug)]
+pub struct Style {
+    pub(super) read: CssStyleDeclaration,
+    pub(super) write: CssStyleDeclaration,
+}
+
+impl Canvas {
+    pub(crate) fn create(
+        main_thread: MainThreadMarker,
+        id: WindowId,
+        window: web_sys::Window,
+        navigator: Navigator,
+        document: Document,
+        mut attr: WindowAttributes,
+    ) -> Result<Self, RequestError> {
+        let web_attributes = attr
+            .platform
+            .take()
+            .and_then(|attrs| attrs.cast::<WindowAttributesWeb>().ok())
+            .unwrap_or_default();
+
+        let canvas = match web_attributes.canvas.map(Arc::try_unwrap) {
+            Some(Ok(canvas)) => canvas.into_inner(main_thread),
+            Some(Err(canvas)) => canvas.get(main_thread).clone(),
+            None => document
+                .create_element("canvas")
+                .map_err(|_| os_error!("Failed to create canvas element"))?
+                .unchecked_into(),
+        };
+
+        if web_attributes.append && !document.contains(Some(&canvas)) {
+            document
+                .body()
+                .expect("Failed to get body from document")
+                .append_child(&canvas)
+                .expect("Failed to append canvas to body");
+        }
+
+        // A tabindex is needed in order to capture local keyboard events.
+        // A "0" value means that the element should be focusable in
+        // sequential keyboard navigation, but its order is defined by the
+        // document's source order.
+        // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+        if web_attributes.focusable {
+            canvas
+                .set_attribute("tabindex", "0")
+                .map_err(|_| os_error!("Failed to set a tabindex"))?;
+        }
+
+        let style = Style::new(&window, &canvas);
+
+        let cursor = CursorHandler::new(main_thread, canvas.clone(), style.clone());
+
+        let common = Common {
+            window: window.clone(),
+            document: document.clone(),
+            navigator,
+            raw: Rc::new(canvas.clone()),
+            style,
+            old_size: Rc::default(),
+            current_size: Rc::default(),
+        };
+
+        if let Some(size) = attr.surface_size {
+            let size = size.to_logical(super::scale_factor(&common.window));
+            super::set_canvas_size(&common.document, &common.raw, &common.style, size);
+        }
+
+        if let Some(size) = attr.min_surface_size {
+            let size = size.to_logical(super::scale_factor(&common.window));
+            super::set_canvas_min_size(&common.document, &common.raw, &common.style, Some(size));
+        }
+
+        if let Some(size) = attr.max_surface_size {
+            let size = size.to_logical(super::scale_factor(&common.window));
+            super::set_canvas_max_size(&common.document, &common.raw, &common.style, Some(size));
+        }
+
+        if let Some(position) = attr.position {
+            let position = position.to_logical(super::scale_factor(&common.window));
+            super::set_canvas_position(&common.document, &common.raw, &common.style, position);
+        }
+
+        if let Some(fullscreen) = attr.fullscreen {
+            fullscreen::request_fullscreen(main_thread, &window, &document, &canvas, fullscreen);
+        }
+
+        if attr.active {
+            let _ = common.raw.focus();
+        }
+
+        Ok(Canvas {
+            main_thread,
+            common,
+            id,
+            has_focus: Rc::new(Cell::new(false)),
+            prevent_default: Rc::new(Cell::new(web_attributes.prevent_default)),
+            is_intersecting: Cell::new(None),
+            cursor,
+            handlers: RefCell::new(Handlers {
+                animation_frame_handler: AnimationFrameHandler::new(window),
+                on_touch_start: None,
+                on_blur: None,
+                on_focus: None,
+                on_keyboard_release: None,
+                on_keyboard_press: None,
+                on_mouse_wheel: None,
+                on_dark_mode: None,
+                pointer_handler: PointerHandler::new(),
+                on_resize_scale: None,
+                on_intersect: None,
+                on_touch_end: None,
+                on_context_menu: None,
+            }),
+        })
+    }
+
+    pub fn set_attribute(&self, attribute: &str, value: &str) {
+        self.common
+            .raw
+            .set_attribute(attribute, value)
+            .unwrap_or_else(|err| panic!("error: {err:?}\nSet attribute: {attribute}"))
+    }
+
+    pub fn position(&self) -> LogicalPosition<f64> {
+        let bounds = self.common.raw.get_bounding_client_rect();
+        let mut position = LogicalPosition { x: bounds.x(), y: bounds.y() };
+
+        if self.document().contains(Some(self.raw())) && self.style().get("display") != "none" {
+            position.x += super::style_size_property(self.style(), "border-left-width")
+                + super::style_size_property(self.style(), "padding-left");
+            position.y += super::style_size_property(self.style(), "border-top-width")
+                + super::style_size_property(self.style(), "padding-top");
+        }
+
+        position
+    }
+
+    #[inline]
+    pub fn old_size(&self) -> PhysicalSize<u32> {
+        self.common.old_size.get()
+    }
+
+    #[inline]
+    pub fn surface_size(&self) -> PhysicalSize<u32> {
+        self.common.current_size.get()
+    }
+
+    #[inline]
+    pub fn set_old_size(&self, size: PhysicalSize<u32>) {
+        self.common.old_size.set(size)
+    }
+
+    #[inline]
+    pub fn set_current_size(&self, size: PhysicalSize<u32>) {
+        self.common.current_size.set(size)
+    }
+
+    #[inline]
+    pub fn window(&self) -> &web_sys::Window {
+        &self.common.window
+    }
+
+    #[inline]
+    pub fn navigator(&self) -> &Navigator {
+        &self.common.navigator
+    }
+
+    #[inline]
+    pub fn document(&self) -> &Document {
+        &self.common.document
+    }
+
+    #[inline]
+    pub fn raw(&self) -> &HtmlCanvasElement {
+        &self.common.raw
+    }
+
+    #[inline]
+    pub fn style(&self) -> &Style {
+        &self.common.style
+    }
+
+    pub fn on_touch_start(&self) {
+        let prevent_default = Rc::clone(&self.prevent_default);
+        self.handlers.borrow_mut().on_touch_start =
+            Some(self.common.add_event("touchstart", move |event: Event| {
+                if prevent_default.get() {
+                    event.prevent_default();
+                }
+            }));
+    }
+
+    pub fn on_blur<F>(&self, mut handler: F)
+    where
+        F: 'static + FnMut(),
+    {
+        self.handlers.borrow_mut().on_blur =
+            Some(self.common.add_event("blur", move |_: FocusEvent| {
+                handler();
+            }));
+    }
+
+    pub fn on_focus<F>(&self, mut handler: F)
+    where
+        F: 'static + FnMut(),
+    {
+        self.handlers.borrow_mut().on_focus =
+            Some(self.common.add_event("focus", move |_: FocusEvent| {
+                handler();
+            }));
+    }
+
+    pub fn on_keyboard_release<F>(&self, mut handler: F)
+    where
+        F: 'static + FnMut(PhysicalKey, Key, Option<SmolStr>, KeyLocation, bool, ModifiersState),
+    {
+        let prevent_default = Rc::clone(&self.prevent_default);
+        self.handlers.borrow_mut().on_keyboard_release =
+            Some(self.common.add_event("keyup", move |event: KeyboardEvent| {
+                if prevent_default.get() {
+                    event.prevent_default();
+                }
+                let key = event::key(&event);
+                let modifiers = event::keyboard_modifiers(&event);
+                handler(
+                    event::key_code(&event),
+                    key,
+                    event::key_text(&event),
+                    event::key_location(&event),
+                    event.repeat(),
+                    modifiers,
+                );
+            }));
+    }
+
+    pub fn on_keyboard_press<F>(&self, mut handler: F)
+    where
+        F: 'static + FnMut(PhysicalKey, Key, Option<SmolStr>, KeyLocation, bool, ModifiersState),
+    {
+        let prevent_default = Rc::clone(&self.prevent_default);
+        self.handlers.borrow_mut().on_keyboard_press =
+            Some(self.common.add_event("keydown", move |event: KeyboardEvent| {
+                if prevent_default.get() {
+                    event.prevent_default();
+                }
+                let key = event::key(&event);
+                let modifiers = event::keyboard_modifiers(&event);
+                handler(
+                    event::key_code(&event),
+                    key,
+                    event::key_text(&event),
+                    event::key_location(&event),
+                    event.repeat(),
+                    modifiers,
+                );
+            }));
+    }
+
+    pub fn on_pointer_leave<F>(&self, handler: F)
+    where
+        F: 'static
+            + FnMut(ModifiersState, Option<DeviceId>, bool, PhysicalPosition<f64>, PointerKind),
+    {
+        self.handlers.borrow_mut().pointer_handler.on_pointer_leave(&self.common, handler)
+    }
+
+    pub fn on_pointer_enter<F>(&self, handler: F)
+    where
+        F: 'static
+            + FnMut(ModifiersState, Option<DeviceId>, bool, PhysicalPosition<f64>, PointerKind),
+    {
+        self.handlers.borrow_mut().pointer_handler.on_pointer_enter(&self.common, handler)
+    }
+
+    pub fn on_pointer_release<C>(&self, handler: C)
+    where
+        C: 'static
+            + FnMut(ModifiersState, Option<DeviceId>, bool, PhysicalPosition<f64>, ButtonSource),
+    {
+        self.handlers.borrow_mut().pointer_handler.on_pointer_release(&self.common, handler)
+    }
+
+    pub fn on_pointer_press<C>(&self, handler: C)
+    where
+        C: 'static
+            + FnMut(ModifiersState, Option<DeviceId>, bool, PhysicalPosition<f64>, ButtonSource),
+    {
+        self.handlers.borrow_mut().pointer_handler.on_pointer_press(
+            &self.common,
+            handler,
+            Rc::clone(&self.prevent_default),
+        )
+    }
+
+    pub fn on_pointer_move<C, B>(&self, cursor_handler: C, button_handler: B)
+    where
+        C: 'static
+            + FnMut(
+                Option<DeviceId>,
+                &mut dyn Iterator<
+                    Item = (ModifiersState, bool, PhysicalPosition<f64>, PointerSource),
+                >,
+            ),
+        B: 'static
+            + FnMut(
+                ModifiersState,
+                Option<DeviceId>,
+                bool,
+                PhysicalPosition<f64>,
+                ElementState,
+                ButtonSource,
+            ),
+    {
+        self.handlers.borrow_mut().pointer_handler.on_pointer_move(
+            &self.common,
+            cursor_handler,
+            button_handler,
+            Rc::clone(&self.prevent_default),
+        )
+    }
+
+    pub fn on_mouse_wheel<F>(&self, mut handler: F)
+    where
+        F: 'static + FnMut(MouseScrollDelta, ModifiersState),
+    {
+        let window = self.common.window.clone();
+        let prevent_default = Rc::clone(&self.prevent_default);
+        self.handlers.borrow_mut().on_mouse_wheel =
+            Some(self.common.add_event("wheel", move |event: WheelEvent| {
+                if prevent_default.get() {
+                    event.prevent_default();
+                }
+
+                if let Some(delta) = event::mouse_scroll_delta(&window, &event) {
+                    let modifiers = event::mouse_modifiers(&event);
+                    handler(delta, modifiers);
+                }
+            }));
+    }
+
+    pub fn on_dark_mode<F>(&self, mut handler: F)
+    where
+        F: 'static + FnMut(bool),
+    {
+        self.handlers.borrow_mut().on_dark_mode = Some(MediaQueryListHandle::new(
+            &self.common.window,
+            "(prefers-color-scheme: dark)",
+            move |mql| handler(mql.matches()),
+        ));
+    }
+
+    pub(crate) fn on_resize_scale<S, R>(&self, scale_handler: S, size_handler: R)
+    where
+        S: 'static + Fn(PhysicalSize<u32>, f64),
+        R: 'static + Fn(PhysicalSize<u32>),
+    {
+        self.handlers.borrow_mut().on_resize_scale = Some(ResizeScaleHandle::new(
+            self.window().clone(),
+            self.document().clone(),
+            self.raw().clone(),
+            self.style().clone(),
+            scale_handler,
+            size_handler,
+        ));
+    }
+
+    pub(crate) fn on_intersection<F>(&self, handler: F)
+    where
+        F: 'static + FnMut(bool),
+    {
+        self.handlers.borrow_mut().on_intersect =
+            Some(IntersectionObserverHandle::new(self.raw(), handler));
+    }
+
+    pub(crate) fn on_animation_frame<F>(&self, f: F)
+    where
+        F: 'static + FnMut(),
+    {
+        self.handlers.borrow_mut().animation_frame_handler.on_animation_frame(f)
+    }
+
+    pub(crate) fn on_context_menu(&self) {
+        let prevent_default = Rc::clone(&self.prevent_default);
+        self.handlers.borrow_mut().on_context_menu =
+            Some(self.common.add_event("contextmenu", move |event: PointerEvent| {
+                if prevent_default.get() {
+                    event.prevent_default();
+                }
+            }));
+    }
+
+    pub(crate) fn request_fullscreen(&self, fullscreen: Fullscreen) {
+        fullscreen::request_fullscreen(
+            self.main_thread,
+            self.window(),
+            self.document(),
+            self.raw(),
+            fullscreen,
+        );
+    }
+
+    pub fn exit_fullscreen(&self) {
+        fullscreen::exit_fullscreen(self.document(), self.raw());
+    }
+
+    pub fn is_fullscreen(&self) -> bool {
+        fullscreen::is_fullscreen(self.document(), self.raw())
+    }
+
+    pub fn request_animation_frame(&self) {
+        self.handlers.borrow().animation_frame_handler.request();
+    }
+
+    pub(crate) fn handle_scale_change(
+        &self,
+        runner: &super::super::event_loop::runner::Shared,
+        event_handler: impl FnOnce(WindowId, WindowEvent),
+        current_size: PhysicalSize<u32>,
+        scale: f64,
+    ) {
+        // First, we send the `ScaleFactorChanged` event:
+        self.set_current_size(current_size);
+        let new_size = {
+            let new_size = Arc::new(Mutex::new(current_size));
+            event_handler(self.id, WindowEvent::ScaleFactorChanged {
+                scale_factor: scale,
+                surface_size_writer: SurfaceSizeWriter::new(Arc::downgrade(&new_size)),
+            });
+
+            let new_size = *new_size.lock().unwrap();
+            new_size
+        };
+
+        if current_size != new_size {
+            // Then we resize the canvas to the new size, a new `SurfaceResized` event will be sent
+            // by the `ResizeObserver`:
+            let new_size = new_size.to_logical(scale);
+            super::set_canvas_size(self.document(), self.raw(), self.style(), new_size);
+
+            // Set the size might not trigger the event because the calculation is inaccurate.
+            self.handlers
+                .borrow()
+                .on_resize_scale
+                .as_ref()
+                .expect("expected Window to still be active")
+                .notify_resize();
+        } else if self.old_size() != new_size {
+            // Then we at least send a resized event.
+            self.set_old_size(new_size);
+            runner.send_event(runner::Event::WindowEvent {
+                window_id: self.id,
+                event: WindowEvent::SurfaceResized(new_size),
+            })
+        }
+    }
+
+    pub fn remove_listeners(&self) {
+        let mut handlers = self.handlers.borrow_mut();
+        handlers.on_touch_start.take();
+        handlers.on_focus.take();
+        handlers.on_blur.take();
+        handlers.on_keyboard_release.take();
+        handlers.on_keyboard_press.take();
+        handlers.on_mouse_wheel.take();
+        handlers.on_dark_mode.take();
+        handlers.pointer_handler.remove_listeners();
+        handlers.on_resize_scale = None;
+        handlers.on_intersect = None;
+        handlers.animation_frame_handler.cancel();
+        handlers.on_touch_end = None;
+        handlers.on_context_menu = None;
+    }
+}
+
+impl Common {
+    pub fn add_event<E, F>(
+        &self,
+        event_name: &'static str,
+        handler: F,
+    ) -> EventListenerHandle<dyn FnMut(E)>
+    where
+        E: 'static + AsRef<web_sys::Event> + wasm_bindgen::convert::FromWasmAbi,
+        F: 'static + FnMut(E),
+    {
+        EventListenerHandle::new(self.raw.deref().clone(), event_name, Closure::new(handler))
+    }
+
+    pub fn raw(&self) -> &HtmlCanvasElement {
+        &self.raw
+    }
+}
+
+impl Style {
+    fn new(window: &web_sys::Window, canvas: &HtmlCanvasElement) -> Self {
+        #[allow(clippy::disallowed_methods)]
+        let read = window
+            .get_computed_style(canvas)
+            .expect("Failed to obtain computed style")
+            // this can't fail: we aren't using a pseudo-element
+            .expect("Invalid pseudo-element");
+
+        #[allow(clippy::disallowed_methods)]
+        let write = canvas.style();
+
+        Self { read, write }
+    }
+
+    pub(crate) fn get(&self, property: &str) -> String {
+        self.read.get_property_value(property).expect("Invalid property")
+    }
+
+    pub(crate) fn remove(&self, property: &str) {
+        self.write.remove_property(property).expect("Property is read only");
+    }
+
+    pub(crate) fn set(&self, property: &str, value: &str) {
+        self.write.set_property(property, value).expect("Property is read only");
+    }
+}

winit-web/src/web_sys/event.rs

@@ -0,0 +1,276 @@
+use std::cell::OnceCell;
+
+use dpi::{LogicalPosition, PhysicalPosition, Position};
+use smol_str::SmolStr;
+use wasm_bindgen::prelude::wasm_bindgen;
+use wasm_bindgen::{JsCast, JsValue};
+use web_sys::{KeyboardEvent, MouseEvent, Navigator, PointerEvent, WheelEvent};
+use winit_core::event::{FingerId, MouseButton, MouseScrollDelta, PointerKind};
+use winit_core::keyboard::{Key, KeyLocation, ModifiersState, NamedKey, PhysicalKey};
+
+use super::Engine;
+use crate::keyboard::FromAttributeValue;
+
+bitflags::bitflags! {
+    // https://www.w3.org/TR/pointerevents3/#the-buttons-property
+    #[derive(Debug, Clone, Copy, PartialEq, Eq)]
+    pub struct ButtonsState: u16 {
+        const LEFT    = 0b00001;
+        const RIGHT   = 0b00010;
+        const MIDDLE  = 0b00100;
+        const BACK    = 0b01000;
+        const FORWARD = 0b10000;
+    }
+}
+
+impl From<ButtonsState> for MouseButton {
+    fn from(value: ButtonsState) -> Self {
+        match value {
+            ButtonsState::LEFT => MouseButton::Left,
+            ButtonsState::RIGHT => MouseButton::Right,
+            ButtonsState::MIDDLE => MouseButton::Middle,
+            ButtonsState::BACK => MouseButton::Back,
+            ButtonsState::FORWARD => MouseButton::Forward,
+            _ => MouseButton::Other(value.bits()),
+        }
+    }
+}
+
+impl From<MouseButton> for ButtonsState {
+    fn from(value: MouseButton) -> Self {
+        match value {
+            MouseButton::Left => ButtonsState::LEFT,
+            MouseButton::Right => ButtonsState::RIGHT,
+            MouseButton::Middle => ButtonsState::MIDDLE,
+            MouseButton::Back => ButtonsState::BACK,
+            MouseButton::Forward => ButtonsState::FORWARD,
+            MouseButton::Other(value) => ButtonsState::from_bits_retain(value),
+        }
+    }
+}
+
+pub fn mouse_buttons(event: &MouseEvent) -> ButtonsState {
+    ButtonsState::from_bits_retain(event.buttons())
+}
+
+pub fn mouse_button(event: &MouseEvent) -> Option<MouseButton> {
+    // https://www.w3.org/TR/pointerevents3/#the-button-property
+    match event.button() {
+        -1 => None,
+        0 => Some(MouseButton::Left),
+        1 => Some(MouseButton::Middle),
+        2 => Some(MouseButton::Right),
+        3 => Some(MouseButton::Back),
+        4 => Some(MouseButton::Forward),
+        i => {
+            Some(MouseButton::Other(i.try_into().expect("unexpected negative mouse button value")))
+        },
+    }
+}
+
+pub fn mouse_button_to_id(button: MouseButton) -> u16 {
+    match button {
+        MouseButton::Left => 0,
+        MouseButton::Right => 1,
+        MouseButton::Middle => 2,
+        MouseButton::Back => 3,
+        MouseButton::Forward => 4,
+        MouseButton::Other(value) => value,
+    }
+}
+
+pub fn mouse_position(event: &MouseEvent) -> LogicalPosition<f64> {
+    #[wasm_bindgen]
+    extern "C" {
+        type MouseEventExt;
+
+        #[wasm_bindgen(method, getter, js_name = offsetX)]
+        fn offset_x(this: &MouseEventExt) -> f64;
+
+        #[wasm_bindgen(method, getter, js_name = offsetY)]
+        fn offset_y(this: &MouseEventExt) -> f64;
+    }
+
+    let event: &MouseEventExt = event.unchecked_ref();
+
+    LogicalPosition { x: event.offset_x(), y: event.offset_y() }
+}
+
+// TODO: Remove this when Firefox supports correct movement values in coalesced events and browsers
+// have agreed on what coordinate space `movementX/Y` is using.
+// See <https://bugzilla.mozilla.org/show_bug.cgi?id=1753724>.
+// See <https://github.com/w3c/pointerlock/issues/42>.
+pub enum MouseDelta {
+    Chromium,
+    Gecko { old_position: LogicalPosition<f64>, old_delta: LogicalPosition<f64> },
+    Other,
+}
+
+impl MouseDelta {
+    pub fn init(navigator: &Navigator, event: &PointerEvent) -> Self {
+        match super::engine(navigator) {
+            Some(Engine::Chromium) => Self::Chromium,
+            // Firefox has wrong movement values in coalesced events.
+            Some(Engine::Gecko) if has_coalesced_events_support(event) => Self::Gecko {
+                old_position: mouse_position(event),
+                old_delta: LogicalPosition::new(
+                    event.movement_x() as f64,
+                    event.movement_y() as f64,
+                ),
+            },
+            _ => Self::Other,
+        }
+    }
+
+    pub fn delta(&mut self, event: &MouseEvent) -> Position {
+        match self {
+            MouseDelta::Chromium => {
+                PhysicalPosition::new(event.movement_x(), event.movement_y()).into()
+            },
+            MouseDelta::Gecko { old_position, old_delta } => {
+                let new_position = mouse_position(event);
+                let x = new_position.x - old_position.x + old_delta.x;
+                let y = new_position.y - old_position.y + old_delta.y;
+                *old_position = new_position;
+                *old_delta = LogicalPosition::new(0., 0.);
+                LogicalPosition::new(x, y).into()
+            },
+            MouseDelta::Other => {
+                LogicalPosition::new(event.movement_x(), event.movement_y()).into()
+            },
+        }
+    }
+}
+
+pub fn mouse_scroll_delta(
+    window: &web_sys::Window,
+    event: &WheelEvent,
+) -> Option<MouseScrollDelta> {
+    let x = -event.delta_x();
+    let y = -event.delta_y();
+
+    match event.delta_mode() {
+        WheelEvent::DOM_DELTA_LINE => Some(MouseScrollDelta::LineDelta(x as f32, y as f32)),
+        WheelEvent::DOM_DELTA_PIXEL => {
+            let delta = LogicalPosition::new(x, y).to_physical(super::scale_factor(window));
+            Some(MouseScrollDelta::PixelDelta(delta))
+        },
+        _ => None,
+    }
+}
+
+pub fn pointer_type(event: &PointerEvent, pointer_id: i32) -> PointerKind {
+    match event.pointer_type().as_str() {
+        "mouse" => PointerKind::Mouse,
+        "touch" => PointerKind::Touch(FingerId::from_raw(pointer_id as usize)),
+        _ => PointerKind::Unknown,
+    }
+}
+
+pub fn key_code(event: &KeyboardEvent) -> PhysicalKey {
+    let code = event.code();
+    PhysicalKey::from_attribute_value(&code)
+}
+
+pub fn key(event: &KeyboardEvent) -> Key {
+    Key::from_attribute_value(&event.key())
+}
+
+pub fn key_text(event: &KeyboardEvent) -> Option<SmolStr> {
+    let key = event.key();
+    let key = Key::from_attribute_value(&key);
+    match &key {
+        Key::Character(text) => Some(text.clone()),
+        Key::Named(NamedKey::Tab) => Some(SmolStr::new("\t")),
+        Key::Named(NamedKey::Enter) => Some(SmolStr::new("\r")),
+        _ => None,
+    }
+    .map(SmolStr::new)
+}
+
+pub fn key_location(event: &KeyboardEvent) -> KeyLocation {
+    match event.location() {
+        KeyboardEvent::DOM_KEY_LOCATION_LEFT => KeyLocation::Left,
+        KeyboardEvent::DOM_KEY_LOCATION_RIGHT => KeyLocation::Right,
+        KeyboardEvent::DOM_KEY_LOCATION_NUMPAD => KeyLocation::Numpad,
+        KeyboardEvent::DOM_KEY_LOCATION_STANDARD => KeyLocation::Standard,
+        location => {
+            tracing::warn!("Unexpected key location: {location}");
+            KeyLocation::Standard
+        },
+    }
+}
+
+pub fn keyboard_modifiers(event: &KeyboardEvent) -> ModifiersState {
+    let mut state = ModifiersState::empty();
+
+    if event.shift_key() {
+        state |= ModifiersState::SHIFT;
+    }
+    if event.ctrl_key() {
+        state |= ModifiersState::CONTROL;
+    }
+    if event.alt_key() {
+        state |= ModifiersState::ALT;
+    }
+    if event.meta_key() {
+        state |= ModifiersState::META;
+    }
+
+    state
+}
+
+pub fn mouse_modifiers(event: &MouseEvent) -> ModifiersState {
+    let mut state = ModifiersState::empty();
+
+    if event.shift_key() {
+        state |= ModifiersState::SHIFT;
+    }
+    if event.ctrl_key() {
+        state |= ModifiersState::CONTROL;
+    }
+    if event.alt_key() {
+        state |= ModifiersState::ALT;
+    }
+    if event.meta_key() {
+        state |= ModifiersState::META;
+    }
+
+    state
+}
+
+pub fn pointer_move_event(event: PointerEvent) -> impl Iterator<Item = PointerEvent> {
+    // make a single iterator depending on the availability of coalesced events
+    if has_coalesced_events_support(&event) {
+        None.into_iter().chain(
+            Some(event.get_coalesced_events().into_iter().map(PointerEvent::unchecked_from_js))
+                .into_iter()
+                .flatten(),
+        )
+    } else {
+        Some(event).into_iter().chain(None.into_iter().flatten())
+    }
+}
+
+// TODO: Remove when Safari supports `getCoalescedEvents`.
+// See <https://bugs.webkit.org/show_bug.cgi?id=210454>.
+pub fn has_coalesced_events_support(event: &PointerEvent) -> bool {
+    thread_local! {
+        static COALESCED_EVENTS_SUPPORT: OnceCell<bool> = const { OnceCell::new() };
+    }
+
+    COALESCED_EVENTS_SUPPORT.with(|support| {
+        *support.get_or_init(|| {
+            #[wasm_bindgen]
+            extern "C" {
+                type PointerCoalescedEventsSupport;
+
+                #[wasm_bindgen(method, getter, js_name = getCoalescedEvents)]
+                fn has_get_coalesced_events(this: &PointerCoalescedEventsSupport) -> JsValue;
+            }
+
+            let support: &PointerCoalescedEventsSupport = event.unchecked_ref();
+            !support.has_get_coalesced_events().is_undefined()
+        })
+    })
+}

winit-web/src/web_sys/event_handle.rs

@@ -0,0 +1,38 @@
+use wasm_bindgen::prelude::Closure;
+use wasm_bindgen::JsCast;
+use web_sys::EventTarget;
+
+pub struct EventListenerHandle<T: ?Sized> {
+    target: EventTarget,
+    event_type: &'static str,
+    listener: Closure<T>,
+}
+
+impl<T: ?Sized> EventListenerHandle<T> {
+    pub fn new<U>(target: U, event_type: &'static str, listener: Closure<T>) -> Self
+    where
+        U: Into<EventTarget>,
+    {
+        let target = target.into();
+        target
+            .add_event_listener_with_callback(event_type, listener.as_ref().unchecked_ref())
+            .expect("Failed to add event listener");
+        EventListenerHandle { target, event_type, listener }
+    }
+}
+
+impl<T: ?Sized> Drop for EventListenerHandle<T> {
+    fn drop(&mut self) {
+        self.target
+            .remove_event_listener_with_callback(
+                self.event_type,
+                self.listener.as_ref().unchecked_ref(),
+            )
+            .unwrap_or_else(|e| {
+                web_sys::console::error_2(
+                    &format!("Error removing event listener {}", self.event_type).into(),
+                    &e,
+                )
+            });
+    }
+}

winit-web/src/web_sys/fullscreen.rs

@@ -0,0 +1,157 @@
+use std::cell::OnceCell;
+
+use js_sys::{Object, Promise};
+use tracing::error;
+use wasm_bindgen::closure::Closure;
+use wasm_bindgen::prelude::wasm_bindgen;
+use wasm_bindgen::{JsCast, JsValue};
+use web_sys::{console, Document, Element, HtmlCanvasElement, Window};
+use winit_core::monitor::Fullscreen;
+
+use crate::main_thread::MainThreadMarker;
+use crate::monitor::{self, MonitorHandle, ScreenDetailed};
+
+pub(crate) fn request_fullscreen(
+    main_thread: MainThreadMarker,
+    window: &Window,
+    document: &Document,
+    canvas: &HtmlCanvasElement,
+    fullscreen: Fullscreen,
+) {
+    #[wasm_bindgen]
+    extern "C" {
+        #[wasm_bindgen(extends = HtmlCanvasElement)]
+        type RequestFullscreen;
+
+        #[wasm_bindgen(method, js_name = requestFullscreen)]
+        fn request_fullscreen(this: &RequestFullscreen) -> Promise;
+
+        #[wasm_bindgen(method, js_name = requestFullscreen)]
+        fn request_fullscreen_with_options(
+            this: &RequestFullscreen,
+            options: &FullscreenOptions,
+        ) -> Promise;
+
+        #[wasm_bindgen(method, js_name = webkitRequestFullscreen)]
+        fn webkit_request_fullscreen(this: &RequestFullscreen);
+
+        type FullscreenOptions;
+
+        #[wasm_bindgen(method, setter, js_name = screen)]
+        fn set_screen(this: &FullscreenOptions, screen: &ScreenDetailed);
+    }
+
+    thread_local! {
+        static REJECT_HANDLER: Closure<dyn FnMut(JsValue)> = Closure::new(|error| {
+            console::error_1(&error);
+            error!("Failed to transition to full screen mode")
+        });
+    }
+
+    if is_fullscreen(document, canvas) {
+        return;
+    }
+
+    let canvas: &RequestFullscreen = canvas.unchecked_ref();
+
+    match fullscreen {
+        Fullscreen::Exclusive(..) => error!("Exclusive full screen mode is not supported"),
+        Fullscreen::Borderless(Some(monitor)) => {
+            if !monitor::has_screen_details_support(window) {
+                error!(
+                    "Fullscreen mode selecting a specific screen is not supported by this browser"
+                );
+                return;
+            }
+
+            let monitor = monitor.cast_ref::<MonitorHandle>().unwrap();
+
+            if let Some(monitor) = monitor.detailed(main_thread) {
+                let options: FullscreenOptions = Object::new().unchecked_into();
+                options.set_screen(&monitor);
+                REJECT_HANDLER.with(|handler| {
+                    let _ = canvas.request_fullscreen_with_options(&options).catch(handler);
+                });
+            } else {
+                error!(
+                    "Selecting a specific screen for fullscreen mode requires a detailed screen. \
+                     See `MonitorHandleExtWeb::is_detailed()`."
+                )
+            }
+        },
+        Fullscreen::Borderless(None) => {
+            if has_fullscreen_api_support(canvas) {
+                REJECT_HANDLER.with(|handler| {
+                    let _ = canvas.request_fullscreen().catch(handler);
+                });
+            } else {
+                canvas.webkit_request_fullscreen();
+            }
+        },
+    }
+}
+
+pub fn is_fullscreen(document: &Document, canvas: &HtmlCanvasElement) -> bool {
+    #[wasm_bindgen]
+    extern "C" {
+        type FullscreenElement;
+
+        #[wasm_bindgen(method, getter, js_name = webkitFullscreenElement)]
+        fn webkit_fullscreen_element(this: &FullscreenElement) -> Option<Element>;
+    }
+
+    let element = if has_fullscreen_api_support(canvas) {
+        #[allow(clippy::disallowed_methods)]
+        document.fullscreen_element()
+    } else {
+        let document: &FullscreenElement = document.unchecked_ref();
+        document.webkit_fullscreen_element()
+    };
+
+    match element {
+        Some(element) => {
+            let canvas: &Element = canvas;
+            canvas == &element
+        },
+        None => false,
+    }
+}
+
+pub fn exit_fullscreen(document: &Document, canvas: &HtmlCanvasElement) {
+    #[wasm_bindgen]
+    extern "C" {
+        type ExitFullscreen;
+
+        #[wasm_bindgen(method, js_name = webkitExitFullscreen)]
+        fn webkit_exit_fullscreen(this: &ExitFullscreen);
+    }
+
+    if has_fullscreen_api_support(canvas) {
+        #[allow(clippy::disallowed_methods)]
+        document.exit_fullscreen()
+    } else {
+        let document: &ExitFullscreen = document.unchecked_ref();
+        document.webkit_exit_fullscreen()
+    }
+}
+
+fn has_fullscreen_api_support(canvas: &HtmlCanvasElement) -> bool {
+    thread_local! {
+        static FULLSCREEN_API_SUPPORT: OnceCell<bool> = const { OnceCell::new() };
+    }
+
+    FULLSCREEN_API_SUPPORT.with(|support| {
+        *support.get_or_init(|| {
+            #[wasm_bindgen]
+            extern "C" {
+                type CanvasFullScreenApiSupport;
+
+                #[wasm_bindgen(method, getter, js_name = requestFullscreen)]
+                fn has_request_fullscreen(this: &CanvasFullScreenApiSupport) -> JsValue;
+            }
+
+            let support: &CanvasFullScreenApiSupport = canvas.unchecked_ref();
+            !support.has_request_fullscreen().is_undefined()
+        })
+    })
+}

winit-web/src/web_sys/intersection_handle.rs

@@ -0,0 +1,33 @@
+use js_sys::Array;
+use wasm_bindgen::prelude::Closure;
+use wasm_bindgen::JsCast;
+use web_sys::{Element, IntersectionObserver, IntersectionObserverEntry};
+
+pub(super) struct IntersectionObserverHandle {
+    observer: IntersectionObserver,
+    _closure: Closure<dyn FnMut(Array)>,
+}
+
+impl IntersectionObserverHandle {
+    pub fn new<F>(element: &Element, mut callback: F) -> Self
+    where
+        F: 'static + FnMut(bool),
+    {
+        let closure = Closure::new(move |entries: Array| {
+            let entry: IntersectionObserverEntry = entries.get(0).unchecked_into();
+            callback(entry.is_intersecting());
+        });
+        let observer = IntersectionObserver::new(closure.as_ref().unchecked_ref())
+            // we don't provide any `options`
+            .expect("Invalid `options`");
+        observer.observe(element);
+
+        Self { observer, _closure: closure }
+    }
+}
+
+impl Drop for IntersectionObserverHandle {
+    fn drop(&mut self) {
+        self.observer.disconnect()
+    }
+}

winit-web/src/web_sys/media_query_handle.rs

@@ -0,0 +1,48 @@
+use wasm_bindgen::prelude::Closure;
+use wasm_bindgen::JsCast;
+use web_sys::MediaQueryList;
+
+pub(super) struct MediaQueryListHandle {
+    mql: MediaQueryList,
+    closure: Closure<dyn FnMut()>,
+}
+
+impl MediaQueryListHandle {
+    pub fn new<F>(window: &web_sys::Window, media_query: &str, mut listener: F) -> Self
+    where
+        F: 'static + FnMut(&MediaQueryList),
+    {
+        let mql = window
+            .match_media(media_query)
+            .expect("Failed to parse media query")
+            .expect("Found empty media query");
+
+        let closure = Closure::new({
+            let mql = mql.clone();
+            move || listener(&mql)
+        });
+        // TODO: Replace obsolete `addListener()` with `addEventListener()` and use
+        // `MediaQueryListEvent` instead of cloning the `MediaQueryList`.
+        // Requires Safari v14.
+        mql.add_listener_with_opt_callback(Some(closure.as_ref().unchecked_ref()))
+            .expect("Invalid listener");
+
+        Self { mql, closure }
+    }
+
+    pub fn mql(&self) -> &MediaQueryList {
+        &self.mql
+    }
+}
+
+impl Drop for MediaQueryListHandle {
+    fn drop(&mut self) {
+        remove_listener(&self.mql, &self.closure);
+    }
+}
+
+fn remove_listener(mql: &MediaQueryList, listener: &Closure<dyn FnMut()>) {
+    mql.remove_listener_with_opt_callback(Some(listener.as_ref().unchecked_ref())).unwrap_or_else(
+        |e| web_sys::console::error_2(&"Error removing media query listener".into(), &e),
+    );
+}

winit-web/src/web_sys/mod.rs

@@ -0,0 +1,262 @@
+mod animation_frame;
+mod canvas;
+pub mod event;
+mod event_handle;
+mod fullscreen;
+mod intersection_handle;
+mod media_query_handle;
+mod pointer;
+mod resize_scaling;
+mod safe_area;
+mod schedule;
+
+use std::cell::OnceCell;
+
+use dpi::{LogicalPosition, LogicalSize};
+use js_sys::Array;
+use wasm_bindgen::closure::Closure;
+use wasm_bindgen::prelude::wasm_bindgen;
+use wasm_bindgen::JsCast;
+use web_sys::{Document, HtmlCanvasElement, Navigator, PageTransitionEvent, VisibilityState};
+
+pub use self::canvas::{Canvas, Style};
+pub use self::event_handle::EventListenerHandle;
+pub use self::resize_scaling::ResizeScaleHandle;
+pub use self::safe_area::SafeAreaHandle;
+pub use self::schedule::Schedule;
+
+pub fn throw(msg: &str) {
+    wasm_bindgen::throw_str(msg);
+}
+
+pub struct PageTransitionEventHandle {
+    _show_listener: event_handle::EventListenerHandle<dyn FnMut(PageTransitionEvent)>,
+    _hide_listener: event_handle::EventListenerHandle<dyn FnMut(PageTransitionEvent)>,
+}
+
+pub fn on_page_transition(
+    window: web_sys::Window,
+    show_handler: impl FnMut(PageTransitionEvent) + 'static,
+    hide_handler: impl FnMut(PageTransitionEvent) + 'static,
+) -> PageTransitionEventHandle {
+    let show_closure = Closure::new(show_handler);
+    let hide_closure = Closure::new(hide_handler);
+
+    let show_listener =
+        event_handle::EventListenerHandle::new(window.clone(), "pageshow", show_closure);
+    let hide_listener = event_handle::EventListenerHandle::new(window, "pagehide", hide_closure);
+    PageTransitionEventHandle { _show_listener: show_listener, _hide_listener: hide_listener }
+}
+
+pub fn scale_factor(window: &web_sys::Window) -> f64 {
+    window.device_pixel_ratio()
+}
+
+fn fix_canvas_size(style: &Style, mut size: LogicalSize<f64>) -> LogicalSize<f64> {
+    if style.get("box-sizing") == "border-box" {
+        size.width += style_size_property(style, "border-left-width")
+            + style_size_property(style, "border-right-width")
+            + style_size_property(style, "padding-left")
+            + style_size_property(style, "padding-right");
+        size.height += style_size_property(style, "border-top-width")
+            + style_size_property(style, "border-bottom-width")
+            + style_size_property(style, "padding-top")
+            + style_size_property(style, "padding-bottom");
+    }
+
+    size
+}
+
+pub fn set_canvas_size(
+    document: &Document,
+    raw: &HtmlCanvasElement,
+    style: &Style,
+    new_size: LogicalSize<f64>,
+) {
+    if !document.contains(Some(raw)) || style.get("display") == "none" {
+        return;
+    }
+
+    let new_size = fix_canvas_size(style, new_size);
+
+    style.set("width", &format!("{}px", new_size.width));
+    style.set("height", &format!("{}px", new_size.height));
+}
+
+pub fn set_canvas_min_size(
+    document: &Document,
+    raw: &HtmlCanvasElement,
+    style: &Style,
+    dimensions: Option<LogicalSize<f64>>,
+) {
+    if let Some(dimensions) = dimensions {
+        if !document.contains(Some(raw)) || style.get("display") == "none" {
+            return;
+        }
+
+        let new_size = fix_canvas_size(style, dimensions);
+
+        style.set("min-width", &format!("{}px", new_size.width));
+        style.set("min-height", &format!("{}px", new_size.height));
+    } else {
+        style.remove("min-width");
+        style.remove("min-height");
+    }
+}
+
+pub fn set_canvas_max_size(
+    document: &Document,
+    raw: &HtmlCanvasElement,
+    style: &Style,
+    dimensions: Option<LogicalSize<f64>>,
+) {
+    if let Some(dimensions) = dimensions {
+        if !document.contains(Some(raw)) || style.get("display") == "none" {
+            return;
+        }
+
+        let new_size = fix_canvas_size(style, dimensions);
+
+        style.set("max-width", &format!("{}px", new_size.width));
+        style.set("max-height", &format!("{}px", new_size.height));
+    } else {
+        style.remove("max-width");
+        style.remove("max-height");
+    }
+}
+
+pub fn set_canvas_position(
+    document: &Document,
+    raw: &HtmlCanvasElement,
+    style: &Style,
+    mut position: LogicalPosition<f64>,
+) {
+    if document.contains(Some(raw)) && style.get("display") != "none" {
+        position.x -= style_size_property(style, "margin-left")
+            + style_size_property(style, "border-left-width")
+            + style_size_property(style, "padding-left");
+        position.y -= style_size_property(style, "margin-top")
+            + style_size_property(style, "border-top-width")
+            + style_size_property(style, "padding-top");
+    }
+
+    style.set("position", "fixed");
+    style.set("left", &format!("{}px", position.x));
+    style.set("top", &format!("{}px", position.y));
+}
+
+/// This function will panic if the element is not inserted in the DOM
+/// or is not a CSS property that represents a size in pixel.
+pub fn style_size_property(style: &Style, property: &str) -> f64 {
+    let prop = style.get(property);
+    prop.strip_suffix("px")
+        .expect("Element was not inserted into the DOM or is not a size in pixel")
+        .parse()
+        .expect("CSS property is not a size in pixel")
+}
+
+pub fn is_dark_mode(window: &web_sys::Window) -> Option<bool> {
+    window.match_media("(prefers-color-scheme: dark)").ok().flatten().map(|media| media.matches())
+}
+
+pub fn is_visible(document: &Document) -> bool {
+    document.visibility_state() == VisibilityState::Visible
+}
+
+pub type RawCanvasType = HtmlCanvasElement;
+
+#[derive(Clone, Copy)]
+pub enum Engine {
+    Chromium,
+    Gecko,
+    WebKit,
+}
+
+struct UserAgentData {
+    engine: Option<Engine>,
+    chrome_linux: bool,
+}
+
+thread_local! {
+    static USER_AGENT_DATA: OnceCell<UserAgentData> = const { OnceCell::new() };
+}
+
+pub fn chrome_linux(navigator: &Navigator) -> bool {
+    USER_AGENT_DATA.with(|data| data.get_or_init(|| user_agent(navigator)).chrome_linux)
+}
+
+pub fn engine(navigator: &Navigator) -> Option<Engine> {
+    USER_AGENT_DATA.with(|data| data.get_or_init(|| user_agent(navigator)).engine)
+}
+
+fn user_agent(navigator: &Navigator) -> UserAgentData {
+    #[wasm_bindgen]
+    extern "C" {
+        #[wasm_bindgen(extends = Navigator)]
+        type NavigatorExt;
+
+        #[wasm_bindgen(method, getter, js_name = userAgentData)]
+        fn user_agent_data(this: &NavigatorExt) -> Option<NavigatorUaData>;
+
+        type NavigatorUaData;
+
+        #[wasm_bindgen(method, getter)]
+        fn brands(this: &NavigatorUaData) -> Array;
+
+        #[wasm_bindgen(method, getter)]
+        fn platform(this: &NavigatorUaData) -> String;
+
+        type NavigatorUaBrandVersion;
+
+        #[wasm_bindgen(method, getter)]
+        fn brand(this: &NavigatorUaBrandVersion) -> String;
+    }
+
+    let navigator: &NavigatorExt = navigator.unchecked_ref();
+
+    if let Some(data) = navigator.user_agent_data() {
+        let engine = 'engine: {
+            for brand in data
+                .brands()
+                .iter()
+                .map(NavigatorUaBrandVersion::unchecked_from_js)
+                .map(|brand| brand.brand())
+            {
+                match brand.as_str() {
+                    "Chromium" => break 'engine Some(Engine::Chromium),
+                    // TODO: verify when Firefox actually implements it.
+                    "Gecko" => break 'engine Some(Engine::Gecko),
+                    // TODO: verify when Safari actually implements it.
+                    "WebKit" => break 'engine Some(Engine::WebKit),
+                    _ => (),
+                }
+            }
+
+            None
+        };
+
+        let chrome_linux = matches!(engine, Some(Engine::Chromium))
+            .then(|| data.platform() == "Linux")
+            .unwrap_or(false);
+
+        UserAgentData { engine, chrome_linux }
+    } else {
+        let engine = 'engine: {
+            let Ok(data) = navigator.user_agent() else {
+                break 'engine None;
+            };
+
+            if data.contains("Chrome/") {
+                Some(Engine::Chromium)
+            } else if data.contains("Gecko/") {
+                Some(Engine::Gecko)
+            } else if data.contains("AppleWebKit/") {
+                Some(Engine::WebKit)
+            } else {
+                None
+            }
+        };
+
+        UserAgentData { engine, chrome_linux: false }
+    }
+}

winit-web/src/web_sys/pointer.rs

@@ -0,0 +1,268 @@
+use std::cell::Cell;
+use std::rc::Rc;
+
+use dpi::PhysicalPosition;
+use web_sys::PointerEvent;
+use winit_core::event::{ButtonSource, DeviceId, ElementState, Force, PointerKind, PointerSource};
+use winit_core::keyboard::ModifiersState;
+
+use super::canvas::Common;
+use super::event;
+use super::event_handle::EventListenerHandle;
+use crate::event::mkdid;
+use crate::web_sys::event::mouse_button_to_id;
+
+#[allow(dead_code)]
+pub(super) struct PointerHandler {
+    on_cursor_leave: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+    on_cursor_enter: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+    on_cursor_move: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+    on_pointer_press: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+    on_pointer_release: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+    on_touch_cancel: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+}
+
+impl PointerHandler {
+    pub fn new() -> Self {
+        Self {
+            on_cursor_leave: None,
+            on_cursor_enter: None,
+            on_cursor_move: None,
+            on_pointer_press: None,
+            on_pointer_release: None,
+            on_touch_cancel: None,
+        }
+    }
+
+    pub fn on_pointer_leave<F>(&mut self, canvas_common: &Common, mut handler: F)
+    where
+        F: 'static
+            + FnMut(ModifiersState, Option<DeviceId>, bool, PhysicalPosition<f64>, PointerKind),
+    {
+        let window = canvas_common.window.clone();
+        self.on_cursor_leave =
+            Some(canvas_common.add_event("pointerout", move |event: PointerEvent| {
+                let modifiers = event::mouse_modifiers(&event);
+                let pointer_id = event.pointer_id();
+                let device_id = mkdid(pointer_id);
+                let position =
+                    event::mouse_position(&event).to_physical(super::scale_factor(&window));
+                let kind = event::pointer_type(&event, pointer_id);
+                handler(modifiers, device_id, event.is_primary(), position, kind);
+            }));
+    }
+
+    pub fn on_pointer_enter<F>(&mut self, canvas_common: &Common, mut handler: F)
+    where
+        F: 'static
+            + FnMut(ModifiersState, Option<DeviceId>, bool, PhysicalPosition<f64>, PointerKind),
+    {
+        let window = canvas_common.window.clone();
+        self.on_cursor_enter =
+            Some(canvas_common.add_event("pointerover", move |event: PointerEvent| {
+                let modifiers = event::mouse_modifiers(&event);
+                let pointer_id = event.pointer_id();
+                let device_id = mkdid(pointer_id);
+                let position =
+                    event::mouse_position(&event).to_physical(super::scale_factor(&window));
+                let kind = event::pointer_type(&event, pointer_id);
+                handler(modifiers, device_id, event.is_primary(), position, kind);
+            }));
+    }
+
+    pub fn on_pointer_release<C>(&mut self, canvas_common: &Common, mut handler: C)
+    where
+        C: 'static
+            + FnMut(ModifiersState, Option<DeviceId>, bool, PhysicalPosition<f64>, ButtonSource),
+    {
+        let window = canvas_common.window.clone();
+        self.on_pointer_release =
+            Some(canvas_common.add_event("pointerup", move |event: PointerEvent| {
+                let modifiers = event::mouse_modifiers(&event);
+                let pointer_id = event.pointer_id();
+                let kind = event::pointer_type(&event, pointer_id);
+
+                let button = event::mouse_button(&event).expect("no mouse button pressed");
+
+                let source = match kind {
+                    PointerKind::Mouse => ButtonSource::Mouse(button),
+                    PointerKind::Touch(finger_id) => ButtonSource::Touch {
+                        finger_id,
+                        force: Some(Force::Normalized(event.pressure().into())),
+                    },
+                    PointerKind::Unknown => ButtonSource::Unknown(mouse_button_to_id(button)),
+                };
+
+                handler(
+                    modifiers,
+                    mkdid(pointer_id),
+                    event.is_primary(),
+                    event::mouse_position(&event).to_physical(super::scale_factor(&window)),
+                    source,
+                )
+            }));
+    }
+
+    pub fn on_pointer_press<C>(
+        &mut self,
+        canvas_common: &Common,
+        mut handler: C,
+        prevent_default: Rc<Cell<bool>>,
+    ) where
+        C: 'static
+            + FnMut(ModifiersState, Option<DeviceId>, bool, PhysicalPosition<f64>, ButtonSource),
+    {
+        let window = canvas_common.window.clone();
+        let canvas = canvas_common.raw().clone();
+        self.on_pointer_press =
+            Some(canvas_common.add_event("pointerdown", move |event: PointerEvent| {
+                if prevent_default.get() {
+                    // prevent text selection
+                    event.prevent_default();
+                    // but still focus element
+                    let _ = canvas.focus();
+                }
+
+                let modifiers = event::mouse_modifiers(&event);
+                let pointer_id = event.pointer_id();
+                let kind = event::pointer_type(&event, pointer_id);
+                let button = event::mouse_button(&event).expect("no mouse button pressed");
+
+                let source = match kind {
+                    PointerKind::Mouse => {
+                        // Error is swallowed here since the error would occur every time the
+                        // mouse is clicked when the cursor is
+                        // grabbed, and there is probably not a
+                        // situation where this could fail, that we
+                        // care if it fails.
+                        let _e = canvas.set_pointer_capture(pointer_id);
+
+                        ButtonSource::Mouse(button)
+                    },
+                    PointerKind::Touch(finger_id) => ButtonSource::Touch {
+                        finger_id,
+                        force: Some(Force::Normalized(event.pressure().into())),
+                    },
+                    PointerKind::Unknown => ButtonSource::Unknown(mouse_button_to_id(button)),
+                };
+
+                handler(
+                    modifiers,
+                    mkdid(pointer_id),
+                    event.is_primary(),
+                    event::mouse_position(&event).to_physical(super::scale_factor(&window)),
+                    source,
+                )
+            }));
+    }
+
+    pub fn on_pointer_move<C, B>(
+        &mut self,
+        canvas_common: &Common,
+        mut cursor_handler: C,
+        mut button_handler: B,
+        prevent_default: Rc<Cell<bool>>,
+    ) where
+        C: 'static
+            + FnMut(
+                Option<DeviceId>,
+                &mut dyn Iterator<
+                    Item = (ModifiersState, bool, PhysicalPosition<f64>, PointerSource),
+                >,
+            ),
+        B: 'static
+            + FnMut(
+                ModifiersState,
+                Option<DeviceId>,
+                bool,
+                PhysicalPosition<f64>,
+                ElementState,
+                ButtonSource,
+            ),
+    {
+        let window = canvas_common.window.clone();
+        let canvas = canvas_common.raw().clone();
+        self.on_cursor_move =
+            Some(canvas_common.add_event("pointermove", move |event: PointerEvent| {
+                let pointer_id = event.pointer_id();
+                let device_id = mkdid(pointer_id);
+                let kind = event::pointer_type(&event, pointer_id);
+                let primary = event.is_primary();
+
+                // chorded button event
+                if let Some(button) = event::mouse_button(&event) {
+                    if prevent_default.get() {
+                        // prevent text selection
+                        event.prevent_default();
+                        // but still focus element
+                        let _ = canvas.focus();
+                    }
+
+                    let state = if event::mouse_buttons(&event).contains(button.into()) {
+                        ElementState::Pressed
+                    } else {
+                        ElementState::Released
+                    };
+
+                    let button = match kind {
+                        PointerKind::Mouse => ButtonSource::Mouse(button),
+                        PointerKind::Touch(finger_id) => {
+                            let button_id = mouse_button_to_id(button);
+
+                            if button_id != 1 {
+                                tracing::error!("unexpected touch button id: {button_id}");
+                            }
+
+                            ButtonSource::Touch {
+                                finger_id,
+                                force: Some(Force::Normalized(event.pressure().into())),
+                            }
+                        },
+                        PointerKind::Unknown => todo!(),
+                    };
+
+                    button_handler(
+                        event::mouse_modifiers(&event),
+                        device_id,
+                        primary,
+                        event::mouse_position(&event).to_physical(super::scale_factor(&window)),
+                        state,
+                        button,
+                    );
+
+                    return;
+                }
+
+                // pointer move event
+                let scale = super::scale_factor(&window);
+
+                cursor_handler(
+                    device_id,
+                    &mut event::pointer_move_event(event).map(|event| {
+                        (
+                            event::mouse_modifiers(&event),
+                            event.is_primary(),
+                            event::mouse_position(&event).to_physical(scale),
+                            match kind {
+                                PointerKind::Mouse => PointerSource::Mouse,
+                                PointerKind::Touch(finger_id) => PointerSource::Touch {
+                                    finger_id,
+                                    force: Some(Force::Normalized(event.pressure().into())),
+                                },
+                                PointerKind::Unknown => PointerSource::Unknown,
+                            },
+                        )
+                    }),
+                );
+            }));
+    }
+
+    pub fn remove_listeners(&mut self) {
+        self.on_cursor_leave = None;
+        self.on_cursor_enter = None;
+        self.on_cursor_move = None;
+        self.on_pointer_press = None;
+        self.on_pointer_release = None;
+        self.on_touch_cancel = None;
+    }
+}

winit-web/src/web_sys/resize_scaling.rs

@@ -0,0 +1,301 @@
+use std::cell::{Cell, RefCell};
+use std::rc::Rc;
+
+use dpi::{LogicalSize, PhysicalSize};
+use js_sys::{Array, Object};
+use tracing::warn;
+use wasm_bindgen::prelude::{wasm_bindgen, Closure};
+use wasm_bindgen::{JsCast, JsValue};
+use web_sys::{
+    Document, HtmlCanvasElement, MediaQueryList, ResizeObserver, ResizeObserverBoxOptions,
+    ResizeObserverEntry, ResizeObserverOptions, ResizeObserverSize, Window,
+};
+
+use super::super::backend;
+use super::canvas::Style;
+use super::media_query_handle::MediaQueryListHandle;
+
+pub struct ResizeScaleHandle(Rc<ResizeScaleInternal>);
+
+impl ResizeScaleHandle {
+    pub(crate) fn new<S, R>(
+        window: Window,
+        document: Document,
+        canvas: HtmlCanvasElement,
+        style: Style,
+        scale_handler: S,
+        resize_handler: R,
+    ) -> Self
+    where
+        S: 'static + Fn(PhysicalSize<u32>, f64),
+        R: 'static + Fn(PhysicalSize<u32>),
+    {
+        Self(ResizeScaleInternal::new(
+            window,
+            document,
+            canvas,
+            style,
+            scale_handler,
+            resize_handler,
+        ))
+    }
+
+    pub(crate) fn notify_resize(&self) {
+        self.0.notify()
+    }
+}
+
+/// This is a helper type to help manage the `MediaQueryList` used for detecting
+/// changes of the `devicePixelRatio`.
+struct ResizeScaleInternal {
+    window: Window,
+    document: Document,
+    canvas: HtmlCanvasElement,
+    style: Style,
+    mql: RefCell<MediaQueryListHandle>,
+    observer: ResizeObserver,
+    _observer_closure: Closure<dyn FnMut(Array, ResizeObserver)>,
+    scale_handler: Box<dyn Fn(PhysicalSize<u32>, f64)>,
+    resize_handler: Box<dyn Fn(PhysicalSize<u32>)>,
+    notify_scale: Cell<bool>,
+}
+
+impl ResizeScaleInternal {
+    fn new<S, R>(
+        window: Window,
+        document: Document,
+        canvas: HtmlCanvasElement,
+        style: Style,
+        scale_handler: S,
+        resize_handler: R,
+    ) -> Rc<Self>
+    where
+        S: 'static + Fn(PhysicalSize<u32>, f64),
+        R: 'static + Fn(PhysicalSize<u32>),
+    {
+        Rc::<ResizeScaleInternal>::new_cyclic(|weak_self| {
+            let mql = Self::create_mql(&window, {
+                let weak_self = weak_self.clone();
+                move |mql| {
+                    if let Some(rc_self) = weak_self.upgrade() {
+                        Self::handle_scale(rc_self, mql);
+                    }
+                }
+            });
+
+            let weak_self = weak_self.clone();
+            let observer_closure = Closure::new(move |entries: Array, _| {
+                if let Some(this) = weak_self.upgrade() {
+                    let size = this.process_entry(entries);
+
+                    if this.notify_scale.replace(false) {
+                        let scale = backend::scale_factor(&this.window);
+                        (this.scale_handler)(size, scale)
+                    } else {
+                        (this.resize_handler)(size)
+                    }
+                }
+            });
+            let observer = Self::create_observer(&canvas, observer_closure.as_ref());
+
+            Self {
+                window,
+                document,
+                canvas,
+                style,
+                mql: RefCell::new(mql),
+                observer,
+                _observer_closure: observer_closure,
+                scale_handler: Box::new(scale_handler),
+                resize_handler: Box::new(resize_handler),
+                notify_scale: Cell::new(false),
+            }
+        })
+    }
+
+    fn create_mql<F>(window: &Window, closure: F) -> MediaQueryListHandle
+    where
+        F: 'static + FnMut(&MediaQueryList),
+    {
+        let current_scale = super::scale_factor(window);
+        // TODO: Remove `-webkit-device-pixel-ratio`. Requires Safari v16.
+        let media_query = format!(
+            "(resolution: {current_scale}dppx),
+             (-webkit-device-pixel-ratio: {current_scale})",
+        );
+        let mql = MediaQueryListHandle::new(window, &media_query, closure);
+        debug_assert!(
+            mql.mql().matches(),
+            "created media query doesn't match, {current_scale} != {}",
+            super::scale_factor(window)
+        );
+        mql
+    }
+
+    fn create_observer(canvas: &HtmlCanvasElement, closure: &JsValue) -> ResizeObserver {
+        let observer = ResizeObserver::new(closure.as_ref().unchecked_ref())
+            .expect("Failed to create `ResizeObserver`");
+
+        // Safari doesn't support `devicePixelContentBoxSize`
+        if has_device_pixel_support() {
+            let options = ResizeObserverOptions::new();
+            options.set_box(ResizeObserverBoxOptions::DevicePixelContentBox);
+            observer.observe_with_options(canvas, &options);
+        } else {
+            observer.observe(canvas);
+        }
+
+        observer
+    }
+
+    fn notify(&self) {
+        if !self.document.contains(Some(&self.canvas)) || self.style.get("display") == "none" {
+            let size = PhysicalSize::new(0, 0);
+
+            if self.notify_scale.replace(false) {
+                let scale = backend::scale_factor(&self.window);
+                (self.scale_handler)(size, scale)
+            } else {
+                (self.resize_handler)(size)
+            }
+
+            return;
+        }
+
+        // Safari doesn't support `devicePixelContentBoxSize`
+        if has_device_pixel_support() {
+            self.observer.unobserve(&self.canvas);
+            self.observer.observe(&self.canvas);
+
+            return;
+        }
+
+        let mut size = LogicalSize::new(
+            backend::style_size_property(&self.style, "width"),
+            backend::style_size_property(&self.style, "height"),
+        );
+
+        if self.style.get("box-sizing") == "border-box" {
+            size.width -= backend::style_size_property(&self.style, "border-left-width")
+                + backend::style_size_property(&self.style, "border-right-width")
+                + backend::style_size_property(&self.style, "padding-left")
+                + backend::style_size_property(&self.style, "padding-right");
+            size.height -= backend::style_size_property(&self.style, "border-top-width")
+                + backend::style_size_property(&self.style, "border-bottom-width")
+                + backend::style_size_property(&self.style, "padding-top")
+                + backend::style_size_property(&self.style, "padding-bottom");
+        }
+
+        let size = size.to_physical(backend::scale_factor(&self.window));
+
+        if self.notify_scale.replace(false) {
+            let scale = backend::scale_factor(&self.window);
+            (self.scale_handler)(size, scale)
+        } else {
+            (self.resize_handler)(size)
+        }
+    }
+
+    fn handle_scale(self: Rc<Self>, mql: &MediaQueryList) {
+        let weak_self = Rc::downgrade(&self);
+        let scale = super::scale_factor(&self.window);
+
+        // TODO: confirm/reproduce this problem, see:
+        // <https://github.com/rust-windowing/winit/issues/2597>.
+        // This should never happen, but if it does then apparently the scale factor didn't change.
+        if mql.matches() {
+            warn!(
+                "media query tracking scale factor was triggered without a change:\nMedia Query: \
+                 {}\nCurrent Scale: {scale}",
+                mql.media(),
+            );
+            return;
+        }
+
+        let new_mql = Self::create_mql(&self.window, move |mql| {
+            if let Some(rc_self) = weak_self.upgrade() {
+                Self::handle_scale(rc_self, mql);
+            }
+        });
+        self.mql.replace(new_mql);
+
+        self.notify_scale.set(true);
+        self.notify();
+    }
+
+    fn process_entry(&self, entries: Array) -> PhysicalSize<u32> {
+        let entry: ResizeObserverEntry = entries.get(0).unchecked_into();
+
+        // Safari doesn't support `devicePixelContentBoxSize`
+        if !has_device_pixel_support() {
+            let rect = entry.content_rect();
+
+            return LogicalSize::new(rect.width(), rect.height())
+                .to_physical(backend::scale_factor(&self.window));
+        }
+
+        let entry: ResizeObserverSize =
+            entry.device_pixel_content_box_size().get(0).unchecked_into();
+
+        let writing_mode = self.style.get("writing-mode");
+
+        // means the canvas is not inserted into the DOM
+        if writing_mode.is_empty() {
+            debug_assert_eq!(entry.inline_size(), 0.);
+            debug_assert_eq!(entry.block_size(), 0.);
+
+            return PhysicalSize::new(0, 0);
+        }
+
+        let horizontal = match writing_mode.as_str() {
+            _ if writing_mode.starts_with("horizontal") => true,
+            _ if writing_mode.starts_with("vertical") | writing_mode.starts_with("sideways") => {
+                false
+            },
+            // deprecated values
+            "lr" | "lr-tb" | "rl" => true,
+            "tb" | "tb-lr" | "tb-rl" => false,
+            _ => {
+                warn!("unrecognized `writing-mode`, assuming horizontal");
+                true
+            },
+        };
+
+        if horizontal {
+            PhysicalSize::new(entry.inline_size() as u32, entry.block_size() as u32)
+        } else {
+            PhysicalSize::new(entry.block_size() as u32, entry.inline_size() as u32)
+        }
+    }
+}
+
+impl Drop for ResizeScaleInternal {
+    fn drop(&mut self) {
+        self.observer.disconnect();
+    }
+}
+
+// TODO: Remove when Safari supports `devicePixelContentBoxSize`.
+// See <https://bugs.webkit.org/show_bug.cgi?id=219005>.
+pub fn has_device_pixel_support() -> bool {
+    thread_local! {
+        static DEVICE_PIXEL_SUPPORT: bool = {
+            #[wasm_bindgen]
+            extern "C" {
+                type ResizeObserverEntryExt;
+
+                #[wasm_bindgen(js_class = ResizeObserverEntry, static_method_of = ResizeObserverEntryExt, getter)]
+                fn prototype() -> Object;
+            }
+
+            let prototype = ResizeObserverEntryExt::prototype();
+            let descriptor = Object::get_own_property_descriptor(
+                &prototype,
+                &JsValue::from_str("devicePixelContentBoxSize"),
+            );
+            !descriptor.is_undefined()
+        };
+    }
+
+    DEVICE_PIXEL_SUPPORT.with(|support| *support)
+}

winit-web/src/web_sys/safe_area.rs

@@ -0,0 +1,56 @@
+use dpi::{LogicalPosition, LogicalSize};
+use wasm_bindgen::JsCast;
+use web_sys::{Document, HtmlHtmlElement, Window};
+
+use super::Style;
+
+pub struct SafeAreaHandle {
+    style: Style,
+}
+
+impl SafeAreaHandle {
+    pub fn new(window: &Window, document: &Document) -> Self {
+        let document: HtmlHtmlElement = document.document_element().unwrap().unchecked_into();
+        #[allow(clippy::disallowed_methods)]
+        let write = document.style();
+        write
+            .set_property(
+                "--__winit_safe_area",
+                "env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) \
+                 env(safe-area-inset-left)",
+            )
+            .expect("unexpected read-only declaration block");
+        #[allow(clippy::disallowed_methods)]
+        let read = window
+            .get_computed_style(&document)
+            .expect("failed to obtain computed style")
+            // this can't fail: we aren't using a pseudo-element
+            .expect("invalid pseudo-element");
+
+        SafeAreaHandle { style: Style { read, write } }
+    }
+
+    pub fn get(&self) -> (LogicalPosition<f64>, LogicalSize<f64>) {
+        let value = self.style.get("--__winit_safe_area");
+
+        let mut values = value
+            .split(' ')
+            .map(|value| value.strip_suffix("px").expect("unexpected unit other then `px` found"));
+        let top: f64 = values.next().unwrap().parse().unwrap();
+        let right: f64 = values.next().unwrap().parse().unwrap();
+        let bottom: f64 = values.next().unwrap().parse().unwrap();
+        let left: f64 = values.next().unwrap().parse().unwrap();
+        assert_eq!(values.next(), None, "unexpected fifth value");
+
+        let width = super::style_size_property(&self.style, "width") - left - right;
+        let height = super::style_size_property(&self.style, "height") - top - bottom;
+
+        (LogicalPosition::new(left, top), LogicalSize::new(width, height))
+    }
+}
+
+impl Drop for SafeAreaHandle {
+    fn drop(&mut self) {
+        self.style.remove("--__winit_safe_area");
+    }
+}

winit-web/src/web_sys/schedule.rs

@@ -0,0 +1,319 @@
+use std::cell::OnceCell;
+use std::time::Duration;
+
+use js_sys::{Array, Function, Object, Promise};
+use wasm_bindgen::closure::Closure;
+use wasm_bindgen::prelude::wasm_bindgen;
+use wasm_bindgen::{JsCast, JsValue};
+use web_sys::{
+    AbortController, AbortSignal, Blob, BlobPropertyBag, MessageChannel, MessagePort, Url, Worker,
+};
+
+use crate::{PollStrategy, WaitUntilStrategy};
+
+#[derive(Debug)]
+pub struct Schedule {
+    _closure: Closure<dyn FnMut()>,
+    inner: Inner,
+}
+
+#[derive(Debug)]
+enum Inner {
+    Scheduler {
+        controller: AbortController,
+    },
+    IdleCallback {
+        window: web_sys::Window,
+        handle: u32,
+    },
+    Timeout {
+        window: web_sys::Window,
+        handle: i32,
+        port: MessagePort,
+        _timeout_closure: Closure<dyn FnMut()>,
+    },
+    Worker(MessagePort),
+}
+
+impl Schedule {
+    pub fn new<F>(strategy: PollStrategy, window: &web_sys::Window, f: F) -> Schedule
+    where
+        F: 'static + FnMut(),
+    {
+        if strategy == PollStrategy::Scheduler && has_scheduler_support(window) {
+            Self::new_scheduler(window, f, None)
+        } else if strategy == PollStrategy::IdleCallback && has_idle_callback_support(window) {
+            Self::new_idle_callback(window.clone(), f)
+        } else {
+            Self::new_timeout(window.clone(), f, None)
+        }
+    }
+
+    pub fn new_with_duration<F>(
+        strategy: WaitUntilStrategy,
+        window: &web_sys::Window,
+        f: F,
+        duration: Duration,
+    ) -> Schedule
+    where
+        F: 'static + FnMut(),
+    {
+        match strategy {
+            WaitUntilStrategy::Scheduler => {
+                if has_scheduler_support(window) {
+                    Self::new_scheduler(window, f, Some(duration))
+                } else {
+                    Self::new_timeout(window.clone(), f, Some(duration))
+                }
+            },
+            WaitUntilStrategy::Worker => Self::new_worker(f, duration),
+        }
+    }
+
+    fn new_scheduler<F>(window: &web_sys::Window, f: F, duration: Option<Duration>) -> Schedule
+    where
+        F: 'static + FnMut(),
+    {
+        let window: &WindowSupportExt = window.unchecked_ref();
+        let scheduler = window.scheduler();
+
+        let closure = Closure::new(f);
+        let options: SchedulerPostTaskOptions = Object::new().unchecked_into();
+        let controller = AbortController::new().expect("Failed to create `AbortController`");
+        options.set_signal(&controller.signal());
+
+        if let Some(duration) = duration {
+            // `Duration::as_millis()` always rounds down (because of truncation), we want to round
+            // up instead. This makes sure that the we never wake up **before** the given time.
+            let duration = duration
+                .as_secs()
+                .checked_mul(1000)
+                .and_then(|secs| secs.checked_add(duration.subsec_micros().div_ceil(1000).into()))
+                .unwrap_or(u64::MAX);
+
+            options.set_delay(duration as f64);
+        }
+
+        thread_local! {
+            static REJECT_HANDLER: Closure<dyn FnMut(JsValue)> = Closure::new(|_| ());
+        }
+        REJECT_HANDLER.with(|handler| {
+            let _ = scheduler
+                .post_task_with_options(closure.as_ref().unchecked_ref(), &options)
+                .catch(handler);
+        });
+
+        Schedule { _closure: closure, inner: Inner::Scheduler { controller } }
+    }
+
+    fn new_idle_callback<F>(window: web_sys::Window, f: F) -> Schedule
+    where
+        F: 'static + FnMut(),
+    {
+        let closure = Closure::new(f);
+        let handle = window
+            .request_idle_callback(closure.as_ref().unchecked_ref())
+            .expect("Failed to request idle callback");
+
+        Schedule { _closure: closure, inner: Inner::IdleCallback { window, handle } }
+    }
+
+    fn new_timeout<F>(window: web_sys::Window, f: F, duration: Option<Duration>) -> Schedule
+    where
+        F: 'static + FnMut(),
+    {
+        let channel = MessageChannel::new().unwrap();
+        let closure = Closure::new(f);
+        let port_1 = channel.port1();
+        port_1.set_onmessage(Some(closure.as_ref().unchecked_ref()));
+        port_1.start();
+
+        let port_2 = channel.port2();
+        let timeout_closure = Closure::new(move || {
+            port_2.post_message(&JsValue::UNDEFINED).expect("Failed to send message")
+        });
+        let handle = if let Some(duration) = duration {
+            // `Duration::as_millis()` always rounds down (because of truncation), we want to round
+            // up instead. This makes sure that the we never wake up **before** the given time.
+            let duration = duration
+                .as_secs()
+                .try_into()
+                .ok()
+                .and_then(|secs: i32| secs.checked_mul(1000))
+                .and_then(|secs: i32| {
+                    let millis: i32 = duration
+                        .subsec_micros()
+                        .div_ceil(1000)
+                        .try_into()
+                        .expect("millis are somehow bigger then 1K");
+                    secs.checked_add(millis)
+                })
+                .unwrap_or(i32::MAX);
+
+            window.set_timeout_with_callback_and_timeout_and_arguments_0(
+                timeout_closure.as_ref().unchecked_ref(),
+                duration,
+            )
+        } else {
+            window.set_timeout_with_callback(timeout_closure.as_ref().unchecked_ref())
+        }
+        .expect("Failed to set timeout");
+
+        Schedule {
+            _closure: closure,
+            inner: Inner::Timeout {
+                window,
+                handle,
+                port: port_1,
+                _timeout_closure: timeout_closure,
+            },
+        }
+    }
+
+    fn new_worker<F>(f: F, duration: Duration) -> Schedule
+    where
+        F: 'static + FnMut(),
+    {
+        thread_local! {
+            static URL: ScriptUrl = ScriptUrl::new(include_str!("../script/worker.min.js"));
+            static WORKER: Worker = URL.with(|url| Worker::new(&url.0)).expect("`new Worker()` is not expected to fail with a local script");
+        }
+
+        let channel = MessageChannel::new().unwrap();
+        let closure = Closure::new(f);
+        let port_1 = channel.port1();
+        port_1.set_onmessage(Some(closure.as_ref().unchecked_ref()));
+        port_1.start();
+
+        // `Duration::as_millis()` always rounds down (because of truncation), we want to round
+        // up instead. This makes sure that the we never wake up **before** the given time.
+        let duration = duration
+            .as_secs()
+            .try_into()
+            .ok()
+            .and_then(|secs: u32| secs.checked_mul(1000))
+            .and_then(|secs| secs.checked_add(duration.subsec_micros().div_ceil(1000)))
+            .unwrap_or(u32::MAX);
+
+        WORKER
+            .with(|worker| {
+                let port_2 = channel.port2();
+                worker.post_message_with_transfer(
+                    &Array::of2(&port_2, &duration.into()),
+                    &Array::of1(&port_2).into(),
+                )
+            })
+            .expect("`Worker.postMessage()` is not expected to fail");
+
+        Schedule { _closure: closure, inner: Inner::Worker(port_1) }
+    }
+}
+
+impl Drop for Schedule {
+    fn drop(&mut self) {
+        match &self.inner {
+            Inner::Scheduler { controller, .. } => controller.abort(),
+            Inner::IdleCallback { window, handle, .. } => window.cancel_idle_callback(*handle),
+            Inner::Timeout { window, handle, port, .. } => {
+                window.clear_timeout_with_handle(*handle);
+                port.close();
+                port.set_onmessage(None);
+            },
+            Inner::Worker(port) => {
+                port.close();
+                port.set_onmessage(None);
+            },
+        }
+    }
+}
+
+fn has_scheduler_support(window: &web_sys::Window) -> bool {
+    thread_local! {
+        static SCHEDULER_SUPPORT: OnceCell<bool> = const { OnceCell::new() };
+    }
+
+    SCHEDULER_SUPPORT.with(|support| {
+        *support.get_or_init(|| {
+            #[wasm_bindgen]
+            extern "C" {
+                type SchedulerSupport;
+
+                #[wasm_bindgen(method, getter, js_name = scheduler)]
+                fn has_scheduler(this: &SchedulerSupport) -> JsValue;
+            }
+
+            let support: &SchedulerSupport = window.unchecked_ref();
+
+            !support.has_scheduler().is_undefined()
+        })
+    })
+}
+
+fn has_idle_callback_support(window: &web_sys::Window) -> bool {
+    thread_local! {
+        static IDLE_CALLBACK_SUPPORT: OnceCell<bool> = const { OnceCell::new() };
+    }
+
+    IDLE_CALLBACK_SUPPORT.with(|support| {
+        *support.get_or_init(|| {
+            #[wasm_bindgen]
+            extern "C" {
+                type IdleCallbackSupport;
+
+                #[wasm_bindgen(method, getter, js_name = requestIdleCallback)]
+                fn has_request_idle_callback(this: &IdleCallbackSupport) -> JsValue;
+            }
+
+            let support: &IdleCallbackSupport = window.unchecked_ref();
+            !support.has_request_idle_callback().is_undefined()
+        })
+    })
+}
+
+struct ScriptUrl(String);
+
+impl ScriptUrl {
+    fn new(script: &str) -> Self {
+        let sequence = Array::of1(&script.into());
+        let property = BlobPropertyBag::new();
+        property.set_type("text/javascript");
+        let blob = Blob::new_with_str_sequence_and_options(&sequence, &property)
+            .expect("`new Blob()` should never throw");
+
+        let url = Url::create_object_url_with_blob(&blob)
+            .expect("`URL.createObjectURL()` should never throw");
+
+        Self(url)
+    }
+}
+
+impl Drop for ScriptUrl {
+    fn drop(&mut self) {
+        Url::revoke_object_url(&self.0).expect("`URL.revokeObjectURL()` should never throw");
+    }
+}
+
+#[wasm_bindgen]
+extern "C" {
+    type WindowSupportExt;
+
+    #[wasm_bindgen(method, getter)]
+    fn scheduler(this: &WindowSupportExt) -> Scheduler;
+
+    type Scheduler;
+
+    #[wasm_bindgen(method, js_name = postTask)]
+    fn post_task_with_options(
+        this: &Scheduler,
+        callback: &Function,
+        options: &SchedulerPostTaskOptions,
+    ) -> Promise;
+
+    type SchedulerPostTaskOptions;
+
+    #[wasm_bindgen(method, setter, js_name = delay)]
+    fn set_delay(this: &SchedulerPostTaskOptions, value: f64);
+
+    #[wasm_bindgen(method, setter, js_name = signal)]
+    fn set_signal(this: &SchedulerPostTaskOptions, value: &AbortSignal);
+}