test for supporting img on amp-image-lightbox

ampproject · May 6, 2021 · 8937bdc · 8937bdc
1 parent 59455c9
commit 8937bdc
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 15 deletions.
diff --git a/extensions/amp-image-lightbox/0.1/amp-image-lightbox.js b/extensions/amp-image-lightbox/0.1/amp-image-lightbox.js
@@ -256,8 +256,8 @@ export class ImageViewer {
     } else {
       sourceElement
         .getImpl()
-        .then((elem) =>
-          propagateAttributes(ARIA_ATTRIBUTES, elem, this.image_)
+        .then((impl) =>
+          propagateAttributes(ARIA_ATTRIBUTES, impl.element, this.image_)
         );
     }
 

diff --git a/extensions/amp-image-lightbox/0.1/test/test-amp-image-lightbox.js b/extensions/amp-image-lightbox/0.1/test/test-amp-image-lightbox.js
@@ -65,19 +65,13 @@ describes.realWin(
       const impl = await lightbox.getImpl(false);
 
       const noop = () => {};
-      impl.getViewport = () => {
-        return {
-          onChanged: noop,
-          enterLightboxMode: noop,
-        };
-      };
-      impl.getHistory_ = () => {
-        return {
-          push: () => {
-            return Promise.resolve();
-          },
-        };
-      };
+      impl.getViewport = () => ({
+        onChanged: noop,
+        enterLightboxMode: noop,
+      });
+      impl.getHistory_ = () => ({
+        push: () => Promise.resolve(),
+      });
       impl.enter_ = noop;
 
       const ampImage = doc.createElement('amp-img');
@@ -112,6 +106,52 @@ describes.realWin(
       );
     });
 
+    it('should render correctly with an img element', async () => {
+      const lightbox = await getImageLightbox();
+      const impl = await lightbox.getImpl(false);
+
+      const noop = () => {};
+      impl.getViewport = () => ({
+        onChanged: noop,
+        enterLightboxMode: noop,
+      });
+      impl.getHistory_ = () => ({
+        push: () => Promise.resolve(),
+      });
+      impl.enter_ = noop;
+
+      const img = doc.createElement('img');
+      img.setAttribute('src', 'data:');
+      impl.open_({caller: img});
+
+      const container = lightbox.querySelector(
+        '.i-amphtml-image-lightbox-container'
+      );
+      expect(container).to.not.equal(null);
+
+      const caption = container.querySelector(
+        '.i-amphtml-image-lightbox-caption'
+      );
+      expect(caption).to.not.equal(null);
+      expect(caption).to.have.class('amp-image-lightbox-caption');
+
+      const viewer = container.querySelector(
+        '.i-amphtml-image-lightbox-viewer'
+      );
+      expect(viewer).to.not.equal(null);
+
+      const image = viewer.querySelector(
+        '.i-amphtml-image-lightbox-viewer-image'
+      );
+      expect(image).to.not.equal(null);
+
+      // Very important. Image must have transform-origin=50% 50%.
+      const win = image.ownerDocument.defaultView;
+      expect(win.getComputedStyle(image)['transform-origin']).to.equal(
+        '50% 50%'
+      );
+    });
+
     it('should activate all steps', async () => {
       const lightbox = await getImageLightbox();
       const impl = await lightbox.getImpl(false);
@@ -309,6 +349,7 @@ describes.realWin(
     let loadPromiseStub;
 
     const sourceElement = {
+      tagName: 'amp-img',
       offsetWidth: 101,
       offsetHeight: 201,
       getAttribute: (name) => {