LibWeb: Don't run update_the_image_data() algorithm if already started

This ensures that events are not fired if the image source is updated
while it is being fetched.

Libraries/LibWeb/HTML/HTMLImageElement.cpp

@@ -499,6 +499,7 @@ static BatchingDispatcher& batching_dispatcher()
 void HTMLImageElement::update_the_image_data(bool restart_animations, bool maybe_omit_events)
 {
     auto& realm = this->realm();
+    auto update_the_image_data_count = ++m_update_the_image_data_count;
 
     // 1. If the element's node document is not fully active, then:
     if (!document().is_fully_active()) {
@@ -510,21 +511,21 @@ void HTMLImageElement::update_the_image_data(bool restart_animations, bool maybe
             return;
 
         m_document_observer = realm.create<DOM::DocumentObserver>(realm, document());
-        m_document_observer->set_document_became_active([this, restart_animations, maybe_omit_events]() {
+        m_document_observer->set_document_became_active([this, restart_animations, maybe_omit_events, update_the_image_data_count]() {
             // 4. Queue a microtask to continue this algorithm.
-            queue_a_microtask(&document(), GC::create_function(this->heap(), [this, restart_animations, maybe_omit_events]() {
-                update_the_image_data_impl(restart_animations, maybe_omit_events);
+            queue_a_microtask(&document(), GC::create_function(this->heap(), [this, restart_animations, maybe_omit_events, update_the_image_data_count]() {
+                update_the_image_data_impl(restart_animations, maybe_omit_events, update_the_image_data_count);
             }));
         });
 
         return;
     }
 
-    update_the_image_data_impl(restart_animations, maybe_omit_events);
+    update_the_image_data_impl(restart_animations, maybe_omit_events, update_the_image_data_count);
 }
 
 // https://html.spec.whatwg.org/multipage/images.html#update-the-image-data
-void HTMLImageElement::update_the_image_data_impl(bool restart_animations, bool maybe_omit_events)
+void HTMLImageElement::update_the_image_data_impl(bool restart_animations, bool maybe_omit_events, u64 update_the_image_data_count)
 {
     // 1. If the element's node document is not fully active, then:
     // FIXME: This step and it's substeps is implemented by the calling `update_the_image_data` function.
@@ -621,9 +622,11 @@ void HTMLImageElement::update_the_image_data_impl(bool restart_animations, bool
     }
 after_step_7:
     // 8. Queue a microtask to perform the rest of this algorithm, allowing the task that invoked this algorithm to continue.
-    queue_a_microtask(&document(), GC::create_function(this->heap(), [this, restart_animations, maybe_omit_events, previous_url]() mutable {
-        // FIXME: 9. If another instance of this algorithm for this img element was started after this instance
-        //           (even if it aborted and is no longer running), then return.
+    queue_a_microtask(&document(), GC::create_function(this->heap(), [this, update_the_image_data_count, restart_animations, maybe_omit_events, previous_url]() mutable {
+        // 9. If another instance of this algorithm for this img element was started after this instance
+        //    (even if it aborted and is no longer running), then return.
+        if (update_the_image_data_count != m_update_the_image_data_count)
+            return;
 
         // 10. Let selected source and selected pixel density be
         //    the URL and pixel density that results from selecting an image source, respectively.

Libraries/LibWeb/HTML/HTMLImageElement.h

@@ -115,7 +115,7 @@ public:
 private:
     HTMLImageElement(DOM::Document&, DOM::QualifiedName);
 
-    void update_the_image_data_impl(bool restart_the_animations = false, bool maybe_omit_events = false);
+    void update_the_image_data_impl(bool restart_the_animations, bool maybe_omit_events, u64 update_the_image_data_count);
 
     virtual bool is_html_image_element() const override { return true; }
 
@@ -164,6 +164,8 @@ private:
     SourceSet m_source_set;
 
     CSSPixelSize m_last_seen_viewport_size;
+
+    u64 m_update_the_image_data_count { 0 };
 };
 
 }

Tests/LibWeb/Text/expected/wpt-import/html/semantics/embedded-content/the-img-element/img.complete.txt

@@ -0,0 +1,23 @@
+Harness status: OK
+
+Found 17 tests
+
+14 Pass
+3 Fail
+Pass	img src and srcset omitted
+Pass	img src and srcset omitted on newly-created image
+Pass	img src and srcset omitted on newly-created-and-inserted image
+Pass	img src and srcset omitted on newly-created-via-innerHTML image
+Pass	img src empty and srcset omitted
+Pass	img src empty and srcset omitted on newly-created image
+Pass	img src empty and srcset omitted on newly-created-and-inserted image
+Pass	img src empty and srcset omitted on newly-created-via-innerHTML image
+Pass	img src and srcset omitted on image after it started a load
+Pass	async src complete test
+Fail	async srcset complete test
+Pass	IDL attribute complete cannot "randomly" change during a task
+Pass	async src broken test
+Pass	async src removal test
+Fail	async srcset removal test
+Pass	async src available image lookup test
+Fail	async pending request test

Tests/LibWeb/Text/expected/wpt-import/html/semantics/embedded-content/the-img-element/naturalWidth-naturalHeight-width-height.tentative.txt

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 228 tests
 
-52 Pass
-176 Fail
+56 Pass
+172 Fail
 Pass	raster image
 Pass	raster image (when not rendered)
 Pass	raster image with width/height attributes
@@ -124,11 +124,11 @@ Fail	SVG image, with natural height, and aspect ratio from viewBox (with srcset/
 Fail	SVG image, with natural height, and aspect ratio from viewBox (with srcset/1x) (when not rendered)
 Pass	SVG image, with natural width of 0, and aspect ratio from viewBox (with srcset/1x)
 Pass	SVG image, with natural width of 0, and aspect ratio from viewBox (with srcset/1x) (when not rendered)
-Fail	SVG image, with natural height of 0, and aspect ratio from viewBox (with srcset/1x)
+Pass	SVG image, with natural height of 0, and aspect ratio from viewBox (with srcset/1x)
 Pass	SVG image, with natural height of 0, and aspect ratio from viewBox (with srcset/1x) (when not rendered)
-Fail	SVG image, with natural width being negative, and aspect ratio from viewBox (with srcset/1x)
+Pass	SVG image, with natural width being negative, and aspect ratio from viewBox (with srcset/1x)
 Pass	SVG image, with natural width being negative, and aspect ratio from viewBox (with srcset/1x) (when not rendered)
-Fail	SVG image, with natural height being negative, and aspect ratio from viewBox (with srcset/1x)
+Pass	SVG image, with natural height being negative, and aspect ratio from viewBox (with srcset/1x)
 Pass	SVG image, with natural height being negative, and aspect ratio from viewBox (with srcset/1x) (when not rendered)
 Fail	SVG image, no natural dimensions, viewBox with 0 width/height (with srcset/1x)
 Fail	SVG image, no natural dimensions, viewBox with 0 width/height (with srcset/1x) (when not rendered)
@@ -148,13 +148,13 @@ Fail	SVG image, with natural height, viewBox with 0 width (with srcset/1x)
 Fail	SVG image, with natural height, viewBox with 0 width (with srcset/1x) (when not rendered)
 Fail	SVG image, with natural height, viewBox with 0 height (with srcset/1x)
 Fail	SVG image, with natural height, viewBox with 0 height (with srcset/1x) (when not rendered)
-Pass	SVG image, with natural width and height (with srcset/1x)
-Pass	SVG image, with natural width and height (with srcset/1x) (when not rendered)
-Pass	SVG image, with natural width and height, and aspect ratio from viewBox (with srcset/1x)
-Pass	SVG image, with natural width and height, and aspect ratio from viewBox (with srcset/1x) (when not rendered)
+Fail	SVG image, with natural width and height (with srcset/1x)
+Fail	SVG image, with natural width and height (with srcset/1x) (when not rendered)
+Fail	SVG image, with natural width and height, and aspect ratio from viewBox (with srcset/1x)
+Fail	SVG image, with natural width and height, and aspect ratio from viewBox (with srcset/1x) (when not rendered)
 Pass	SVG image, with natural width and height of 0, and aspect ratio from viewBox (with srcset/1x)
 Pass	SVG image, with natural width and height of 0, and aspect ratio from viewBox (with srcset/1x) (when not rendered)
-Fail	SVG image, with natural width and height being negative, and aspect ratio from viewBox (with srcset/1x)
+Pass	SVG image, with natural width and height being negative, and aspect ratio from viewBox (with srcset/1x)
 Pass	SVG image, with natural width and height being negative, and aspect ratio from viewBox (with srcset/1x) (when not rendered)
 Fail	raster image (with srcset/2x)
 Fail	raster image (with srcset/2x) (when not rendered)
@@ -200,11 +200,11 @@ Fail	SVG image, with natural height, and aspect ratio from viewBox (with srcset/
 Fail	SVG image, with natural height, and aspect ratio from viewBox (with srcset/2x) (when not rendered)
 Pass	SVG image, with natural width of 0, and aspect ratio from viewBox (with srcset/2x)
 Pass	SVG image, with natural width of 0, and aspect ratio from viewBox (with srcset/2x) (when not rendered)
-Fail	SVG image, with natural height of 0, and aspect ratio from viewBox (with srcset/2x)
+Pass	SVG image, with natural height of 0, and aspect ratio from viewBox (with srcset/2x)
 Pass	SVG image, with natural height of 0, and aspect ratio from viewBox (with srcset/2x) (when not rendered)
-Fail	SVG image, with natural width being negative, and aspect ratio from viewBox (with srcset/2x)
+Pass	SVG image, with natural width being negative, and aspect ratio from viewBox (with srcset/2x)
 Pass	SVG image, with natural width being negative, and aspect ratio from viewBox (with srcset/2x) (when not rendered)
-Fail	SVG image, with natural height being negative, and aspect ratio from viewBox (with srcset/2x)
+Pass	SVG image, with natural height being negative, and aspect ratio from viewBox (with srcset/2x)
 Pass	SVG image, with natural height being negative, and aspect ratio from viewBox (with srcset/2x) (when not rendered)
 Fail	SVG image, no natural dimensions, viewBox with 0 width/height (with srcset/2x)
 Fail	SVG image, no natural dimensions, viewBox with 0 width/height (with srcset/2x) (when not rendered)
@@ -230,5 +230,5 @@ Fail	SVG image, with natural width and height, and aspect ratio from viewBox (wi
 Fail	SVG image, with natural width and height, and aspect ratio from viewBox (with srcset/2x) (when not rendered)
 Pass	SVG image, with natural width and height of 0, and aspect ratio from viewBox (with srcset/2x)
 Pass	SVG image, with natural width and height of 0, and aspect ratio from viewBox (with srcset/2x) (when not rendered)
-Fail	SVG image, with natural width and height being negative, and aspect ratio from viewBox (with srcset/2x)
+Pass	SVG image, with natural width and height being negative, and aspect ratio from viewBox (with srcset/2x)
 Pass	SVG image, with natural width and height being negative, and aspect ratio from viewBox (with srcset/2x) (when not rendered)

Tests/LibWeb/Text/input/wpt-import/html/semantics/embedded-content/the-img-element/img.complete.html

@@ -0,0 +1,200 @@
+<!DOCTYPE HTML>
+<title>DOM img complete Test</title>
+<meta charset=UTF-8>
+<link rel="author" title="Anselm Hannemann" href="http://anselm-hannemann.com/" />
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+
+<img id="imgTestTag">
+<img src="" id="imgTestTag2">
+<img id="imgTestTag3" style="width: 80px; height:auto;">
+<img id="imgTestTag4">
+<img id="imgTestTag5">
+<div id="image-container"></div>
+
+<script>
+  var imageInstance = document.createElement('img');
+  imageInstance.style.display = 'none';
+
+  document.body.appendChild(imageInstance);
+</script>
+
+<div id="log"></div>
+<script>
+  test(function() {
+    assert_true(document.getElementById("imgTestTag").complete);
+  }, "img src and srcset omitted");
+
+  test(function() {
+    var img = document.createElement("img");
+    assert_true(img.complete);
+  }, "img src and srcset omitted on newly-created image");
+
+  test(function() {
+    var cont = document.getElementById("image-container");
+    this.add_cleanup(() => { cont.innerHTML = "" });
+    var img = document.createElement("img");
+    cont.appendChild(img);
+    assert_true(img.complete);
+  }, "img src and srcset omitted on newly-created-and-inserted image");
+
+  test(function() {
+    var cont = document.getElementById("image-container");
+    this.add_cleanup(() => { cont.innerHTML = "" });
+    cont.innerHTML = "<img>";
+    assert_true(cont.querySelector("img").complete);
+  }, "img src and srcset omitted on newly-created-via-innerHTML image");
+
+  test(function() {
+    assert_true(document.getElementById("imgTestTag2").complete);
+  }, "img src empty and srcset omitted");
+
+  test(function() {
+    var img = document.createElement("img");
+    img.setAttribute("src", "");
+    assert_true(img.complete);
+  }, "img src empty and srcset omitted on newly-created image");
+
+  test(function() {
+    var cont = document.getElementById("image-container");
+    this.add_cleanup(() => { cont.innerHTML = "" });
+    var img = document.createElement("img");
+    img.setAttribute("src", "");
+    cont.appendChild(img);
+    assert_true(img.complete);
+  }, "img src empty and srcset omitted on newly-created-and-inserted image");
+
+  test(function() {
+    var cont = document.getElementById("image-container");
+    this.add_cleanup(() => { cont.innerHTML = "" });
+    cont.innerHTML = "<img src=''>";
+    assert_true(cont.querySelector("img").complete);
+  }, "img src empty and srcset omitted on newly-created-via-innerHTML image");
+
+  test(function() {
+    var img = document.createElement("img");
+    img.src = location.href;
+    assert_false(img.complete, "Should have a load going");
+    img.removeAttribute("src");
+    assert_true(img.complete);
+  }, "img src and srcset omitted on image after it started a load");
+
+  // test if set to true after img is completely available
+  async_test(t => {
+    var loaded = false;
+    const img = document.getElementById("imgTestTag3");
+    img.onload = t.step_func_done(function(){
+      assert_false(loaded);
+      loaded = true;
+      assert_true(img.complete);
+      var currentSrc = img.currentSrc;
+      var expectedUrl = new URL("3.jpg", window.location);
+      assert_equals(new URL(currentSrc).pathname, expectedUrl.pathname);
+    }, "Only one onload, despite setting the src twice");
+
+    img.src = 'test' + Math.random();
+    //test if img.complete is set to false if src is changed
+    assert_false(img.complete, "src changed, should be set to false")
+    //change src again, should make only one request as per 'await stable state'
+    img.src = '3.jpg?nocache=' + Math.random();
+  }, "async src complete test");
+
+  async_test(t => {
+    var loaded = false;
+    const img = document.getElementById("imgTestTag5")
+    img.onload = t.step_func_done(function(){
+      assert_false(loaded);
+      loaded = true;
+      assert_true(img.complete);
+    }, "Only one onload, despite setting the srcset twice");
+    //Test if src, srcset is omitted
+    assert_true(img.complete)
+    img.srcset = "../../../../images/green-256x256.png 1x";
+    //test if img.complete is set to false if srcset is present
+    assert_false(img.complete, "srcset present, should be set to false");
+    //change src again, should make only one request as per 'await stable state'
+    img.srcset="../../../../images/green-256x256.png 1.6x"
+  }, "async srcset complete test");
+
+  // https://html.spec.whatwg.org/multipage/multipage/embedded-content-1.html#update-the-image-data
+  // says to "await a stable state" before fetching so we use a separate <script>
+  imageInstance.src = 'image-1.jpg?pipe=trickle(d1)&nocache=' + Math.random(); // make sure the image isn't in cache
+</script>
+<script>
+  // test: The final task that is queued by the networking task source once the resource has been fetched has been queued, but has not yet been run, and the img element is not in the broken state
+  test(function() {
+    assert_false(imageInstance.complete, "imageInstance.complete should be false");
+    var startTime = Date.now();
+    while (true) {
+      if (Date.now() - startTime > 2000) {
+        assert_false(imageInstance.complete, "imageInstance.complete should remain false");
+        break;
+      }
+      if (imageInstance.complete === true) {
+        assert_unreached(".complete should not change within a task");
+      }
+    }
+  },
+  'IDL attribute complete cannot "randomly" change during a task');
+
+  // test if broken img does not pass
+  async_test(t => {
+    const img = document.getElementById("imgTestTag4");
+
+    img.src = 'brokenimg.jpg';
+
+    //test if img.complete is set to false if src is changed
+    assert_false(img.complete, "src changed to broken img, should be set to false");
+
+    img.onload = img.onerror = t.step_func_done(function(event){
+      assert_equals(event.type, "error");
+      assert_true(img.complete);
+    });
+  }, "async src broken test");
+
+  async_test(t => {
+    var img = document.createElement("img");
+    assert_true(img.complete);
+    img.src = `3.jpg?nocache=${Math.random()}`;
+    assert_false(img.complete);
+    img.onload = t.step_func_done(() => {
+      assert_true(img.complete);
+      img.removeAttribute("src");
+      assert_true(img.complete, "Should be complete, since we removed the src");
+    });
+  }, "async src removal test");
+
+  async_test(t => {
+    var img = document.createElement("img");
+    assert_true(img.complete);
+    img.srcset = `3.jpg?nocache=${Math.random()} 1x`;
+    assert_false(img.complete);
+    img.onload = t.step_func_done(() => {
+      assert_true(img.complete);
+      img.removeAttribute("srcset");
+      assert_true(img.complete, "Should be complete, since we removed the srcset");
+    });
+  }, "async srcset removal test");
+
+  async_test(t => {
+    var preload = document.createElement("img");
+    var url = `3.jpg?nocache=${Math.random()}`;
+    preload.src = url;
+    preload.onload = t.step_func_done(function() {
+      var img = document.createElement("img");
+      assert_true(img.complete);
+      img.src = url;
+      assert_true(img.complete, "Should be complete because we should hit the available image cache");
+    });
+  }, "async src available image lookup test");
+
+  async_test(t => {
+    var img = document.createElement("img");
+    img.src = `3.jpg?nocache=${Math.random()}`;
+    img.onload = t.step_func_done(function() {
+      assert_true(img.complete);
+      img.src = `3.jpg?nocache=${Math.random()}`;
+      assert_false(img.complete, "Should not be complete because we have started a new load");
+    });
+  }, "async pending request test");
+</script>