(amp-lightbox-gallery): opens to selected image, resolve ampproject#3…

…5920 (ampproject#36103)

removed a unlayout call that would cause the image to default to the first slide

extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js

@@ -919,13 +919,6 @@ export class AmpLightboxGallery extends AMP.BaseElement {
     };
 
     const mutate = () => {
-      if (enter) {
-        Services.ownersForDoc(this.element)./*OK*/ scheduleUnlayout(
-          this.element,
-          this.carousel_
-        );
-      }
-
       toggle(carousel, enter);
       // Undo opacity 0 from `openLightboxGallery_`
       setStyle(this.element, 'opacity', '');

extensions/amp-lightbox-gallery/0.1/test-e2e/test-open-close.js

@@ -52,5 +52,27 @@ describes.endtoend(
       await controller.click(closeButton);
       await controller.findElement('amp-lightbox-gallery[hidden]');
     });
+
+    it('should display the image that opened the lightbox', async () => {
+      const clickedImage = await controller.findElement('#basic-2');
+
+      const imageSrc = await controller.getElementAttribute(
+        clickedImage,
+        'src'
+      );
+
+      await controller.click(clickedImage);
+
+      const slideImage = await controller.findElement(
+        // pick the img element with the same src as the clickedImage,
+        // inside the non hidden slide (this is the active slide),
+        // that is inside the amp-light-box with the default group id
+        `[amp-lightbox-group="default"] .amp-carousel-slide[aria-hidden="false"] img[src="${imageSrc}"]`
+      );
+
+      const activeImageRect = await controller.getElementRect(slideImage);
+      // If x is negative, it means this is the previous active slide, if positive it is the next slide. But if 0, it is the active slide
+      await expect(activeImageRect.x).to.equal(0);
+    });
   }
 );

test/fixtures/e2e/amp-lightbox/amp-lightbox-gallery-launch.amp.html

@@ -61,11 +61,11 @@
   This is a basic example that demonstrates lightboxed `<amp-img>`s. You have one or more `<amp-img>` elements on the page. Just add the "lightbox" attribute to each image that you wish to view in a lightbox.
   -->
   <div class="container">
-    <amp-img lightbox src="../amp-base-carousel/img/bluegradient.png" width="300" height="200" layout="responsive"></amp-img>
+    <amp-img lightbox src="../amp-base-carousel/img/bluegradient.png" width="300" height="200" layout="responsive" id="basic-1"></amp-img>
     <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-    <amp-img lightbox src="../amp-base-carousel/img/redgradient.png" width="300" height="200" layout="responsive"></amp-img>
+    <amp-img lightbox src="../amp-base-carousel/img/redgradient.png" width="300" height="200" layout="responsive" id="basic-2"></amp-img>
     <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-    <amp-img lightbox src="../amp-base-carousel/img/lemonyellowgradient.png" width="300" height="200" layout="responsive"></amp-img>
+    <amp-img lightbox src="../amp-base-carousel/img/lemonyellowgradient.png" width="300" height="200" layout="responsive"  id="basic-3"></amp-img>
     <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>