🐛 Force transfer of amp-consent element to the FixedLayer (#36223)

Fixes #36063 `amp-consent` explicitly adds itself to the `FixedLayer`, transferring itself before the iframe is loaded. On a later pass, `FixedLayer` decides that `amp-consent` is not transferrable, so it returns it to the original `<body>` element. Enabling `forceTransfer` causes the return reparenting to not occur, thus preventing the iframe from loading a second time.
ampproject · Oct 1, 2021 · fc4d6aa · fc4d6aa
1 parent 2dab872
commit fc4d6aa
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/extensions/amp-consent/0.1/consent-ui.js b/extensions/amp-consent/0.1/consent-ui.js
@@ -234,8 +234,11 @@ export class ConsentUI {
     const {classList} = this.parent_;
     classList.add('amp-active');
     classList.remove('amp-hidden');
-    // Add to fixed layer
-    this.baseInstance_.getViewport().addToFixedLayer(this.parent_);
+
+    this.baseInstance_
+      .getViewport()
+      .addToFixedLayer(this.parent_, /* forceTransfer */ true);
+
     if (this.isCreatedIframe_) {
       // show() can be called multiple times, but notificationsUiManager
       // ensures that only 1 is shown at a time, so no race condition here

diff --git a/extensions/amp-consent/0.1/test/test-consent-ui.js b/extensions/amp-consent/0.1/test/test-consent-ui.js
@@ -31,6 +31,7 @@ describes.realWin(
     let ampdoc;
     let consentUI;
     let mockInstance;
+    let mockViewport;
     let parent;
     let ownersStubs;
 
@@ -46,18 +47,17 @@ describes.realWin(
       postPrompt.setAttribute('id', 'testPost');
       parent.appendChild(postPrompt);
       doc.body.appendChild(parent);
+      mockViewport = {
+        addToFixedLayer: env.sandbox.spy(),
+        removeFromFixedLayer: () => {},
+      };
       mockInstance = {
         getAmpDoc: () => {
           return ampdoc;
         },
         element: parent,
         win,
-        getViewport: () => {
-          return {
-            addToFixedLayer: () => {},
-            removeFromFixedLayer: () => {},
-          };
-        },
+        getViewport: () => mockViewport,
         getVsync: () => {
           return {
             mutate: (callback) => {
@@ -106,6 +106,12 @@ describes.realWin(
       const consentUI = new ConsentUI(mockInstance, config);
       const showIframeSpy = env.sandbox.spy(consentUI, 'showIframe_');
       consentUI.show(false);
+      expect(
+        mockViewport.addToFixedLayer.withArgs(
+          mockInstance.element,
+          /* forceTransfer */ true
+        )
+      ).to.have.been.calledOnce;
       consentUI.iframeReady_.resolve();
       return whenCalled(showIframeSpy).then(() => Promise.resolve(consentUI));
     };