Ensure src is the last propagated attribute to avoid multiple request…

…s for different content on an amp-img in safari (#32634)

builtins/amp-img.js

@@ -38,10 +38,10 @@ const ATTRIBUTES_TO_PROPAGATE = [
   'aria-labelledby',
   'crossorigin',
   'referrerpolicy',
+  'title',
   'sizes',
-  'src',
   'srcset',
-  'title',
+  'src',
 ];
 
 export class AmpImg extends BaseElement {

test/unit/test-amp-img.js

@@ -392,6 +392,36 @@ describes.sandboxed('amp-img', {}, (env) => {
     expect(AmpImg.prerenderAllowed(el)).to.equal(true);
   });
 
+  it('should propogate src as the final attribute when provided a srcset', () => {
+    // Providing src before srcset will cause Safari 14.4 to request two src values for the same `img`.
+    const el = document.createElement('amp-img');
+    el.setAttribute('src', 'test.jpg');
+    el.setAttribute('srcset', SRCSET_STRING);
+    el.setAttribute('width', 300);
+    el.setAttribute('height', 200);
+    el.getResources = () => Services.resourcesForDoc(document);
+    el.getPlaceholder = () => {
+      const img = document.createElement('img');
+      img.src = 'data:image/svg+xml;charset=utf-8,%3Csvg%3E%3C/svg%3E';
+      return img;
+    };
+    el.getLayout = () => 'responsive';
+    el.getLayoutSize = () => ({width: 300, height: 200});
+
+    const impl = new AmpImg(el);
+    const propagateAttributesSpy = sandbox.spy(impl, 'propagateAttributes');
+    impl.buildCallback();
+    impl.layoutCallback();
+
+    expect(propagateAttributesSpy).to.be.calledOnce;
+    const spiedAttributesToPropagate = propagateAttributesSpy.getCall(0)
+      .args[0];
+
+    expect(
+      spiedAttributesToPropagate[spiedAttributesToPropagate.length - 1]
+    ).to.equal('src');
+  });
+
   it('should propagate ARIA attributes', () => {
     const el = document.createElement('amp-img');
     el.setAttribute('src', 'test.jpg');