Remove measure APIs from amp-auto-lightbox

build-system/test-configs/forbidden-terms.js

@@ -1101,7 +1101,6 @@ const forbiddenTermsSrcInclusive = {
       'src/service/resources-impl.js',
       'src/service/video-manager-impl.js',
       'extensions/amp-a4a/0.1/amp-a4a.js',
-      'extensions/amp-auto-lightbox/0.1/amp-auto-lightbox.js',
       'extensions/amp-fx-flying-carpet/0.1/amp-fx-flying-carpet.js',
       'extensions/amp-script/0.1/amp-script.js',
       'extensions/amp-story/1.0/amp-story-page.js',

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

@@ -32,6 +32,7 @@ import {
   whenUpgradedToCustomElement,
 } from '../../../src/dom';
 import {dev} from '../../../src/log';
+import {measure} from './measure';
 import {toArray} from '../../../src/types';
 import {tryParseJson} from '../../../src/json';
 
@@ -124,11 +125,13 @@ const getRootNode = (ampdoc) => ampdoc.getRootNode();
 export class Criteria {
   /**
    * @param {!Element} element
+   * @param {number} renderWidth
+   * @param {number} renderHeight
    * @return {boolean}
    */
-  static meetsAll(element) {
+  static meetsAll(element, renderWidth, renderHeight) {
     return (
-      Criteria.meetsSizingCriteria(element) &&
+      Criteria.meetsSizingCriteria(element, renderWidth, renderHeight) &&
       Criteria.meetsTreeShapeCriteria(element)
     );
   }
@@ -152,15 +155,15 @@ export class Criteria {
 
   /**
    * @param {!Element} element
+   * @param {number} renderWidth
+   * @param {number} renderHeight
    * @return {boolean}
    */
-  static meetsSizingCriteria(element) {
+  static meetsSizingCriteria(element, renderWidth, renderHeight) {
     const {naturalWidth, naturalHeight} = getMaxNaturalDimensions(
       dev().assertElement(element.querySelector('img'))
     );
 
-    const {width: renderWidth, height: renderHeight} = element.getLayoutSize();
-
     const viewport = Services.viewportForDoc(element);
     const {width: vw, height: vh} = viewport.getSize();
 
@@ -440,11 +443,13 @@ export function runCandidates(ampdoc, candidates) {
       if (candidate.signals().get(CommonSignals.UNLOAD)) {
         return;
       }
-      if (!Criteria.meetsAll(candidate)) {
-        return;
-      }
-      dev().info(TAG, 'apply', candidate);
-      return apply(ampdoc, candidate);
+      return measure(ampdoc, candidate).then(({width, height}) => {
+        if (!Criteria.meetsAll(candidate, width, height)) {
+          return;
+        }
+        dev().info(TAG, 'apply', candidate);
+        return apply(ampdoc, candidate);
+      });
     }, NOOP)
   );
 }

extensions/amp-auto-lightbox/0.1/measure.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Deferred} from '../../../src/utils/promise';
+
+/** @type {!WeakMap<!Window, !IntersectionObserver>} */
+const intersectionObserversByWin = new WeakMap();
+
+/** @type {!WeakMap<!Element, !Deferred>} */
+const measuringElements = new WeakMap();
+
+/**
+ * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
+ * @param {!Element} element
+ * @return {!Promise<!ClientRect>}
+ */
+export function measure(ampdoc, element) {
+  // Uses the `IntersectionObserver` for size measurements. It'd be more
+  // appropriate to use `size-observer.measureBorderBoxSize`, but it's very
+  // poorly supported. While, `IntersectionObserver` is implemented on most
+  // of platforms in this basic form.
+  const {win} = ampdoc;
+  let observer = intersectionObserversByWin.get(win);
+  if (!observer) {
+    observer = new win.IntersectionObserver((entries) => {
+      for (let i = 0; i < entries.length; i++) {
+        const {target, boundingClientRect} = entries[i];
+        const deferred = measuringElements.get(target);
+        if (deferred) {
+          deferred.resolve(boundingClientRect);
+          measuringElements.delete(target);
+          observer.unobserve(target);
+        }
+      }
+    });
+    intersectionObserversByWin.set(win, observer);
+  }
+
+  let deferred = measuringElements.get(element);
+  if (!deferred) {
+    deferred = new Deferred();
+    measuringElements.set(element, deferred);
+    observer.observe(element);
+  }
+  return deferred.promise;
+}

extensions/amp-auto-lightbox/0.1/test/test-measure.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {installIntersectionObserverStub} from '../../../../testing/intersection-observer-stub';
+import {measure} from '../measure';
+
+describes.realWin('amp-auto-lightbox:measure', {amp: true}, (env) => {
+  let win, doc, ampdoc;
+  let intersectionObserverStub;
+  let element;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    ampdoc = env.ampdoc;
+    intersectionObserverStub = installIntersectionObserverStub(
+      env.sandbox,
+      win
+    );
+    element = doc.createElement('div');
+  });
+
+  it('should measure an element via IntersectionObserver', async () => {
+    expect(intersectionObserverStub.isObserved(element)).to.be.false;
+
+    const promise = measure(ampdoc, element);
+    expect(
+      intersectionObserverStub.isObserved(element, {root: null, threshold: 0})
+    ).to.be.true;
+
+    intersectionObserverStub.notifySync(
+      {
+        target: element,
+        boundingClientRect: {width: 101, height: 102},
+      },
+      {
+        root: null,
+        threshold: 0,
+      }
+    );
+
+    const {width, height} = await promise;
+    expect(width).to.equal(101);
+    expect(height).to.equal(102);
+    expect(intersectionObserverStub.isObserved(element)).to.be.false;
+  });
+
+  it('should only measure once at a time', async () => {
+    const promise1 = measure(ampdoc, element);
+    const promise2 = measure(ampdoc, element);
+
+    intersectionObserverStub.notifySync(
+      {
+        target: element,
+        boundingClientRect: {width: 101, height: 102},
+      },
+      {
+        root: null,
+        threshold: 0,
+      }
+    );
+
+    expect(await promise1).to.deep.equal({width: 101, height: 102});
+    expect(await promise2).to.deep.equal({width: 101, height: 102});
+    expect(intersectionObserverStub.isObserved(element)).to.be.false;
+  });
+});