LibWeb: Implement 'decoding' attribute for HTMLImageElement

This commit implements the 'decoding' attribute for HTMLImageElement,
including parsing the attribute and implementing the decoding logic.

The 'decoding' attribute can be set to 'auto', 'sync', or 'async'
to control the image decoding behavior. This implementation respects
the chosen mode, with 'sync' blocking the main thread and 'async'
using a background task.

Author: auggie2lbcf

Libraries/LibWeb/HTML/HTMLImageElement.cpp

@@ -151,8 +151,17 @@ void HTMLImageElement::form_associated_element_attribute_changed(FlyString const
     }
 
     if (name == HTML::AttributeNames::decoding) {
-        if (value.has_value() && (value->equals_ignoring_ascii_case("sync"sv) || value->equals_ignoring_ascii_case("async"sv)))
-            dbgln("FIXME: HTMLImageElement.decoding = '{}' is not implemented yet", value->to_ascii_lowercase());
+        if (value.has_value()) {
+            auto decoding_value = value -> to_ascii_lowercase();
+            if (decoding_value == "sync"sv)
+                m_decoding_mode = DecodingMode::Sync;
+            else if (decoding_value == "async"sv)
+                m_decoding_mode = DecodingMode::Async;
+            else
+                m_decoding_mode = DecodingMode::Auto;
+        } else {
+            m_decoding_mode = DecodingMode::Auto;
+        }
     }
 }
 
@@ -343,93 +352,134 @@ WebIDL::ExceptionOr<GC::Ref<WebIDL::Promise>> HTMLImageElement::decode() const
     // 1. Let promise be a new promise.
     auto promise = WebIDL::create_promise(realm);
 
