From 063cd68bf472061ec35cf9b8970aa6e614632c9b Mon Sep 17 00:00:00 2001
From: Andreas Kling <andreas@ladybird.org>
Date: Wed, 20 Nov 2024 16:30:16 +0100
Subject: [PATCH] LibWeb: Mark image elements for layout before firing their
 load event

This removes a long-standing source of flakiness seen for example in
WPT's /referrer-policy/ tests.
---
 Libraries/LibWeb/HTML/HTMLImageElement.cpp          |  6 +++---
 .../HTML/img-metrics-in-load-event-handlers.txt     |  1 +
 .../HTML/img-metrics-in-load-event-handlers.html    | 13 +++++++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 Tests/LibWeb/Text/expected/HTML/img-metrics-in-load-event-handlers.txt
 create mode 100644 Tests/LibWeb/Text/input/HTML/img-metrics-in-load-event-handlers.html

diff --git a/Libraries/LibWeb/HTML/HTMLImageElement.cpp b/Libraries/LibWeb/HTML/HTMLImageElement.cpp
index 01ba2c5d944..f67de30cb09 100644
--- a/Libraries/LibWeb/HTML/HTMLImageElement.cpp
+++ b/Libraries/LibWeb/HTML/HTMLImageElement.cpp
@@ -703,13 +703,13 @@ void HTMLImageElement::add_callbacks_to_image_request(GC::Ref<ImageRequest> imag
                 // 3. Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.
                 document().list_of_available_images().add(key, *image_data, true);
 
+                set_needs_style_update(true);
+                document().set_needs_layout();
+
                 // 4. If maybe omit events is not set or previousURL is not equal to urlString, then fire an event named load at the img element.
                 if (!maybe_omit_events || previous_url != url_string)
                     dispatch_event(DOM::Event::create(realm(), HTML::EventNames::load));
 
-                set_needs_style_update(true);
-                document().set_needs_layout();
-
                 if (image_data->is_animated() && image_data->frame_count() > 1) {
                     m_current_frame_index = 0;
                     m_animation_timer->set_interval(image_data->frame_duration(0));
diff --git a/Tests/LibWeb/Text/expected/HTML/img-metrics-in-load-event-handlers.txt b/Tests/LibWeb/Text/expected/HTML/img-metrics-in-load-event-handlers.txt
new file mode 100644
index 00000000000..76c52523a06
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/HTML/img-metrics-in-load-event-handlers.txt
@@ -0,0 +1 @@
+image is 400x400
diff --git a/Tests/LibWeb/Text/input/HTML/img-metrics-in-load-event-handlers.html b/Tests/LibWeb/Text/input/HTML/img-metrics-in-load-event-handlers.html
new file mode 100644
index 00000000000..910b189d7ac
--- /dev/null
+++ b/Tests/LibWeb/Text/input/HTML/img-metrics-in-load-event-handlers.html
@@ -0,0 +1,13 @@
+<script src="../include.js"></script>
+<script>
+    asyncTest((done) => {
+        let img = document.createElement("img");
+        img.src = "../../../Layout/input/400.png";
+        document.body.appendChild(img);
+        img.onload = function() {
+            println("image is " + img.clientWidth + "x" + img.clientHeight);
+            img.remove();
+            done();
+        };
+    });
+</script>