canvas: Add HTMLVideoElement to CanvasImageSource union type (#37135)

Follow to the specification and add HTMLVideoElement to
CanvasImageSource union type
to allow use it as image source for createPattern/drawImage operations.
https://html.spec.whatwg.org/multipage/#canvasimagesource

https://html.spec.whatwg.org/multipage/#dom-context-2d-createpattern
https://html.spec.whatwg.org/multipage/#dom-context-2d-drawimage

The HTMLVideoElement media resource has an associated origin:
- media provider object (MediaStream/MediaSource/Blob): CORS-same-origin
 - URL record: CORS-cross-origin/CORS-same-origin

https://html.spec.whatwg.org/multipage/media.html#media-resource

Testing:
 - html/canvas/element/*
 - html/semantics/embedded-content/the-canvas-element/*

Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
This commit is contained in:
Andrei Volykhin 2025-05-28 15:04:01 +03:00 committed by GitHub
parent 4f4c99a39e
commit 644138c1da
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 184 additions and 88 deletions

View file

@ -54,6 +54,7 @@ use crate::dom::dommatrix::DOMMatrix;
use crate::dom::element::{Element, cors_setting_for_element};
use crate::dom::globalscope::GlobalScope;
use crate::dom::htmlcanvaselement::HTMLCanvasElement;
use crate::dom::htmlvideoelement::HTMLVideoElement;
use crate::dom::imagedata::ImageData;
use crate::dom::node::{Node, NodeTraits};
use crate::dom::offscreencanvas::OffscreenCanvas;
@ -310,14 +311,15 @@ impl CanvasState {
self.origin_clean.set(false)
}
// https://html.spec.whatwg.org/multipage/#the-image-argument-is-not-origin-clean
fn is_origin_clean(&self, image: CanvasImageSource) -> bool {
match image {
CanvasImageSource::HTMLCanvasElement(canvas) => canvas.origin_is_clean(),
CanvasImageSource::OffscreenCanvas(canvas) => canvas.origin_is_clean(),
/// <https://html.spec.whatwg.org/multipage/#the-image-argument-is-not-origin-clean>
fn is_origin_clean(&self, source: CanvasImageSource) -> bool {
match source {
CanvasImageSource::HTMLImageElement(image) => {
image.same_origin(GlobalScope::entry().origin())
},
CanvasImageSource::HTMLVideoElement(video) => video.origin_is_clean(),
CanvasImageSource::HTMLCanvasElement(canvas) => canvas.origin_is_clean(),
CanvasImageSource::OffscreenCanvas(canvas) => canvas.origin_is_clean(),
CanvasImageSource::CSSStyleValue(_) => true,
}
}
@ -438,6 +440,17 @@ impl CanvasState {
}
let result = match image {
CanvasImageSource::HTMLVideoElement(ref video) => {
// <https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument>
// Step 2. Let usability be the result of checking the usability of image.
// Step 3. If usability is bad, then return (without drawing anything).
if !video.is_usable() {
return Ok(());
}
self.draw_html_video_element(video, htmlcanvas, sx, sy, sw, sh, dx, dy, dw, dh);
Ok(())
},
CanvasImageSource::HTMLCanvasElement(ref canvas) => {
// <https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument>
if canvas.get_size().is_empty() {
@ -498,6 +511,52 @@ impl CanvasState {
result
}
/// <https://html.spec.whatwg.org/multipage/#dom-context-2d-drawimage>
#[allow(clippy::too_many_arguments)]
fn draw_html_video_element(
&self,
video: &HTMLVideoElement,
canvas: Option<&HTMLCanvasElement>,
sx: f64,
sy: f64,
sw: Option<f64>,
sh: Option<f64>,
dx: f64,
dy: f64,
dw: Option<f64>,
dh: Option<f64>,
) {
let Some(snapshot) = video.get_current_frame_data() else {
return;
};
// Step 4. Establish the source and destination rectangles.
let video_size = snapshot.size().to_f64();
let dw = dw.unwrap_or(video_size.width);
let dh = dh.unwrap_or(video_size.height);
let sw = sw.unwrap_or(video_size.width);
let sh = sh.unwrap_or(video_size.height);
let (source_rect, dest_rect) =
self.adjust_source_dest_rects(video_size, sx, sy, sw, sh, dx, dy, dw, dh);
// Step 5. If one of the sw or sh arguments is zero, then return. Nothing is painted.
if !is_rect_valid(source_rect) || !is_rect_valid(dest_rect) {
return;
}
let smoothing_enabled = self.state.borrow().image_smoothing_enabled;
self.send_canvas_2d_msg(Canvas2dMsg::DrawImage(
snapshot.as_ipc(),
dest_rect,
source_rect,
smoothing_enabled,
));
self.mark_as_dirty(canvas);
}
#[allow(clippy::too_many_arguments)]
fn draw_offscreen_canvas(
&self,
@ -966,7 +1025,7 @@ impl CanvasState {
))
}
// https://html.spec.whatwg.org/multipage/#dom-context-2d-createpattern
/// <https://html.spec.whatwg.org/multipage/#dom-context-2d-createpattern>
pub(crate) fn create_pattern(
&self,
global: &GlobalScope,
@ -976,7 +1035,7 @@ impl CanvasState {
) -> Fallible<Option<DomRoot<CanvasPattern>>> {
let snapshot = match image {
CanvasImageSource::HTMLImageElement(ref image) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// <https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument>
if !image.is_usable()? {
return Ok(None);
}
@ -988,10 +1047,28 @@ impl CanvasState {
})
.ok_or(Error::InvalidState)?
},
CanvasImageSource::HTMLVideoElement(ref video) => {
// <https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument>
if !video.is_usable() {
return Ok(None);
}
video.get_current_frame_data().ok_or(Error::InvalidState)?
},
CanvasImageSource::HTMLCanvasElement(ref canvas) => {
// <https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument>
if canvas.get_size().is_empty() {
return Err(Error::InvalidState);
}
canvas.get_image_data().ok_or(Error::InvalidState)?
},
CanvasImageSource::OffscreenCanvas(ref canvas) => {
// <https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument>
if canvas.get_size().is_empty() {
return Err(Error::InvalidState);
}
canvas.get_image_data().ok_or(Error::InvalidState)?
},
CanvasImageSource::CSSStyleValue(ref value) => value