-    // 2. Queue a microtask to perform the following steps:
-    queue_a_microtask(&document(), GC::create_function(realm.heap(), [this, promise, &realm]() mutable {
-        // 1. Let global be this's relevant global object.
-        auto& global = relevant_global_object(*this);
-
-        auto reject_if_document_not_fully_active = [this, promise, &realm]() -> bool {
-            if (this->document().is_fully_active())
-                return false;
-
-            auto exception = WebIDL::EncodingError::create(realm, "Node document not fully active"_utf16);
-            HTML::TemporaryExecutionContext context(realm);
-            WebIDL::reject_promise(realm, promise, exception);
-            return true;
-        };
-
-        auto reject_if_current_request_state_broken = [this, promise, &realm]() {
-            if (this->current_request().state() != ImageRequest::State::Broken)
-                return false;
-
-            auto exception = WebIDL::EncodingError::create(realm, "Current request state is broken"_utf16);
-            HTML::TemporaryExecutionContext context(realm);
-            WebIDL::reject_promise(realm, promise, exception);
-            return true;
-        };
-
-        // 2. If any of the following are true:
-        //    - this's node document is not fully active;
-        //    - or this's current request's state is broken,
-        //    then reject promise with an "EncodingError" DOMException.
-        if (reject_if_document_not_fully_active() || reject_if_current_request_state_broken()) {
-            return;
+    if (m_decoding_mode == DecodingMode::Sync) {
+        // SYNC DECODING
+        // Warning: This will block the main thread until the image is decoded.
+        if (!document().is_fully_active()) {
+            WebIDL::reject_promise(realm, promise, WebIDL::EncodingError::create(realm, "Node document not fully active"_utf16));
+            return promise;
+        }
+        if (current_request().state() == ImageRequest::State::Broken) {
+            WebIDL::reject_promise(realm, promise, WebIDL::EncodingError::create(realm, "Current request state is broken"_utf16));
+            return promise;
+        }
+        if (current_request().state() != ImageRequest::State::CompletelyAvailable) {
+            WebIDL::reject_promise(realm, promise, WebIDL::EncodingError::create(realm, "Image data not available"_utf16));
+            return promise;
         }
 
-        // 3. Otherwise, in parallel wait for one of the following cases to occur, and perform the corresponding actions:
-        Platform::EventLoopPlugin::the().deferred_invoke(GC::create_function(heap(), [this, promise, &realm, &global] {
-            Platform::EventLoopPlugin::the().spin_until(GC::create_function(heap(), [this, promise, &realm, &global] {
-                auto queue_reject_task = [promise, &realm, &global](Utf16String message) {
-                    queue_global_task(Task::Source::DOMManipulation, global, GC::create_function(realm.heap(), [&realm, promise, message = move(message)] {
-                        auto exception = WebIDL::EncodingError::create(realm, message);
-                        HTML::TemporaryExecutionContext context(realm);
-                        WebIDL::reject_promise(realm, promise, exception);
-                    }));
-                };
-
-                // -> This img element's node document stops being fully active
-                if (!document().is_fully_active()) {
-                    // Queue a global task on the DOM manipulation task source with global to reject promise with an "EncodingError" DOMException.
-                    queue_reject_task("Node document not fully active"_utf16);
-                    return true;
-                }
+        if (!current_request().shared_resource_request() || current_request().shared_resource_request()->encoded_data().is_empty()) {
+            WebIDL::reject_promise(realm, promise, WebIDL::EncodingError::create(realm, "Image data not available"_utf16));
+            return promise;
+        }
 
-                auto state = this->current_request().state();
+        bool success = false;
+        bool failed = false;
 
-                // -> FIXME: This img element's current request changes or is mutated
-                if (false) {
-                    // Queue a global task on the DOM manipulation task source with global to reject promise with an "EncodingError" DOMException.
-                    queue_reject_task("Current request changed or was mutated"_utf16);
-                    return true;
-                }
+        (void)Web::Platform::ImageCodecPlugin::the().decode_image(
+            current_request().shared_resource_request()->encoded_data(),
+            [&](Web::Platform::DecodedImage&) -> ErrorOr<void> {
+                success = true;
+                return {};
+            },
+            [&](auto&) {
+                failed = true;
+            });
 
-                // -> This img element's current request's state becomes broken
-                if (state == ImageRequest::State::Broken) {
-                    // Queue a global task on the DOM manipulation task source with global to reject promise with an "EncodingError" DOMException.
-                    queue_reject_task("Current request state is broken"_utf16);
-                    return true;
-                }
+        Core::EventLoop::current().spin_until([&] {
+            return success || failed;
+        });
 
-                // -> This img element's current request's state becomes completely available
-                if (state == ImageRequest::State::CompletelyAvailable) {
-                    // FIXME: Decode the image.
-                    // FIXME: If decoding does not need to be performed for this image (for example because it is a vector graphic) or the decoding process completes successfully, then queue a global task on the DOM manipulation task source with global to resolve promise with undefined.
-                    // FIXME: If decoding fails (for example due to invalid image data), then queue a global task on the DOM manipulation task source with global to reject promise with an "EncodingError" DOMException.
-
-                    // NOTE: For now we just resolve it.
-                    queue_global_task(Task::Source::DOMManipulation, global, GC::create_function(realm.heap(), [&realm, promise] {
-                        HTML::TemporaryExecutionContext context(realm);
-                        WebIDL::resolve_promise(realm, promise, JS::js_undefined());
-                    }));
-                    return true;
-                }
+        if (success) {
+            WebIDL::resolve_promise(realm, promise, JS::js_undefined());
+        } else {
+            WebIDL::reject_promise(realm, promise, WebIDL::EncodingError::create(realm, "Decoding failed"_utf16));
+        }
+
+    } else { // ASYNC / AUTO DECODING
+        queue_a_microtask(&document(), GC::create_function(realm.heap(), [this, promise, &realm]() mutable {
+            auto& global = relevant_global_object(*this);
+
+            auto reject_if_document_not_fully_active = [this, promise, &realm]() -> bool {
+                if (this->document().is_fully_active())
+                    return false;
+
+                auto exception = WebIDL::EncodingError::create(realm, "Node document not fully active"_utf16);
+                HTML::TemporaryExecutionContext context(realm);
+                WebIDL::reject_promise(realm, promise, exception);
+                return true;
+            };
+
+            auto reject_if_current_request_state_broken = [this, promise, &realm]() {
+                if (this->current_request().state() != ImageRequest::State::Broken)
+                    return false;
+
+                auto exception = WebIDL::EncodingError::create(realm, "Current request state is broken"_utf16);
+                HTML::TemporaryExecutionContext context(realm);
+                WebIDL::reject_promise(realm, promise, exception);
+                return true;
+            };
 
-                return false;
+            if (reject_if_document_not_fully_active() || reject_if_current_request_state_broken()) {
+                return;
+            }
+
+            Platform::EventLoopPlugin::the().deferred_invoke(GC::create_function(heap(), [this, promise, &realm, &global] {
+                Platform::EventLoopPlugin::the().spin_until(GC::create_function(heap(), [this, promise, &realm, &global] {
+                    auto queue_reject_task = [promise, &realm, &global](Utf16String message) {
+                        queue_global_task(Task::Source::DOMManipulation, global, GC::create_function(realm.heap(), [&realm, promise, message = move(message)] {
+                            auto exception = WebIDL::EncodingError::create(realm, message);
+                            HTML::TemporaryExecutionContext context(realm);
+                            WebIDL::reject_promise(realm, promise, exception);
+                        }));
+                    };
+
+                    if (!document().is_fully_active()) {
+                        queue_reject_task("Node document not fully active"_utf16);
+                        return true;
+                    }
+
+                    auto state = this->current_request().state();
+
+                    if (false) { // FIXME: This img element's current request changes or is mutated
+                        queue_reject_task("Current request changed or was mutated"_utf16);
+                        return true;
+                    }
+
+                    if (state == ImageRequest::State::Broken) {
+                        queue_reject_task("Current request state is broken"_utf16);
+                        return true;
+                    }
+
+                    if (state == ImageRequest::State::CompletelyAvailable) {
+                        auto& image_request = this->current_request();
+                        if (!image_request.shared_resource_request() || image_request.shared_resource_request()->encoded_data().is_empty()) {
+                            queue_reject_task("Image data not available"_utf16);
+                            return true;
+                        }
+
+                        (void)Web::Platform::ImageCodecPlugin::the().decode_image(
+                            image_request.shared_resource_request()->encoded_data(),
+                            [promise, &realm, &global](Web::Platform::DecodedImage&) -> ErrorOr<void> {
+                                queue_global_task(Task::Source::DOMManipulation, global, GC::create_function(realm.heap(), [&realm, promise] {
+                                    HTML::TemporaryExecutionContext context(realm);
+                                    WebIDL::resolve_promise(realm, promise, JS::js_undefined());
+                                }));
+                                return {};
+                            },
+                            [promise, &realm, &global, &queue_reject_task](auto&) {
+                                queue_reject_task("Decoding failed"_utf16);
+                            });
+
+                        return true;
+                    }
+
+                    return false;
+                }));
             }));
         }));
-    }));
+    }
 
-    // 3. Return promise.
     return promise;
 }
 

Libraries/LibWeb/HTML/HTMLImageElement.h

@@ -163,6 +163,15 @@ class HTMLImageElement final
     SourceSet m_source_set;
 
     CSSPixelSize m_last_seen_viewport_size;
+
+    // https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-decoding
+    enum class DecodingMode {
+        Auto,
+        Sync,
+        Async,
+    };
+
+    DecodingMode m_decoding_mode { DecodingMode::Auto };
 };
 
 }

Libraries/LibWeb/HTML/SharedResourceRequest.cpp

@@ -63,6 +63,11 @@ void SharedResourceRequest::visit_edges(JS::Cell::Visitor& visitor)
     visitor.visit(m_image_data);
 }
 
+ReadonlyBytes SharedResourceRequest::encoded_data() const
+{
+    return m_encoded_data;
+}
+
 GC::Ptr<DecodedImageData> SharedResourceRequest::image_data() const
 {
     return m_image_data;
@@ -140,13 +145,15 @@ void SharedResourceRequest::add_callbacks(Function<void()> on_finish, Function<v
 
 void SharedResourceRequest::handle_successful_fetch(URL::URL const& url_string, StringView mime_type, ByteBuffer data)
 {
+    m_encoded_data = move(data);
+
     // AD-HOC: At this point, things gets very ad-hoc.
     // FIXME: Bring this closer to spec.
 
     bool const is_svg_image = mime_type == "image/svg+xml"sv || url_string.basename().ends_with(".svg"sv);
 
     if (is_svg_image) {
-        auto result = SVG::SVGDecodedImageData::create(m_document->realm(), m_page, url_string, data);
+        auto result = SVG::SVGDecodedImageData::create(m_document->realm(), m_page, url_string, m_encoded_data);
         if (result.is_error()) {
             handle_failed_fetch();
         } else {
@@ -173,7 +180,7 @@ void SharedResourceRequest::handle_successful_fetch(URL::URL const& url_string,
         strong_this->handle_failed_fetch();
     };
 
-    (void)Web::Platform::ImageCodecPlugin::the().decode_image(data.bytes(), move(handle_successful_bitmap_decode), move(handle_failed_decode));
+    (void)Web::Platform::ImageCodecPlugin::the().decode_image(m_encoded_data, move(handle_successful_bitmap_decode), move(handle_failed_decode));
 }
 
 void SharedResourceRequest::handle_failed_fetch()

Libraries/LibWeb/HTML/SharedResourceRequest.h

@@ -24,6 +24,7 @@ class SharedResourceRequest final : public JS::Cell {
     virtual ~SharedResourceRequest() override;
 
     URL::URL const& url() const { return m_url; }
+    ReadonlyBytes encoded_data() const;
 
     [[nodiscard]] GC::Ptr<DecodedImageData> image_data() const;
 
@@ -65,6 +66,7 @@ class SharedResourceRequest final : public JS::Cell {
     Vector<Callbacks> m_callbacks;
 
     URL::URL m_url;
+    ByteBuffer m_encoded_data;
     GC::Ptr<DecodedImageData> m_image_data;
     GC::Ptr<Fetch::Infrastructure::FetchController> m_fetch_controller;