implement missing steps for complete api

components/script/dom/htmlimageelement.rs

@@ -1414,6 +1414,11 @@ impl HTMLImageElementMethods for HTMLImageElement {
     // https://html.spec.whatwg.org/multipage/#dom-img-src
     make_setter!(SetSrc, "src");
 
+    // https://html.spec.whatwg.org/multipage/#dom-img-srcset
+    make_getter!(Srcset, "srcset");
+    // https://html.spec.whatwg.org/multipage/#dom-img-src
+    make_setter!(SetSrcset, "srcset");
+
     // https://html.spec.whatwg.org/multipage/#dom-img-crossOrigin
     fn GetCrossOrigin(&self) -> Option<DOMString> {
         reflect_cross_origin_attribute(self.upcast::<Element>())
@@ -1487,13 +1492,13 @@ impl HTMLImageElementMethods for HTMLImageElement {
     // https://html.spec.whatwg.org/multipage/#dom-img-complete
     fn Complete(&self) -> bool {
         let elem = self.upcast::<Element>();
-        // TODO: take srcset into account
-        if !elem.has_attribute(&local_name!("src")) {
-            return true;
+        let srcset_absent = !elem.has_attribute(&local_name!("srcset"));
+        if !elem.has_attribute(&local_name!("src")) && srcset_absent {
+            return true
         }
         let src = elem.get_string_attribute(&local_name!("src"));
-        if src.is_empty() {
-            return true;
+        if srcset_absent && src.is_empty() {
+            return true
         }
         let request = self.current_request.borrow();
         let request_state = request.state;

components/script/dom/webidls/HTMLImageElement.webidl

@@ -9,8 +9,8 @@ interface HTMLImageElement : HTMLElement {
            attribute DOMString alt;
   [CEReactions]
            attribute DOMString src;
-  // [CEReactions]
-  //         attribute DOMString srcset;
+  [CEReactions]
+           attribute DOMString srcset;
   [CEReactions]
            attribute DOMString? crossOrigin;
   [CEReactions]

tests/wpt/metadata/MANIFEST.json

@@ -610714,7 +610714,7 @@
    "support"
   ],
   "html/semantics/embedded-content/the-img-element/img.complete.html": [
-   "4be8d4db848ad259a508e1a8091feaae7733e784",
+   "ee043a8c94fa4f69b0648d5d31e17f5cc591ec5f",
    "testharness"
   ],
   "html/semantics/embedded-content/the-img-element/intrinsicsize/intrinsicsize-with-responsive-images.tentative.html": [

tests/wpt/metadata/html/semantics/embedded-content/the-img-element/environment-changes/viewport-change.html.ini

@@ -1,33 +1,14 @@
 [viewport-change.html]
   type: testharness
-  expected: TIMEOUT
   [picture: source (max-width:500px) broken image, img valid image, resize to wide]
-    expected: TIMEOUT
+    expected: FAIL
 
   [picture: source (max-width:500px) valid image, img valid image, resize to wide]
     expected: FAIL
 
   [picture: source (max-width:500px) valid image, img broken image, resize to narrow]
-    expected: TIMEOUT
-
-  [picture: source (max-width:500px) valid image, img valid image, resize to narrow]
-    expected: FAIL
-
-  [picture: source (max-width:500px) broken image, img valid image, resize to narrow]
-    expected: FAIL
-
-  [img (srcset 1 cand) valid image, resize to wide]
     expected: FAIL
 
-  [picture: same URL in source (max-width:500px) and img, resize to wide]
-    expected: FAIL
-
-  [img (srcset 1 cand) valid image, resize to narrow]
-    expected: FAIL
-
-  [picture: source (max-width:500px) valid image, img broken image, resize to wide]
-    expected: FAIL
-
-  [picture: same URL in source (max-width:500px) and img, resize to narrow]
+  [picture: source (max-width:500px) valid image, img valid image, resize to narrow]
     expected: FAIL
 

tests/wpt/metadata/html/semantics/embedded-content/the-img-element/intrinsicsize/intrinsicsize-with-responsive-images.tentative.html.ini

@@ -1,7 +1,7 @@
 [intrinsicsize-with-responsive-images.tentative.html]
   expected: TIMEOUT
   [Test image /images/green.png with no specified sizes, width, or height]
-    expected: TIMEOUT
+    expected: FAIL
 
   [Test image /images/green.svg with no specified sizes, width, or height]
     expected: TIMEOUT
@@ -10,7 +10,7 @@
     expected: FAIL
 
   [Test image (32 x 32) with sizes = 100 and srcset descriptor = 32w]
-    expected: TIMEOUT
+    expected: FAIL
 
   [Test image /images/green.svg with width = 800, no specified sizes, or height]
     expected: TIMEOUT
@@ -19,5 +19,5 @@
     expected: FAIL
 
   [Test image /images/green.png with width = 800, no specified sizes, or height]
-    expected: TIMEOUT
+    expected: FAIL
 

tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/img.complete.html

@@ -11,6 +11,7 @@
 <img src="" id="imgTestTag2">
 <img id="imgTestTag3" style="width: 80px; height:auto;">
 <img id="imgTestTag4">
+<img id="imgTestTag5">
 
 <script>
   var imageInstance = document.createElement('img');
@@ -23,11 +24,11 @@
 <script>
   test(function() {
     assert_true(document.getElementById("imgTestTag").complete);
-  }, "img src omitted");
+  }, "img src and srcset omitted");
 
   test(function() {
     assert_true(document.getElementById("imgTestTag2").complete);
-  }, "img src empty");
+  }, "img src empty and srset omitted");
 
   // test if set to true after img is completely available
   var t = async_test("async src complete test");
@@ -50,6 +51,22 @@
     document.getElementById("imgTestTag3").src = '3.jpg?nocache=' + Math.random();
   });
 
+  var t1 = async_test("async srcset complete test");
+  t1.step(function(){
+    var loaded = false;
+    document.getElementById("imgTestTag5").onload = t1.step_func_done(function(){
+      assert_false(loaded);
+      loaded = true;
+      assert_true(document.getElementById("imgTestTag5").complete);
+    }, "Only one onload, despite setting the srcset twice");
+    //Test if src, srcset is omitted
+    assert_true(document.getElementById("imgTestTag5").complete)
+    document.getElementById("imgTestTag5").srcset = "/images/green-256x256.png 1x";
+    //test if img.complete is set to false if srcset is present
+    assert_false(document.getElementById("imgTestTag5").complete, "srcset present, should be set to false");
+    //change src again, should make only one request as per 'await stable state'
+    document.getElementById("imgTestTag5").srcset="/images/green-256x256.png 1.6x"
+  });
 
   // 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>