diff --git a/extensions/amp-image-lightbox/0.1/amp-image-lightbox.js b/extensions/amp-image-lightbox/0.1/amp-image-lightbox.js index 523f638b7410..72ecc866cc62 100644 --- 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 index b3b42f79ee23..61b77820730d 100644 --- 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) => {