mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-30 11:37:16 +02:00
04cc5bced9
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.
35 lines
1.1 KiB
HTML
35 lines
1.1 KiB
HTML
<!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 ["loadedmetadata", "resize", "ended", "seeked"]) {
|
|
video.addEventListener(name, () => logEvent(name));
|
|
}
|
|
|
|
asyncTest(async done => {
|
|
video.src = "../../../Assets/resize-320x240-640x480.webm";
|
|
|
|
await new Promise(resolve => video.addEventListener("loadedmetadata", resolve, { once: true }));
|
|
|
|
println("--- play ---");
|
|
await video.play();
|
|
await new Promise(resolve => video.addEventListener("ended", resolve, { once: true }));
|
|
|
|
println("--- seek to 0 ---");
|
|
video.currentTime = 0;
|
|
await new Promise(resolve => video.addEventListener("seeked", resolve, { once: true }));
|
|
|
|
println("--- seek to end ---");
|
|
video.currentTime = video.duration;
|
|
await new Promise(resolve => video.addEventListener("seeked", resolve, { once: true }));
|
|
|
|
done();
|
|
});
|
|
</script>
|