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.
31 lines
945 B
HTML
31 lines
945 B
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 ["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>
|