intersect-resources: Fix incorrect pre-layout assumption (#27684)

* Fix incorrect pre-layout assumption.

* Fix types.

* Add unit tests.

* Clean up test-resources.js a bit.

* Remove obsolete experiment.

* Last bit of cleanup.

* Fix lint.

* Make test a bit more readable.

src/service/resource.js

@@ -673,13 +673,16 @@ export class Resource {
   /**
    * Whether the resource is displayed, i.e. if it has non-zero width and
    * height.
-   * @param {!ClientRect=} opt_premeasuredRect If provided, use this
-   *    premeasured ClientRect instead of using the cached layout box.
+   * @param {boolean} usePremeasuredRect If true and a premeasured rect is
+   *     available, use it. Otherwise, use the cached layout box.
    * @return {boolean}
    */
-  isDisplayed(opt_premeasuredRect) {
+  isDisplayed(usePremeasuredRect = false) {
+    devAssert(!usePremeasuredRect || !this.intersect_);
     const isFluid = this.element.getLayout() == Layout.FLUID;
-    const box = opt_premeasuredRect || this.getLayoutBox();
+    const box = usePremeasuredRect
+      ? devAssert(this.premeasuredRect_)
+      : this.getLayoutBox();
     const hasNonZeroSize = box.height > 0 && box.width > 0;
     return (
       (isFluid || hasNonZeroSize) &&

src/service/resources-impl.js

@@ -1431,14 +1431,28 @@ export class ResourcesImpl {
         const reschedule = this.reschedule_.bind(this, task);
         executing.promise.then(reschedule, reschedule);
       } else {
-        // With IntersectionObserver, the element's client rect measurement
-        // is recent so immediate remeasuring shouldn't be necessary.
-        if (!this.intersectionObserver_) {
-          task.resource.measure();
+        const {resource} = task;
+
+        let stillDisplayed = true;
+        if (this.intersectionObserver_) {
+          // With IntersectionObserver, peek at the premeasured rect to see
+          // if the resource is still displayed (has a non-zero size).
+          // The premeasured rect is most analogous to an immediate measure.
+          if (resource.hasBeenPremeasured()) {
+            stillDisplayed = resource.isDisplayed(
+              /* usePremeasuredRect */ true
+            );
+          }
+        } else {
+          // Remeasure can only update isDisplayed(), not in-viewport state.
+          resource.measure();
         }
         // Check if the element has exited the viewport or the page has changed
         // visibility since the layout was scheduled.
-        if (this.isLayoutAllowed_(task.resource, task.forceOutsideViewport)) {
+        if (
+          stillDisplayed &&
+          this.isLayoutAllowed_(resource, task.forceOutsideViewport)
+        ) {
           task.promise = task.callback();
           task.startTime = now;
           dev().fine(TAG_, 'exec:', task.id, 'at', task.startTime);
@@ -1450,9 +1464,8 @@ export class ResourcesImpl {
             )
             .catch(/** @type {function (*)} */ (reportError));
         } else {
-          devAssert(!this.intersectionObserver_);
           dev().fine(TAG_, 'cancelled', task.id);
-          task.resource.layoutCanceled();
+          resource.layoutCanceled();
         }
       }