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/propagate-attributes';
 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-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/propagate-attributes';
 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/propagate-attributes';
 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-auto-lightbox/0.1/amp-auto-lightbox.js b/extensions/amp-auto-lightbox/0.1/amp-auto-lightbox.js
@@ -109,6 +109,9 @@ const DISABLED_ANCESTORS = [
   'amp-carousel',
 ].join(',');
 
+/** @type {Set<string>} */
+const NATIVE_ELEMENTS_SUPPORTED = new Set(['img']);
+
 const SCRIPT_LD_JSON = 'script[type="application/ld+json"]';
 const META_OG_TYPE = 'meta[property="og:type"]';
 
@@ -161,7 +164,7 @@ export class Criteria {
    */
   static meetsSizingCriteria(element, renderWidth, renderHeight) {
     const {naturalWidth, naturalHeight} = getMaxNaturalDimensions(
-      dev().assertElement(element.querySelector('img'))
+      dev().assertElement(element.querySelector('img') || element)
     );
 
     const viewport = Services.viewportForDoc(element);
@@ -272,19 +275,14 @@ function markAsVisited(candidate) {
   });
 }
 
-/**
- * @param {string} tagName
- * @return {string}
- */
-function candidateSelector(tagName) {
-  return `${tagName}:not([${LIGHTBOXABLE_ATTR}]):not([${VISITED_ATTR}])`;
-}
-
 /**
  * @param {!Element} element
  * @return {!Promise}
  */
 function whenLoaded(element) {
+  if (NATIVE_ELEMENTS_SUPPORTED.has(element.tagName.toLowerCase())) {
+    return Promise.resolve();
+  }
   return whenUpgradedToCustomElement(element).then((element) =>
     element.signals().whenSignal(CommonSignals.LOAD_END)
   );
@@ -298,7 +296,7 @@ export class Scanner {
    * @return {!Array<!Element>}
    */
   static getCandidates(root) {
-    const selector = candidateSelector('amp-img');
+    const selector = `amp-img:not([${LIGHTBOXABLE_ATTR}]):not([${VISITED_ATTR}]),img:not([${LIGHTBOXABLE_ATTR}]):not([${VISITED_ATTR}])`;
     const candidates = toArray(root.querySelectorAll(selector));
     // TODO(alanorozco): DOM mutations should be wrapped in mutate contexts.
     // Alternatively, use in-memory "visited" marker instead of attribute.
@@ -440,11 +438,16 @@ export function runCandidates(ampdoc, candidates) {
     whenLoaded(candidate).then(() => {
       return measureIntersectionNoRoot(candidate).then(
         ({boundingClientRect}) => {
-          // <amp-img> will change the img's src inline data on unlayout and
-          // remove it from DOM.
-          if (!candidate.signals().get(CommonSignals.LOAD_END)) {
+          if (NATIVE_ELEMENTS_SUPPORTED.has(candidate.tagName.toLowerCase())) {
+            if (!candidate.complete) {
+              return;
+            }
+          } else if (!candidate.signals().get(CommonSignals.LOAD_END)) {
+            // <amp-img> will change the img's src inline data on unlayout and
+            // remove it from DOM.
             return;
           }
+
           const {width, height} = boundingClientRect;
           if (!Criteria.meetsAll(candidate, width, height)) {
             return;

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/propagate-attributes';
 
 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/propagate-attributes';
 
 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/propagate-attributes';
 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/propagate-attributes';
 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,16 +39,16 @@ import {
   layoutRectLtwh,
   moveLayoutRect,
 } from '../../../src/layout-rect';
+import {propagateAttributes} from '../../../src/core/dom/propagate-attributes';
 import {setStyles, toggle} from '../../../src/style';
 import {srcsetFromElement} from '../../../src/srcset';
 
 const TAG = 'amp-image-lightbox';
 
-/** @private @const {!Object<string, boolean>} */
-const SUPPORTED_ELEMENTS_ = {
-  'amp-img': true,
-  'amp-anim': true,
-};
+/** @private @const {!Set<string>} */
+const SUPPORTED_ELEMENTS_ = new Set(['amp-img', 'amp-anim']);
+/** @private @const {!Set<string>} */
+const SUPPORTED_NATIVE_ELEMENTS = new Set(['img']);
 
 /** @private @const */
 const ARIA_ATTRIBUTES = ['aria-label', 'aria-describedby', 'aria-labelledby'];
@@ -253,9 +253,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.has(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 +877,11 @@ 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_.has(tagName) ||
+          SUPPORTED_NATIVE_ELEMENTS.has(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/propagate-attributes';
 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/propagate-attributes';
 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/propagate-attributes';
 
 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/' +

diff --git a/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js b/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js
@@ -20,6 +20,7 @@ import {addParamsToUrl} from '../../../src/url';
 import {dict} from '../../../src/core/types/object';
 import {getDataParamsFromAttributes} from '../../../src/dom';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {propagateAttributes} from '../../../src/core/dom/propagate-attributes';
 import {setIsMediaComponent} from '../../../src/video-interface';
 import {userAssert} from '../../../src/log';
 
@@ -125,7 +126,7 @@ class AmpKaltura extends AMP.BaseElement {
   /** @override */
   createPlaceholderCallback() {
     const placeholder = this.win.document.createElement('amp-img');
-    this.propagateAttributes(['aria-label'], placeholder);
+    propagateAttributes(['aria-label'], this.element, placeholder);
     const width = this.element.getAttribute('width');
     const height = this.element.getAttribute('height');
     let src = `https://${encodeURIComponent(