-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Web Platform Tests for HTML video element lazy loading via the loading attribute #57051
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Web Platform Tests for HTML video element lazy loading via the loading attribute #57051
Conversation
…g attribute These tests support the proposal for the addition of a loading attribute on the video element, designed to enable lazy-loading for video and poster data. HTML Standard PR here whatwg/html#11980 Co-authored-by: Zach Lysobey <[email protected]> Co-authored-by: Brad Frost <[email protected]> Co-authored-by: Credo Duarte <[email protected]>
…d with a proposed HTML feature
rename files to use a .tentative.html convention since they correspond with a proposed HTML feature
|
Renamed the files to be |
html/semantics/embedded-content/the-video-element/video-loading-attr-default.tentative.html
Outdated
Show resolved
Hide resolved
.../semantics/embedded-content/the-video-element/video-loading-autoplay-deferred.tentative.html
Outdated
Show resolved
Hide resolved
.../semantics/embedded-content/the-video-element/video-loading-autoplay-deferred.tentative.html
Show resolved
Hide resolved
html/semantics/embedded-content/the-video-element/video-loading-eager.tentative.html
Outdated
Show resolved
Hide resolved
.../semantics/embedded-content/the-video-element/video-loading-autoplay-deferred.tentative.html
Show resolved
Hide resolved
html/semantics/embedded-content/the-video-element/video-loading-lazy-in-viewport.tentative.html
Outdated
Show resolved
Hide resolved
html/semantics/embedded-content/the-video-element/video-loading-lazy-in-viewport.tentative.html
Outdated
Show resolved
Hide resolved
...ics/embedded-content/the-video-element/video-loading-lazy-poster-when-visible.tentative.html
Outdated
Show resolved
Hide resolved
...semantics/embedded-content/the-video-element/video-loading-lazy-window-onload.tentative.html
Outdated
Show resolved
Hide resolved
...semantics/embedded-content/the-video-element/video-loading-lazy-window-onload.tentative.html
Outdated
Show resolved
Hide resolved
… event and added a fallback if event never fires.
…t event comes after window load
… scscroll, as the poster image will impact its rendered size and be useful as a proxy for poster lazy loading
|
Thanks for the review.
|
|
|
||
| const video = document.getElementById("target"); | ||
|
|
||
| video.addEventListener("loadstart", () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Having the video element in markup and adding a listener in a script afterwards can miss the event. Either create the video in script or have a capturing listener before the video element exists.
(Same in some other tests.)
|
|
||
| <script> | ||
| const belowViewportVideo = document.getElementById("below_viewport"); | ||
| let dataLoaded = false; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not used; remove.
| t.step_timeout(() => { | ||
| t.step(() => { | ||
| assert_greater_than( | ||
| performance.getEntriesByName(url2).length, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This test still uses performance.getEntriesByName
| const video = document.getElementById("target"); | ||
|
|
||
| t.step_timeout(() => { | ||
| t.step(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can remove this step wrapper
| const video = document.getElementById("target"); | ||
|
|
||
| t.step_timeout(() => { | ||
| t.step(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove
| const posterUrl = new URL(video.poster, location.href).href; | ||
|
|
||
| t.step_timeout(() => { | ||
| t.step(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove
| video2.removeAttribute("loading"); | ||
|
|
||
| t.step_timeout(() => { | ||
| t.step(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove (several in this file)
| video.scrollIntoView(); | ||
|
|
||
| t.step_timeout(() => { | ||
| t.step(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove
| video.scrollIntoView(); | ||
|
|
||
| t.step_timeout(() => { | ||
| t.step(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove
| // Change loading to eager - should trigger load | ||
| video1.loading = "eager"; | ||
|
|
||
| t.step_timeout(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use events instead of timeout here
These tests support the proposal for the addition of a loading attribute
on the video element, designed to enable lazy-loading for video and poster
data.
Related HTML Standard Proposal: whatwg/html#11980
Related issue: whatwg/html#10376
These are designed to pass in a browser that supports the proposed feature (verified in a locally patched browser).
Co-authored-by: Zach Lysobey [email protected]
Co-authored-by: Brad Frost [email protected]
Co-authored-by: Credo Duarte [email protected]