script/dom/html/embedded_content/

htmlimageelement.rs

/* 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 std::cell::Cell;
use std::sync::Arc;

use atomic_refcell::{AtomicRef, AtomicRefCell};
use bytes::Bytes;
use dom_struct::dom_struct;
use euclid::default::Point2D;
use html5ever::{LocalName, Prefix, QualName, local_name, ns};
use js::context::{JSContext, NoGC};
use js::rust::HandleObject;
use mime::{self, Mime};
use net_traits::image_cache::{
    Image, ImageCache, ImageCacheResult, ImageLoadListener, ImageOrMetadataAvailable,
    ImageResponse, PendingImageId,
};
use net_traits::request::{CorsSettings, Destination, Initiator, RequestId};
use net_traits::{
    FetchMetadata, FetchResponseMsg, Metadata, NetworkError, ReferrerPolicy, ResourceFetchTiming,
};
use num_traits::ToPrimitive;
use pixels::{CorsStatus, ImageMetadata, Snapshot};
use script_bindings::cell::DomRefCell;
use servo_base::cross_process_instant::CrossProcessInstant;
use servo_url::ServoUrl;
use servo_url::origin::MutableOrigin;
use style::Atom;
use style::attr::{AttrValue, LengthOrPercentageOrAuto, parse_unsigned_integer};

use crate::dom::activation::Activatable;
use crate::dom::bindings::cell::AtomicSafeBorrowMut;
use crate::dom::bindings::codegen::Bindings::DOMRectBinding::DOMRect_Binding::DOMRectMethods;
use crate::dom::bindings::codegen::Bindings::ElementBinding::Element_Binding::ElementMethods;
use crate::dom::bindings::codegen::Bindings::HTMLImageElementBinding::HTMLImageElementMethods;
use crate::dom::bindings::codegen::Bindings::MouseEventBinding::MouseEventMethods;
use crate::dom::bindings::codegen::Bindings::NodeBinding::Node_Binding::NodeMethods;
use crate::dom::bindings::codegen::Bindings::ShadowRootBinding::ShadowRootMethods;
use crate::dom::bindings::codegen::Bindings::WindowBinding::WindowMethods;
use crate::dom::bindings::error::{Error, Fallible};
use crate::dom::bindings::inheritance::Castable;
use crate::dom::bindings::refcounted::{Trusted, TrustedPromise};
use crate::dom::bindings::reflector::DomGlobal;
use crate::dom::bindings::root::{Dom, DomRoot, LayoutDom, MutNullableDom, ToLayoutOptional};
use crate::dom::bindings::str::{DOMString, USVString};
use crate::dom::csp::{GlobalCspReporting, Violation};
use crate::dom::document::Document;
use crate::dom::element::attributes::storage::AttrRef;
use crate::dom::element::{
    AttributeMutation, CustomElementCreationMode, Element, ElementCreator,
    cors_setting_for_element, referrer_policy_for_element, reflect_cross_origin_attribute,
    reflect_referrer_policy_attribute, set_cross_origin_attribute,
};
use crate::dom::event::Event;
use crate::dom::eventtarget::EventTarget;
use crate::dom::globalscope::GlobalScope;
use crate::dom::html::htmlareaelement::HTMLAreaElement;
use crate::dom::html::htmlelement::HTMLElement;
use crate::dom::html::htmlformelement::{FormControl, HTMLFormElement};
use crate::dom::html::htmlmapelement::HTMLMapElement;
use crate::dom::html::htmlpictureelement::HTMLPictureElement;
use crate::dom::iterators::ShadowIncluding;
use crate::dom::mouseevent::MouseEvent;
use crate::dom::node::virtualmethods::VirtualMethods;
use crate::dom::node::{BindContext, MoveContext, Node, NodeDamage, NodeTraits, UnbindContext};
use crate::dom::performance::performanceresourcetiming::InitiatorType;
use crate::dom::promise::Promise;
use crate::dom::srcset::SourceSet;
use crate::dom::window::Window;
use crate::dom::{RootedPromise, TracedPromise};
use crate::event_loop::document_loader::{LoadBlocker, LoadType};
use crate::event_loop::script_thread::ScriptThread;
use crate::fetch::fetch::{RequestWithGlobalScope, create_a_potential_cors_request};
use crate::fetch::network_listener::{self, FetchResponseListener, ResourceTimingListener};
use crate::realms::enter_auto_realm;
use crate::runtime::job_queue::MicrotaskRunnable;

/// <https://html.spec.whatwg.org/multipage/#img-req-state>
#[derive(Clone, Copy, Default, JSTraceable, MallocSizeOf)]
enum State {
    #[default]
    Unavailable,
    PartiallyAvailable,
    CompletelyAvailable,
    Broken,
}

#[derive(Clone, Copy, JSTraceable, MallocSizeOf)]
enum ImageRequestPhase {
    Pending,
    Current,
}

/// <https://html.spec.whatwg.org/multipage/#image-request>
#[derive(Default, JSTraceable, MallocSizeOf)]
#[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)]
struct ImageRequest {
    state: State,
    #[no_trace]
    parsed_url: Option<ServoUrl>,
    source_url: Option<USVString>,
    blocker: DomRefCell<Option<LoadBlocker>>,
    #[no_trace]
    image: Option<Image>,
    #[no_trace]
    metadata: Option<ImageMetadata>,
    #[no_trace]
    final_url: Option<ServoUrl>,
    /// The time the image became completely available, if it has.
    #[no_trace]
    load_time: Option<CrossProcessInstant>,
    current_pixel_density: Option<f64>,
}

#[dom_struct]
pub(crate) struct HTMLImageElement {
    htmlelement: HTMLElement,
    #[custom_trace]
    current_request: AtomicRefCell<Box<ImageRequest>>,
    pending_request: DomRefCell<Option<Box<ImageRequest>>>,
    form_owner: MutNullableDom<HTMLFormElement>,
    source_set: DomRefCell<SourceSet>,
    /// <https://html.spec.whatwg.org/multipage/#concept-img-dimension-attribute-source>
    /// Always non-null after construction.
    dimension_attribute_source: MutNullableDom<Element>,
    /// <https://html.spec.whatwg.org/multipage/#last-selected-source>
    last_selected_source: DomRefCell<Option<USVString>>,
    image_decode_promises: DomRefCell<Vec<TracedPromise>>,
    /// Line number this element was created on
    line_number: u64,
    image_request: Cell<ImageRequestPhase>,
    generation: Cell<u32>,
}

impl HTMLImageElement {
    /// <https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument>
    pub(crate) fn is_usable(&self) -> Fallible<bool> {
        // If image has an intrinsic width or intrinsic height (or both) equal to zero, then return bad.
        if let Some(image) = &self.current_request.borrow().image {
            let intrinsic_size = image.metadata();
            if intrinsic_size.width == 0 || intrinsic_size.height == 0 {
                return Ok(false);
            }
        }

        match self.current_request.borrow().state {
            // If image's current request's state is broken, then throw an "InvalidStateError" DOMException.
            State::Broken => Err(Error::InvalidState(Some(
                "Image element's state is broken".into(),
            ))),
            State::CompletelyAvailable => Ok(true),
            // If image is not fully decodable, then return bad.
            State::PartiallyAvailable | State::Unavailable => Ok(false),
        }
    }

    pub(crate) fn image_data(&self) -> Option<Image> {
        self.current_request.borrow().image.clone()
    }

    /// Gets the copy of the raster image data.
    pub(crate) fn get_raster_image_data(&self) -> Option<Snapshot> {
        let Some(raster_image) = self.image_data()?.as_raster_image() else {
            warn!("Vector image is not supported as raster image source");
            return None;
        };
        Some(raster_image.as_snapshot())
    }
}

/// The context required for asynchronously loading an external image.
struct ImageContext {
    /// Reference to the script thread image cache.
    image_cache: Arc<dyn ImageCache>,
    /// Indicates whether the request failed, and why
    status: Result<(), NetworkError>,
    /// The cache ID for this request.
    id: PendingImageId,
    /// Used to mark abort
    aborted: bool,
    url: ServoUrl,
    element: Trusted<HTMLImageElement>,
}

impl FetchResponseListener for ImageContext {
    fn should_invoke(&self) -> bool {
        !self.aborted
    }

    fn process_request_body(&mut self, _: &GlobalScope, _: RequestId) {}

    fn process_response(
        &mut self,
        _: &mut JSContext,
        _: &GlobalScope,
        request_id: RequestId,
        metadata: Result<FetchMetadata, NetworkError>,
    ) {
        debug!("got {:?} for {:?}", metadata.as_ref().map(|_| ()), self.url);
        self.image_cache.notify_pending_response(
            self.id,
            FetchResponseMsg::ProcessResponse(request_id, metadata.clone()),
        );

        let metadata: Option<Metadata> = metadata.ok().map(Into::into);

        // Step 14.5 of https://html.spec.whatwg.org/multipage/#img-environment-changes
        if let Some(metadata) = metadata.as_ref() &&
            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 = true;
            }
        }

        // The HTTP status code is ignored here. Ok NetworkError is treated
        // as real error
        self.status = match metadata.as_ref().map(|m| m.status.clone()) {
            None => Err(NetworkError::ResourceLoadError(
                "No http status code received".to_owned(),
            )),
            Some(_) => Ok(()),
        };
    }

    fn process_response_chunk(
        &mut self,
        _: &mut JSContext,
        _: &GlobalScope,
        request_id: RequestId,
        payload: Bytes,
    ) {
        if self.status.is_ok() {
            self.image_cache.notify_pending_response(
                self.id,
                FetchResponseMsg::ProcessResponseChunk(request_id, payload),
            );
        }
    }

    fn process_response_eof(
        self,
        cx: &mut JSContext,
        global: &GlobalScope,
        request_id: RequestId,
        response: Result<(), NetworkError>,
        timing: ResourceFetchTiming,
    ) {
        self.image_cache.notify_pending_response(
            self.id,
            FetchResponseMsg::ProcessResponseEOF(request_id, response.clone(), timing.clone()),
        );
        network_listener::submit_timing(cx, global, &self, &response, &timing);
    }

    fn process_csp_violations(
        &mut self,
        cx: &mut JSContext,
        global: &GlobalScope,
        _request_id: RequestId,
        violations: Vec<Violation>,
    ) {
        let elem = self.element.root();
        let source_position = elem
            .upcast::<Element>()
            .compute_source_position(elem.line_number as u32);
        global.report_csp_violations(cx, violations, None, Some(source_position));
    }

    fn process_content_length(&mut self, request_id: RequestId, size: usize) {
        self.image_cache.notify_pending_response(
            self.id,
            FetchResponseMsg::ProcessContentLength(request_id, size),
        );
    }
}

impl ResourceTimingListener for ImageContext {
    fn resource_timing_information(&self) -> (InitiatorType, ServoUrl) {
        (InitiatorType::LocalName("img".into()), self.url.clone())
    }
}

#[expect(non_snake_case)]
impl HTMLImageElement {
    /// Update the current image with a valid URL.
    fn fetch_image(&self, cx: &mut JSContext, img_url: &ServoUrl) {
        let window = self.owner_window_unrooted(cx.no_gc());

        let cache_result = window.image_cache().get_cached_image_status(
            img_url.clone(),
            window.origin().immutable(),
            cors_setting_for_element(self.upcast()),
        );

        match cache_result {
            ImageCacheResult::Available(ImageOrMetadataAvailable::ImageAvailable {
                image,
                url,
            }) => self.process_image_response(cx, ImageResponse::Loaded(image, url)),
            ImageCacheResult::Available(ImageOrMetadataAvailable::MetadataAvailable(
                metadata,
                id,
            )) => {
                self.process_image_response(cx, ImageResponse::MetadataLoaded(metadata));
                self.register_image_cache_callback(id, ChangeType::Element);
            },
            ImageCacheResult::Pending(id) => {
                self.register_image_cache_callback(id, ChangeType::Element);
            },
            ImageCacheResult::ReadyForRequest(id) => {
                self.fetch_request(img_url, id);
                self.register_image_cache_callback(id, ChangeType::Element);
            },
            ImageCacheResult::FailedToLoadOrDecode => {
                self.process_image_response(cx, ImageResponse::FailedToLoadOrDecode)
            },
        };
    }

    fn register_image_cache_callback(&self, id: PendingImageId, change_type: ChangeType) {
        let trusted_node = Trusted::new(self);
        let generation = self.generation_id();
        let window = self.owner_window();
        let callback = window.register_image_cache_listener(id, move |response, _| {
            let trusted_node = trusted_node.clone();
            let window = trusted_node.root().owner_window();
            let callback_type = change_type.clone();

            window
                .as_global_scope()
                .task_manager()
                .networking_task_source()
                .queue(task!(process_image_response: move |cx| {
                let element = trusted_node.root();

                // Ignore any image response for a previous request that has been discarded.
                if generation != element.generation_id() {
                    return;
                }

                match callback_type {
                    ChangeType::Element => {
                        element.process_image_response(cx, response.response);
                    }
                    ChangeType::Environment { selected_source, selected_pixel_density } => {
                        element.process_image_response_for_environment_change(
                            cx, response.response, selected_source, generation, selected_pixel_density
                        );
                    }
                }
            }));
        });

        window.image_cache().add_listener(ImageLoadListener::new(
            callback,
            window.pipeline_id(),
            id,
        ));
    }

    fn fetch_request(&self, img_url: &ServoUrl, id: PendingImageId) {
        let document = self.owner_document();
        let window = self.owner_window();

        let context = ImageContext {
            image_cache: window.image_cache(),
            status: Ok(()),
            id,
            aborted: false,
            element: Trusted::new(self),
            url: img_url.clone(),
        };

        // https://html.spec.whatwg.org/multipage/#update-the-image-data steps 17-20
        // This function is also used to prefetch an image in `script::dom::servoparser::prefetch`.
        let global = document.global();
        let mut request = create_a_potential_cors_request(
            Some(window.webview_id()),
            img_url.clone(),
            Destination::Image,
            cors_setting_for_element(self.upcast()),
            None,
            global.get_referrer(),
        )
        .with_global_scope(&global)
        .referrer_policy(referrer_policy_for_element(self.upcast()));

        if self.uses_srcset_or_picture() {
            request = request.initiator(Initiator::ImageSet);
        }

        // This is a background load because the load blocker already fulfills the
        // purpose of delaying the document's load event.
        document.fetch_background(request, context);
    }

    // Steps common to when an image has been loaded.
    fn handle_loaded_image(&self, cx: &mut JSContext, image: Image, url: ServoUrl) {
        {
            let mut current_request = self.current_request.safe_borrow_mut(cx.no_gc());
            current_request.metadata = Some(image.metadata());
            current_request.final_url = Some(url);
            current_request.image = Some(image);
            current_request.state = State::CompletelyAvailable;
            current_request.load_time = Some(CrossProcessInstant::now());
        }

        self.pending_request.safe_borrow_mut(cx.no_gc()).take();

        LoadBlocker::terminate(cx, &self.current_request.borrow().blocker);
        // Mark the node dirty
        self.upcast::<Node>().dirty(cx.no_gc(), NodeDamage::Other);
        self.resolve_image_decode_promises(cx);
    }

    fn fire_event_including_host(&self, cx: &mut JSContext, event: Atom) {
        // https://html.spec.whatwg.org/multipage/#image-button-state-(type=image)
        // This is the case for an `<input type="image">` where in the shadow
        // tree of that `<input>` element we use an `<img>`
        let node = self.upcast::<Node>();
        if node.is_in_ua_widget() &&
            let Some(containing_shadow_root) = node.containing_shadow_root()
        {
            containing_shadow_root
                .Host()
                .upcast::<EventTarget>()
                .fire_event(cx, event);
        } else {
            self.upcast::<EventTarget>().fire_event(cx, event);
        }
    }

    /// <https://html.spec.whatwg.org/multipage/#update-the-image-data>
    fn process_image_response(&self, cx: &mut JSContext, image: ImageResponse) {
        // Step 27. As soon as possible, jump to the first applicable entry from the following list:

        // TODO => "If the resource type is multipart/x-mixed-replace"

        // => "If the resource type and data corresponds to a supported image format ...""
        let (trigger_image_load, trigger_image_error) = match (image, self.image_request.get()) {
            (ImageResponse::Loaded(image, url), ImageRequestPhase::Current) => {
                self.handle_loaded_image(cx, image, url);
                (true, false)
            },
            (ImageResponse::Loaded(image, url), ImageRequestPhase::Pending) => {
                self.abort_request(cx, State::Unavailable, ImageRequestPhase::Pending);
                self.image_request.set(ImageRequestPhase::Current);
                self.handle_loaded_image(cx, image, url);
                (true, false)
            },
            (ImageResponse::MetadataLoaded(meta), ImageRequestPhase::Current) => {
                // Otherwise, if the user agent is able to determine image request's image's width
                // and height, and image request is the current request, prepare image request for
                // presentation given the img element and set image request's state to partially
                // available.
                self.current_request.safe_borrow_mut(cx.no_gc()).state = State::PartiallyAvailable;
                self.current_request.safe_borrow_mut(cx.no_gc()).metadata = Some(meta);
                (false, false)
            },
            (ImageResponse::MetadataLoaded(_), ImageRequestPhase::Pending) => {
                // If the user agent is able to determine image request's image's width and height,
                // and image request is the pending request, set image request's state to partially
                // available.
                self.pending_request
                    .safe_borrow_mut(cx.no_gc())
                    .get_or_insert_default()
                    .state = State::PartiallyAvailable;
                (false, false)
            },
            (ImageResponse::FailedToLoadOrDecode, ImageRequestPhase::Current) => {
                // Otherwise, if the user agent is able to determine that image request's image is
                // corrupted in some fatal way such that the image dimensions cannot be obtained,
                // and image request is the current request:

                // Step 1. Abort the image request for image request.
                self.abort_request(cx, State::Broken, ImageRequestPhase::Current);

                self.load_broken_image_icon(cx.no_gc());

                // Step 2. If maybe omit events is not set or previousURL is not equal to urlString,
                // then fire an event named error at the img element.
                // TODO: Add missing `maybe omit events` flag and previousURL.
                (false, true)
            },
            (ImageResponse::FailedToLoadOrDecode, ImageRequestPhase::Pending) => {
                // Otherwise, if the user agent is able to determine that image request's image is
                // corrupted in some fatal way such that the image dimensions cannot be obtained,
                // and image request is the pending request:

                // Step 1. Abort the image request for the current request and the pending request.
                self.abort_request(cx, State::Broken, ImageRequestPhase::Current);
                self.abort_request(cx, State::Unavailable, ImageRequestPhase::Pending);

                // Step 2. Upgrade the pending request to the current request.
                // This is written this way as otherwise crown complains
                if self.pending_request.borrow().is_some() {
                    *self.current_request.safe_borrow_mut(cx.no_gc()) = self
                        .pending_request
                        .safe_borrow_mut(cx.no_gc())
                        .take()
                        .unwrap();
                }
                self.image_request.set(ImageRequestPhase::Current);

                // Step 3. Set the current request's state to broken.
                self.current_request.safe_borrow_mut(cx.no_gc()).state = State::Broken;

                self.load_broken_image_icon(cx.no_gc());

                // Step 4. Fire an event named error at the img element.
                (false, true)
            },
        };

        // Fire image.onload and loadend
        if trigger_image_load {
            self.fire_event_including_host(cx, atom!("load"));
            // TODO: https://html.spec.whatwg.org/multipage/#fire-a-progress-event-or-event
            self.upcast::<EventTarget>()
                .fire_event(cx, atom!("loadend"));
        }

        // Fire image.onerror
        if trigger_image_error {
            self.fire_event_including_host(cx, atom!("error"));
            self.upcast::<EventTarget>()
                .fire_event(cx, atom!("loadend"));
        }
    }

    /// The response part of
    /// <https://html.spec.whatwg.org/multipage/#reacting-to-environment-changes>.
    fn process_image_response_for_environment_change(
        &self,
        cx: &mut JSContext,
        image: ImageResponse,
        selected_source: USVString,
        generation: u32,
        selected_pixel_density: f64,
    ) {
        match image {
            ImageResponse::Loaded(image, url) => {
                if let Some(pending_request) =
                    self.pending_request.safe_borrow_mut(cx.no_gc()).as_mut()
                {
                    pending_request.metadata = Some(image.metadata());
                    pending_request.final_url = Some(url);
                    pending_request.image = Some(image);
                    pending_request.load_time = Some(CrossProcessInstant::now());
                }
                self.finish_reacting_to_environment_change(
                    selected_source,
                    generation,
                    selected_pixel_density,
                );
            },
            ImageResponse::FailedToLoadOrDecode => {
                // > Step 15.6: If response's unsafe response is a network error or if the
                // > image format is unsupported (as determined by applying the image
                // > sniffing rules, again as mentioned earlier), or if the user agent is
                // > able to determine that image request's image is corrupted in some fatal
                // > way such that the image dimensions cannot be obtained, or if the
                // > resource type is multipart/x-mixed-replace, then set the pending
                // > request to null and abort these steps.
                self.abort_request(cx, State::Unavailable, ImageRequestPhase::Pending);
            },
            ImageResponse::MetadataLoaded(meta) => {
                self.pending_request
                    .safe_borrow_mut(cx.no_gc())
                    .get_or_insert_default()
                    .metadata = Some(meta);
            },
        };
    }

    /// <https://html.spec.whatwg.org/multipage/#abort-the-image-request>
    fn abort_request(&self, cx: &mut JSContext, state: State, request: ImageRequestPhase) {
        match request {
            ImageRequestPhase::Current => {
                LoadBlocker::terminate(cx, &self.current_request.borrow().blocker);

                let mut request = self.current_request.safe_borrow_mut(cx);
                request.state = state;
                request.image = None;
                request.metadata = None;
                request.current_pixel_density = None;
            },
            ImageRequestPhase::Pending => {
                if let Some(pending_request) = &*self.pending_request.borrow() {
                    LoadBlocker::terminate(cx, &pending_request.blocker);
                }
                self.pending_request.safe_borrow_mut(cx.no_gc()).take();
            },
        };

        if matches!(state, State::Broken) {
            self.reject_image_decode_promises(cx);
        } else if matches!(state, State::CompletelyAvailable) {
            self.resolve_image_decode_promises(cx);
        }
    }

    fn init_image_request(
        &self,
        cx: &mut JSContext,
        request: &AtomicRefCell<Box<ImageRequest>>,
        url: &ServoUrl,
        src: &USVString,
    ) {
        {
            let mut request = request.safe_borrow_mut(cx.no_gc());
            request.parsed_url = Some(url.clone());
            request.source_url = Some(src.clone());
            request.image = None;
            request.metadata = None;
        }
        let document = self.owner_document();
        LoadBlocker::terminate(cx, &request.borrow().blocker);
        *request
            .safe_borrow_mut(cx.no_gc())
            .blocker
            .safe_borrow_mut(cx.no_gc()) =
            Some(LoadBlocker::new(&document, LoadType::Image(url.clone())));
    }

    fn init_pending_image_request(
        &self,
        cx: &mut JSContext,
        request: &DomRefCell<Option<Box<ImageRequest>>>,
        url: &ServoUrl,
        src: &USVString,
    ) {
        {
            let mut request = request.safe_borrow_mut(cx);
            let request = request.get_or_insert_default();
            request.parsed_url = Some(url.clone());
            request.source_url = Some(src.clone());
            request.image = None;
            request.metadata = None;
        }
        let document = self.owner_document();
        LoadBlocker::terminate(
            cx,
            &request
                .borrow()
                .as_ref()
                .expect("Just created a request")
                .blocker,
        );
        *request
            .safe_borrow_mut(cx)
            .as_mut()
            .expect("Just created a request")
            .blocker
            .safe_borrow_mut(cx.no_gc()) =
            Some(LoadBlocker::new(&document, LoadType::Image(url.clone())));
    }

    /// <https://html.spec.whatwg.org/multipage/#update-the-image-data>
    fn prepare_image_request(
        &self,
        cx: &mut JSContext,
        selected_source: &USVString,
        selected_pixel_density: f64,
        image_url: &ServoUrl,
    ) {
        match self.image_request.get() {
            ImageRequestPhase::Pending => {
                // Step 14. If the pending request is not null and urlString is the same as the
                // pending request's current URL, then return.
                if self
                    .pending_request
                    .borrow()
                    .as_ref()
                    .and_then(|pending_request| pending_request.parsed_url.as_ref())
                    .is_some_and(|parsed_url| *parsed_url == *image_url)
                {
                    return;
                }
            },
            ImageRequestPhase::Current => {
                // Step 16. Abort the image request for the pending request.
                self.abort_request(cx, State::Unavailable, ImageRequestPhase::Pending);

                // Step 17. Set image request to a new image request whose current URL is urlString.
                let (current_request_url, current_request_state) = {
                    let current_request = self.current_request.borrow();
                    (current_request.parsed_url.clone(), current_request.state)
                };

                match (current_request_url, current_request_state) {
                    (Some(parsed_url), State::PartiallyAvailable) => {
                        // Step 15. If urlString is the same as the current request's current URL
                        // and the current request's state is partially available, then abort the
                        // image request for the pending request, queue an element task on the DOM
                        // manipulation task source given the img element to restart the animation
                        // if restart animation is set, and return.
                        if parsed_url == *image_url {
                            // TODO: queue a task to restart animation, if restart-animation is set
                            return;
                        }

                        // Step 18. If the current request's state is unavailable or broken, then
                        // set the current request to image request. Otherwise, set the pending
                        // request to image request.
                        self.image_request.set(ImageRequestPhase::Pending);
                        self.init_pending_image_request(
                            cx,
                            &self.pending_request,
                            image_url,
                            selected_source,
                        );
                        self.pending_request
                            .safe_borrow_mut(cx.no_gc())
                            .as_mut()
                            .expect("Just created a pending request")
                            .current_pixel_density = Some(selected_pixel_density);
                    },
                    (_, State::Broken) | (_, State::Unavailable) => {
                        // Step 18. If the current request's state is unavailable or broken, then
                        // set the current request to image request. Otherwise, set the pending
                        // request to image request.
                        self.init_image_request(
                            cx,
                            &self.current_request,
                            image_url,
                            selected_source,
                        );
                        self.current_request
                            .safe_borrow_mut(cx.no_gc())
                            .current_pixel_density = Some(selected_pixel_density);
                        self.reject_image_decode_promises(cx);
                    },
                    (_, _) => {
                        // Step 18. If the current request's state is unavailable or broken, then
                        // set the current request to image request. Otherwise, set the pending
                        // request to image request.
                        self.image_request.set(ImageRequestPhase::Pending);
                        self.init_pending_image_request(
                            cx,
                            &self.pending_request,
                            image_url,
                            selected_source,
                        );
                        self.pending_request
                            .safe_borrow_mut(cx.no_gc())
                            .as_mut()
                            .expect("Just created a pending image request")
                            .current_pixel_density = Some(selected_pixel_density);
                    },
                }
            },
        }

        self.fetch_image(cx, image_url);
    }

    /// <https://html.spec.whatwg.org/multipage/#update-the-image-data>
    fn update_the_image_data_sync_steps(&self, cx: &mut JSContext) {
        // Step 10. Let selected source and selected pixel density be the URL and pixel density that
        // results from selecting an image source, respectively.
        let Some((selected_source, selected_pixel_density)) = self
            .source_set
            .safe_borrow_mut(cx.no_gc())
            .select_image_source(cx.no_gc(), self.upcast::<Element>())
        else {
            // Step 11. If selected source is null, then:

            // Step 11.1. Set the current request's state to broken, abort the image request for the
            // current request and the pending request, and set the pending request to null.
            self.abort_request(cx, State::Broken, ImageRequestPhase::Current);
            self.abort_request(cx, State::Unavailable, ImageRequestPhase::Pending);
            self.image_request.set(ImageRequestPhase::Current);

            // Step 11.2. Queue an element task on the DOM manipulation task source given the img
            // element and the following steps:
            let this = Trusted::new(self);

            self.owner_global().task_manager().dom_manipulation_task_source().queue(
                task!(image_null_source_error: move |cx| {
                    let this = this.root();

                    // Step 11.2.1. Change the current request's current URL to the empty string.
                    {
                        let mut current_request =
                            this.current_request.safe_borrow_mut(cx.no_gc());
                        current_request.source_url = None;
                        current_request.parsed_url = None;
                    }

                    // Step 11.2.2. If all of the following are true:
                    // the element has a src attribute or it uses srcset or picture; and
                    // maybe omit events is not set or previousURL is not the empty string,
                    // then fire an event named error at the img element.
                    // TODO: Add missing `maybe omit events` flag and previousURL.
                    let has_src_attribute = this.upcast::<Element>().has_attribute(&local_name!("src"));

                    if has_src_attribute || this.uses_srcset_or_picture() {
                        this.upcast::<EventTarget>().fire_event(cx, atom!("error"));
                    }
                }));

            // Step 11.2.3. Return.
            return;
        };

        // Step 12. Let urlString be the result of encoding-parsing-and-serializing a URL given
        // selected source, relative to the element's node document.
        let Ok(image_url) = self.owner_document().encoding_parse_a_url(&selected_source) else {
            // Step 13. If urlString is failure, then:

            // Step 13.1. Abort the image request for the current request and the pending request.
            // Step 13.2. Set the current request's state to broken.
            self.abort_request(cx, State::Broken, ImageRequestPhase::Current);
            self.abort_request(cx, State::Unavailable, ImageRequestPhase::Pending);

            // Step 13.3. Set the pending request to null.
            self.image_request.set(ImageRequestPhase::Current);

            // Step 13.4. Queue an element task on the DOM manipulation task source given the img
            // element and the following steps:
            let this = Trusted::new(self);

            self.owner_global()
                .task_manager()
                .dom_manipulation_task_source()
                .queue(task!(image_selected_source_error: move |cx| {
                    let this = this.root();

                    // Step 13.4.1. Change the current request's current URL to selected source.
                    {
                        let mut current_request =
                            this.current_request.safe_borrow_mut(cx.no_gc());
                        current_request.source_url = Some(selected_source);
                        current_request.parsed_url = None;
                    }

                    // Step 13.4.2. If maybe omit events is not set or previousURL is not equal to
                    // selected source, then fire an event named error at the img element.
                    // TODO: Add missing `maybe omit events` flag and previousURL.
                    this.upcast::<EventTarget>().fire_event(cx, atom!("error"));
                }));

            // Step 13.5. Return.
            return;
        };

        self.prepare_image_request(cx, &selected_source, selected_pixel_density, &image_url);
    }

    /// <https://html.spec.whatwg.org/multipage/#update-the-image-data>
    pub(crate) fn update_the_image_data(&self, cx: &mut JSContext) {
        // Cancel any outstanding tasks that were queued before.
        self.generation.set(self.generation.get() + 1);

        // Step 1. If the element's node document is not fully active, then:
        if !self.owner_document().is_fully_active() {
            // TODO Step 1.1. Continue running this algorithm in parallel.
            // TODO Step 1.2. Wait until the element's node document is fully active.
            // TODO Step 1.3. If another instance of this algorithm for this img element was started after
            // this instance (even if it aborted and is no longer running), then return.
            // TODO Step 1.4. Queue a microtask to continue this algorithm.
        }

        // TODO(https://github.com/whatwg/html/issues/8207): Add spec step once spec is aligned
        // with implementations
        self.source_set
            .safe_borrow_mut(cx.no_gc())
            .update_source_set(cx.no_gc(), self.upcast::<Element>());

        // Step 2. If the user agent cannot support images, or its support for images has been
        // disabled, then abort the image request for the current request and the pending request,
        // set the current request's state to unavailable, set the pending request to null, and
        // return.
        // Nothing specific to be done here since the user agent supports image processing.

        // Always first set the current request to unavailable, ensuring img.complete is false.
        // <https://html.spec.whatwg.org/multipage/#when-to-obtain-images>
        self.current_request.safe_borrow_mut(cx.no_gc()).state = State::Unavailable;

        // TODO Step 3. Let previousURL be the current request's current URL.

        // Step 4. Let selected source be null and selected pixel density be undefined.
        let mut selected_source = None;
        let mut selected_pixel_density = None;

        // Step 5. If the element does not use srcset or picture and it has a src attribute
        // specified whose value is not the empty string, then set selected source to the value of
        // the element's src attribute and set selected pixel density to 1.0.
        let src = self
            .upcast::<Element>()
            .get_string_attribute(&local_name!("src"));

        if !self.uses_srcset_or_picture() && !src.is_empty() {
            selected_source = Some(USVString(String::from(src)));
            selected_pixel_density = Some(1_f64);
        };

        // Step 6. Set the element's last selected source to selected source.
        self.last_selected_source
            .safe_borrow_mut(cx.no_gc())
            .clone_from(&selected_source);

        // Step 7. If selected source is not null, then:
        if let Some(selected_source) = selected_source {
            // Step 7.1. Let urlString be the result of encoding-parsing-and-serializing a URL given
            // selected source, relative to the element's node document.
            // Step 7.2. If urlString is failure, then abort this inner set of steps.
            if let Ok(image_url) = self.owner_document().encoding_parse_a_url(&selected_source) {
                // Step 7.3. Let key be a tuple consisting of urlString, the img element's
                // crossorigin attribute's mode, and, if that mode is not No CORS, the node
                // document's origin.
                let window = self.owner_window();
                let response = window.image_cache().get_image(
                    image_url.clone(),
                    window.origin().immutable().clone(),
                    cors_setting_for_element(self.upcast()),
                );

                // Step 7.4. If the list of available images contains an entry for key, then:
                if let Some(image) = response {
                    // TODO Step 7.4.1. Set the ignore higher-layer caching flag for that entry.

                    // Step 7.4.2. Abort the image request for the current request and the pending
                    // request.
                    self.abort_request(cx, State::CompletelyAvailable, ImageRequestPhase::Current);
                    self.abort_request(cx, State::Unavailable, ImageRequestPhase::Pending);

                    // Step 7.4.3. Set the pending request to null.
                    self.image_request.set(ImageRequestPhase::Current);

                    // Step 7.4.4. Set the current request to a new image request whose image data
                    // is that of the entry and whose state is completely available.
                    let mut current_request = self.current_request.safe_borrow_mut(cx.no_gc());
                    current_request.metadata = Some(image.metadata());
                    current_request.image = Some(image);
                    current_request.final_url = Some(image_url.clone());

                    // TODO Step 7.4.5. Prepare the current request for presentation given the img
                    // element.
                    self.upcast::<Node>().dirty(cx.no_gc(), NodeDamage::Other);

                    // Step 7.4.6. Set the current request's current pixel density to selected pixel
                    // density.
                    current_request.current_pixel_density = selected_pixel_density;

                    // Step 7.4.7. Queue an element task on the DOM manipulation task source given
                    // the img element and the following steps:
                    let this = Trusted::new(self);

                    self.owner_global()
                        .task_manager()
                        .dom_manipulation_task_source()
                        .queue(task!(image_load_event: move |cx| {
                            let this = this.root();

                            // TODO Step 7.4.7.1. If restart animation is set, then restart the
                            // animation.

                            // Step 7.4.7.2. Set the current request's current URL to urlString.
                            {
                                let mut current_request =
                                    this.current_request.safe_borrow_mut(cx.no_gc());
                                current_request.source_url = Some(selected_source);
                                current_request.parsed_url = Some(image_url);
                                current_request.load_time = Some(CrossProcessInstant::now());
                            }

                            // Step 7.4.7.3. If maybe omit events is not set or previousURL is not
                            // equal to urlString, then fire an event named load at the img element.
                            // TODO: Add missing `maybe omit events` flag and previousURL.
                            this.fire_event_including_host(cx, atom!("load"));
                        }));

                    // Step 7.4.8. Abort the update the image data algorithm.
                    return;
                }
            }
        }

        // Step 8. Queue a microtask to perform the rest of this algorithm, allowing the task that
        // invoked this algorithm to continue.
        let task = ImageElementMicrotask::UpdateImageData {
            elem: Dom::from_ref(self),
            generation: self.generation.get(),
        };

        ScriptThread::await_stable_state(cx, Box::new(task));
    }

    /// <https://html.spec.whatwg.org/multipage/#img-environment-changes>
    pub(crate) fn react_to_environment_changes(&self, cx: &JSContext) {
        // Step 1. Await a stable state.
        let task = ImageElementMicrotask::EnvironmentChanges {
            elem: Dom::from_ref(self),
            generation: self.generation.get(),
        };

        ScriptThread::await_stable_state(cx, Box::new(task));
    }

    /// <https://html.spec.whatwg.org/multipage/#img-environment-changes>
    fn react_to_environment_changes_sync_steps(&self, cx: &mut JSContext, generation: u32) {
        let document = self.owner_document();
        let has_pending_request = matches!(self.image_request.get(), ImageRequestPhase::Pending);

        // Step 2. If the img element does not use srcset or picture, its node document is not fully
        // active, it has image data whose resource type is multipart/x-mixed-replace, or its
        // pending request is not null, then return.
        if !document.is_fully_active() || !self.uses_srcset_or_picture() || has_pending_request {
            return;
        }

        // Step 3. Let selected source and selected pixel density be the URL and pixel density that
        // results from selecting an image source, respectively.
        let Some((selected_source, selected_pixel_density)) = self
            .source_set
            .safe_borrow_mut(cx.no_gc())
            .select_image_source(cx.no_gc(), self.upcast::<Element>())
        else {
            // Step 4. If selected source is null, then return.
            return;
        };

        // Step 5. If selected source and selected pixel density are the same as the element's last
        // selected source and current pixel density, then return.
        let mut same_selected_source = self
            .last_selected_source
            .borrow()
            .as_ref()
            .is_some_and(|source| *source == selected_source);

        // There are missing steps for the element's last selected source in specification so let's
        // check the current request's current URL as well.
        // <https://github.com/whatwg/html/issues/5060>
        same_selected_source = same_selected_source ||
            self.current_request
                .borrow()
                .source_url
                .as_ref()
                .is_some_and(|source| *source == selected_source);

        let same_selected_pixel_density = self
            .current_request
            .borrow()
            .current_pixel_density
            .is_some_and(|pixel_density| pixel_density == selected_pixel_density);

        if same_selected_source && same_selected_pixel_density {
            return;
        }

        // Step 6. Let urlString be the result of encoding-parsing-and-serializing a URL given
        // selected source, relative to the element's node document.
        // Step 7. If urlString is failure, then return.
        let Ok(image_url) = document.encoding_parse_a_url(&selected_source) else {
            return;
        };

        // Step 13. Set the element's pending request to image request.
        self.image_request.set(ImageRequestPhase::Pending);
        self.init_pending_image_request(cx, &self.pending_request, &image_url, &selected_source);

        // Step 15. If the list of available images contains an entry for key, then set image
        // request's image data to that of the entry. Continue to the next step.
        let window = self.owner_window();
        let cache_result = window.image_cache().get_cached_image_status(
            image_url.clone(),
            window.origin().immutable(),
            cors_setting_for_element(self.upcast()),
        );

        let change_type = ChangeType::Environment {
            selected_source: selected_source.clone(),
            selected_pixel_density,
        };

        match cache_result {
            ImageCacheResult::Available(ImageOrMetadataAvailable::ImageAvailable { .. }) => {
                self.finish_reacting_to_environment_change(
                    selected_source,
                    generation,
                    selected_pixel_density,
                );
            },
            ImageCacheResult::Available(ImageOrMetadataAvailable::MetadataAvailable(m, id)) => {
                self.process_image_response_for_environment_change(
                    cx,
                    ImageResponse::MetadataLoaded(m),
                    selected_source,
                    generation,
                    selected_pixel_density,
                );
                self.register_image_cache_callback(id, change_type);
            },
            ImageCacheResult::FailedToLoadOrDecode => {
                self.process_image_response_for_environment_change(
                    cx,
                    ImageResponse::FailedToLoadOrDecode,
                    selected_source,
                    generation,
                    selected_pixel_density,
                );
            },
            ImageCacheResult::ReadyForRequest(id) => {
                self.fetch_request(&image_url, id);
                self.register_image_cache_callback(id, change_type);
            },
            ImageCacheResult::Pending(id) => {
                self.register_image_cache_callback(id, change_type);
            },
        }
    }

    /// <https://html.spec.whatwg.org/multipage/#dom-img-decode>
    fn react_to_decode_image_sync_steps(&self, cx: &mut JSContext, promise: &RootedPromise) {
        // Step 2.2. If any of the following are true: this's node document is not fully active; or
        // this's current request's state is broken, then reject promise with an "EncodingError"
        // DOMException.
        if !self.owner_document().is_fully_active() ||
            matches!(self.current_request.borrow().state, State::Broken)
        {
            promise.reject_error(cx, Error::Encoding(Some("Image element's owner document is not fully active or image element's request is broken".into())));
        } else if matches!(
            self.current_request.borrow().state,
            State::CompletelyAvailable
        ) {
            // this doesn't follow the spec, but it's been discussed in <https://github.com/whatwg/html/issues/4217>
            promise.resolve_native(cx, &());
        } else if matches!(self.current_request.borrow().state, State::Unavailable) &&
            self.current_request.borrow().source_url.is_none()
        {
            // Note: Despite being not explicitly stated in the specification but if current
            // request's state is unavailable and current URL is empty string (<img> without "src"
            // and "srcset" attributes) then reject promise with an "EncodingError" DOMException.
            // <https://github.com/whatwg/html/issues/11769>
            promise.reject_error(
                cx,
                Error::Encoding(Some(
                    "Image element does not provide `src` or `srcset` attributes".into(),
                )),
            );
        } else {
            self.image_decode_promises
                .safe_borrow_mut(cx.no_gc())
                .push(promise.to_traced());
        }
    }

    /// <https://html.spec.whatwg.org/multipage/#dom-img-decode>
    fn resolve_image_decode_promises(&self, cx: &mut JSContext) {
        if self.image_decode_promises.borrow().is_empty() {
            return;
        }

        // Step 2.3. If the decoding process completes successfully, then queue a global task on the
        // DOM manipulation task source with global to resolve promise with undefined.
        let trusted_image_decode_promises: Vec<TrustedPromise> = self
            .image_decode_promises
            .borrow()
            .iter()
            .map(|promise| TrustedPromise::from(&promise.root(cx)))
            .collect();

        self.image_decode_promises
            .safe_borrow_mut(cx.no_gc())
            .clear();

        self.owner_global()
            .task_manager()
            .dom_manipulation_task_source()
            .queue(task!(fulfill_image_decode_promises: move |cx| {
                for trusted_promise in trusted_image_decode_promises {
                    trusted_promise.root(cx).resolve_native(cx, &());
                }
            }));
    }

    /// <https://html.spec.whatwg.org/multipage/#dom-img-decode>
    fn reject_image_decode_promises(&self, cx: &mut JSContext) {
        if self.image_decode_promises.borrow().is_empty() {
            return;
        }

        // Step 2.3. Queue a global task on the DOM manipulation task source with global to reject
        // promise with an "EncodingError" DOMException.
        let trusted_image_decode_promises: Vec<TrustedPromise> = self
            .image_decode_promises
            .borrow()
            .iter()
            .map(|promise| TrustedPromise::from(&promise.root(cx)))
            .collect();

        self.image_decode_promises
            .safe_borrow_mut(cx.no_gc())
            .clear();

        self.owner_global()
            .task_manager()
            .dom_manipulation_task_source()
            .queue(task!(reject_image_decode_promises: move |cx| {
                for trusted_promise in trusted_image_decode_promises {
                    trusted_promise.root(cx).reject_error(cx, Error::Encoding(Some("Image could not be decoded".into())));
                }
            }));
    }

    /// <https://html.spec.whatwg.org/multipage/#img-environment-changes>
    fn finish_reacting_to_environment_change(
        &self,
        selected_source: USVString,
        generation: u32,
        selected_pixel_density: f64,
    ) {
        // Step 16. Queue an element task on the DOM manipulation task source given the img element
        // and the following steps:
        let this = Trusted::new(self);

        self.owner_global()
            .task_manager()
            .dom_manipulation_task_source()
            .queue(task!(image_load_event: move |cx| {
                let this = this.root();

                // Step 16.1. If the img element has experienced relevant mutations since this
                // algorithm started, then set the pending request to null and abort these steps.
                if this.generation.get() != generation {
                    this.abort_request(cx, State::Unavailable, ImageRequestPhase::Pending);
                    this.image_request.set(ImageRequestPhase::Current);
                    return;
                }

                // Step 16.2. Set the img element's last selected source to selected source and the
                // img element's current pixel density to selected pixel density.
                *this.last_selected_source.safe_borrow_mut(cx.no_gc()) = Some(selected_source);


                if let Some(pending_request) = &mut *this.pending_request.safe_borrow_mut(cx.no_gc()) {
                    // Step 16.3. Set the image request's state to completely available.
                    pending_request.state = State::CompletelyAvailable;

                    pending_request.current_pixel_density = Some(selected_pixel_density);

                    // Step 16.4. Add the image to the list of available images using the key key,
                    // with the ignore higher-layer caching flag set.
                    // Already a part of the list of available images due to Step 15.
                    // Step 16.5. Upgrade the pending request to the current request.
                } else {
                    log::error!("Pending request was null");
                    return
                }
                *this.current_request.safe_borrow_mut(cx.no_gc()) = this.pending_request.safe_borrow_mut(cx.no_gc()).take().expect("Should have a pending request");


                this.abort_request(cx, State::Unavailable, ImageRequestPhase::Pending);
                this.image_request.set(ImageRequestPhase::Current);

                // TODO Step 16.6. Prepare image request for presentation given the img element.
                this.upcast::<Node>().dirty(cx.no_gc(), NodeDamage::Other);

                // Step 16.7. Fire an event named load at the img element.
                this.upcast::<EventTarget>().fire_event(cx, atom!("load"));
            }));
    }

    /// <https://html.spec.whatwg.org/multipage/#use-srcset-or-picture>
    fn uses_srcset_or_picture(&self) -> bool {
        let element = self.upcast::<Element>();

        let has_srcset_attribute = element.has_attribute(&local_name!("srcset"));
        let has_parent_picture = element
            .upcast::<Node>()
            .GetParentElement()
            .is_some_and(|parent| parent.is::<HTMLPictureElement>());
        has_srcset_attribute || has_parent_picture
    }

    fn new_inherited(
        local_name: LocalName,
        prefix: Option<Prefix>,
        document: &Document,
        creator: ElementCreator,
    ) -> HTMLImageElement {
        HTMLImageElement {
            htmlelement: HTMLElement::new_inherited(local_name, prefix, document),
            image_request: Cell::new(ImageRequestPhase::Current),
            current_request: AtomicRefCell::new(Box::new(ImageRequest {
                state: State::Unavailable,
                parsed_url: None,
                source_url: None,
                image: None,
                metadata: None,
                blocker: DomRefCell::new(None),
                final_url: None,
                load_time: None,
                current_pixel_density: None,
            })),
            pending_request: DomRefCell::new(None),
            form_owner: Default::default(),
            generation: Default::default(),
            source_set: DomRefCell::new(SourceSet::new()),
            dimension_attribute_source: Default::default(),
            last_selected_source: DomRefCell::new(None),
            image_decode_promises: DomRefCell::new(vec![]),
            line_number: creator.return_line_number(),
        }
    }

    pub(crate) fn new(
        cx: &mut JSContext,
        local_name: LocalName,
        prefix: Option<Prefix>,
        document: &Document,
        proto: Option<HandleObject>,
        creator: ElementCreator,
    ) -> DomRoot<HTMLImageElement> {
        let image_element = Node::reflect_node_with_proto(
            cx,
            Box::new(HTMLImageElement::new_inherited(
                local_name, prefix, document, creator,
            )),
            document,
            proto,
        );
        image_element
            .dimension_attribute_source
            .set(Some(image_element.upcast()));
        image_element
    }

    pub(crate) fn areas(&self) -> Option<Vec<DomRoot<HTMLAreaElement>>> {
        let elem = self.upcast::<Element>();
        let value = elem.get_attribute_string_value(&local_name!("usemap"))?;

        if value.is_empty() || !value.is_char_boundary(1) {
            return None;
        }

        let (first, last) = value.split_at(1);

        if first != "#" || last.is_empty() {
            return None;
        }

        let useMapElements = self
            .owner_document()
            .upcast::<Node>()
            .traverse_preorder(ShadowIncluding::No)
            .filter_map(DomRoot::downcast::<HTMLMapElement>)
            .find(|n| {
                n.upcast::<Element>()
                    .get_name()
                    .is_some_and(|n| *n == *last)
            });

        useMapElements.map(|mapElem| mapElem.get_area_elements())
    }

    pub(crate) fn same_origin(&self, origin: &MutableOrigin) -> bool {
        if let Some(ref image) = self.current_request.borrow().image {
            return image.cors_status() == CorsStatus::Safe;
        }

        self.current_request
            .borrow()
            .final_url
            .as_ref()
            .is_some_and(|url| url.scheme() == "data" || url.origin().same_origin(origin))
    }

    fn generation_id(&self) -> u32 {
        self.generation.get()
    }

    fn load_broken_image_icon(&self, no_gc: &NoGC) {
        let window = self.owner_window();
        let Some(broken_image_icon) = window.image_cache().get_broken_image_icon() else {
            return;
        };

        self.current_request.safe_borrow_mut(no_gc).metadata = Some(broken_image_icon.metadata);
        self.current_request.safe_borrow_mut(no_gc).image = Some(Image::Raster(broken_image_icon));
        self.upcast::<Node>().dirty(no_gc, NodeDamage::Other);
    }

    /// Get the full URL of the current image of this `<img>` element, returning `None` if the URL
    /// could not be joined with the `Document` URL.
    pub(crate) fn full_image_url_for_user_interface(&self) -> Option<ServoUrl> {
        self.owner_document()
            .base_url()
            .join(&self.CurrentSrc())
            .ok()
    }

    pub(crate) fn set_dimension_attribute_source(&self, no_gc: &NoGC, value: Option<&Element>) {
        self.dimension_attribute_source.set(value);
        self.upcast::<Node>().dirty(no_gc, NodeDamage::Other);
    }

    /// <https://html.spec.whatwg.org/multipage/#img-available>
    fn image_is_available(&self) -> bool {
        // > When an image request's state is either partially available
        // > or completely available, the image request is said to be available.
        matches!(
            self.current_request.borrow().state,
            State::PartiallyAvailable | State::CompletelyAvailable
        )
    }

    /// <https://html.spec.whatwg.org/multipage/#img-dimensions>
    fn dimensions(&self, cx: &mut JSContext) -> (u32, u32) {
        // Step 2. If image is available, then set naturalDimensions to
        // image's density-corrected natural width and height.
        let natural_dimensions = if self.image_is_available() {
            Some(self.density_corrected_natural_width_and_height())
        } else {
            // Step 1. Let naturalDimensions be null.
            None
        };
        // Step 3. Return the result of determining the dimensions of image given naturalDimensions.
        Self::determine_dimensions(cx, self.upcast(), natural_dimensions)
    }

    /// <https://html.spec.whatwg.org/multipage/#determine-dimensions>
    pub(crate) fn determine_dimensions(
        cx: &mut JSContext,
        element: &Element,
        natural_dimensions: Option<(u32, u32)>,
    ) -> (u32, u32) {
        // Step 1. If element is being rendered,
        // then return the width and height of element's content box, in CSS pixels. [CSS]
        if let Some(content_box) = element.upcast::<Node>().content_box(cx) {
            return (
                content_box.size.width.to_px() as u32,
                content_box.size.height.to_px() as u32,
            );
        }
        // Step 2. Let width and height be 0.
        // Step 3. If naturalDimensions is not null,
        // then set width to naturalDimensions's width and height to naturalDimensions's height.
        let (mut width, mut height) = natural_dimensions.unwrap_or_default();
        // Step 4. If element has a width attribute:
        if let Some(width_value) = element.get_attribute_string_ref(&local_name!("width")) {
            // Step 4.1. Let attributeWidth be the result of parsing that attribute's value.
            // Step 4.2. If attributeWidth is not an error, then set width to attributeWidth.
            if let Ok(attribute_width) =
                parse_unsigned_integer(width_value.as_attr_ref().value().as_ref().chars())
            {
                width = attribute_width;
            }
        }
        // Step 5. If element has a height attribute:
        if let Some(height_value) = element.get_attribute_string_ref(&local_name!("height")) {
            // Step 5.1. Let attributeHeight be the result of parsing that attribute's value.
            // Step 5.2. If attributeHeight is not an error, then set height to attributeHeight.
            if let Ok(attribute_height) =
                parse_unsigned_integer(height_value.as_attr_ref().value().as_ref().chars())
            {
                height = attribute_height;
            }
        }
        // Step 6. Return a width of width and a height of height, in CSS pixels.
        (width, height)
    }

    /// <https://html.spec.whatwg.org/multipage/#density-corrected-intrinsic-width-and-height>
    fn density_corrected_natural_width_and_height(&self) -> (u32, u32) {
        // Step 1. Let density be img's current request's current pixel density.
        let current_request = self.current_request.borrow();
        let density = current_request.current_pixel_density.unwrap_or(1f64);

        // Step 2. Let dimensions be img's current request's preferred density-corrected dimensions.
        // TODO

        // Step 3. If dimensions is not null,
        // then set dimensions's width to dimensions's width divided by density,
        // set dimensions's height to dimensions's height divided by density,
        // and return dimensions.
        // TODO

        // Step 4. Let intrinsicWidth, intrinsicHeight, and intrinsicRatio be img's intrinsic width,
        // intrinsic height, and intrinsic aspect ratio, if any, respectively.
        // Step 5. If intrinsicWidth is not absent, then set intrinsicWidth to intrinsicWidth divided by density.
        // Step 6. If intrinsicHeight is not absent, then set intrinsicHeight to intrinsicHeight divided by density.
        // Step 7. Return the result of applying the default sizing algorithm with intrinsicWidth,
        // intrinsicHeight, and intrinsicRatio, using a default object size of 300 by 150.
        let intrinsic_width = current_request
            .metadata
            .map(|metadata| (metadata.width as f64 / density) as u32)
            .unwrap_or(300);
        let intrinsic_height = current_request
            .metadata
            .map(|metadata| (metadata.height as f64 / density) as u32)
            .unwrap_or(150);
        (intrinsic_width, intrinsic_height)
    }
}

#[derive(JSTraceable, MallocSizeOf)]
pub(crate) enum ImageElementMicrotask {
    UpdateImageData {
        elem: Dom<HTMLImageElement>,
        generation: u32,
    },
    EnvironmentChanges {
        elem: Dom<HTMLImageElement>,
        generation: u32,
    },
    Decode {
        elem: Dom<HTMLImageElement>,
        promise: TracedPromise,
    },
}

impl MicrotaskRunnable for ImageElementMicrotask {
    fn handler(&self, cx: &mut JSContext) {
        let mut realm = match self {
            &ImageElementMicrotask::UpdateImageData { ref elem, .. } |
            &ImageElementMicrotask::EnvironmentChanges { ref elem, .. } |
            &ImageElementMicrotask::Decode { ref elem, .. } => enter_auto_realm(cx, &**elem),
        };
        let cx = &mut realm;
        match *self {
            ImageElementMicrotask::UpdateImageData {
                ref elem,
                ref generation,
            } => {
                // <https://html.spec.whatwg.org/multipage/#update-the-image-data>
                // Step 9. If another instance of this algorithm for this img element was started
                // after this instance (even if it aborted and is no longer running), then return.
                if elem.generation.get() == *generation {
                    elem.update_the_image_data_sync_steps(cx);
                }
            },
            ImageElementMicrotask::EnvironmentChanges {
                ref elem,
                ref generation,
            } => {
                elem.react_to_environment_changes_sync_steps(cx, *generation);
            },
            ImageElementMicrotask::Decode {
                ref elem,
                ref promise,
            } => {
                let promise = promise.root(cx);
                elem.react_to_decode_image_sync_steps(cx, &promise);
            },
        }
    }
}

impl<'dom> LayoutDom<'dom, HTMLImageElement> {
    fn current_request(self) -> AtomicRef<'dom, ImageRequest> {
        AtomicRef::map(self.unsafe_get().current_request.borrow(), |request| {
            &**request
        })
    }

    #[expect(unsafe_code)]
    fn dimension_attribute_source(self) -> LayoutDom<'dom, Element> {
        unsafe {
            self.unsafe_get()
                .dimension_attribute_source
                .to_layout()
                .expect("dimension attribute source should be always non-null")
        }
    }

    pub(crate) fn image_url(self) -> Option<ServoUrl> {
        self.current_request().parsed_url.clone()
    }

    pub(crate) fn image_data(self) -> (Option<Image>, Option<ImageMetadata>) {
        let current_request = self.current_request();
        (current_request.image.clone(), current_request.metadata)
    }

    pub(crate) fn load_time(self) -> Option<CrossProcessInstant> {
        self.current_request().load_time
    }

    pub(crate) fn image_density(self) -> Option<f64> {
        self.current_request().current_pixel_density
    }

    pub(crate) fn showing_broken_image_icon(self) -> bool {
        matches!(self.current_request().state, State::Broken)
    }

    pub(crate) fn width(self) -> LengthOrPercentageOrAuto {
        self.dimension_attribute_source()
            .dimension_attr_value(local_name!("width"))
    }

    pub(crate) fn height(self) -> LengthOrPercentageOrAuto {
        self.dimension_attribute_source()
            .dimension_attr_value(local_name!("height"))
    }

    pub(crate) fn margin_right_left(self) -> LengthOrPercentageOrAuto {
        self.dimension_attribute_source()
            .dimension_attr_value(local_name!("hspace"))
    }

    pub(crate) fn margin_top_bottom(self) -> LengthOrPercentageOrAuto {
        self.dimension_attribute_source()
            .dimension_attr_value(local_name!("vspace"))
    }
}

impl HTMLImageElementMethods<crate::DomTypeHolder> for HTMLImageElement {
    /// <https://html.spec.whatwg.org/multipage/#dom-image>
    fn Image(
        cx: &mut JSContext,
        window: &Window,
        proto: Option<HandleObject>,
        width: Option<u32>,
        height: Option<u32>,
    ) -> Fallible<DomRoot<HTMLImageElement>> {
        // Step 1. Let document be the current global object's associated Document.
        let document = window.Document();

        // Step 2. Let img be the result of creating an element given document, "img", and the HTML
        // namespace.
        let element = Element::create(
            cx,
            QualName::new(None, ns!(html), local_name!("img")),
            None,
            &document,
            ElementCreator::ScriptCreated,
            CustomElementCreationMode::Synchronous,
            proto,
        );

        let image = DomRoot::downcast::<HTMLImageElement>(element).unwrap();

        // Step 3. If width is given, then set an attribute value for img using "width" and width.
        if let Some(w) = width {
            image.SetWidth(cx, w);
        }

        // Step 4. If height is given, then set an attribute value for img using "height" and
        // height.
        if let Some(h) = height {
            image.SetHeight(cx, h);
        }

        // Step 5. Return img.
        Ok(image)
    }

    // https://html.spec.whatwg.org/multipage/#dom-img-alt
    make_getter!(Alt, "alt");
    // https://html.spec.whatwg.org/multipage/#dom-img-alt
    make_setter!(SetAlt, "alt");

    // https://html.spec.whatwg.org/multipage/#dom-img-src
    make_url_getter!(Src, "src");

    // https://html.spec.whatwg.org/multipage/#dom-img-src
    make_url_setter!(SetSrc, "src");

    // https://html.spec.whatwg.org/multipage/#dom-img-srcset
    make_url_getter!(Srcset, "srcset");
    // https://html.spec.whatwg.org/multipage/#dom-img-src
    make_url_setter!(SetSrcset, "srcset");

    // <https://html.spec.whatwg.org/multipage/#dom-img-sizes>
    make_getter!(Sizes, "sizes");

    // <https://html.spec.whatwg.org/multipage/#dom-img-sizes>
    make_setter!(SetSizes, "sizes");

    /// <https://html.spec.whatwg.org/multipage/#dom-img-crossOrigin>
    fn GetCrossOrigin(&self) -> Option<DOMString> {
        reflect_cross_origin_attribute(self.upcast::<Element>())
    }

    /// <https://html.spec.whatwg.org/multipage/#dom-img-crossOrigin>
    fn SetCrossOrigin(&self, cx: &mut JSContext, value: Option<DOMString>) {
        set_cross_origin_attribute(cx, self.upcast::<Element>(), value);
    }

    // https://html.spec.whatwg.org/multipage/#dom-img-usemap
    make_getter!(UseMap, "usemap");
    // https://html.spec.whatwg.org/multipage/#dom-img-usemap
    make_setter!(SetUseMap, "usemap");

    // https://html.spec.whatwg.org/multipage/#dom-img-ismap
    make_bool_getter!(IsMap, "ismap");
    // https://html.spec.whatwg.org/multipage/#dom-img-ismap
    make_bool_setter!(SetIsMap, "ismap");

    // <https://html.spec.whatwg.org/multipage/#dom-img-width>
    fn Width(&self, cx: &mut JSContext) -> u32 {
        // > The width getter steps are to return the width of this's dimensions.
        self.dimensions(cx).0
    }

    // <https://html.spec.whatwg.org/multipage/#dom-img-width>
    make_dimension_uint_setter!(SetWidth, "width");

    // <https://html.spec.whatwg.org/multipage/#dom-img-height>
    fn Height(&self, cx: &mut JSContext) -> u32 {
        // > The height getter steps are to return the height of this's dimensions.
        self.dimensions(cx).1
    }

    // <https://html.spec.whatwg.org/multipage/#dom-img-height>
    make_dimension_uint_setter!(SetHeight, "height");

    /// <https://html.spec.whatwg.org/multipage/#dom-img-naturalwidth>
    fn NaturalWidth(&self) -> u32 {
        // Step 1. If the image is not available, then return 0.
        if !self.image_is_available() {
            return 0;
        }

        // Step 2. Return the respective component of the image's
        // density-corrected natural width and height, in CSS pixels. [CSS]
        self.density_corrected_natural_width_and_height().0
    }

    /// <https://html.spec.whatwg.org/multipage/#dom-img-naturalheight>
    fn NaturalHeight(&self) -> u32 {
        // Step 1. If the image is not available, then return 0.
        if !self.image_is_available() {
            return 0;
        }

        // Step 2. Return the respective component of the image's
        // density-corrected natural width and height, in CSS pixels. [CSS]
        self.density_corrected_natural_width_and_height().1
    }

    /// <https://html.spec.whatwg.org/multipage/#dom-img-complete>
    fn Complete(&self) -> bool {
        let element = self.upcast::<Element>();

        // Step 1. If any of the following are true:
        // both the src attribute and the srcset attribute are omitted;
        let has_srcset_attribute = element.has_attribute(&local_name!("srcset"));
        if !element.has_attribute(&local_name!("src")) && !has_srcset_attribute {
            return true;
        }

        // the srcset attribute is omitted and the src attribute's value is the empty string;
        let src = element.get_string_attribute(&local_name!("src"));
        if !has_srcset_attribute && src.is_empty() {
            return true;
        }

        // the img element's current request's state is completely available and its pending request
        // is null; or the img element's current request's state is broken and its pending request
        // is null, then return true.
        if matches!(self.image_request.get(), ImageRequestPhase::Current) &&
            matches!(
                self.current_request.borrow().state,
                State::CompletelyAvailable | State::Broken
            )
        {
            return true;
        }

        // Step 2. Return false.
        false
    }

    /// <https://html.spec.whatwg.org/multipage/#dom-img-currentsrc>
    fn CurrentSrc(&self) -> USVString {
        let current_request = self.current_request.borrow();
        let url = &current_request.parsed_url;
        match *url {
            Some(ref url) => USVString(url.clone().into_string()),
            None => {
                let unparsed_url = &current_request.source_url;
                match *unparsed_url {
                    Some(ref url) => url.clone(),
                    None => USVString(String::new()),
                }
            },
        }
    }

    /// <https://html.spec.whatwg.org/multipage/#dom-img-referrerpolicy>
    fn ReferrerPolicy(&self) -> DOMString {
        reflect_referrer_policy_attribute(self.upcast::<Element>())
    }

    // <https://html.spec.whatwg.org/multipage/#dom-img-referrerpolicy>
    make_setter!(SetReferrerPolicy, "referrerpolicy");

    /// <https://html.spec.whatwg.org/multipage/#dom-img-decode>
    fn Decode(&self, cx: &mut JSContext) -> RootedPromise {
        // Step 1. Let promise be a new promise.
        let promise = Promise::new(cx, &self.global());

        // Step 2. Queue a microtask to perform the following steps:
        let task = ImageElementMicrotask::Decode {
            elem: Dom::from_ref(self),
            promise: promise.to_traced(),
        };

        ScriptThread::await_stable_state(cx, Box::new(task));

        // Step 3. Return promise.
        promise
    }

    // https://html.spec.whatwg.org/multipage/#dom-img-name
    make_getter!(Name, "name");

    // https://html.spec.whatwg.org/multipage/#dom-img-name
    make_atomic_setter!(SetName, "name");

    // https://html.spec.whatwg.org/multipage/#dom-img-align
    make_getter!(Align, "align");

    // https://html.spec.whatwg.org/multipage/#dom-img-align
    make_setter!(SetAlign, "align");

    // https://html.spec.whatwg.org/multipage/#dom-img-hspace
    make_dimension_uint_getter!(Hspace, "hspace");

    // https://html.spec.whatwg.org/multipage/#dom-img-hspace
    make_dimension_uint_setter!(SetHspace, "hspace");

    // https://html.spec.whatwg.org/multipage/#dom-img-vspace
    make_dimension_uint_getter!(Vspace, "vspace");

    // https://html.spec.whatwg.org/multipage/#dom-img-vspace
    make_dimension_uint_setter!(SetVspace, "vspace");

    // https://html.spec.whatwg.org/multipage/#dom-img-longdesc
    make_url_getter!(LongDesc, "longdesc");

    // https://html.spec.whatwg.org/multipage/#dom-img-longdesc
    make_url_setter!(SetLongDesc, "longdesc");

    // https://html.spec.whatwg.org/multipage/#dom-img-border
    make_getter!(Border, "border");

    // https://html.spec.whatwg.org/multipage/#dom-img-border
    make_setter!(SetBorder, "border");
}

impl VirtualMethods for HTMLImageElement {
    fn super_type(&self) -> Option<&dyn VirtualMethods> {
        Some(self.upcast::<HTMLElement>() as &dyn VirtualMethods)
    }

    fn adopting_steps(&self, cx: &mut JSContext, old_doc: &Document) {
        self.super_type().unwrap().adopting_steps(cx, old_doc);
        self.update_the_image_data(cx);
    }

    fn attribute_mutated(
        &self,
        cx: &mut JSContext,
        attr: AttrRef<'_>,
        mutation: AttributeMutation,
    ) {
        self.super_type()
            .unwrap()
            .attribute_mutated(cx, attr, mutation);

        match attr.local_name() {
            // <https://html.spec.whatwg.org/multipage/#reacting-to-dom-mutations>
            // > The element's src, srcset, width, or sizes attributes are set, changed, or
            // > removed.
            //
            // The specification is wrong here. `width` should not be counted as a relevant
            // mutation and no other browser does this. It used to be on the list because
            // it was used as a fallback for `srcset`, but no browser implements that fallback.
            // See the following issues:
            // - The width attribute should not be a relevant mutation
            //   <https://github.com/whatwg/html/issues/9371>
            // - Srcset implementations do not take width as a fallback when sizes is not present
            //   <https://github.com/whatwg/html/pull/5900>
            &local_name!("src") | &local_name!("srcset") | &local_name!("sizes") => {
                self.update_the_image_data(cx);
            },
            &local_name!("crossorigin") => {
                // <https://html.spec.whatwg.org/multipage/#reacting-to-dom-mutations>
                // The element's crossorigin attribute's state is changed.
                let cross_origin_state_changed = match mutation {
                    AttributeMutation::Removed | AttributeMutation::Set(None) => true,
                    AttributeMutation::Set(Some(old_value)) => {
                        let new_cors_setting =
                            CorsSettings::from_enumerated_attribute(&attr.value());
                        let old_cors_setting = CorsSettings::from_enumerated_attribute(old_value);

                        new_cors_setting != old_cors_setting
                    },
                };

                if cross_origin_state_changed {
                    self.update_the_image_data(cx);
                }
            },
            &local_name!("referrerpolicy") => {
                // <https://html.spec.whatwg.org/multipage/#reacting-to-dom-mutations>
                // The element's referrerpolicy attribute's state is changed.
                let referrer_policy_state_changed = match mutation {
                    AttributeMutation::Removed | AttributeMutation::Set(None) => {
                        ReferrerPolicy::from(&**attr.value()) != ReferrerPolicy::EmptyString
                    },
                    AttributeMutation::Set(Some(old_value)) => {
                        ReferrerPolicy::from(&**attr.value()) != ReferrerPolicy::from(&**old_value)
                    },
                };

                if referrer_policy_state_changed {
                    self.update_the_image_data(cx);
                }
            },
            _ => {},
        }
    }

    fn attribute_affects_presentational_hints(&self, attr: AttrRef<'_>) -> bool {
        match attr.local_name() {
            &local_name!("width") |
            &local_name!("height") |
            &local_name!("hspace") |
            &local_name!("vspace") => true,
            _ => self
                .super_type()
                .unwrap()
                .attribute_affects_presentational_hints(attr),
        }
    }

    fn parse_plain_attribute(&self, name: &LocalName, value: DOMString) -> AttrValue {
        match name {
            &local_name!("width") |
            &local_name!("height") |
            &local_name!("hspace") |
            &local_name!("vspace") => AttrValue::from_dimension(value.into()),
            _ => self
                .super_type()
                .unwrap()
                .parse_plain_attribute(name, value),
        }
    }

    fn handle_event(&self, cx: &mut JSContext, event: &Event) {
        if event.type_() != atom!("click") {
            return;
        }

        let Some(area_elements) = self.areas() else {
            return;
        };

        // Fetch click coordinates
        let Some(mouse_event) = event.downcast::<MouseEvent>() else {
            return;
        };

        let click_location = Point2D::new(
            mouse_event.ClientX().to_f32().unwrap(),
            mouse_event.ClientY().to_f32().unwrap(),
        );
        let bounding_rectangle = self.upcast::<Element>().GetBoundingClientRect(cx);
        let image_extents =
            Point2D::new(bounding_rectangle.X() as f32, bounding_rectangle.Y() as f32);

        // Walk HTMLAreaElements
        for area_element in area_elements {
            if !area_element.is_instance_activatable() {
                continue;
            }
            let activatable_area = match area_element.get_shape_from_coords() {
                Some(shape) => shape.absolute_coords(image_extents),
                None => return,
            };
            if activatable_area.hit_test(&click_location) {
                area_element.activation_behavior(cx, event, self.upcast());
                return;
            }
        }
    }

    /// <https://html.spec.whatwg.org/multipage/#the-img-element:html-element-insertion-steps>
    fn bind_to_tree(&self, cx: &mut JSContext, context: &BindContext) {
        if let Some(s) = self.super_type() {
            s.bind_to_tree(cx, context);
        }
        let document = self.owner_document();
        if context.tree_connected {
            document.register_responsive_image(self);
        }

        let parent = self.upcast::<Node>().GetParentNode().unwrap();

        // Step 1. If insertedNode's parent is a picture element, then, count this as a relevant
        // mutation for insertedNode.
        if parent.is::<HTMLPictureElement>() && *parent == *context.parent {
            self.update_the_image_data(cx);
        }
    }

    /// <https://html.spec.whatwg.org/multipage/#the-img-element:html-element-removing-steps>
    fn unbind_from_tree(&self, cx: &mut JSContext, context: &UnbindContext) {
        self.super_type().unwrap().unbind_from_tree(cx, context);
        let document = self.owner_document();
        document.unregister_responsive_image(self);

        // Step 1. If oldParent is a picture element, then, count this as a relevant mutation for
        // removedNode.
        if context.parent.is::<HTMLPictureElement>() && !self.upcast::<Node>().has_parent() {
            self.update_the_image_data(cx);
        }
    }

    /// <https://html.spec.whatwg.org/multipage#the-img-element:html-element-moving-steps>
    fn moving_steps(&self, cx: &mut JSContext, context: &MoveContext) {
        if let Some(super_type) = self.super_type() {
            super_type.moving_steps(cx, context);
        }

        // Step 1. If isSubtreeRoot is true and oldAncestor is a picture element, then count this as
        // a relevant mutation for movedNode.
        if context.is_subtree_root && context.old_ancestor.is::<HTMLPictureElement>() {
            self.update_the_image_data(cx);
        }
    }
}

impl FormControl for HTMLImageElement {
    fn form_owner(&self) -> Option<DomRoot<HTMLFormElement>> {
        self.form_owner.get()
    }

    fn set_form_owner(&self, _cx: &mut JSContext, form: Option<&HTMLFormElement>) {
        self.form_owner.set(form);
    }

    fn to_html_element(&self) -> &HTMLElement {
        self.upcast::<HTMLElement>()
    }
}

#[derive(Clone)]
enum ChangeType {
    Environment {
        selected_source: USVString,
        selected_pixel_density: f64,
    },
    Element,
}