Auto merge of #22399 - ferjm:poster.frame, r=jdm

Implement HTMLMediaElement poster attribute

- [X] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #22288
- [x] There are tests for these changes

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/22399)
<!-- Reviewable:end -->

components/atoms/static_atoms.txt

@@ -64,6 +64,7 @@ pause
 play
 playing
 popstate
+postershown
 print
 progress
 radio

components/script/dom/htmlimageelement.rs

@@ -38,13 +38,13 @@ use crate::dom::progressevent::ProgressEvent;
 use crate::dom::values::UNSIGNED_LONG_MAX;
 use crate::dom::virtualmethods::VirtualMethods;
 use crate::dom::window::Window;
+use crate::image_listener::{add_cache_listener_for_element, ImageCacheListener};
 use crate::microtask::{Microtask, MicrotaskRunnable};
 use crate::network_listener::{self, NetworkListener, PreInvoke, ResourceTimingListener};
 use crate::script_thread::ScriptThread;
 use crate::task_source::TaskSource;
 use app_units::{Au, AU_PER_PX};
 use cssparser::{Parser, ParserInput};
-
 use dom_struct::dom_struct;
 use euclid::Point2D;
 use html5ever::{LocalName, Prefix};
@@ -167,7 +167,7 @@ struct ImageContext {
     /// The cache ID for this request.
     id: PendingImageId,
     /// Used to mark abort
-    aborted: Cell<bool>,
+    aborted: bool,
     /// The document associated with this request
     doc: Trusted<Document>,
     /// timing data for this resource
@@ -193,7 +193,7 @@ impl FetchResponseListener for ImageContext {
             if let Some(ref content_type) = metadata.content_type {
                 let mime: Mime = content_type.clone().into_inner().into();
                 if mime.type_() == mime::MULTIPART && mime.subtype().as_str() == "x-mixed-replace" {
-                    self.aborted.set(true);
+                    self.aborted = true;
                 }
             }
         }
@@ -255,51 +255,13 @@ impl ResourceTimingListener for ImageContext {
 
 impl PreInvoke for ImageContext {
     fn should_invoke(&self) -> bool {
-        !self.aborted.get()
+        !self.aborted
     }
 }
 
 impl HTMLImageElement {
     /// Update the current image with a valid URL.
     fn fetch_image(&self, img_url: &ServoUrl) {
-        fn add_cache_listener_for_element(
-            image_cache: Arc<dyn ImageCache>,
-            id: PendingImageId,
-            elem: &HTMLImageElement,
-        ) {
-            let trusted_node = Trusted::new(elem);
-            let (responder_sender, responder_receiver) = ipc::channel().unwrap();
-
-            let window = window_from_node(elem);
-            let (task_source, canceller) = window
-                .task_manager()
-                .networking_task_source_with_canceller();
-            let generation = elem.generation.get();
-            ROUTER.add_route(
-                responder_receiver.to_opaque(),
-                Box::new(move |message| {
-                    debug!("Got image {:?}", message);
-                    // Return the image via a message to the script thread, which marks
-                    // the element as dirty and triggers a reflow.
-                    let element = trusted_node.clone();
-                    let image = message.to().unwrap();
-                    // FIXME(nox): Why are errors silenced here?
-                    let _ = task_source.queue_with_canceller(
-                        task!(process_image_response: move || {
-                            let element = element.root();
-                            // Ignore any image response for a previous request that has been discarded.
-                            if generation == element.generation.get() {
-                                element.process_image_response(image);
-                            }
-                        }),
-                        &canceller,
-                    );
-                }),
-            );
-
-            image_cache.add_listener(id, ImageResponder::new(responder_sender, id));
-        }
-
         let window = window_from_node(self);
         let image_cache = window.image_cache();
         let response = image_cache.find_image_or_metadata(
@@ -317,7 +279,7 @@ impl HTMLImageElement {
             },
 
             Err(ImageState::Pending(id)) => {
-                add_cache_listener_for_element(image_cache.clone(), id, self);
+                add_cache_listener_for_element(image_cache, id, self);
             },
 
             Err(ImageState::LoadError) => {
@@ -339,7 +301,7 @@ impl HTMLImageElement {
             image_cache: window.image_cache(),
             status: Ok(()),
             id: id,
-            aborted: Cell::new(false),
+            aborted: false,
             doc: Trusted::new(&document),
             resource_timing: ResourceFetchTiming::new(ResourceTimingType::Resource),
             url: img_url.clone(),
@@ -1735,6 +1697,16 @@ impl FormControl for HTMLImageElement {
     }
 }
 
+impl ImageCacheListener for HTMLImageElement {
+    fn generation_id(&self) -> u32 {
+        self.generation.get()
+    }
+
+    fn process_image_response(&self, response: ImageResponse) {
+        self.process_image_response(response);
+    }
+}
+
 fn image_dimension_setter(element: &Element, attr: LocalName, value: u32) {
     // This setter is a bit weird: the IDL type is unsigned long, but it's parsed as
     // a dimension for rendering.

components/script/dom/htmlmediaelement.rs

@@ -51,10 +51,13 @@ use http::header::{self, HeaderMap, HeaderValue};
 use ipc_channel::ipc;
 use ipc_channel::router::ROUTER;
 use mime::{self, Mime};
+use net_traits::image::base::Image;
+use net_traits::image_cache::ImageResponse;
 use net_traits::request::{CredentialsMode, Destination, RequestInit};
 use net_traits::{CoreResourceMsg, FetchChannels, FetchMetadata, FetchResponseListener, Metadata};
 use net_traits::{NetworkError, ResourceFetchTiming, ResourceTimingType};
 use script_layout_interface::HTMLMediaData;
+use servo_config::prefs::PREFS;
 use servo_media::player::frame::{Frame, FrameRenderer};
 use servo_media::player::{PlaybackState, Player, PlayerError, PlayerEvent, StreamType};
 use servo_media::ServoMedia;
@@ -85,6 +88,12 @@ impl MediaFrameRenderer {
             very_old_frame: None,
         }
     }
+
+    fn render_poster_frame(&mut self, image: Arc<Image>) {
+        if let Some(image_id) = image.id {
+            self.current_frame = Some((image_id, image.width as i32, image.height as i32));
+        }
+    }
 }
 
 impl FrameRenderer for MediaFrameRenderer {
@@ -135,14 +144,11 @@ impl FrameRenderer for MediaFrameRenderer {
                 self.current_frame = Some((image_key, frame.get_width(), frame.get_height()));
             },
         }
-
         self.api.update_resources(txn.resource_updates);
     }
 }
 
 #[dom_struct]
-// FIXME(nox): A lot of tasks queued for this element should probably be in the
-// media element event task source.
 pub struct HTMLMediaElement {
     htmlelement: HTMLElement,
     /// <https://html.spec.whatwg.org/multipage/#dom-media-networkstate>
@@ -293,7 +299,7 @@ impl HTMLMediaElement {
     /// we pass true to that method again.
     ///
     /// <https://html.spec.whatwg.org/multipage/#delaying-the-load-event-flag>
-    fn delay_load_event(&self, delay: bool) {
+    pub fn delay_load_event(&self, delay: bool) {
         let mut blocker = self.delaying_the_load_event_flag.borrow_mut();
         if delay && blocker.is_none() {
             *blocker = Some(LoadBlocker::new(&document_from_node(self), LoadType::Media));
@@ -1080,6 +1086,30 @@ impl HTMLMediaElement {
         task_source.queue_simple_event(self.upcast(), atom!("seeked"), &window);
     }
 
+    /// https://html.spec.whatwg.org/multipage/#poster-frame
+    pub fn process_poster_response(&self, image: ImageResponse) {
+        if !self.show_poster.get() {
+            return;
+        }
+
+        // Step 6.
+        if let ImageResponse::Loaded(image, _) = image {
+            self.frame_renderer
+                .lock()
+                .unwrap()
+                .render_poster_frame(image);
+            self.upcast::<Node>().dirty(NodeDamage::OtherNodeDamage);
+            if let Some(testing_on) = PREFS.get("media.testing.enabled").as_boolean() {
+                if !testing_on {
+                    return;
+                }
+                let window = window_from_node(self);
+                let task_source = window.task_manager().media_element_task_source();
+                task_source.queue_simple_event(self.upcast(), atom!("postershown"), &window);
+            }
+        }
+    }
+
     fn setup_media_player(&self) -> Result<(), PlayerError> {
         let (action_sender, action_receiver) = ipc::channel().unwrap();
 
@@ -1693,11 +1723,13 @@ impl VirtualMethods for HTMLMediaElement {
     fn attribute_mutated(&self, attr: &Attr, mutation: AttributeMutation) {
         self.super_type().unwrap().attribute_mutated(attr, mutation);
 
+        if mutation.new_value(attr).is_none() {
+            return;
+        }
+
         match attr.local_name() {
             &local_name!("src") => {
-                if mutation.new_value(attr).is_some() {
-                    self.media_element_load_algorithm();
-                }
+                self.media_element_load_algorithm();
             },
             _ => (),
         };

components/script/dom/htmlvideoelement.rs

@@ -2,15 +2,44 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+use crate::document_loader::{LoadBlocker, LoadType};
+use crate::dom::attr::Attr;
+use crate::dom::bindings::cell::DomRefCell;
 use crate::dom::bindings::codegen::Bindings::HTMLVideoElementBinding;
 use crate::dom::bindings::codegen::Bindings::HTMLVideoElementBinding::HTMLVideoElementMethods;
+use crate::dom::bindings::inheritance::Castable;
+use crate::dom::bindings::refcounted::Trusted;
+use crate::dom::bindings::reflector::DomObject;
 use crate::dom::bindings::root::DomRoot;
+use crate::dom::bindings::str::DOMString;
 use crate::dom::document::Document;
+use crate::dom::element::{AttributeMutation, Element};
+use crate::dom::globalscope::GlobalScope;
 use crate::dom::htmlmediaelement::{HTMLMediaElement, ReadyState};
-use crate::dom::node::Node;
+use crate::dom::node::{document_from_node, window_from_node, Node};
+use crate::dom::performanceresourcetiming::InitiatorType;
+use crate::dom::virtualmethods::VirtualMethods;
+use crate::fetch::FetchCanceller;
+use crate::image_listener::{add_cache_listener_for_element, ImageCacheListener};
+use crate::network_listener::{self, NetworkListener, PreInvoke, ResourceTimingListener};
 use dom_struct::dom_struct;
 use html5ever::{LocalName, Prefix};
+use ipc_channel::ipc;
+use ipc_channel::router::ROUTER;
+use net_traits::image_cache::UsePlaceholder;
+use net_traits::image_cache::{CanRequestImages, ImageCache, ImageOrMetadataAvailable};
+use net_traits::image_cache::{ImageResponse, ImageState, PendingImageId};
+use net_traits::request::{CredentialsMode, Destination, RequestInit};
+use net_traits::{
+    CoreResourceMsg, FetchChannels, FetchMetadata, FetchResponseListener, FetchResponseMsg,
+};
+use net_traits::{NetworkError, ResourceFetchTiming, ResourceTimingType};
+use servo_url::ServoUrl;
 use std::cell::Cell;
+use std::sync::{Arc, Mutex};
+
+const DEFAULT_WIDTH: u32 = 300;
+const DEFAULT_HEIGHT: u32 = 150;
 
 #[dom_struct]
 pub struct HTMLVideoElement {
@@ -19,6 +48,13 @@ pub struct HTMLVideoElement {
     video_width: Cell<u32>,
     /// https://html.spec.whatwg.org/multipage/#dom-video-videoheight
     video_height: Cell<u32>,
+    /// Incremented whenever tasks associated with this element are cancelled.
+    generation_id: Cell<u32>,
+    /// Poster frame fetch request canceller.
+    poster_frame_canceller: DomRefCell<FetchCanceller>,
+    /// Load event blocker. Will block the load event while the poster frame
+    /// is being fetched.
+    load_blocker: DomRefCell<Option<LoadBlocker>>,
 }
 
 impl HTMLVideoElement {
@@ -29,8 +65,11 @@ impl HTMLVideoElement {
     ) -> HTMLVideoElement {
         HTMLVideoElement {
             htmlmediaelement: HTMLMediaElement::new_inherited(local_name, prefix, document),
-            video_width: Cell::new(0),
-            video_height: Cell::new(0),
+            video_width: Cell::new(DEFAULT_WIDTH),
+            video_height: Cell::new(DEFAULT_HEIGHT),
+            generation_id: Cell::new(0),
+            poster_frame_canceller: DomRefCell::new(Default::default()),
+            load_blocker: Default::default(),
         }
     }
 
@@ -64,6 +103,117 @@ impl HTMLVideoElement {
     pub fn set_video_height(&self, height: u32) {
         self.video_height.set(height);
     }
+
+    pub fn allow_load_event(&self) {
+        LoadBlocker::terminate(&mut *self.load_blocker.borrow_mut());
+    }
+
+    /// https://html.spec.whatwg.org/multipage/#poster-frame
+    fn fetch_poster_frame(&self, poster_url: &str) {
+        // Step 1.
+        let cancel_receiver = self.poster_frame_canceller.borrow_mut().initialize();
+        self.generation_id.set(self.generation_id.get() + 1);
+
+        // Step 2.
+        if poster_url.is_empty() {
+            return;
+        }
+
+        // Step 3.
+        let poster_url = match document_from_node(self).url().join(&poster_url) {
+            Ok(url) => url,
+            Err(_) => return,
+        };
+
+        // Step 4.
+        // We use the image cache for poster frames so we save as much
+        // network activity as possible.
+        let window = window_from_node(self);
+        let image_cache = window.image_cache();
+        let response = image_cache.find_image_or_metadata(
+            poster_url.clone().into(),
+            UsePlaceholder::No,
+            CanRequestImages::Yes,
+        );
+        match response {
+            Ok(ImageOrMetadataAvailable::ImageAvailable(image, url)) => {
+                self.process_image_response(ImageResponse::Loaded(image, url));
+            },
+
+            Err(ImageState::Pending(id)) => {
+                add_cache_listener_for_element(image_cache, id, self);
+            },
+
+            Err(ImageState::NotRequested(id)) => {
+                add_cache_listener_for_element(image_cache, id, self);
+                self.do_fetch_poster_frame(poster_url, id, cancel_receiver);
+            },
+
+            _ => (),
+        }
+    }
+
+    /// https://html.spec.whatwg.org/multipage/#poster-frame
+    fn do_fetch_poster_frame(
+        &self,
+        poster_url: ServoUrl,
+        id: PendingImageId,
+        cancel_receiver: ipc::IpcReceiver<()>,
+    ) {
+        // Continuation of step 4.
+        let document = document_from_node(self);
+        let request = RequestInit {
+            url: poster_url.clone(),
+            destination: Destination::Image,
+            credentials_mode: CredentialsMode::Include,
+            use_url_credentials: true,
+            origin: document.origin().immutable().clone(),
+            pipeline_id: Some(document.global().pipeline_id()),
+            ..RequestInit::default()
+        };
+
+        // Step 5.
+        // This delay must be independent from the ones created by HTMLMediaElement during
+        // its media load algorithm, otherwise a code like
+        // <video poster="poster.png"></video>
+        // (which triggers no media load algorithm unless a explicit call to .load() is done)
+        // will block the document's load event forever.
+        let mut blocker = self.load_blocker.borrow_mut();
+        LoadBlocker::terminate(&mut *blocker);
+        *blocker = Some(LoadBlocker::new(
+            &document_from_node(self),
+            LoadType::Image(poster_url.clone()),
+        ));
+
+        let window = window_from_node(self);
+        let context = Arc::new(Mutex::new(PosterFrameFetchContext::new(
+            self, poster_url, id,
+        )));
+
+        let (action_sender, action_receiver) = ipc::channel().unwrap();
+        let (task_source, canceller) = window
+            .task_manager()
+            .networking_task_source_with_canceller();
+        let listener = NetworkListener {
+            context,
+            task_source,
+            canceller: Some(canceller),
+        };
+        ROUTER.add_route(
+            action_receiver.to_opaque(),
+            Box::new(move |message| {
+                listener.notify_fetch(message.to().unwrap());
+            }),
+        );
+        let global = self.global();
+        global
+            .core_resource_thread()
+            .send(CoreResourceMsg::Fetch(
+                request,
+                FetchChannels::ResponseMsg(action_sender, Some(cancel_receiver)),
+            ))
+            .unwrap();
+    }
 }
 
 impl HTMLVideoElementMethods for HTMLVideoElement {
@@ -82,4 +232,152 @@ impl HTMLVideoElementMethods for HTMLVideoElement {
         }
         self.video_height.get()
     }
+
+    // https://html.spec.whatwg.org/multipage/#dom-video-poster
+    make_getter!(Poster, "poster");
+
+    // https://html.spec.whatwg.org/multipage/#dom-video-poster
+    make_setter!(SetPoster, "poster");
+
+    // For testing purposes only. This is not an event from
+    // https://html.spec.whatwg.org/multipage/#dom-video-poster
+    event_handler!(postershown, GetOnpostershown, SetOnpostershown);
+}
+
+impl VirtualMethods for HTMLVideoElement {
+    fn super_type(&self) -> Option<&dyn VirtualMethods> {
+        Some(self.upcast::<HTMLMediaElement>() as &dyn VirtualMethods)
+    }
+
+    fn attribute_mutated(&self, attr: &Attr, mutation: AttributeMutation) {
+        self.super_type().unwrap().attribute_mutated(attr, mutation);
+
+        if let Some(new_value) = mutation.new_value(attr) {
+            match attr.local_name() {
+                &local_name!("poster") => {
+                    self.fetch_poster_frame(&new_value);
+                },
+                _ => (),
+            };
+        }
+    }
+}
+
+impl ImageCacheListener for HTMLVideoElement {
+    fn generation_id(&self) -> u32 {
+        self.generation_id.get()
+    }
+
+    fn process_image_response(&self, response: ImageResponse) {
+        self.htmlmediaelement.process_poster_response(response);
+    }
+}
+
+struct PosterFrameFetchContext {
+    /// Reference to the script thread image cache.
+    image_cache: Arc<dyn ImageCache>,
+    /// The element that initiated the request.
+    elem: Trusted<HTMLVideoElement>,
+    /// The cache ID for this request.
+    id: PendingImageId,
+    /// True if this response is invalid and should be ignored.
+    cancelled: bool,
+    /// Timing data for this resource
+    resource_timing: ResourceFetchTiming,
+    /// Url for the resource
+    url: ServoUrl,
+}
+
+impl FetchResponseListener for PosterFrameFetchContext {
+    fn process_request_body(&mut self) {}
+    fn process_request_eof(&mut self) {}
+
+    fn process_response(&mut self, metadata: Result<FetchMetadata, NetworkError>) {
+        self.image_cache
+            .notify_pending_response(self.id, FetchResponseMsg::ProcessResponse(metadata.clone()));
+
+        let metadata = metadata.ok().map(|meta| match meta {
+            FetchMetadata::Unfiltered(m) => m,
+            FetchMetadata::Filtered { unsafe_, .. } => unsafe_,
+        });
+
+        let status_is_ok = metadata
+            .as_ref()
+            .and_then(|m| m.status.as_ref())
+            .map_or(true, |s| s.0 >= 200 && s.0 < 300);
+
+        if !status_is_ok {
+            self.cancelled = true;
+            self.elem
+                .root()
+                .poster_frame_canceller
+                .borrow_mut()
+                .cancel();
+        }
+    }
+
+    fn process_response_chunk(&mut self, payload: Vec<u8>) {
+        if self.cancelled {
+            // An error was received previously, skip processing the payload.
+            return;
+        }
+
+        self.image_cache
+            .notify_pending_response(self.id, FetchResponseMsg::ProcessResponseChunk(payload));
+    }
+
+    fn process_response_eof(&mut self, response: Result<ResourceFetchTiming, NetworkError>) {
+        self.elem.root().allow_load_event();
+        self.image_cache
+            .notify_pending_response(self.id, FetchResponseMsg::ProcessResponseEOF(response));
+    }
+
+    fn resource_timing_mut(&mut self) -> &mut ResourceFetchTiming {
+        &mut self.resource_timing
+    }
+
+    fn resource_timing(&self) -> &ResourceFetchTiming {
+        &self.resource_timing
+    }
+
+    fn submit_resource_timing(&mut self) {
+        network_listener::submit_timing(self)
+    }
+}
+
+impl ResourceTimingListener for PosterFrameFetchContext {
+    fn resource_timing_information(&self) -> (InitiatorType, ServoUrl) {
+        let initiator_type = InitiatorType::LocalName(
+            self.elem
+                .root()
+                .upcast::<Element>()
+                .local_name()
+                .to_string(),
+        );
+        (initiator_type, self.url.clone())
+    }
+
+    fn resource_timing_global(&self) -> DomRoot<GlobalScope> {
+        document_from_node(&*self.elem.root()).global()
+    }
+}
+
+impl PreInvoke for PosterFrameFetchContext {
+    fn should_invoke(&self) -> bool {
+        true
+    }
+}
+
+impl PosterFrameFetchContext {
+    fn new(elem: &HTMLVideoElement, url: ServoUrl, id: PendingImageId) -> PosterFrameFetchContext {
+        let window = window_from_node(elem);
+        PosterFrameFetchContext {
+            image_cache: window.image_cache(),
+            elem: Trusted::new(elem),
+            id,
+            cancelled: false,
+            resource_timing: ResourceFetchTiming::new(ResourceTimingType::Resource),
+            url,
+        }
+    }
 }

components/script/dom/virtualmethods.rs

@@ -6,6 +6,7 @@ use crate::dom::attr::Attr;
 use crate::dom::bindings::inheritance::Castable;
 use crate::dom::bindings::inheritance::ElementTypeId;
 use crate::dom::bindings::inheritance::HTMLElementTypeId;
+use crate::dom::bindings::inheritance::HTMLMediaElementTypeId;
 use crate::dom::bindings::inheritance::NodeTypeId;
 use crate::dom::bindings::inheritance::SVGElementTypeId;
 use crate::dom::bindings::inheritance::SVGGraphicsElementTypeId;
@@ -49,6 +50,7 @@ use crate::dom::htmltablesectionelement::HTMLTableSectionElement;
 use crate::dom::htmltemplateelement::HTMLTemplateElement;
 use crate::dom::htmltextareaelement::HTMLTextAreaElement;
 use crate::dom::htmltitleelement::HTMLTitleElement;
+use crate::dom::htmlvideoelement::HTMLVideoElement;
 use crate::dom::node::{ChildrenMutation, CloneChildrenFlag, Node, UnbindContext};
 use crate::dom::svgsvgelement::SVGSVGElement;
 use html5ever::LocalName;
@@ -208,8 +210,13 @@ pub fn vtable_for(node: &Node) -> &dyn VirtualMethods {
         NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLLinkElement)) => {
             node.downcast::<HTMLLinkElement>().unwrap() as &dyn VirtualMethods
         },
-        NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLMediaElement(_))) => {
-            node.downcast::<HTMLMediaElement>().unwrap() as &dyn VirtualMethods
+        NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLMediaElement(
+            media_el,
+        ))) => match media_el {
+            HTMLMediaElementTypeId::HTMLVideoElement => {
+                node.downcast::<HTMLVideoElement>().unwrap() as &dyn VirtualMethods
+            },
+            _ => node.downcast::<HTMLMediaElement>().unwrap() as &dyn VirtualMethods,
         },
         NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLMetaElement)) => {
             node.downcast::<HTMLMetaElement>().unwrap() as &dyn VirtualMethods

components/script/dom/webidls/HTMLVideoElement.webidl

@@ -11,6 +11,10 @@ interface HTMLVideoElement : HTMLMediaElement {
   //          attribute unsigned long height;
   readonly attribute unsigned long videoWidth;
   readonly attribute unsigned long videoHeight;
-  // [CEReactions]
-  //          attribute DOMString poster;
+  [CEReactions] attribute DOMString poster;
+};
+
+partial interface HTMLVideoElement {
+  [Pref="media.testing.enabled"]
+  attribute EventHandler onpostershown;
 };

components/script/image_listener.rs

@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+use crate::dom::bindings::conversions::DerivedFrom;
+use crate::dom::bindings::refcounted::Trusted;
+use crate::dom::bindings::reflector::DomObject;
+use crate::dom::node::{window_from_node, Node};
+use crate::task_source::TaskSource;
+use ipc_channel::ipc;
+use ipc_channel::router::ROUTER;
+use net_traits::image_cache::{ImageCache, ImageResponder, ImageResponse, PendingImageId};
+use std::sync::Arc;
+
+pub trait ImageCacheListener {
+    fn generation_id(&self) -> u32;
+    fn process_image_response(&self, response: ImageResponse);
+}
+
+pub fn add_cache_listener_for_element<T: ImageCacheListener + DerivedFrom<Node> + DomObject>(
+    image_cache: Arc<dyn ImageCache>,
+    id: PendingImageId,
+    elem: &T,
+) {
+    let trusted_node = Trusted::new(elem);
+    let (responder_sender, responder_receiver) = ipc::channel().unwrap();
+
+    let window = window_from_node(elem);
+    let (task_source, canceller) = window
+        .task_manager()
+        .networking_task_source_with_canceller();
+    let generation = elem.generation_id();
+    ROUTER.add_route(
+        responder_receiver.to_opaque(),
+        Box::new(move |message| {
+            let element = trusted_node.clone();
+            let image = message.to().unwrap();
+            debug!("Got image {:?}", image);
+            let _ = task_source.queue_with_canceller(
+                task!(process_image_response: move || {
+                    let element = element.root();
+                    // Ignore any image response for a previous request that has been discarded.
+                    if generation == element.generation_id() {
+                        element.process_image_response(image);
+                    }
+                }),
+                &canceller,
+            );
+        }),
+    );
+
+    image_cache.add_listener(id, ImageResponder::new(responder_sender, id));
+}

components/script/lib.rs

@@ -56,6 +56,7 @@ pub mod document_loader;
 #[macro_use]
 mod dom;
 pub mod fetch;
+mod image_listener;
 mod layout_image;
 mod mem;
 mod microtask;

tests/wpt/metadata/html/dom/interfaces.https.html.ini

@@ -6747,9 +6747,6 @@
   [HTMLVideoElement interface: attribute height]
     expected: FAIL
 
-  [HTMLVideoElement interface: attribute poster]
-    expected: FAIL
-
   [HTMLVideoElement interface: attribute playsInline]
     expected: FAIL
 
@@ -6759,9 +6756,6 @@
   [HTMLVideoElement interface: document.createElement("video") must inherit property "height" with the proper type]
     expected: FAIL
 
-  [HTMLVideoElement interface: document.createElement("video") must inherit property "poster" with the proper type]
-    expected: FAIL
-
   [HTMLVideoElement interface: document.createElement("video") must inherit property "playsInline" with the proper type]
     expected: FAIL
 

tests/wpt/mozilla/meta/MANIFEST.json

@@ -7157,6 +7157,18 @@
      {}
     ]
    ], 
+   "mozilla/video_poster_frame.html": [
+    [
+     "/_mozilla/mozilla/video_poster_frame.html", 
+     [
+      [
+       "/_mozilla/mozilla/video_poster_frame_ref.html", 
+       "=="
+      ]
+     ], 
+     {}
+    ]
+   ], 
    "mozilla/webgl/clearcolor.html": [
     [
      "/_mozilla/mozilla/webgl/clearcolor.html", 
@@ -10368,6 +10380,11 @@
      {}
     ]
    ], 
+   "mozilla/poster.png": [
+    [
+     {}
+    ]
+   ], 
    "mozilla/referrer-policy/OWNERS": [
     [
      {}
@@ -11813,6 +11830,11 @@
      {}
     ]
    ], 
+   "mozilla/video_poster_frame_ref.html": [
+    [
+     {}
+    ]
+   ], 
    "mozilla/webgl/clearcolor_ref.html": [
     [
      {}
@@ -27227,6 +27249,10 @@
    "5aff666995fe6cd1d4e84e63a9f6019d04387f8e", 
    "testharness"
   ], 
+  "mozilla/poster.png": [
+   "33834c3ef095fa9c0080017e1b65b2eb8413eac4", 
+   "support"
+  ], 
   "mozilla/postmessage_closed.html": [
    "c54e371b270cd2e34558dfb7994785d697330534", 
    "testharness"
@@ -32811,6 +32837,14 @@
    "5ab0557c5e02828c38f5c58edde5425e40dcb4b1", 
    "testharness"
   ], 
+  "mozilla/video_poster_frame.html": [
+   "8e85bcd62303b70153f8d451a843cb2bdd96484d",
+   "reftest"
+  ], 
+  "mozilla/video_poster_frame_ref.html": [
+   "b45a87aa614eef6cbe21a77a7b75e81e9a9f8c95", 
+   "support"
+  ], 
   "mozilla/weakref.html": [
    "4deccbe1e26a3f921eea85a4395394a55cc88be4", 
    "testharness"

tests/wpt/mozilla/meta/mozilla/video_poster_frame.html.ini

@@ -0,0 +1,2 @@
+[video_poster_frame.html]
+  prefs: [media.testing.enabled:true]

tests/wpt/mozilla/tests/mozilla/video_poster_frame.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="match" href="video_poster_frame_ref.html">
+  </head>
+  <body>
+    <video poster="poster.png"></video>
+    <script>
+      let video = document.querySelector("video");
+      video.addEventListener("postershown", function() {
+        document.documentElement.classList.remove("reftest-wait");
+      });
+    </script>
+  </body>
+</html>

tests/wpt/mozilla/tests/mozilla/video_poster_frame_ref.html

@@ -0,0 +1,4 @@
+<!doctype html>
+<meta charset="utf-8">
+<title></title>
+<img src="poster.png"/>