Ensure that aborting layout via unload cancels the layout promise

build-system/test-configs/dep-check-config.js

@@ -468,6 +468,7 @@ exports.rules = [
       'src/polyfills.js->src/polyfills/map-set.js',
       'src/polyfills.js->src/polyfills/set-add.js',
       'src/polyfills.js->src/polyfills/weakmap-set.js',
+      'src/friendly-iframe-embed.js->src/polyfills/abort-controller.js',
       'src/friendly-iframe-embed.js->src/polyfills/custom-elements.js',
       'src/friendly-iframe-embed.js->src/polyfills/document-contains.js',
       'src/friendly-iframe-embed.js->src/polyfills/domtokenlist.js',

src/friendly-iframe-embed.js

@@ -30,6 +30,7 @@ import {
 } from './service';
 import {escapeHtml} from './dom';
 import {getExperimentBranch} from './experiments';
+import {install as installAbortController} from './polyfills/abort-controller';
 import {installAmpdocServicesForEmbed} from './service/core-services';
 import {install as installCustomElements} from './polyfills/custom-elements';
 import {install as installDOMTokenList} from './polyfills/domtokenlist';
@@ -715,6 +716,7 @@ function installPolyfillsInChildWindow(parentWin, childWin) {
     installCustomElements(childWin, class {});
     installIntersectionObserver(parentWin, childWin);
     installResizeObserver(parentWin, childWin);
+    installAbortController(childWin);
   }
 }
 

src/polyfills/abort-controller.js

@@ -23,7 +23,21 @@ class AbortController {
 
   /** */
   abort() {
+    if (this.signal_.isAborted_) {
+      // Already aborted.
+      return;
+    }
     this.signal_.isAborted_ = true;
+    if (this.signal_.onabort_) {
+      const event = {
+        'type': 'abort',
+        'bubbles': false,
+        'cancelable': false,
+        'target': this.signal_,
+        'currentTarget': this.signal_,
+      };
+      this.signal_.onabort_(event);
+    }
   }
 
   /**
@@ -39,6 +53,8 @@ class AbortSignal {
   constructor() {
     /** @private {boolean} */
     this.isAborted_ = false;
+    /** @private {?function(!Event)} */
+    this.onabort_ = null;
   }
 
   /**
@@ -47,6 +63,20 @@ class AbortSignal {
   get aborted() {
     return this.isAborted_;
   }
+
+  /**
+   * @return {?function(!Event)}
+   */
+  get onabort() {
+    return this.onabort_;
+  }
+
+  /**
+   * @param {?function(!Event)} value
+   */
+  set onabort(value) {
+    this.onabort_ = value;
+  }
 }
 
 /**

src/service/resource.js

@@ -953,12 +953,15 @@ export class Resource {
 
     const promise = new Promise((resolve, reject) => {
       Services.vsyncFor(this.hostWin).mutate(() => {
+        let callbackResult;
         try {
-          resolve(this.element.layoutCallback(signal));
+          callbackResult = this.element.layoutCallback(signal);
         } catch (e) {
           reject(e);
         }
+        Promise.resolve(callbackResult).then(resolve, reject);
       });
+      signal.onabort = () => reject(cancellation());
     }).then(
       () => this.layoutComplete_(true, signal),
       (reason) => this.layoutComplete_(false, signal, reason)

test/unit/polyfills/test-abort-controller.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright 2020 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 {install} from '../../../src/polyfills/abort-controller';
+
+describes.realWin('AbortController', {}, (env) => {
+  let win;
+  let controller, signal;
+
+  beforeEach(() => {
+    win = env.win;
+
+    delete win.AbortController;
+    delete win.AbortSignal;
+    install(win);
+
+    controller = new win.AbortController();
+    signal = controller.signal;
+  });
+
+  it('should create AbortController and signal', () => {
+    expect(signal).to.exist;
+    expect(signal.aborted).to.be.false;
+    expect(signal.onabort).to.be.null;
+  });
+
+  it('should abort signal without listener', () => {
+    controller.abort();
+    expect(signal.aborted).to.be.true;
+  });
+
+  it('should abort signal with listener', () => {
+    const spy = env.sandbox.spy();
+    signal.onabort = spy;
+    expect(signal.onabort).to.equal(spy);
+
+    controller.abort();
+    expect(signal.aborted).to.be.true;
+    expect(spy).to.be.calledOnce;
+    const event = spy.firstCall.firstArg;
+    expect(event).to.contain({
+      type: 'abort',
+      bubbles: false,
+      cancelable: false,
+      target: signal,
+      currentTarget: signal,
+    });
+  });
+
+  it('should only call listener once', () => {
+    const spy = env.sandbox.spy();
+    signal.onabort = spy;
+    expect(signal.onabort).to.equal(spy);
+
+    controller.abort();
+    expect(spy).to.be.calledOnce;
+
+    controller.abort();
+    expect(spy).to.be.calledOnce;
+  });
+});

test/unit/test-resource.js

@@ -20,6 +20,7 @@ import {OwnersImpl} from '../../src/service/owners-impl';
 import {Resource, ResourceState} from '../../src/service/resource';
 import {ResourcesImpl} from '../../src/service/resources-impl';
 import {Services} from '../../src/services';
+import {isCancellation} from '../../src/error';
 import {layoutRectLtwh} from '../../src/layout-rect';
 
 describes.realWin('Resource', {amp: true}, (env) => {
@@ -621,6 +622,27 @@ describes.realWin('Resource', {amp: true}, (env) => {
     expect(resource.getState()).to.equal(ResourceState.LAYOUT_SCHEDULED);
   });
 
+  it('should abort startLayout with unload', async () => {
+    const neverEndingPromise = new Promise(() => {});
+    elementMock.expects('layoutCallback').returns(neverEndingPromise).once();
+
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
+    resource.layoutBox_ = {left: 11, top: 12, width: 10, height: 10};
+    const layoutPromise = resource.startLayout();
+    expect(resource.getState()).to.equal(ResourceState.LAYOUT_SCHEDULED);
+
+    resource.unload();
+
+    let error;
+    try {
+      await layoutPromise;
+    } catch (e) {
+      error = e;
+    }
+    expect(error).to.exist;
+    expect(isCancellation(error)).to.be.true;
+  });
+
   it('should ignore startLayout for re-layout when not opt-in', () => {
     elementMock.expects('layoutCallback').never();