ampproject · kristoferbaxter · May 20, 2021 · Apr 27, 2021 · Apr 27, 2021 · Apr 27, 2021
diff --git a/builtins/amp-img.js b/builtins/amp-img.js
@@ -21,6 +21,7 @@ import {Services} from '../src/services';
 import {dev} from '../src/log';
 import {guaranteeSrcForSrcsetUnsupportedBrowsers} from '../src/utils/img';
 import {listen} from '../src/event-helper';
+import {propagateAttributes} from '../src/core/dom/propagateAttributes';
 import {propagateObjectFitStyles, setImportantStyles} from '../src/style';
 import {registerElement} from '../src/service/custom-element-registry';
 import {removeElement, scopedQuerySelector} from '../src/dom';
@@ -130,8 +131,9 @@ export class AmpImg extends BaseElement {
           this.element
         );
       }
-      this.propagateAttributes(
+      propagateAttributes(
         attrs,
+        this.element,
         this.img_,
         /* opt_removeMissingAttrs */ true
       );
@@ -216,7 +218,7 @@ export class AmpImg extends BaseElement {
 
     // It is important to call this before setting `srcset` attribute.
     this.maybeGenerateSizes_(/* sync setAttribute */ true);
-    this.propagateAttributes(ATTRIBUTES_TO_PROPAGATE, this.img_);
+    propagateAttributes(ATTRIBUTES_TO_PROPAGATE, this.element, this.img_);
     this.propagateDataset(this.img_);
     if (!IS_ESM) {
       guaranteeSrcForSrcsetUnsupportedBrowsers(this.img_);

diff --git a/examples/amp-lightbox.amp.html b/examples/amp-lightbox.amp.html
@@ -63,6 +63,7 @@ <h2>Scrollable Lightbox</h2>
       Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
     </p>
     <p>
+      <img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" width=300 height=200 loading="lazy" />
       <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" width=300 height=200></amp-img>
     </p>
     <p class="lightbox-text">

diff --git a/examples/image-lightbox.amp.html b/examples/image-lightbox.amp.html
@@ -22,6 +22,13 @@
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
+  <!-- Standard Image Element -->
+  <img on="tap:ampimagelightbox"
+    role="button"
+    src="img/bigbuckbunny.jpg"
+    width="500"
+    height="500"
+    loading="lazy" />
   <!--
     - Test layout: intrinsic, fill, fixed, fixed-height, responsive
   -->

diff --git a/extensions/amp-access-laterpay/0.1/test/validator-amp-access-laterpay.out b/extensions/amp-access-laterpay/0.1/test/validator-amp-access-laterpay.out
@@ -1,4 +1,4 @@
-PASS
+FAIL
 |  <!--
 |    Copyright 2017 The AMP HTML Authors. All Rights Reserved.
 |
@@ -50,6 +50,12 @@ PASS
 |  <p amp-access="lemur"></p>
 |  <noscript>
 |    <img src="https://example.com/" amp-access="lemur" />
+>>   ^~~~~~~~~
+amp-access-laterpay/0.1/test/validator-amp-access-laterpay.html:51:2 The mandatory attribute 'height' is missing in tag 'img'.
+>>   ^~~~~~~~~
+amp-access-laterpay/0.1/test/validator-amp-access-laterpay.html:51:2 The mandatory attribute 'loading' is missing in tag 'img'.
+>>   ^~~~~~~~~
+amp-access-laterpay/0.1/test/validator-amp-access-laterpay.html:51:2 The mandatory attribute 'width' is missing in tag 'img'.
 |  </noscript>
 |
 |  <!-- test some other attributes -->
@@ -67,4 +73,4 @@ PASS
 |  </div>
 |
 |  </body>
-|  </html>
+|  </html>
diff --git a/extensions/amp-access-laterpay/0.2/test/validator-amp-access-laterpay.out b/extensions/amp-access-laterpay/0.2/test/validator-amp-access-laterpay.out
@@ -1,4 +1,4 @@
-PASS
+FAIL
 |  <!--
 |    Copyright 2018 The AMP HTML Authors. All Rights Reserved.
 |
@@ -49,6 +49,12 @@ PASS
 |  <p amp-access="lemur"></p>
 |  <noscript>
 |    <img src="https://example.com/" amp-access="lemur" />
+>>   ^~~~~~~~~
+amp-access-laterpay/0.2/test/validator-amp-access-laterpay.html:50:2 The mandatory attribute 'height' is missing in tag 'img'.
+>>   ^~~~~~~~~
+amp-access-laterpay/0.2/test/validator-amp-access-laterpay.html:50:2 The mandatory attribute 'loading' is missing in tag 'img'.
+>>   ^~~~~~~~~
+amp-access-laterpay/0.2/test/validator-amp-access-laterpay.html:50:2 The mandatory attribute 'width' is missing in tag 'img'.
 |  </noscript>
 |  <!-- test some other attributes -->
 |  <div amp-access="lemur"
@@ -64,4 +70,4 @@ PASS
 |       amp-access-id="lemur">
 |  </div>
 |  </body>
-|  </html>
+|  </html>
diff --git a/extensions/amp-access/0.1/test/validator-amp-access.out b/extensions/amp-access/0.1/test/validator-amp-access.out
@@ -1,4 +1,4 @@
-PASS
+FAIL
 |  <!--
 |    Copyright 2015 The AMP HTML Authors. All Rights Reserved.
 |
@@ -47,6 +47,12 @@ PASS
 |  <p amp-access="lemur"></p>
 |  <noscript>
 |    <img src="https://example.com/" amp-access="lemur" />
+>>   ^~~~~~~~~
+amp-access/0.1/test/validator-amp-access.html:48:2 The mandatory attribute 'height' is missing in tag 'img'.
+>>   ^~~~~~~~~
+amp-access/0.1/test/validator-amp-access.html:48:2 The mandatory attribute 'loading' is missing in tag 'img'.
+>>   ^~~~~~~~~
+amp-access/0.1/test/validator-amp-access.html:48:2 The mandatory attribute 'width' is missing in tag 'img'.
 |  </noscript>
 |
 |  <!-- test some other attributes -->
@@ -64,4 +70,4 @@ PASS
 |  </span>
 |
 |  </body>
-|  </html>
+|  </html>
diff --git a/extensions/amp-anim/0.1/amp-anim.js b/extensions/amp-anim/0.1/amp-anim.js
@@ -22,6 +22,7 @@ import {
   observeWithSharedInOb,
   unobserveWithSharedInOb,
 } from '../../../src/viewport-observer';
+import {propagateAttributes} from '../../../src/core/dom/propagateAttributes';
 import {propagateObjectFitStyles} from '../../../src/style';
 
 const TAG = 'amp-anim';
@@ -55,7 +56,7 @@ export class AmpAnim extends AMP.BaseElement {
   buildCallback() {
     this.img_ = new Image();
     this.img_.setAttribute('decoding', 'async');
-    this.propagateAttributes(BUILD_ATTRIBUTES, this.img_);
+    propagateAttributes(BUILD_ATTRIBUTES, this.element, this.img_);
     this.applyFillContent(this.img_, true);
     propagateObjectFitStyles(this.element, this.img_);
 
@@ -88,8 +89,9 @@ export class AmpAnim extends AMP.BaseElement {
     const img = dev().assertElement(this.img_);
     // Remove missing attributes to remove the placeholder srcset if none is
     // specified on the element.
-    this.propagateAttributes(
+    propagateAttributes(
       LAYOUT_ATTRIBUTES,
+      this.element,
       img,
       /* opt_removeMissingAttrs */ true
     );

diff --git a/extensions/amp-audio/0.1/amp-audio.js b/extensions/amp-audio/0.1/amp-audio.js
@@ -28,6 +28,7 @@ import {closestAncestorElementBySelector} from '../../../src/dom';
 import {dev, user} from '../../../src/log';
 import {getMode} from '../../../src/mode';
 import {listen} from '../../../src/event-helper';
+import {propagateAttributes} from '../../../src/core/dom/propagateAttributes';
 import {setIsMediaComponent} from '../../../src/video-interface';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
 
@@ -85,7 +86,11 @@ export class AmpAudio extends AMP.BaseElement {
       if (src !== undefined) {
         assertHttpsUrl(src, this.element);
       }
-      this.propagateAttributes(['src', 'loop', 'controlsList'], this.audio_);
+      propagateAttributes(
+        ['src', 'loop', 'controlsList'],
+        this.element,
+        this.audio_
+      );
     }
 
     const artist = mutations['artist'];
@@ -119,7 +124,7 @@ export class AmpAudio extends AMP.BaseElement {
     if (src) {
       assertHttpsUrl(src, this.element);
     }
-    this.propagateAttributes(
+    propagateAttributes(
       [
         'src',
         'preload',
@@ -131,6 +136,7 @@ export class AmpAudio extends AMP.BaseElement {
         'aria-labelledby',
         'controlsList',
       ],
+      this.element,
       audio
     );
 

diff --git a/extensions/amp-brid-player/0.1/amp-brid-player.js b/extensions/amp-brid-player/0.1/amp-brid-player.js
@@ -42,6 +42,7 @@ import {getData, listen} from '../../../src/event-helper';
 import {htmlFor} from '../../../src/static-template';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {propagateAttributes} from '../../../src/core/dom/propagateAttributes';
 
 const TAG = 'amp-brid-player';
 
@@ -249,7 +250,7 @@ class AmpBridPlayer extends AMP.BaseElement {
         </amp-img>
       </amp-img>`;
 
-    this.propagateAttributes(['aria-label'], placeholder);
+    propagateAttributes(['aria-label'], this.element, placeholder);
     this.applyFillContent(placeholder);
 
     placeholder.setAttribute(

diff --git a/extensions/amp-gfycat/0.1/amp-gfycat.js b/extensions/amp-gfycat/0.1/amp-gfycat.js
@@ -26,6 +26,7 @@ import {
 import {getData, listen} from '../../../src/event-helper';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {propagateAttributes} from '../../../src/core/dom/propagateAttributes';
 
 const TAG = 'amp-gfycat';
 
@@ -89,7 +90,7 @@ class AmpGfycat extends AMP.BaseElement {
   createPlaceholderCallback() {
     const placeholder = this.win.document.createElement('amp-img');
     const videoid = dev().assertString(this.videoid_);
-    this.propagateAttributes(['alt', 'aria-label'], placeholder);
+    propagateAttributes(['alt', 'aria-label'], this.element, placeholder);
     placeholder.setAttribute(
       'src',
       'https://thumbs.gfycat.com/' + encodeURIComponent(videoid) + '-poster.jpg'

diff --git a/extensions/amp-google-document-embed/0.1/amp-google-document-embed.js b/extensions/amp-google-document-embed/0.1/amp-google-document-embed.js
@@ -31,6 +31,7 @@ import {Services} from '../../../src/services';
 import {addParamToUrl} from '../../../src/url';
 import {dev, userAssert} from '../../../src/log';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {propagateAttributes} from '../../../src/core/dom/propagateAttributes';
 import {removeElement} from '../../../src/dom';
 
 export const TAG = 'amp-google-document-embed';
@@ -90,7 +91,7 @@ export class AmpDriveViewer extends AMP.BaseElement {
 
     iframe.setAttribute('frameborder', '0');
     iframe.setAttribute('allowfullscreen', '');
-    this.propagateAttributes(ATTRIBUTES_TO_PROPAGATE, iframe);
+    propagateAttributes(ATTRIBUTES_TO_PROPAGATE, this.element, iframe);
 
     iframe.src = this.getSrc_(this.element.getAttribute('src'));
 
@@ -105,7 +106,12 @@ export class AmpDriveViewer extends AMP.BaseElement {
       (value) => mutations[value] !== undefined
     );
     const iframe = dev().assertElement(this.iframe_);
-    this.propagateAttributes(attrs, iframe, /* opt_removeMissingAttrs */ true);
+    propagateAttributes(
+      attrs,
+      this.element,
+      iframe,
+      /* opt_removeMissingAttrs */ true
+    );
     const src = mutations['src'];
     if (src) {
       iframe.src = this.getSrc_(src);

diff --git a/extensions/amp-iframe/0.1/amp-iframe.js b/extensions/amp-iframe/0.1/amp-iframe.js
@@ -36,6 +36,7 @@ import {isAdPositionAllowed} from '../../../src/ad-helper';
 import {isExperimentOn} from '../../../src/experiments';
 import {moveLayoutRect} from '../../../src/layout-rect';
 import {parseJson} from '../../../src/json';
+import {propagateAttributes} from '../../../src/core/dom/propagateAttributes';
 import {removeElement} from '../../../src/dom';
 import {removeFragment} from '../../../src/url';
 import {setStyle} from '../../../src/style';
@@ -414,7 +415,7 @@ export class AmpIframe extends AMP.BaseElement {
       setStyle(iframe, 'zIndex', -1);
     }
 
-    this.propagateAttributes(ATTRIBUTES_TO_PROPAGATE, iframe);
+    propagateAttributes(ATTRIBUTES_TO_PROPAGATE, this.element, iframe);
 
     // TEMPORARY: disable `allow=autoplay`
     // This is a workaround for M72-M74 user-activation breakage.
@@ -619,7 +620,7 @@ export class AmpIframe extends AMP.BaseElement {
     }
     if (this.iframe_ && mutations['title']) {
       // only propagating title because propagating all causes e2e error:
-      this.propagateAttributes(['title'], this.iframe_);
+      propagateAttributes(['title'], this.element, this.iframe_);
     }
   }
 

diff --git a/extensions/amp-image-lightbox/0.1/amp-image-lightbox.js b/extensions/amp-image-lightbox/0.1/amp-image-lightbox.js
@@ -39,6 +39,7 @@ import {
   layoutRectLtwh,
   moveLayoutRect,
 } from '../../../src/layout-rect';
+import {propagateAttributes} from '../../../src/core/dom/propagateAttributes';
 import {setStyles, toggle} from '../../../src/style';
 import {srcsetFromElement} from '../../../src/srcset';
 
@@ -49,6 +50,11 @@ const SUPPORTED_ELEMENTS_ = {
   'amp-img': true,
   'amp-anim': true,
 };
+/** @private @const {!Object<string, boolean>} */
+const SUPPORTED_NATIVE_ELEMENTS = {
+  'img': true,
+  'picture': true,
+};
 
 /** @private @const */
 const ARIA_ATTRIBUTES = ['aria-label', 'aria-describedby', 'aria-labelledby'];
@@ -253,9 +259,15 @@ export class ImageViewer {
     this.setSourceDimensions_(sourceElement, sourceImage);
     this.srcset_ = srcsetFromElement(sourceElement);
 
-    sourceElement.getImpl().then((elem) => {
-      elem.propagateAttributes(ARIA_ATTRIBUTES, this.image_);
-    });
+    if (SUPPORTED_NATIVE_ELEMENTS[sourceElement.tagName.toLowerCase()]) {
+      propagateAttributes(ARIA_ATTRIBUTES, sourceElement, this.image_);
+    } else {
+      sourceElement
+        .getImpl()
+        .then((elem) =>
+          propagateAttributes(ARIA_ATTRIBUTES, elem, this.image_)
+        );
+    }
 
     if (sourceImage && isLoaded(sourceImage) && sourceImage.src) {
       // Set src provisionally to the known loaded value for fast display.
@@ -871,8 +883,10 @@ class AmpImageLightbox extends AMP.BaseElement {
     this.buildLightbox_();
 
     const source = invocation.caller;
+    const tagName = source.tagName.toLowerCase();
     userAssert(
-      source && SUPPORTED_ELEMENTS_[source.tagName.toLowerCase()],
+      source &&
+        (SUPPORTED_ELEMENTS_[tagName] || SUPPORTED_NATIVE_ELEMENTS[tagName]),
       'Unsupported element: %s',
       source.tagName
     );

diff --git a/extensions/amp-image-viewer/0.1/amp-image-viewer.js b/extensions/amp-image-viewer/0.1/amp-image-viewer.js
@@ -46,6 +46,7 @@ import {
   observeContentSize,
   unobserveContentSize,
 } from '../../../src/utils/size-observer';
+import {propagateAttributes} from '../../../src/core/dom/propagateAttributes';
 import {setStyles} from '../../../src/style';
 import {srcsetFromElement} from '../../../src/srcset';
 
@@ -321,7 +322,7 @@ export class AmpImageViewer extends AMP.BaseElement {
       st.toggle(ampImg, false);
       this.element.appendChild(this.image_);
       return ampImg.getImpl().then((ampImg) => {
-        ampImg.propagateAttributes(ARIA_ATTRIBUTES, this.image_);
+        propagateAttributes(ARIA_ATTRIBUTES, ampImg, this.image_);
       });
     });
   }

diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery-thumbnails.js b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-thumbnails.js
@@ -21,6 +21,7 @@ import {dict} from '../../../src/core/types/object';
 import {htmlFor} from '../../../src/static-template';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {matches, scopedQuerySelector} from '../../../src/dom';
+import {propagateAttributes} from '../../../src/core/dom/propagateAttributes';
 import {setStyle} from '../../../src/style';
 
 /**
@@ -246,7 +247,7 @@ export class AmpInlineGalleryThumbnails extends AMP.BaseElement {
 
     // We create with loop defaulting to false above, and allow it to be
     // overwriten.
-    this.propagateAttributes(['loop'], this.carousel_);
+    propagateAttributes(['loop'], this.element, this.carousel_);
     this.element.appendChild(this.carousel_);
   }
 }
diff --git a/extensions/amp-jwplayer/0.1/amp-jwplayer.js b/extensions/amp-jwplayer/0.1/amp-jwplayer.js
@@ -42,6 +42,7 @@ import {getMode} from '../../../src/mode';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {once} from '../../../src/core/types/function';
+import {propagateAttributes} from '../../../src/core/dom/propagateAttributes';
 
 const JWPLAYER_EVENTS = {
   'ready': VideoEvents.LOAD,
@@ -349,7 +350,7 @@ class AmpJWPlayer extends AMP.BaseElement {
       return;
     }
     const placeholder = this.win.document.createElement('amp-img');
-    this.propagateAttributes(['aria-label'], placeholder);
+    propagateAttributes(['aria-label'], this.element, placeholder);
     placeholder.setAttribute(
       'src',
       'https://content.jwplatform.com/thumbs/' +