script/dom/html/
htmlimageelement.rs

1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
4
5use std::cell::Cell;
6use std::collections::HashSet;
7use std::default::Default;
8use std::rc::Rc;
9use std::sync::{Arc, LazyLock};
10use std::{char, mem};
11
12use app_units::{AU_PER_PX, Au};
13use cssparser::{Parser, ParserInput};
14use dom_struct::dom_struct;
15use euclid::default::{Point2D, Size2D};
16use html5ever::{LocalName, Prefix, QualName, local_name, ns};
17use js::jsapi::JSAutoRealm;
18use js::rust::HandleObject;
19use mime::{self, Mime};
20use net_traits::http_status::HttpStatus;
21use net_traits::image_cache::{
22    Image, ImageCache, ImageCacheResult, ImageLoadListener, ImageOrMetadataAvailable,
23    ImageResponse, PendingImageId, UsePlaceholder,
24};
25use net_traits::request::{Destination, Initiator, RequestId};
26use net_traits::{
27    FetchMetadata, FetchResponseListener, FetchResponseMsg, NetworkError, ReferrerPolicy,
28    ResourceFetchTiming, ResourceTimingType,
29};
30use num_traits::ToPrimitive;
31use pixels::{
32    CorsStatus, ImageMetadata, PixelFormat, Snapshot, SnapshotAlphaMode, SnapshotPixelFormat,
33};
34use regex::Regex;
35use servo_url::ServoUrl;
36use servo_url::origin::MutableOrigin;
37use style::attr::{AttrValue, LengthOrPercentageOrAuto, parse_unsigned_integer};
38use style::context::QuirksMode;
39use style::parser::ParserContext;
40use style::stylesheets::{CssRuleType, Origin};
41use style::values::specified::source_size_list::SourceSizeList;
42use style_traits::ParsingMode;
43use url::Url;
44
45use crate::document_loader::{LoadBlocker, LoadType};
46use crate::dom::activation::Activatable;
47use crate::dom::attr::Attr;
48use crate::dom::bindings::cell::{DomRefCell, RefMut};
49use crate::dom::bindings::codegen::Bindings::DOMRectBinding::DOMRect_Binding::DOMRectMethods;
50use crate::dom::bindings::codegen::Bindings::ElementBinding::Element_Binding::ElementMethods;
51use crate::dom::bindings::codegen::Bindings::HTMLImageElementBinding::HTMLImageElementMethods;
52use crate::dom::bindings::codegen::Bindings::MouseEventBinding::MouseEventMethods;
53use crate::dom::bindings::codegen::Bindings::NodeBinding::Node_Binding::NodeMethods;
54use crate::dom::bindings::codegen::Bindings::WindowBinding::WindowMethods;
55use crate::dom::bindings::error::{Error, Fallible};
56use crate::dom::bindings::inheritance::Castable;
57use crate::dom::bindings::refcounted::{Trusted, TrustedPromise};
58use crate::dom::bindings::reflector::DomGlobal;
59use crate::dom::bindings::root::{DomRoot, LayoutDom, MutNullableDom};
60use crate::dom::bindings::str::{DOMString, USVString};
61use crate::dom::csp::{GlobalCspReporting, Violation};
62use crate::dom::document::{Document, determine_policy_for_token};
63use crate::dom::element::{
64    AttributeMutation, CustomElementCreationMode, Element, ElementCreator, LayoutElementHelpers,
65    cors_setting_for_element, referrer_policy_for_element, reflect_cross_origin_attribute,
66    reflect_referrer_policy_attribute, set_cross_origin_attribute,
67};
68use crate::dom::event::Event;
69use crate::dom::eventtarget::EventTarget;
70use crate::dom::globalscope::GlobalScope;
71use crate::dom::html::htmlareaelement::HTMLAreaElement;
72use crate::dom::html::htmlelement::HTMLElement;
73use crate::dom::html::htmlformelement::{FormControl, HTMLFormElement};
74use crate::dom::html::htmlmapelement::HTMLMapElement;
75use crate::dom::html::htmlpictureelement::HTMLPictureElement;
76use crate::dom::html::htmlsourceelement::HTMLSourceElement;
77use crate::dom::medialist::MediaList;
78use crate::dom::mouseevent::MouseEvent;
79use crate::dom::node::{BindContext, Node, NodeDamage, NodeTraits, ShadowIncluding, UnbindContext};
80use crate::dom::performanceresourcetiming::InitiatorType;
81use crate::dom::promise::Promise;
82use crate::dom::values::UNSIGNED_LONG_MAX;
83use crate::dom::virtualmethods::VirtualMethods;
84use crate::dom::window::Window;
85use crate::fetch::create_a_potential_cors_request;
86use crate::microtask::{Microtask, MicrotaskRunnable};
87use crate::network_listener::{self, PreInvoke, ResourceTimingListener};
88use crate::realms::enter_realm;
89use crate::script_runtime::CanGc;
90use crate::script_thread::ScriptThread;
91
92/// Supported image MIME types as defined by
93/// <https://mimesniff.spec.whatwg.org/#image-mime-type>.
94/// Keep this in sync with 'detect_image_format' from components/pixels/lib.rs
95const SUPPORTED_IMAGE_MIME_TYPES: &[&str] = &[
96    "image/bmp",
97    "image/gif",
98    "image/jpeg",
99    "image/jpg",
100    "image/pjpeg",
101    "image/png",
102    "image/apng",
103    "image/x-png",
104    "image/svg+xml",
105    "image/vnd.microsoft.icon",
106    "image/x-icon",
107    "image/webp",
108];
109
110#[derive(Clone, Copy, Debug)]
111enum ParseState {
112    InDescriptor,
113    InParens,
114    AfterDescriptor,
115}
116
117/// <https://html.spec.whatwg.org/multipage/#source-set>
118#[derive(MallocSizeOf)]
119pub(crate) struct SourceSet {
120    image_sources: Vec<ImageSource>,
121    source_size: SourceSizeList,
122}
123
124impl SourceSet {
125    fn new() -> SourceSet {
126        SourceSet {
127            image_sources: Vec::new(),
128            source_size: SourceSizeList::empty(),
129        }
130    }
131}
132
133#[derive(Clone, Debug, MallocSizeOf, PartialEq)]
134pub struct ImageSource {
135    pub url: String,
136    pub descriptor: Descriptor,
137}
138
139#[derive(Clone, Debug, MallocSizeOf, PartialEq)]
140pub struct Descriptor {
141    pub width: Option<u32>,
142    pub density: Option<f64>,
143}
144
145#[derive(Clone, Copy, JSTraceable, MallocSizeOf)]
146#[allow(dead_code)]
147enum State {
148    Unavailable,
149    PartiallyAvailable,
150    CompletelyAvailable,
151    Broken,
152}
153
154#[derive(Clone, Copy, JSTraceable, MallocSizeOf)]
155enum ImageRequestPhase {
156    Pending,
157    Current,
158}
159#[derive(JSTraceable, MallocSizeOf)]
160#[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)]
161struct ImageRequest {
162    state: State,
163    #[no_trace]
164    parsed_url: Option<ServoUrl>,
165    source_url: Option<USVString>,
166    blocker: DomRefCell<Option<LoadBlocker>>,
167    #[no_trace]
168    image: Option<Image>,
169    #[no_trace]
170    metadata: Option<ImageMetadata>,
171    #[no_trace]
172    final_url: Option<ServoUrl>,
173    current_pixel_density: Option<f64>,
174}
175#[dom_struct]
176pub(crate) struct HTMLImageElement {
177    htmlelement: HTMLElement,
178    image_request: Cell<ImageRequestPhase>,
179    current_request: DomRefCell<ImageRequest>,
180    pending_request: DomRefCell<ImageRequest>,
181    form_owner: MutNullableDom<HTMLFormElement>,
182    generation: Cell<u32>,
183    source_set: DomRefCell<SourceSet>,
184    /// <https://html.spec.whatwg.org/multipage/#concept-img-dimension-attribute-source>
185    /// Always non-null after construction.
186    dimension_attribute_source: MutNullableDom<Element>,
187    last_selected_source: DomRefCell<Option<USVString>>,
188    #[ignore_malloc_size_of = "promises are hard"]
189    image_decode_promises: DomRefCell<Vec<Rc<Promise>>>,
190    /// Line number this element was created on
191    line_number: u64,
192}
193
194impl HTMLImageElement {
195    // https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
196    pub(crate) fn is_usable(&self) -> Fallible<bool> {
197        // If image has an intrinsic width or intrinsic height (or both) equal to zero, then return bad.
198        if let Some(image) = &self.current_request.borrow().image {
199            let intrinsic_size = image.metadata();
200            if intrinsic_size.width == 0 || intrinsic_size.height == 0 {
201                return Ok(false);
202            }
203        }
204
205        match self.current_request.borrow().state {
206            // If image's current request's state is broken, then throw an "InvalidStateError" DOMException.
207            State::Broken => Err(Error::InvalidState),
208            State::CompletelyAvailable => Ok(true),
209            // If image is not fully decodable, then return bad.
210            State::PartiallyAvailable | State::Unavailable => Ok(false),
211        }
212    }
213
214    pub(crate) fn image_data(&self) -> Option<Image> {
215        self.current_request.borrow().image.clone()
216    }
217
218    /// Gets the copy of the raster image data.
219    pub(crate) fn get_raster_image_data(&self) -> Option<Snapshot> {
220        let Some(img) = self.image_data()?.as_raster_image() else {
221            warn!("Vector image is not supported as raster image source");
222            return None;
223        };
224
225        let size = Size2D::new(img.metadata.width, img.metadata.height);
226        let format = match img.format {
227            PixelFormat::BGRA8 => SnapshotPixelFormat::BGRA,
228            PixelFormat::RGBA8 => SnapshotPixelFormat::RGBA,
229            pixel_format => {
230                unimplemented!("unsupported pixel format ({:?})", pixel_format)
231            },
232        };
233
234        let alpha_mode = SnapshotAlphaMode::Transparent {
235            premultiplied: false,
236        };
237
238        let snapshot = Snapshot::from_vec(
239            size.cast(),
240            format,
241            alpha_mode,
242            img.first_frame().bytes.to_vec(),
243        );
244
245        Some(snapshot)
246    }
247}
248
249/// The context required for asynchronously loading an external image.
250struct ImageContext {
251    /// Reference to the script thread image cache.
252    image_cache: Arc<dyn ImageCache>,
253    /// Indicates whether the request failed, and why
254    status: Result<(), NetworkError>,
255    /// The cache ID for this request.
256    id: PendingImageId,
257    /// Used to mark abort
258    aborted: bool,
259    /// The document associated with this request
260    doc: Trusted<Document>,
261    /// timing data for this resource
262    resource_timing: ResourceFetchTiming,
263    url: ServoUrl,
264    element: Trusted<HTMLImageElement>,
265}
266
267impl FetchResponseListener for ImageContext {
268    fn process_request_body(&mut self, _: RequestId) {}
269    fn process_request_eof(&mut self, _: RequestId) {}
270
271    fn process_response(
272        &mut self,
273        request_id: RequestId,
274        metadata: Result<FetchMetadata, NetworkError>,
275    ) {
276        debug!("got {:?} for {:?}", metadata.as_ref().map(|_| ()), self.url);
277        self.image_cache.notify_pending_response(
278            self.id,
279            FetchResponseMsg::ProcessResponse(request_id, metadata.clone()),
280        );
281
282        let metadata = metadata.ok().map(|meta| match meta {
283            FetchMetadata::Unfiltered(m) => m,
284            FetchMetadata::Filtered { unsafe_, .. } => unsafe_,
285        });
286
287        // Step 14.5 of https://html.spec.whatwg.org/multipage/#img-environment-changes
288        if let Some(metadata) = metadata.as_ref() {
289            if let Some(ref content_type) = metadata.content_type {
290                let mime: Mime = content_type.clone().into_inner().into();
291                if mime.type_() == mime::MULTIPART && mime.subtype().as_str() == "x-mixed-replace" {
292                    self.aborted = true;
293                }
294            }
295        }
296
297        let status = metadata
298            .as_ref()
299            .map(|m| m.status.clone())
300            .unwrap_or_else(HttpStatus::new_error);
301
302        self.status = {
303            if status.is_error() {
304                Err(NetworkError::Internal(
305                    "No http status code received".to_owned(),
306                ))
307            } else if status.is_success() {
308                Ok(())
309            } else {
310                Err(NetworkError::Internal(format!(
311                    "HTTP error code {}",
312                    status.code()
313                )))
314            }
315        };
316    }
317
318    fn process_response_chunk(&mut self, request_id: RequestId, payload: Vec<u8>) {
319        if self.status.is_ok() {
320            self.image_cache.notify_pending_response(
321                self.id,
322                FetchResponseMsg::ProcessResponseChunk(request_id, payload),
323            );
324        }
325    }
326
327    fn process_response_eof(
328        &mut self,
329        request_id: RequestId,
330        response: Result<ResourceFetchTiming, NetworkError>,
331    ) {
332        self.image_cache.notify_pending_response(
333            self.id,
334            FetchResponseMsg::ProcessResponseEOF(request_id, response),
335        );
336    }
337
338    fn resource_timing_mut(&mut self) -> &mut ResourceFetchTiming {
339        &mut self.resource_timing
340    }
341
342    fn resource_timing(&self) -> &ResourceFetchTiming {
343        &self.resource_timing
344    }
345
346    fn submit_resource_timing(&mut self) {
347        network_listener::submit_timing(self, CanGc::note())
348    }
349
350    fn process_csp_violations(&mut self, _request_id: RequestId, violations: Vec<Violation>) {
351        let global = &self.resource_timing_global();
352        let elem = self.element.root();
353        let source_position = elem
354            .upcast::<Element>()
355            .compute_source_position(elem.line_number as u32);
356        global.report_csp_violations(violations, None, Some(source_position));
357    }
358}
359
360impl ResourceTimingListener for ImageContext {
361    fn resource_timing_information(&self) -> (InitiatorType, ServoUrl) {
362        (
363            InitiatorType::LocalName("img".to_string()),
364            self.url.clone(),
365        )
366    }
367
368    fn resource_timing_global(&self) -> DomRoot<GlobalScope> {
369        self.doc.root().global()
370    }
371}
372
373impl PreInvoke for ImageContext {
374    fn should_invoke(&self) -> bool {
375        !self.aborted
376    }
377}
378
379#[allow(non_snake_case)]
380impl HTMLImageElement {
381    /// Update the current image with a valid URL.
382    fn fetch_image(&self, img_url: &ServoUrl, can_gc: CanGc) {
383        let window = self.owner_window();
384
385        let cache_result = window.image_cache().get_cached_image_status(
386            img_url.clone(),
387            window.origin().immutable().clone(),
388            cors_setting_for_element(self.upcast()),
389            UsePlaceholder::Yes,
390        );
391
392        match cache_result {
393            ImageCacheResult::Available(ImageOrMetadataAvailable::ImageAvailable {
394                image,
395                url,
396                is_placeholder,
397            }) => {
398                if is_placeholder {
399                    if let Some(raster_image) = image.as_raster_image() {
400                        self.process_image_response(
401                            ImageResponse::PlaceholderLoaded(raster_image, url),
402                            can_gc,
403                        )
404                    }
405                } else {
406                    self.process_image_response(ImageResponse::Loaded(image, url), can_gc)
407                }
408            },
409            ImageCacheResult::Available(ImageOrMetadataAvailable::MetadataAvailable(
410                metadata,
411                id,
412            )) => {
413                self.process_image_response(ImageResponse::MetadataLoaded(metadata), can_gc);
414                self.register_image_cache_callback(id, ChangeType::Element);
415            },
416            ImageCacheResult::Pending(id) => {
417                self.register_image_cache_callback(id, ChangeType::Element);
418            },
419            ImageCacheResult::ReadyForRequest(id) => {
420                self.fetch_request(img_url, id);
421                self.register_image_cache_callback(id, ChangeType::Element);
422            },
423            ImageCacheResult::LoadError => self.process_image_response(ImageResponse::None, can_gc),
424        };
425    }
426
427    fn register_image_cache_callback(&self, id: PendingImageId, change_type: ChangeType) {
428        let trusted_node = Trusted::new(self);
429        let generation = self.generation_id();
430        let window = self.owner_window();
431        let sender = window.register_image_cache_listener(id, move |response| {
432            let trusted_node = trusted_node.clone();
433            let window = trusted_node.root().owner_window();
434            let callback_type = change_type.clone();
435
436            window
437                .as_global_scope()
438                .task_manager()
439                .networking_task_source()
440                .queue(task!(process_image_response: move || {
441                let element = trusted_node.root();
442
443                // Ignore any image response for a previous request that has been discarded.
444                if generation != element.generation_id() {
445                    return;
446                }
447
448                match callback_type {
449                    ChangeType::Element => {
450                        element.process_image_response(response.response, CanGc::note());
451                    }
452                    ChangeType::Environment { selected_source, selected_pixel_density } => {
453                        element.process_image_response_for_environment_change(
454                            response.response, selected_source, generation, selected_pixel_density, CanGc::note()
455                        );
456                    }
457                }
458            }));
459        });
460
461        window
462            .image_cache()
463            .add_listener(ImageLoadListener::new(sender, window.pipeline_id(), id));
464    }
465
466    fn fetch_request(&self, img_url: &ServoUrl, id: PendingImageId) {
467        let document = self.owner_document();
468        let window = self.owner_window();
469
470        let context = ImageContext {
471            image_cache: window.image_cache(),
472            status: Ok(()),
473            id,
474            aborted: false,
475            doc: Trusted::new(&document),
476            element: Trusted::new(self),
477            resource_timing: ResourceFetchTiming::new(ResourceTimingType::Resource),
478            url: img_url.clone(),
479        };
480
481        // https://html.spec.whatwg.org/multipage/#update-the-image-data steps 17-20
482        // This function is also used to prefetch an image in `script::dom::servoparser::prefetch`.
483        let global = document.global();
484        let mut request = create_a_potential_cors_request(
485            Some(window.webview_id()),
486            img_url.clone(),
487            Destination::Image,
488            cors_setting_for_element(self.upcast()),
489            None,
490            global.get_referrer(),
491            document.insecure_requests_policy(),
492            document.has_trustworthy_ancestor_or_current_origin(),
493            global.policy_container(),
494        )
495        .origin(document.origin().immutable().clone())
496        .pipeline_id(Some(document.global().pipeline_id()))
497        .referrer_policy(referrer_policy_for_element(self.upcast()));
498
499        if Self::uses_srcset_or_picture(self.upcast()) {
500            request = request.initiator(Initiator::ImageSet);
501        }
502
503        // This is a background load because the load blocker already fulfills the
504        // purpose of delaying the document's load event.
505        document.fetch_background(request, context);
506    }
507
508    // Steps common to when an image has been loaded.
509    fn handle_loaded_image(&self, image: Image, url: ServoUrl, can_gc: CanGc) {
510        self.current_request.borrow_mut().metadata = Some(image.metadata());
511        self.current_request.borrow_mut().final_url = Some(url);
512        self.current_request.borrow_mut().image = Some(image);
513        self.current_request.borrow_mut().state = State::CompletelyAvailable;
514        LoadBlocker::terminate(&self.current_request.borrow().blocker, can_gc);
515        // Mark the node dirty
516        self.upcast::<Node>().dirty(NodeDamage::Other);
517        self.resolve_image_decode_promises();
518    }
519
520    /// Step 24 of <https://html.spec.whatwg.org/multipage/#update-the-image-data>
521    fn process_image_response(&self, image: ImageResponse, can_gc: CanGc) {
522        // TODO: Handle multipart/x-mixed-replace
523        let (trigger_image_load, trigger_image_error) = match (image, self.image_request.get()) {
524            (ImageResponse::Loaded(image, url), ImageRequestPhase::Current) => {
525                self.handle_loaded_image(image, url, can_gc);
526                (true, false)
527            },
528            (ImageResponse::PlaceholderLoaded(image, url), ImageRequestPhase::Current) => {
529                self.handle_loaded_image(Image::Raster(image), url, can_gc);
530                (false, true)
531            },
532            (ImageResponse::Loaded(image, url), ImageRequestPhase::Pending) => {
533                self.abort_request(State::Unavailable, ImageRequestPhase::Pending, can_gc);
534                self.image_request.set(ImageRequestPhase::Current);
535                self.handle_loaded_image(image, url, can_gc);
536                (true, false)
537            },
538            (ImageResponse::PlaceholderLoaded(image, url), ImageRequestPhase::Pending) => {
539                self.abort_request(State::Unavailable, ImageRequestPhase::Pending, can_gc);
540                self.image_request.set(ImageRequestPhase::Current);
541                self.handle_loaded_image(Image::Raster(image), url, can_gc);
542                (false, true)
543            },
544            (ImageResponse::MetadataLoaded(meta), ImageRequestPhase::Current) => {
545                self.current_request.borrow_mut().state = State::PartiallyAvailable;
546                self.current_request.borrow_mut().metadata = Some(meta);
547                (false, false)
548            },
549            (ImageResponse::MetadataLoaded(_), ImageRequestPhase::Pending) => {
550                self.pending_request.borrow_mut().state = State::PartiallyAvailable;
551                (false, false)
552            },
553            (ImageResponse::None, ImageRequestPhase::Current) => {
554                self.abort_request(State::Broken, ImageRequestPhase::Current, can_gc);
555                (false, true)
556            },
557            (ImageResponse::None, ImageRequestPhase::Pending) => {
558                self.abort_request(State::Broken, ImageRequestPhase::Current, can_gc);
559                self.abort_request(State::Broken, ImageRequestPhase::Pending, can_gc);
560                self.image_request.set(ImageRequestPhase::Current);
561                (false, true)
562            },
563        };
564
565        // Fire image.onload and loadend
566        if trigger_image_load {
567            // TODO: https://html.spec.whatwg.org/multipage/#fire-a-progress-event-or-event
568            self.upcast::<EventTarget>()
569                .fire_event(atom!("load"), can_gc);
570            self.upcast::<EventTarget>()
571                .fire_event(atom!("loadend"), can_gc);
572        }
573
574        // Fire image.onerror
575        if trigger_image_error {
576            self.upcast::<EventTarget>()
577                .fire_event(atom!("error"), can_gc);
578            self.upcast::<EventTarget>()
579                .fire_event(atom!("loadend"), can_gc);
580        }
581    }
582
583    fn process_image_response_for_environment_change(
584        &self,
585        image: ImageResponse,
586        src: USVString,
587        generation: u32,
588        selected_pixel_density: f64,
589        can_gc: CanGc,
590    ) {
591        match image {
592            ImageResponse::Loaded(image, url) => {
593                self.pending_request.borrow_mut().metadata = Some(image.metadata());
594                self.pending_request.borrow_mut().final_url = Some(url);
595                self.pending_request.borrow_mut().image = Some(image);
596                self.finish_reacting_to_environment_change(src, generation, selected_pixel_density);
597            },
598            ImageResponse::PlaceholderLoaded(image, url) => {
599                let image = Image::Raster(image);
600                self.pending_request.borrow_mut().metadata = Some(image.metadata());
601                self.pending_request.borrow_mut().final_url = Some(url);
602                self.pending_request.borrow_mut().image = Some(image);
603                self.finish_reacting_to_environment_change(src, generation, selected_pixel_density);
604            },
605            ImageResponse::MetadataLoaded(meta) => {
606                self.pending_request.borrow_mut().metadata = Some(meta);
607            },
608            ImageResponse::None => {
609                self.abort_request(State::Unavailable, ImageRequestPhase::Pending, can_gc);
610            },
611        };
612    }
613
614    /// <https://html.spec.whatwg.org/multipage/#abort-the-image-request>
615    fn abort_request(&self, state: State, request: ImageRequestPhase, can_gc: CanGc) {
616        let mut request = match request {
617            ImageRequestPhase::Current => self.current_request.borrow_mut(),
618            ImageRequestPhase::Pending => self.pending_request.borrow_mut(),
619        };
620        LoadBlocker::terminate(&request.blocker, can_gc);
621        request.state = state;
622        request.image = None;
623        request.metadata = None;
624
625        if matches!(state, State::Broken) {
626            self.reject_image_decode_promises();
627        } else if matches!(state, State::CompletelyAvailable) {
628            self.resolve_image_decode_promises();
629        }
630    }
631
632    /// <https://html.spec.whatwg.org/multipage/#create-a-source-set>
633    fn create_source_set(&self) -> SourceSet {
634        let element = self.upcast::<Element>();
635
636        // Step 1. Let source set be an empty source set.
637        let mut source_set = SourceSet::new();
638
639        // Step 2. If srcset is not an empty string, then set source set to the result of parsing
640        // srcset.
641        if let Some(srcset) = element.get_attribute(&ns!(), &local_name!("srcset")) {
642            source_set.image_sources = parse_a_srcset_attribute(&srcset.value());
643        }
644
645        // Step 3. Set source set's source size to the result of parsing sizes with img.
646        if let Some(sizes) = element.get_attribute(&ns!(), &local_name!("sizes")) {
647            source_set.source_size = parse_a_sizes_attribute(&sizes.value());
648        }
649
650        // Step 4. If default source is not the empty string and source set does not contain an
651        // image source with a pixel density descriptor value of 1, and no image source with a width
652        // descriptor, append default source to source set.
653        let src_attribute = element.get_string_attribute(&local_name!("src"));
654        let is_src_empty = src_attribute.is_empty();
655        let no_density_source_of_1 = source_set
656            .image_sources
657            .iter()
658            .all(|source| source.descriptor.density != Some(1.));
659        let no_width_descriptor = source_set
660            .image_sources
661            .iter()
662            .all(|source| source.descriptor.width.is_none());
663        if !is_src_empty && no_density_source_of_1 && no_width_descriptor {
664            source_set.image_sources.push(ImageSource {
665                url: src_attribute.to_string(),
666                descriptor: Descriptor {
667                    width: None,
668                    density: None,
669                },
670            })
671        }
672
673        // Step 5. Normalize the source densities of source set.
674        self.normalise_source_densities(&mut source_set);
675
676        // Step 6. Return source set.
677        source_set
678    }
679
680    /// <https://html.spec.whatwg.org/multipage/#update-the-source-set>
681    fn update_source_set(&self) {
682        // Step 1. Set el's source set to an empty source set.
683        *self.source_set.borrow_mut() = SourceSet::new();
684
685        // Step 2. Let elements be « el ».
686        // Step 3. If el is an img element whose parent node is a picture element, then replace the
687        // contents of elements with el's parent node's child elements, retaining relative order.
688        // Step 4. Let img be el if el is an img element, otherwise null.
689        let elem = self.upcast::<Element>();
690        let parent = elem.upcast::<Node>().GetParentElement();
691        let elements = match parent.as_ref() {
692            Some(p) => {
693                if p.is::<HTMLPictureElement>() {
694                    p.upcast::<Node>()
695                        .children()
696                        .filter_map(DomRoot::downcast::<Element>)
697                        .map(|n| DomRoot::from_ref(&*n))
698                        .collect()
699                } else {
700                    vec![DomRoot::from_ref(elem)]
701                }
702            },
703            None => vec![DomRoot::from_ref(elem)],
704        };
705
706        // Step 5. For each child in elements:
707        for element in &elements {
708            // Step 5.1. If child is el:
709            if *element == DomRoot::from_ref(elem) {
710                // Step 5.1.10. Set el's source set to the result of creating a source set given
711                // default source, srcset, sizes, and img.
712                *self.source_set.borrow_mut() = self.create_source_set();
713
714                // Step 5.1.11. Return.
715                return;
716            }
717
718            // Step 5.2. If child is not a source element, then continue.
719            if !element.is::<HTMLSourceElement>() {
720                continue;
721            }
722
723            let mut source_set = SourceSet::new();
724
725            // Step 5.3. If child does not have a srcset attribute, continue to the next child.
726            // Step 5.4. Parse child's srcset attribute and let source set be the returned source
727            // set.
728            match element.get_attribute(&ns!(), &local_name!("srcset")) {
729                Some(srcset) => {
730                    source_set.image_sources = parse_a_srcset_attribute(&srcset.value());
731                },
732                _ => continue,
733            }
734
735            // Step 5.5. If source set has zero image sources, continue to the next child.
736            if source_set.image_sources.is_empty() {
737                continue;
738            }
739
740            // Step 5.6. If child has a media attribute, and its value does not match the
741            // environment, continue to the next child.
742            if let Some(media) = element.get_attribute(&ns!(), &local_name!("media")) {
743                if !MediaList::matches_environment(&element.owner_document(), &media.value()) {
744                    continue;
745                }
746            }
747
748            // Step 5.7. Parse child's sizes attribute with img, and let source set's source size be
749            // the returned value.
750            if let Some(sizes) = element.get_attribute(&ns!(), &local_name!("sizes")) {
751                source_set.source_size = parse_a_sizes_attribute(&sizes.value());
752            }
753
754            // Step 5.8. If child has a type attribute, and its value is an unknown or unsupported
755            // MIME type, continue to the next child.
756            if let Some(type_) = element.get_attribute(&ns!(), &local_name!("type")) {
757                if !is_supported_image_mime_type(&type_.value()) {
758                    continue;
759                }
760            }
761
762            // Step 5.9. If child has width or height attributes, set el's dimension attribute
763            // source to child. Otherwise, set el's dimension attribute source to el.
764            if element
765                .get_attribute(&ns!(), &local_name!("width"))
766                .is_some() ||
767                element
768                    .get_attribute(&ns!(), &local_name!("height"))
769                    .is_some()
770            {
771                self.dimension_attribute_source.set(Some(element));
772            } else {
773                self.dimension_attribute_source.set(Some(elem));
774            }
775
776            // Step 5.10. Normalize the source densities of source set.
777            self.normalise_source_densities(&mut source_set);
778
779            // Step 5.11. Set el's source set to source set.
780            *self.source_set.borrow_mut() = source_set;
781
782            // Step 5.12. Return.
783            return;
784        }
785    }
786
787    fn evaluate_source_size_list(&self, source_size_list: &SourceSizeList) -> Au {
788        let document = self.owner_document();
789        let quirks_mode = document.quirks_mode();
790        source_size_list.evaluate(document.window().layout().device(), quirks_mode)
791    }
792
793    /// <https://html.spec.whatwg.org/multipage/#normalise-the-source-densities>
794    fn normalise_source_densities(&self, source_set: &mut SourceSet) {
795        // Step 1. Let source size be source set's source size.
796        let source_size = self.evaluate_source_size_list(&source_set.source_size);
797
798        // Step 2. For each image source in source set:
799        for image_source in &mut source_set.image_sources {
800            // Step 2.1. If the image source has a pixel density descriptor, continue to the next
801            // image source.
802            if image_source.descriptor.density.is_some() {
803                continue;
804            }
805
806            // Step 2.2. Otherwise, if the image source has a width descriptor, replace the width
807            // descriptor with a pixel density descriptor with a value of the width descriptor value
808            // divided by source size and a unit of x.
809            if image_source.descriptor.width.is_some() {
810                let width = image_source.descriptor.width.unwrap();
811                image_source.descriptor.density = Some(width as f64 / source_size.to_f64_px());
812            } else {
813                // Step 2.3. Otherwise, give the image source a pixel density descriptor of 1x.
814                image_source.descriptor.density = Some(1_f64);
815            }
816        }
817    }
818
819    /// <https://html.spec.whatwg.org/multipage/#select-an-image-source>
820    fn select_image_source(&self) -> Option<(USVString, f64)> {
821        // Step 1. Update the source set for el.
822        self.update_source_set();
823
824        // Step 2. If el's source set is empty, return null as the URL and undefined as the pixel
825        // density.
826        if self.source_set.borrow().image_sources.is_empty() {
827            return None;
828        }
829
830        // Step 3. Return the result of selecting an image from el's source set.
831        self.select_image_source_from_source_set()
832    }
833
834    /// <https://html.spec.whatwg.org/multipage/#select-an-image-source-from-a-source-set>
835    fn select_image_source_from_source_set(&self) -> Option<(USVString, f64)> {
836        // Step 1. If an entry b in sourceSet has the same associated pixel density descriptor as an
837        // earlier entry a in sourceSet, then remove entry b. Repeat this step until none of the
838        // entries in sourceSet have the same associated pixel density descriptor as an earlier
839        // entry.
840        let source_set = self.source_set.borrow();
841        let len = source_set.image_sources.len();
842
843        let mut repeat_indices = HashSet::new();
844        for outer_index in 0..len {
845            if repeat_indices.contains(&outer_index) {
846                continue;
847            }
848            let imgsource = &source_set.image_sources[outer_index];
849            let pixel_density = imgsource.descriptor.density.unwrap();
850            for inner_index in (outer_index + 1)..len {
851                let imgsource2 = &source_set.image_sources[inner_index];
852                if pixel_density == imgsource2.descriptor.density.unwrap() {
853                    repeat_indices.insert(inner_index);
854                }
855            }
856        }
857
858        let mut max = (0f64, 0);
859        let img_sources = &mut vec![];
860        for (index, image_source) in source_set.image_sources.iter().enumerate() {
861            if repeat_indices.contains(&index) {
862                continue;
863            }
864            let den = image_source.descriptor.density.unwrap();
865            if max.0 < den {
866                max = (den, img_sources.len());
867            }
868            img_sources.push(image_source);
869        }
870
871        // Step 2. In an implementation-defined manner, choose one image source from sourceSet. Let
872        // selectedSource be this choice.
873        let mut best_candidate = max;
874        let device_pixel_ratio = self
875            .owner_document()
876            .window()
877            .viewport_details()
878            .hidpi_scale_factor
879            .get() as f64;
880        for (index, image_source) in img_sources.iter().enumerate() {
881            let current_den = image_source.descriptor.density.unwrap();
882            if current_den < best_candidate.0 && current_den >= device_pixel_ratio {
883                best_candidate = (current_den, index);
884            }
885        }
886        let selected_source = img_sources.remove(best_candidate.1).clone();
887
888        // Step 3. Return selectedSource and its associated pixel density.
889        Some((
890            USVString(selected_source.url),
891            selected_source.descriptor.density.unwrap(),
892        ))
893    }
894
895    fn init_image_request(
896        &self,
897        request: &mut RefMut<'_, ImageRequest>,
898        url: &ServoUrl,
899        src: &USVString,
900        can_gc: CanGc,
901    ) {
902        request.parsed_url = Some(url.clone());
903        request.source_url = Some(src.clone());
904        request.image = None;
905        request.metadata = None;
906        let document = self.owner_document();
907        LoadBlocker::terminate(&request.blocker, can_gc);
908        *request.blocker.borrow_mut() =
909            Some(LoadBlocker::new(&document, LoadType::Image(url.clone())));
910    }
911
912    /// Step 13-17 of html.spec.whatwg.org/multipage/#update-the-image-data
913    fn prepare_image_request(
914        &self,
915        url: &ServoUrl,
916        src: &USVString,
917        selected_pixel_density: f64,
918        can_gc: CanGc,
919    ) {
920        match self.image_request.get() {
921            ImageRequestPhase::Pending => {
922                if let Some(pending_url) = self.pending_request.borrow().parsed_url.clone() {
923                    // Step 13
924                    if pending_url == *url {
925                        return;
926                    }
927                }
928            },
929            ImageRequestPhase::Current => {
930                let mut current_request = self.current_request.borrow_mut();
931                let mut pending_request = self.pending_request.borrow_mut();
932                // step 16, create a new "image_request"
933                match (current_request.parsed_url.clone(), current_request.state) {
934                    (Some(parsed_url), State::PartiallyAvailable) => {
935                        // Step 14
936                        if parsed_url == *url {
937                            // Step 15 abort pending request
938                            pending_request.image = None;
939                            pending_request.parsed_url = None;
940                            LoadBlocker::terminate(&pending_request.blocker, can_gc);
941                            // TODO: queue a task to restart animation, if restart-animation is set
942                            return;
943                        }
944                        pending_request.current_pixel_density = Some(selected_pixel_density);
945                        self.image_request.set(ImageRequestPhase::Pending);
946                        self.init_image_request(&mut pending_request, url, src, can_gc);
947                    },
948                    (_, State::Broken) | (_, State::Unavailable) => {
949                        // Step 17
950                        current_request.current_pixel_density = Some(selected_pixel_density);
951                        self.init_image_request(&mut current_request, url, src, can_gc);
952                        self.reject_image_decode_promises();
953                    },
954                    (_, _) => {
955                        // step 17
956                        pending_request.current_pixel_density = Some(selected_pixel_density);
957                        self.image_request.set(ImageRequestPhase::Pending);
958                        self.init_image_request(&mut pending_request, url, src, can_gc);
959                    },
960                }
961            },
962        }
963        self.fetch_image(url, can_gc);
964    }
965
966    /// Step 8-12 of html.spec.whatwg.org/multipage/#update-the-image-data
967    fn update_the_image_data_sync_steps(&self, can_gc: CanGc) {
968        let document = self.owner_document();
969        let global = self.owner_global();
970        let task_manager = global.task_manager();
971        let task_source = task_manager.dom_manipulation_task_source();
972        let this = Trusted::new(self);
973        let (src, pixel_density) = match self.select_image_source() {
974            // Step 8
975            Some(data) => data,
976            None => {
977                self.abort_request(State::Broken, ImageRequestPhase::Current, can_gc);
978                self.abort_request(State::Broken, ImageRequestPhase::Pending, can_gc);
979                // Step 9.
980                task_source.queue(task!(image_null_source_error: move || {
981                    let this = this.root();
982                    {
983                        let mut current_request =
984                            this.current_request.borrow_mut();
985                        current_request.source_url = None;
986                        current_request.parsed_url = None;
987                    }
988                    let elem = this.upcast::<Element>();
989                    let src_present = elem.has_attribute(&local_name!("src"));
990
991                    if src_present || Self::uses_srcset_or_picture(elem) {
992                        this.upcast::<EventTarget>().fire_event(atom!("error"), CanGc::note());
993                    }
994                }));
995                return;
996            },
997        };
998
999        // Step 11
1000        let base_url = document.base_url();
1001        let parsed_url = base_url.join(&src.0);
1002        match parsed_url {
1003            Ok(url) => {
1004                // Step 13-17
1005                self.prepare_image_request(&url, &src, pixel_density, can_gc);
1006            },
1007            Err(_) => {
1008                self.abort_request(State::Broken, ImageRequestPhase::Current, can_gc);
1009                self.abort_request(State::Broken, ImageRequestPhase::Pending, can_gc);
1010                // Step 12.1-12.5.
1011                let src = src.0;
1012                task_source.queue(task!(image_selected_source_error: move || {
1013                    let this = this.root();
1014                    {
1015                        let mut current_request =
1016                            this.current_request.borrow_mut();
1017                        current_request.source_url = Some(USVString(src))
1018                    }
1019                    this.upcast::<EventTarget>().fire_event(atom!("error"), CanGc::note());
1020
1021                }));
1022            },
1023        }
1024    }
1025
1026    /// <https://html.spec.whatwg.org/multipage/#update-the-image-data>
1027    pub(crate) fn update_the_image_data(&self, can_gc: CanGc) {
1028        let document = self.owner_document();
1029        let window = document.window();
1030        let elem = self.upcast::<Element>();
1031        let src = elem.get_url_attribute(&local_name!("src"));
1032        let base_url = document.base_url();
1033
1034        // https://html.spec.whatwg.org/multipage/#reacting-to-dom-mutations
1035        // Always first set the current request to unavailable,
1036        // ensuring img.complete is false.
1037        {
1038            let mut current_request = self.current_request.borrow_mut();
1039            current_request.state = State::Unavailable;
1040        }
1041
1042        if !document.is_active() {
1043            // Step 1 (if the document is inactive)
1044            // TODO: use GlobalScope::enqueue_microtask,
1045            // to queue micro task to come back to this algorithm
1046        }
1047        // Step 2 abort if user-agent does not supports images
1048        // NOTE: Servo only supports images, skipping this step
1049
1050        // Step 3, 4
1051        let mut selected_source = None;
1052        let mut pixel_density = None;
1053        let src_set = elem.get_url_attribute(&local_name!("srcset"));
1054        let is_parent_picture = elem
1055            .upcast::<Node>()
1056            .GetParentElement()
1057            .is_some_and(|p| p.is::<HTMLPictureElement>());
1058        if src_set.is_empty() && !is_parent_picture && !src.is_empty() {
1059            selected_source = Some(src.clone());
1060            pixel_density = Some(1_f64);
1061        };
1062
1063        // Step 5
1064        self.last_selected_source
1065            .borrow_mut()
1066            .clone_from(&selected_source);
1067
1068        // Step 6, check the list of available images
1069        if let Some(src) = selected_source {
1070            if let Ok(img_url) = base_url.join(&src) {
1071                let image_cache = window.image_cache();
1072                let response = image_cache.get_image(
1073                    img_url.clone(),
1074                    window.origin().immutable().clone(),
1075                    cors_setting_for_element(self.upcast()),
1076                );
1077
1078                if let Some(image) = response {
1079                    // Cancel any outstanding tasks that were queued before the src was
1080                    // set on this element.
1081                    self.generation.set(self.generation.get() + 1);
1082                    // Step 6.3
1083                    let metadata = image.metadata();
1084                    // Step 6.3.2 abort requests
1085                    self.abort_request(
1086                        State::CompletelyAvailable,
1087                        ImageRequestPhase::Current,
1088                        can_gc,
1089                    );
1090                    self.abort_request(State::Unavailable, ImageRequestPhase::Pending, can_gc);
1091                    let mut current_request = self.current_request.borrow_mut();
1092                    current_request.final_url = Some(img_url.clone());
1093                    current_request.image = Some(image);
1094                    current_request.metadata = Some(metadata);
1095                    // Step 6.3.6
1096                    current_request.current_pixel_density = pixel_density;
1097                    let this = Trusted::new(self);
1098                    let src = src.0;
1099
1100                    self.owner_global()
1101                        .task_manager()
1102                        .dom_manipulation_task_source()
1103                        .queue(task!(image_load_event: move || {
1104                            let this = this.root();
1105                            {
1106                                let mut current_request =
1107                                    this.current_request.borrow_mut();
1108                                current_request.parsed_url = Some(img_url);
1109                                current_request.source_url = Some(USVString(src));
1110                            }
1111                            // TODO: restart animation, if set.
1112                            this.upcast::<EventTarget>().fire_event(atom!("load"), CanGc::note());
1113                        }));
1114                    return;
1115                }
1116            }
1117        }
1118        // step 7, await a stable state.
1119        self.generation.set(self.generation.get() + 1);
1120        let task = ImageElementMicrotask::StableStateUpdateImageData {
1121            elem: DomRoot::from_ref(self),
1122            generation: self.generation.get(),
1123        };
1124        ScriptThread::await_stable_state(Microtask::ImageElement(task));
1125    }
1126
1127    /// <https://html.spec.whatwg.org/multipage/#img-environment-changes>
1128    pub(crate) fn react_to_environment_changes(&self) {
1129        // Step 1
1130        let task = ImageElementMicrotask::EnvironmentChanges {
1131            elem: DomRoot::from_ref(self),
1132            generation: self.generation.get(),
1133        };
1134        ScriptThread::await_stable_state(Microtask::ImageElement(task));
1135    }
1136
1137    /// Step 2-12 of <https://html.spec.whatwg.org/multipage/#img-environment-changes>
1138    fn react_to_environment_changes_sync_steps(&self, generation: u32, can_gc: CanGc) {
1139        let elem = self.upcast::<Element>();
1140        let document = elem.owner_document();
1141        let has_pending_request = matches!(self.image_request.get(), ImageRequestPhase::Pending);
1142
1143        // Step 2
1144        if !document.is_active() || !Self::uses_srcset_or_picture(elem) || has_pending_request {
1145            return;
1146        }
1147
1148        // Steps 3-4
1149        let (selected_source, selected_pixel_density) = match self.select_image_source() {
1150            Some(selected) => selected,
1151            None => return,
1152        };
1153
1154        // Step 5
1155        let same_source = match *self.last_selected_source.borrow() {
1156            Some(ref last_src) => *last_src == selected_source,
1157            _ => false,
1158        };
1159
1160        let same_selected_pixel_density = match self.current_request.borrow().current_pixel_density
1161        {
1162            Some(den) => selected_pixel_density == den,
1163            _ => false,
1164        };
1165
1166        if same_source && same_selected_pixel_density {
1167            return;
1168        }
1169
1170        let base_url = document.base_url();
1171        // Step 6
1172        let img_url = match base_url.join(&selected_source.0) {
1173            Ok(url) => url,
1174            Err(_) => return,
1175        };
1176
1177        // Step 12
1178        self.image_request.set(ImageRequestPhase::Pending);
1179        self.init_image_request(
1180            &mut self.pending_request.borrow_mut(),
1181            &img_url,
1182            &selected_source,
1183            can_gc,
1184        );
1185
1186        // Step 14
1187        let window = self.owner_window();
1188        let cache_result = window.image_cache().get_cached_image_status(
1189            img_url.clone(),
1190            window.origin().immutable().clone(),
1191            cors_setting_for_element(self.upcast()),
1192            UsePlaceholder::No,
1193        );
1194
1195        let change_type = ChangeType::Environment {
1196            selected_source: selected_source.clone(),
1197            selected_pixel_density,
1198        };
1199
1200        match cache_result {
1201            ImageCacheResult::Available(ImageOrMetadataAvailable::ImageAvailable { .. }) => {
1202                // Step 15
1203                self.finish_reacting_to_environment_change(
1204                    selected_source,
1205                    generation,
1206                    selected_pixel_density,
1207                )
1208            },
1209            ImageCacheResult::Available(ImageOrMetadataAvailable::MetadataAvailable(m, id)) => {
1210                self.process_image_response_for_environment_change(
1211                    ImageResponse::MetadataLoaded(m),
1212                    selected_source,
1213                    generation,
1214                    selected_pixel_density,
1215                    can_gc,
1216                );
1217                self.register_image_cache_callback(id, change_type);
1218            },
1219            ImageCacheResult::LoadError => {
1220                self.process_image_response_for_environment_change(
1221                    ImageResponse::None,
1222                    selected_source,
1223                    generation,
1224                    selected_pixel_density,
1225                    can_gc,
1226                );
1227            },
1228            ImageCacheResult::ReadyForRequest(id) => {
1229                self.fetch_request(&img_url, id);
1230                self.register_image_cache_callback(id, change_type);
1231            },
1232            ImageCacheResult::Pending(id) => {
1233                self.register_image_cache_callback(id, change_type);
1234            },
1235        }
1236    }
1237
1238    // Step 2 for <https://html.spec.whatwg.org/multipage/#dom-img-decode>
1239    fn react_to_decode_image_sync_steps(&self, promise: Rc<Promise>, can_gc: CanGc) {
1240        let document = self.owner_document();
1241        // Step 2.1 of <https://html.spec.whatwg.org/multipage/#dom-img-decode>
1242        if !document.is_fully_active() ||
1243            matches!(self.current_request.borrow().state, State::Broken)
1244        {
1245            promise.reject_error(Error::Encoding, can_gc);
1246        } else if matches!(
1247            self.current_request.borrow().state,
1248            State::CompletelyAvailable
1249        ) {
1250            // this doesn't follow the spec, but it's been discussed in <https://github.com/whatwg/html/issues/4217>
1251            promise.resolve_native(&(), can_gc);
1252        } else {
1253            self.image_decode_promises
1254                .borrow_mut()
1255                .push(promise.clone());
1256        }
1257    }
1258
1259    /// <https://html.spec.whatwg.org/multipage/#dom-img-decode>
1260    fn resolve_image_decode_promises(&self) {
1261        if self.image_decode_promises.borrow().is_empty() {
1262            return;
1263        }
1264
1265        // Step 3. If the decoding process completes successfully, then queue a
1266        // global task on the DOM manipulation task source with global to
1267        // resolve promise with undefined.
1268        let trusted_image_decode_promises: Vec<TrustedPromise> = self
1269            .image_decode_promises
1270            .borrow()
1271            .iter()
1272            .map(|promise| TrustedPromise::new(promise.clone()))
1273            .collect();
1274
1275        self.image_decode_promises.borrow_mut().clear();
1276
1277        self.owner_global()
1278            .task_manager()
1279            .dom_manipulation_task_source()
1280            .queue(task!(fulfill_image_decode_promises: move || {
1281                for trusted_promise in trusted_image_decode_promises {
1282                    trusted_promise.root().resolve_native(&(), CanGc::note());
1283                }
1284            }));
1285    }
1286
1287    /// <https://html.spec.whatwg.org/multipage/#dom-img-decode>
1288    fn reject_image_decode_promises(&self) {
1289        if self.image_decode_promises.borrow().is_empty() {
1290            return;
1291        }
1292
1293        // Step 3. Queue a global task on the DOM manipulation task source with
1294        // global to reject promise with an "EncodingError" DOMException.
1295        let trusted_image_decode_promises: Vec<TrustedPromise> = self
1296            .image_decode_promises
1297            .borrow()
1298            .iter()
1299            .map(|promise| TrustedPromise::new(promise.clone()))
1300            .collect();
1301
1302        self.image_decode_promises.borrow_mut().clear();
1303
1304        self.owner_global()
1305            .task_manager()
1306            .dom_manipulation_task_source()
1307            .queue(task!(reject_image_decode_promises: move || {
1308                for trusted_promise in trusted_image_decode_promises {
1309                    trusted_promise.root().reject_error(Error::Encoding, CanGc::note());
1310                }
1311            }));
1312    }
1313
1314    /// Step 15 for <https://html.spec.whatwg.org/multipage/#img-environment-changes>
1315    fn finish_reacting_to_environment_change(
1316        &self,
1317        src: USVString,
1318        generation: u32,
1319        selected_pixel_density: f64,
1320    ) {
1321        let this = Trusted::new(self);
1322        let src = src.0;
1323        self.owner_global().task_manager().dom_manipulation_task_source().queue(
1324            task!(image_load_event: move || {
1325                let this = this.root();
1326                let relevant_mutation = this.generation.get() != generation;
1327                // Step 15.1
1328                if relevant_mutation {
1329                    this.abort_request(State::Unavailable, ImageRequestPhase::Pending, CanGc::note());
1330                    return;
1331                }
1332                // Step 15.2
1333                *this.last_selected_source.borrow_mut() = Some(USVString(src));
1334
1335                {
1336                    let mut pending_request = this.pending_request.borrow_mut();
1337                    pending_request.current_pixel_density = Some(selected_pixel_density);
1338
1339                    // Step 15.3
1340                    pending_request.state = State::CompletelyAvailable;
1341
1342                    // Step 15.4
1343                    // Already a part of the list of available images due to Step 14
1344
1345                    // Step 15.5
1346                    #[allow(clippy::swap_with_temporary)]
1347                    mem::swap(&mut this.current_request.borrow_mut(), &mut pending_request);
1348                }
1349                this.abort_request(State::Unavailable, ImageRequestPhase::Pending, CanGc::note());
1350
1351                // Step 15.6
1352                this.upcast::<Node>().dirty(NodeDamage::Other);
1353
1354                // Step 15.7
1355                this.upcast::<EventTarget>().fire_event(atom!("load"), CanGc::note());
1356            })
1357        );
1358    }
1359
1360    fn uses_srcset_or_picture(elem: &Element) -> bool {
1361        let has_src = elem.has_attribute(&local_name!("srcset"));
1362        let is_parent_picture = elem
1363            .upcast::<Node>()
1364            .GetParentElement()
1365            .is_some_and(|p| p.is::<HTMLPictureElement>());
1366        has_src || is_parent_picture
1367    }
1368
1369    fn new_inherited(
1370        local_name: LocalName,
1371        prefix: Option<Prefix>,
1372        document: &Document,
1373        creator: ElementCreator,
1374    ) -> HTMLImageElement {
1375        HTMLImageElement {
1376            htmlelement: HTMLElement::new_inherited(local_name, prefix, document),
1377            image_request: Cell::new(ImageRequestPhase::Current),
1378            current_request: DomRefCell::new(ImageRequest {
1379                state: State::Unavailable,
1380                parsed_url: None,
1381                source_url: None,
1382                image: None,
1383                metadata: None,
1384                blocker: DomRefCell::new(None),
1385                final_url: None,
1386                current_pixel_density: None,
1387            }),
1388            pending_request: DomRefCell::new(ImageRequest {
1389                state: State::Unavailable,
1390                parsed_url: None,
1391                source_url: None,
1392                image: None,
1393                metadata: None,
1394                blocker: DomRefCell::new(None),
1395                final_url: None,
1396                current_pixel_density: None,
1397            }),
1398            form_owner: Default::default(),
1399            generation: Default::default(),
1400            source_set: DomRefCell::new(SourceSet::new()),
1401            dimension_attribute_source: Default::default(),
1402            last_selected_source: DomRefCell::new(None),
1403            image_decode_promises: DomRefCell::new(vec![]),
1404            line_number: creator.return_line_number(),
1405        }
1406    }
1407
1408    #[cfg_attr(crown, allow(crown::unrooted_must_root))]
1409    pub(crate) fn new(
1410        local_name: LocalName,
1411        prefix: Option<Prefix>,
1412        document: &Document,
1413        proto: Option<HandleObject>,
1414        creator: ElementCreator,
1415        can_gc: CanGc,
1416    ) -> DomRoot<HTMLImageElement> {
1417        let image_element = Node::reflect_node_with_proto(
1418            Box::new(HTMLImageElement::new_inherited(
1419                local_name, prefix, document, creator,
1420            )),
1421            document,
1422            proto,
1423            can_gc,
1424        );
1425        image_element
1426            .dimension_attribute_source
1427            .set(Some(image_element.upcast()));
1428        image_element
1429    }
1430
1431    pub(crate) fn areas(&self) -> Option<Vec<DomRoot<HTMLAreaElement>>> {
1432        let elem = self.upcast::<Element>();
1433        let usemap_attr = elem.get_attribute(&ns!(), &local_name!("usemap"))?;
1434
1435        let value = usemap_attr.value();
1436
1437        if value.is_empty() || !value.is_char_boundary(1) {
1438            return None;
1439        }
1440
1441        let (first, last) = value.split_at(1);
1442
1443        if first != "#" || last.is_empty() {
1444            return None;
1445        }
1446
1447        let useMapElements = self
1448            .owner_document()
1449            .upcast::<Node>()
1450            .traverse_preorder(ShadowIncluding::No)
1451            .filter_map(DomRoot::downcast::<HTMLMapElement>)
1452            .find(|n| {
1453                n.upcast::<Element>()
1454                    .get_name()
1455                    .is_some_and(|n| *n == *last)
1456            });
1457
1458        useMapElements.map(|mapElem| mapElem.get_area_elements())
1459    }
1460
1461    pub(crate) fn same_origin(&self, origin: &MutableOrigin) -> bool {
1462        if let Some(ref image) = self.current_request.borrow().image {
1463            return image.cors_status() == CorsStatus::Safe;
1464        }
1465
1466        self.current_request
1467            .borrow()
1468            .final_url
1469            .as_ref()
1470            .is_some_and(|url| url.scheme() == "data" || url.origin().same_origin(origin))
1471    }
1472
1473    fn generation_id(&self) -> u32 {
1474        self.generation.get()
1475    }
1476}
1477
1478#[derive(JSTraceable, MallocSizeOf)]
1479pub(crate) enum ImageElementMicrotask {
1480    StableStateUpdateImageData {
1481        elem: DomRoot<HTMLImageElement>,
1482        generation: u32,
1483    },
1484    EnvironmentChanges {
1485        elem: DomRoot<HTMLImageElement>,
1486        generation: u32,
1487    },
1488    Decode {
1489        elem: DomRoot<HTMLImageElement>,
1490        #[ignore_malloc_size_of = "promises are hard"]
1491        promise: Rc<Promise>,
1492    },
1493}
1494
1495impl MicrotaskRunnable for ImageElementMicrotask {
1496    fn handler(&self, can_gc: CanGc) {
1497        match *self {
1498            ImageElementMicrotask::StableStateUpdateImageData {
1499                ref elem,
1500                ref generation,
1501            } => {
1502                // Step 7 of https://html.spec.whatwg.org/multipage/#update-the-image-data,
1503                // stop here if other instances of this algorithm have been scheduled
1504                if elem.generation.get() == *generation {
1505                    elem.update_the_image_data_sync_steps(can_gc);
1506                }
1507            },
1508            ImageElementMicrotask::EnvironmentChanges {
1509                ref elem,
1510                ref generation,
1511            } => {
1512                elem.react_to_environment_changes_sync_steps(*generation, can_gc);
1513            },
1514            ImageElementMicrotask::Decode {
1515                ref elem,
1516                ref promise,
1517            } => {
1518                elem.react_to_decode_image_sync_steps(promise.clone(), can_gc);
1519            },
1520        }
1521    }
1522
1523    fn enter_realm(&self) -> JSAutoRealm {
1524        match self {
1525            &ImageElementMicrotask::StableStateUpdateImageData { ref elem, .. } |
1526            &ImageElementMicrotask::EnvironmentChanges { ref elem, .. } |
1527            &ImageElementMicrotask::Decode { ref elem, .. } => enter_realm(&**elem),
1528        }
1529    }
1530}
1531
1532pub(crate) trait LayoutHTMLImageElementHelpers {
1533    fn image_url(self) -> Option<ServoUrl>;
1534    fn image_density(self) -> Option<f64>;
1535    fn image_data(self) -> (Option<Image>, Option<ImageMetadata>);
1536    fn get_width(self) -> LengthOrPercentageOrAuto;
1537    fn get_height(self) -> LengthOrPercentageOrAuto;
1538}
1539
1540impl<'dom> LayoutDom<'dom, HTMLImageElement> {
1541    #[allow(unsafe_code)]
1542    fn current_request(self) -> &'dom ImageRequest {
1543        unsafe { self.unsafe_get().current_request.borrow_for_layout() }
1544    }
1545
1546    #[allow(unsafe_code)]
1547    fn dimension_attribute_source(self) -> LayoutDom<'dom, Element> {
1548        unsafe {
1549            self.unsafe_get()
1550                .dimension_attribute_source
1551                .get_inner_as_layout()
1552                .expect("dimension attribute source should be always non-null")
1553        }
1554    }
1555}
1556
1557impl LayoutHTMLImageElementHelpers for LayoutDom<'_, HTMLImageElement> {
1558    fn image_url(self) -> Option<ServoUrl> {
1559        self.current_request().parsed_url.clone()
1560    }
1561
1562    fn image_data(self) -> (Option<Image>, Option<ImageMetadata>) {
1563        let current_request = self.current_request();
1564        (current_request.image.clone(), current_request.metadata)
1565    }
1566
1567    fn image_density(self) -> Option<f64> {
1568        self.current_request().current_pixel_density
1569    }
1570
1571    fn get_width(self) -> LengthOrPercentageOrAuto {
1572        self.dimension_attribute_source()
1573            .get_attr_for_layout(&ns!(), &local_name!("width"))
1574            .map(|x| *AttrValue::from_dimension(x.to_string()).as_dimension())
1575            .unwrap_or(LengthOrPercentageOrAuto::Auto)
1576    }
1577
1578    fn get_height(self) -> LengthOrPercentageOrAuto {
1579        self.dimension_attribute_source()
1580            .get_attr_for_layout(&ns!(), &local_name!("height"))
1581            .map(|x| *AttrValue::from_dimension(x.to_string()).as_dimension())
1582            .unwrap_or(LengthOrPercentageOrAuto::Auto)
1583    }
1584}
1585
1586/// <https://html.spec.whatwg.org/multipage/#parse-a-sizes-attribute>
1587fn parse_a_sizes_attribute(value: &str) -> SourceSizeList {
1588    let mut input = ParserInput::new(value);
1589    let mut parser = Parser::new(&mut input);
1590    let url_data = Url::parse("about:blank").unwrap().into();
1591    let context = ParserContext::new(
1592        Origin::Author,
1593        &url_data,
1594        Some(CssRuleType::Style),
1595        // FIXME(emilio): why ::empty() instead of ::DEFAULT? Also, what do
1596        // browsers do regarding quirks-mode in a media list?
1597        ParsingMode::empty(),
1598        QuirksMode::NoQuirks,
1599        /* namespaces = */ Default::default(),
1600        None,
1601        None,
1602    );
1603    SourceSizeList::parse(&context, &mut parser)
1604}
1605
1606fn get_correct_referrerpolicy_from_raw_token(token: &DOMString) -> DOMString {
1607    if token.is_empty() {
1608        // Empty token is treated as the default referrer policy inside determine_policy_for_token,
1609        // so it should remain unchanged.
1610        DOMString::new()
1611    } else {
1612        let policy = determine_policy_for_token(token);
1613
1614        if policy == ReferrerPolicy::EmptyString {
1615            return DOMString::new();
1616        }
1617
1618        DOMString::from_string(policy.to_string())
1619    }
1620}
1621
1622#[allow(non_snake_case)]
1623impl HTMLImageElementMethods<crate::DomTypeHolder> for HTMLImageElement {
1624    // https://html.spec.whatwg.org/multipage/#dom-image
1625    fn Image(
1626        window: &Window,
1627        proto: Option<HandleObject>,
1628        can_gc: CanGc,
1629        width: Option<u32>,
1630        height: Option<u32>,
1631    ) -> Fallible<DomRoot<HTMLImageElement>> {
1632        let element = Element::create(
1633            QualName::new(None, ns!(html), local_name!("img")),
1634            None,
1635            &window.Document(),
1636            ElementCreator::ScriptCreated,
1637            CustomElementCreationMode::Synchronous,
1638            proto,
1639            can_gc,
1640        );
1641
1642        let image = DomRoot::downcast::<HTMLImageElement>(element).unwrap();
1643        if let Some(w) = width {
1644            image.SetWidth(w, can_gc);
1645        }
1646        if let Some(h) = height {
1647            image.SetHeight(h, can_gc);
1648        }
1649
1650        // run update_the_image_data when the element is created.
1651        // https://html.spec.whatwg.org/multipage/#when-to-obtain-images
1652        image.update_the_image_data(can_gc);
1653
1654        Ok(image)
1655    }
1656
1657    // https://html.spec.whatwg.org/multipage/#dom-img-alt
1658    make_getter!(Alt, "alt");
1659    // https://html.spec.whatwg.org/multipage/#dom-img-alt
1660    make_setter!(SetAlt, "alt");
1661
1662    // https://html.spec.whatwg.org/multipage/#dom-img-src
1663    make_url_getter!(Src, "src");
1664
1665    // https://html.spec.whatwg.org/multipage/#dom-img-src
1666    make_url_setter!(SetSrc, "src");
1667
1668    // https://html.spec.whatwg.org/multipage/#dom-img-srcset
1669    make_url_getter!(Srcset, "srcset");
1670    // https://html.spec.whatwg.org/multipage/#dom-img-src
1671    make_url_setter!(SetSrcset, "srcset");
1672
1673    // https://html.spec.whatwg.org/multipage/#dom-img-crossOrigin
1674    fn GetCrossOrigin(&self) -> Option<DOMString> {
1675        reflect_cross_origin_attribute(self.upcast::<Element>())
1676    }
1677
1678    // https://html.spec.whatwg.org/multipage/#dom-img-crossOrigin
1679    fn SetCrossOrigin(&self, value: Option<DOMString>, can_gc: CanGc) {
1680        set_cross_origin_attribute(self.upcast::<Element>(), value, can_gc);
1681    }
1682
1683    // https://html.spec.whatwg.org/multipage/#dom-img-usemap
1684    make_getter!(UseMap, "usemap");
1685    // https://html.spec.whatwg.org/multipage/#dom-img-usemap
1686    make_setter!(SetUseMap, "usemap");
1687
1688    // https://html.spec.whatwg.org/multipage/#dom-img-ismap
1689    make_bool_getter!(IsMap, "ismap");
1690    // https://html.spec.whatwg.org/multipage/#dom-img-ismap
1691    make_bool_setter!(SetIsMap, "ismap");
1692
1693    // https://html.spec.whatwg.org/multipage/#dom-img-width
1694    fn Width(&self) -> u32 {
1695        let node = self.upcast::<Node>();
1696        node.content_box()
1697            .map(|rect| rect.size.width.to_px() as u32)
1698            .unwrap_or_else(|| self.NaturalWidth())
1699    }
1700
1701    // https://html.spec.whatwg.org/multipage/#dom-img-width
1702    fn SetWidth(&self, value: u32, can_gc: CanGc) {
1703        image_dimension_setter(self.upcast(), local_name!("width"), value, can_gc);
1704    }
1705
1706    // https://html.spec.whatwg.org/multipage/#dom-img-height
1707    fn Height(&self) -> u32 {
1708        let node = self.upcast::<Node>();
1709        node.content_box()
1710            .map(|rect| rect.size.height.to_px() as u32)
1711            .unwrap_or_else(|| self.NaturalHeight())
1712    }
1713
1714    // https://html.spec.whatwg.org/multipage/#dom-img-height
1715    fn SetHeight(&self, value: u32, can_gc: CanGc) {
1716        image_dimension_setter(self.upcast(), local_name!("height"), value, can_gc);
1717    }
1718
1719    // https://html.spec.whatwg.org/multipage/#dom-img-naturalwidth
1720    fn NaturalWidth(&self) -> u32 {
1721        let request = self.current_request.borrow();
1722        let pixel_density = request.current_pixel_density.unwrap_or(1f64);
1723
1724        match request.metadata {
1725            Some(ref metadata) => (metadata.width as f64 / pixel_density) as u32,
1726            None => 0,
1727        }
1728    }
1729
1730    // https://html.spec.whatwg.org/multipage/#dom-img-naturalheight
1731    fn NaturalHeight(&self) -> u32 {
1732        let request = self.current_request.borrow();
1733        let pixel_density = request.current_pixel_density.unwrap_or(1f64);
1734
1735        match request.metadata {
1736            Some(ref metadata) => (metadata.height as f64 / pixel_density) as u32,
1737            None => 0,
1738        }
1739    }
1740
1741    // https://html.spec.whatwg.org/multipage/#dom-img-complete
1742    fn Complete(&self) -> bool {
1743        let elem = self.upcast::<Element>();
1744        let srcset_absent = !elem.has_attribute(&local_name!("srcset"));
1745        if !elem.has_attribute(&local_name!("src")) && srcset_absent {
1746            return true;
1747        }
1748        let src = elem.get_string_attribute(&local_name!("src"));
1749        if srcset_absent && src.is_empty() {
1750            return true;
1751        }
1752        let request = self.current_request.borrow();
1753        let request_state = request.state;
1754        match request_state {
1755            State::CompletelyAvailable | State::Broken => true,
1756            State::PartiallyAvailable | State::Unavailable => false,
1757        }
1758    }
1759
1760    // https://html.spec.whatwg.org/multipage/#dom-img-currentsrc
1761    fn CurrentSrc(&self) -> USVString {
1762        let current_request = self.current_request.borrow();
1763        let url = &current_request.parsed_url;
1764        match *url {
1765            Some(ref url) => USVString(url.clone().into_string()),
1766            None => {
1767                let unparsed_url = &current_request.source_url;
1768                match *unparsed_url {
1769                    Some(ref url) => url.clone(),
1770                    None => USVString("".to_owned()),
1771                }
1772            },
1773        }
1774    }
1775
1776    /// <https://html.spec.whatwg.org/multipage/#dom-img-referrerpolicy>
1777    fn ReferrerPolicy(&self) -> DOMString {
1778        reflect_referrer_policy_attribute(self.upcast::<Element>())
1779    }
1780
1781    // https://html.spec.whatwg.org/multipage/#dom-img-referrerpolicy
1782    fn SetReferrerPolicy(&self, value: DOMString, can_gc: CanGc) {
1783        let referrerpolicy_attr_name = local_name!("referrerpolicy");
1784        let element = self.upcast::<Element>();
1785        let previous_correct_attribute_value = get_correct_referrerpolicy_from_raw_token(
1786            &element.get_string_attribute(&referrerpolicy_attr_name),
1787        );
1788        let correct_value_or_empty_string = get_correct_referrerpolicy_from_raw_token(&value);
1789        if previous_correct_attribute_value != correct_value_or_empty_string {
1790            // Setting the attribute to the same value will update the image.
1791            // We don't want to start an update if referrerpolicy is set to the same value.
1792            element.set_string_attribute(
1793                &referrerpolicy_attr_name,
1794                correct_value_or_empty_string,
1795                can_gc,
1796            );
1797        }
1798    }
1799
1800    /// <https://html.spec.whatwg.org/multipage/#dom-img-decode>
1801    fn Decode(&self, can_gc: CanGc) -> Rc<Promise> {
1802        // Step 1
1803        let promise = Promise::new(&self.global(), can_gc);
1804
1805        // Step 2
1806        let task = ImageElementMicrotask::Decode {
1807            elem: DomRoot::from_ref(self),
1808            promise: promise.clone(),
1809        };
1810        ScriptThread::await_stable_state(Microtask::ImageElement(task));
1811
1812        // Step 3
1813        promise
1814    }
1815
1816    // https://html.spec.whatwg.org/multipage/#dom-img-name
1817    make_getter!(Name, "name");
1818
1819    // https://html.spec.whatwg.org/multipage/#dom-img-name
1820    make_atomic_setter!(SetName, "name");
1821
1822    // https://html.spec.whatwg.org/multipage/#dom-img-align
1823    make_getter!(Align, "align");
1824
1825    // https://html.spec.whatwg.org/multipage/#dom-img-align
1826    make_setter!(SetAlign, "align");
1827
1828    // https://html.spec.whatwg.org/multipage/#dom-img-hspace
1829    make_uint_getter!(Hspace, "hspace");
1830
1831    // https://html.spec.whatwg.org/multipage/#dom-img-hspace
1832    make_uint_setter!(SetHspace, "hspace");
1833
1834    // https://html.spec.whatwg.org/multipage/#dom-img-vspace
1835    make_uint_getter!(Vspace, "vspace");
1836
1837    // https://html.spec.whatwg.org/multipage/#dom-img-vspace
1838    make_uint_setter!(SetVspace, "vspace");
1839
1840    // https://html.spec.whatwg.org/multipage/#dom-img-longdesc
1841    make_getter!(LongDesc, "longdesc");
1842
1843    // https://html.spec.whatwg.org/multipage/#dom-img-longdesc
1844    make_setter!(SetLongDesc, "longdesc");
1845
1846    // https://html.spec.whatwg.org/multipage/#dom-img-border
1847    make_getter!(Border, "border");
1848
1849    // https://html.spec.whatwg.org/multipage/#dom-img-border
1850    make_setter!(SetBorder, "border");
1851}
1852
1853impl VirtualMethods for HTMLImageElement {
1854    fn super_type(&self) -> Option<&dyn VirtualMethods> {
1855        Some(self.upcast::<HTMLElement>() as &dyn VirtualMethods)
1856    }
1857
1858    fn adopting_steps(&self, old_doc: &Document, can_gc: CanGc) {
1859        self.super_type().unwrap().adopting_steps(old_doc, can_gc);
1860        self.update_the_image_data(can_gc);
1861    }
1862
1863    fn attribute_mutated(&self, attr: &Attr, mutation: AttributeMutation, can_gc: CanGc) {
1864        self.super_type()
1865            .unwrap()
1866            .attribute_mutated(attr, mutation, can_gc);
1867        match attr.local_name() {
1868            &local_name!("src") |
1869            &local_name!("srcset") |
1870            &local_name!("width") |
1871            &local_name!("crossorigin") |
1872            &local_name!("sizes") |
1873            &local_name!("referrerpolicy") => self.update_the_image_data(can_gc),
1874            _ => {},
1875        }
1876    }
1877
1878    fn parse_plain_attribute(&self, name: &LocalName, value: DOMString) -> AttrValue {
1879        match name {
1880            &local_name!("width") | &local_name!("height") => {
1881                AttrValue::from_dimension(value.into())
1882            },
1883            &local_name!("hspace") | &local_name!("vspace") => AttrValue::from_u32(value.into(), 0),
1884            _ => self
1885                .super_type()
1886                .unwrap()
1887                .parse_plain_attribute(name, value),
1888        }
1889    }
1890
1891    fn handle_event(&self, event: &Event, can_gc: CanGc) {
1892        if event.type_() != atom!("click") {
1893            return;
1894        }
1895
1896        let area_elements = self.areas();
1897        let elements = match area_elements {
1898            Some(x) => x,
1899            None => return,
1900        };
1901
1902        // Fetch click coordinates
1903        let mouse_event = match event.downcast::<MouseEvent>() {
1904            Some(x) => x,
1905            None => return,
1906        };
1907
1908        let point = Point2D::new(
1909            mouse_event.ClientX().to_f32().unwrap(),
1910            mouse_event.ClientY().to_f32().unwrap(),
1911        );
1912        let bcr = self.upcast::<Element>().GetBoundingClientRect(can_gc);
1913        let bcr_p = Point2D::new(bcr.X() as f32, bcr.Y() as f32);
1914
1915        // Walk HTMLAreaElements
1916        for element in elements {
1917            let shape = element.get_shape_from_coords();
1918            let shp = match shape {
1919                Some(x) => x.absolute_coords(bcr_p),
1920                None => return,
1921            };
1922            if shp.hit_test(&point) {
1923                element.activation_behavior(event, self.upcast(), can_gc);
1924                return;
1925            }
1926        }
1927    }
1928
1929    fn bind_to_tree(&self, context: &BindContext, can_gc: CanGc) {
1930        if let Some(s) = self.super_type() {
1931            s.bind_to_tree(context, can_gc);
1932        }
1933        let document = self.owner_document();
1934        if context.tree_connected {
1935            document.register_responsive_image(self);
1936        }
1937
1938        // The element is inserted into a picture parent element
1939        // https://html.spec.whatwg.org/multipage/#relevant-mutations
1940        if let Some(parent) = self.upcast::<Node>().GetParentElement() {
1941            if parent.is::<HTMLPictureElement>() {
1942                self.update_the_image_data(can_gc);
1943            }
1944        }
1945    }
1946
1947    fn unbind_from_tree(&self, context: &UnbindContext, can_gc: CanGc) {
1948        self.super_type().unwrap().unbind_from_tree(context, can_gc);
1949        let document = self.owner_document();
1950        document.unregister_responsive_image(self);
1951
1952        // The element is removed from a picture parent element
1953        // https://html.spec.whatwg.org/multipage/#relevant-mutations
1954        if context.parent.is::<HTMLPictureElement>() {
1955            self.update_the_image_data(can_gc);
1956        }
1957    }
1958}
1959
1960impl FormControl for HTMLImageElement {
1961    fn form_owner(&self) -> Option<DomRoot<HTMLFormElement>> {
1962        self.form_owner.get()
1963    }
1964
1965    fn set_form_owner(&self, form: Option<&HTMLFormElement>) {
1966        self.form_owner.set(form);
1967    }
1968
1969    fn to_element(&self) -> &Element {
1970        self.upcast::<Element>()
1971    }
1972
1973    fn is_listed(&self) -> bool {
1974        false
1975    }
1976}
1977
1978fn image_dimension_setter(element: &Element, attr: LocalName, value: u32, can_gc: CanGc) {
1979    // This setter is a bit weird: the IDL type is unsigned long, but it's parsed as
1980    // a dimension for rendering.
1981    let value = if value > UNSIGNED_LONG_MAX { 0 } else { value };
1982
1983    // FIXME: There are probably quite a few more cases of this. This is the
1984    // only overflow that was hitting on automation, but we should consider what
1985    // to do in the general case case.
1986    //
1987    // See <https://github.com/servo/app_units/issues/22>
1988    let pixel_value = if value > (i32::MAX / AU_PER_PX) as u32 {
1989        0
1990    } else {
1991        value
1992    };
1993
1994    let dim = LengthOrPercentageOrAuto::Length(Au::from_px(pixel_value as i32));
1995    let value = AttrValue::Dimension(value.to_string(), dim);
1996    element.set_attribute(&attr, value, can_gc);
1997}
1998
1999/// Collect sequence of code points
2000/// <https://infra.spec.whatwg.org/#collect-a-sequence-of-code-points>
2001pub(crate) fn collect_sequence_characters(
2002    s: &str,
2003    mut predicate: impl FnMut(&char) -> bool,
2004) -> (&str, &str) {
2005    let i = s.find(|ch| !predicate(&ch)).unwrap_or(s.len());
2006    (&s[0..i], &s[i..])
2007}
2008
2009/// <https://html.spec.whatwg.org/multipage/#valid-non-negative-integer>
2010/// TODO(#39315): Use the validation rule from Stylo
2011fn is_valid_non_negative_integer_string(s: &str) -> bool {
2012    s.chars().all(|c| c.is_ascii_digit())
2013}
2014
2015/// <https://html.spec.whatwg.org/multipage/#valid-floating-point-number>
2016/// TODO(#39315): Use the validation rule from Stylo
2017fn is_valid_floating_point_number_string(s: &str) -> bool {
2018    static RE: LazyLock<Regex> =
2019        LazyLock::new(|| Regex::new(r"^-?(?:\d+\.\d+|\d+|\.\d+)(?:(e|E)(\+|\-)?\d+)?$").unwrap());
2020
2021    RE.is_match(s)
2022}
2023
2024/// Parse an `srcset` attribute:
2025/// <https://html.spec.whatwg.org/multipage/#parsing-a-srcset-attribute>.
2026pub fn parse_a_srcset_attribute(input: &str) -> Vec<ImageSource> {
2027    // > 1. Let input be the value passed to this algorithm.
2028    // > 2. Let position be a pointer into input, initially pointing at the start of the string.
2029    let mut current_index = 0;
2030
2031    // > 3. Let candidates be an initially empty source set.
2032    let mut candidates = vec![];
2033    while current_index < input.len() {
2034        let remaining_string = &input[current_index..];
2035
2036        // > 4. Splitting loop: Collect a sequence of code points that are ASCII whitespace or
2037        // > U+002C COMMA characters from input given position. If any U+002C COMMA
2038        // > characters were collected, that is a parse error.
2039        // NOTE: A parse error indicating a non-fatal mismatch between the input and the
2040        // requirements will be silently ignored to match the behavior of other browsers.
2041        // <https://html.spec.whatwg.org/multipage/#concept-microsyntax-parse-error>
2042        let (collected_characters, string_after_whitespace) =
2043            collect_sequence_characters(remaining_string, |character| {
2044                *character == ',' || character.is_ascii_whitespace()
2045            });
2046
2047        // Add the length of collected whitespace, to find the start of the URL we are going
2048        // to parse.
2049        current_index += collected_characters.len();
2050
2051        // > 5. If position is past the end of input, return candidates.
2052        if string_after_whitespace.is_empty() {
2053            return candidates;
2054        }
2055
2056        // 6. Collect a sequence of code points that are not ASCII whitespace from input
2057        // given position, and let that be url.
2058        let (url, _) =
2059            collect_sequence_characters(string_after_whitespace, |c| !char::is_ascii_whitespace(c));
2060
2061        // Add the length of `url` that we will parse to advance the index of the next part
2062        // of the string to prase.
2063        current_index += url.len();
2064
2065        // 7. Let descriptors be a new empty list.
2066        let mut descriptors = Vec::new();
2067
2068        // > 8. If url ends with U+002C (,), then:
2069        // >    1. Remove all trailing U+002C COMMA characters from url. If this removed
2070        // >       more than one character, that is a parse error.
2071        if url.ends_with(',') {
2072            let image_source = ImageSource {
2073                url: url.trim_end_matches(',').into(),
2074                descriptor: Descriptor {
2075                    width: None,
2076                    density: None,
2077                },
2078            };
2079            candidates.push(image_source);
2080            continue;
2081        }
2082
2083        // Otherwise:
2084        // > 8.1. Descriptor tokenizer: Skip ASCII whitespace within input given position.
2085        let descriptors_string = &input[current_index..];
2086        let (spaces, descriptors_string) =
2087            collect_sequence_characters(descriptors_string, |character| {
2088                character.is_ascii_whitespace()
2089            });
2090        current_index += spaces.len();
2091
2092        // > 8.2. Let current descriptor be the empty string.
2093        let mut current_descriptor = String::new();
2094
2095        // > 8.3. Let state be "in descriptor".
2096        let mut state = ParseState::InDescriptor;
2097
2098        // > 8.4. Let c be the character at position. Do the following depending on the value of
2099        // > state. For the purpose of this step, "EOF" is a special character representing
2100        // > that position is past the end of input.
2101        let mut characters = descriptors_string.chars();
2102        let mut character = characters.next();
2103        if let Some(character) = character {
2104            current_index += character.len_utf8();
2105        }
2106
2107        loop {
2108            match (state, character) {
2109                (ParseState::InDescriptor, Some(character)) if character.is_ascii_whitespace() => {
2110                    // > If current descriptor is not empty, append current descriptor to
2111                    // > descriptors and let current descriptor be the empty string. Set
2112                    // > state to after descriptor.
2113                    if !current_descriptor.is_empty() {
2114                        descriptors.push(current_descriptor);
2115                        current_descriptor = String::new();
2116                        state = ParseState::AfterDescriptor;
2117                    }
2118                },
2119                (ParseState::InDescriptor, Some(',')) => {
2120                    // > Advance position to the next character in input. If current descriptor
2121                    // > is not empty, append current descriptor to descriptors. Jump to the
2122                    // > step labeled descriptor parser.
2123                    if !current_descriptor.is_empty() {
2124                        descriptors.push(current_descriptor);
2125                    }
2126                    break;
2127                },
2128                (ParseState::InDescriptor, Some('(')) => {
2129                    // > Append c to current descriptor. Set state to in parens.
2130                    current_descriptor.push('(');
2131                    state = ParseState::InParens;
2132                },
2133                (ParseState::InDescriptor, Some(character)) => {
2134                    // > Append c to current descriptor.
2135                    current_descriptor.push(character);
2136                },
2137                (ParseState::InDescriptor, None) => {
2138                    // > If current descriptor is not empty, append current descriptor to
2139                    // > descriptors. Jump to the step labeled descriptor parser.
2140                    if !current_descriptor.is_empty() {
2141                        descriptors.push(current_descriptor);
2142                    }
2143                    break;
2144                },
2145                (ParseState::InParens, Some(')')) => {
2146                    // > Append c to current descriptor. Set state to in descriptor.
2147                    current_descriptor.push(')');
2148                    state = ParseState::InDescriptor;
2149                },
2150                (ParseState::InParens, Some(character)) => {
2151                    // Append c to current descriptor.
2152                    current_descriptor.push(character);
2153                },
2154                (ParseState::InParens, None) => {
2155                    // > Append current descriptor to descriptors. Jump to the step
2156                    // > labeled descriptor parser.
2157                    descriptors.push(current_descriptor);
2158                    break;
2159                },
2160                (ParseState::AfterDescriptor, Some(character))
2161                    if character.is_ascii_whitespace() =>
2162                {
2163                    // > Stay in this state.
2164                },
2165                (ParseState::AfterDescriptor, Some(_)) => {
2166                    // > Set state to in descriptor. Set position to the previous
2167                    // > character in input.
2168                    state = ParseState::InDescriptor;
2169                    continue;
2170                },
2171                (ParseState::AfterDescriptor, None) => {
2172                    // > Jump to the step labeled descriptor parser.
2173                    break;
2174                },
2175            }
2176
2177            character = characters.next();
2178            if let Some(character) = character {
2179                current_index += character.len_utf8();
2180            }
2181        }
2182
2183        // > 9. Descriptor parser: Let error be no.
2184        let mut error = false;
2185        // > 10. Let width be absent.
2186        let mut width: Option<u32> = None;
2187        // > 11. Let density be absent.
2188        let mut density: Option<f64> = None;
2189        // > 12. Let future-compat-h be absent.
2190        let mut future_compat_h: Option<u32> = None;
2191
2192        // > 13. For each descriptor in descriptors, run the appropriate set of steps from
2193        // > the following list:
2194        for descriptor in descriptors.into_iter() {
2195            let Some(last_character) = descriptor.chars().last() else {
2196                break;
2197            };
2198
2199            let first_part_of_string = &descriptor[0..descriptor.len() - last_character.len_utf8()];
2200            match last_character {
2201                // > If the descriptor consists of a valid non-negative integer followed by a
2202                // > U+0077 LATIN SMALL LETTER W character
2203                // > 1. If the user agent does not support the sizes attribute, let error be yes.
2204                // > 2. If width and density are not both absent, then let error be yes.
2205                // > 3. Apply the rules for parsing non-negative integers to the descriptor.
2206                // >    If the result is 0, let error be yes. Otherwise, let width be the result.
2207                'w' if is_valid_non_negative_integer_string(first_part_of_string) &&
2208                    density.is_none() &&
2209                    width.is_none() =>
2210                {
2211                    match parse_unsigned_integer(first_part_of_string.chars()) {
2212                        Ok(number) if number > 0 => {
2213                            width = Some(number);
2214                            continue;
2215                        },
2216                        _ => error = true,
2217                    }
2218                },
2219
2220                // > If the descriptor consists of a valid floating-point number followed by a
2221                // > U+0078 LATIN SMALL LETTER X character
2222                // > 1. If width, density and future-compat-h are not all absent, then let
2223                // >    error be yes.
2224                // > 2. Apply the rules for parsing floating-point number values to the
2225                // >    descriptor. If the result is less than 0, let error be yes. Otherwise, let
2226                // >    density be the result.
2227                //
2228                // The HTML specification has a procedure for parsing floats that is different enough from
2229                // the one that stylo uses, that it's better to use Rust's float parser here. This is
2230                // what Gecko does, but it also checks to see if the number is a valid HTML-spec compliant
2231                // number first. Not doing that means that we might be parsing numbers that otherwise
2232                // wouldn't parse.
2233                'x' if is_valid_floating_point_number_string(first_part_of_string) &&
2234                    width.is_none() &&
2235                    density.is_none() &&
2236                    future_compat_h.is_none() =>
2237                {
2238                    match first_part_of_string.parse::<f64>() {
2239                        Ok(number) if number.is_finite() && number >= 0. => {
2240                            density = Some(number);
2241                            continue;
2242                        },
2243                        _ => error = true,
2244                    }
2245                },
2246
2247                // > If the descriptor consists of a valid non-negative integer followed by a
2248                // > U+0068 LATIN SMALL LETTER H character
2249                // >   This is a parse error.
2250                // > 1. If future-compat-h and density are not both absent, then let error be
2251                // >    yes.
2252                // > 2. Apply the rules for parsing non-negative integers to the descriptor.
2253                // >    If the result is 0, let error be yes. Otherwise, let future-compat-h be the
2254                // >    result.
2255                'h' if is_valid_non_negative_integer_string(first_part_of_string) &&
2256                    future_compat_h.is_none() &&
2257                    density.is_none() =>
2258                {
2259                    match parse_unsigned_integer(first_part_of_string.chars()) {
2260                        Ok(number) if number > 0 => {
2261                            future_compat_h = Some(number);
2262                            continue;
2263                        },
2264                        _ => error = true,
2265                    }
2266                },
2267
2268                // > Anything else
2269                // >  Let error be yes.
2270                _ => error = true,
2271            }
2272
2273            if error {
2274                break;
2275            }
2276        }
2277
2278        // > 14. If future-compat-h is not absent and width is absent, let error be yes.
2279        if future_compat_h.is_some() && width.is_none() {
2280            error = true;
2281        }
2282
2283        // Step 15. If error is still no, then append a new image source to candidates whose URL is
2284        // url, associated with a width width if not absent and a pixel density density if not
2285        // absent. Otherwise, there is a parse error.
2286        if !error {
2287            let image_source = ImageSource {
2288                url: url.into(),
2289                descriptor: Descriptor { width, density },
2290            };
2291            candidates.push(image_source);
2292        }
2293
2294        // Step 16. Return to the step labeled splitting loop.
2295    }
2296    candidates
2297}
2298
2299#[derive(Clone)]
2300enum ChangeType {
2301    Environment {
2302        selected_source: USVString,
2303        selected_pixel_density: f64,
2304    },
2305    Element,
2306}
2307
2308/// Returns true if the given image MIME type is supported.
2309fn is_supported_image_mime_type(input: &str) -> bool {
2310    // Remove any leading and trailing HTTP whitespace from input.
2311    let mime_type = input.trim();
2312
2313    // <https://mimesniff.spec.whatwg.org/#mime-type-essence>
2314    let mime_type_essence = match mime_type.find(';') {
2315        Some(semi) => &mime_type[..semi],
2316        _ => mime_type,
2317    };
2318
2319    // The HTML specification says the type attribute may be present and if present, the value
2320    // must be a valid MIME type string. However an empty type attribute is implicitly supported
2321    // to match the behavior of other browsers.
2322    // <https://html.spec.whatwg.org/multipage/#attr-source-type>
2323    if mime_type_essence.is_empty() {
2324        return true;
2325    }
2326
2327    SUPPORTED_IMAGE_MIME_TYPES.contains(&mime_type_essence)
2328}