eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-30 19:47:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Update video elements' natural dimensions during playback

Browse Source 
This tightens the implementation of video element sizing to the spec by
implementing two spec concepts:
- The media resource's natural width and height, and
- The video element's natural width and height.
The element's natural dimensions change based on the representation,
which has many inputs, so update checks are triggered from many
locations.

The resize event is fired when the media resource's natural dimensions
change, and the layout is invalidated if the element's natural
dimensions change.

Tests for a few important resize triggers have been added.
This commit is contained in:
Zaggy1024
2026-04-20 22:16:49 -05:00
committed by Gregory Bertilson
parent 938c254d6f
commit 04cc5bced9
Notes: github-actions[bot] 2026-04-22 00:12:45 +00:00 
Author: https://github.com/Zaggy1024
Commit: https://github.com/LadybirdBrowser/ladybird/commit/04cc5bced9b
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/9004
17 changed files with 279 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
Tests/LibWeb/Text/input/HTML/HTMLVideoElement-resize-event-on-reload.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<script src="../include.js"></script>
<video id="video"></video>
<script>
const video = document.getElementById("video");
function logEvent(name) {
println(`${name}: videoWidth=${video.videoWidth} videoHeight=${video.videoHeight}`);
}
for (const name of ["loadstart", "loadedmetadata", "loadeddata", "resize", "emptied", "abort"]) {
video.addEventListener(name, () => logEvent(name));
}
asyncTest(async done => {
logEvent("initial");
video.src = "../../../Assets/test-webm.webm";
await new Promise(resolve => video.addEventListener("loadedmetadata", resolve, { once: true }));
println("--- reloading video ---");
video.load();
logEvent("after reload");
await new Promise(resolve => video.addEventListener("canplaythrough", resolve, { once: true }));
logEvent("after canplaythrough");
done();
});
</script>