Fix Measuring Child AMP Elements

src/custom-element.js

@@ -1124,6 +1124,11 @@ function createBaseCustomElementClass(win) {
       return this.getResources().getResourceForElement(this).getLayoutBox();
     }
 
+    /** @return {!Layout} */
+    getLayout() {
+      return this.layout_;
+    }
+
     /**
      * Returns a previously measured layout box relative to the page. The
      * fixed-position elements are relative to the top of the document.

src/dom.js

@@ -16,6 +16,7 @@
 
 import {dev} from './log';
 import {cssEscape} from '../third_party/css-escape/css-escape';
+import {startsWith} from './string';
 
 const HTML_ESCAPE_CHARS = {
   '&': '&',
@@ -28,6 +29,20 @@ const HTML_ESCAPE_CHARS = {
 const HTML_ESCAPE_REGEX = /(&|<|>|"|'|`)/g;
 
 
+/**
+ * Determines if this element is an AMP element
+ * @param {!Element} element
+ * @return {boolean}
+ */
+export function isAmpElement(element) {
+  const tag = element.tagName;
+  // Use prefix to recognize AMP element. This is necessary because stub
+  // may not be attached yet.
+  return startsWith(tag, 'AMP-') &&
+      // Some "amp-*" elements are not really AMP elements. :smh:
+      !(tag == 'AMP-STICKY-AD-TOP-PADDING' || tag == 'AMP-BODY');
+}
+
 /**
  * Waits until the child element is constructed. Once the child is found, the
  * callback is executed.

src/service/resource.js

@@ -19,9 +19,10 @@ import {
   layoutRectsOverlap,
   moveLayoutRect,
 } from '../layout-rect';
+import {Layout} from '../layout';
 import {dev} from '../log';
-import {startsWith} from '../string';
 import {toggle, computedStyle} from '../style';
+import {isAmpElement} from '../dom';
 
 const TAG = 'Resource';
 const RESOURCE_PROP_ = '__AMP__RESOURCE';
@@ -147,6 +148,9 @@ export class Resource {
     /** @private {!AmpElement|undefined|null} */
     this.owner_ = undefined;
 
+    /** @private {!AmpElement|undefined|null} */
+    this.ampAncestor_ = undefined;
+
     /** @private {!ResourceState} */
     this.state_ = element.isBuilt() ? ResourceState.NOT_LAID_OUT :
         ResourceState.NOT_BUILT;
@@ -215,21 +219,41 @@ export class Resource {
     this.owner_ = owner;
   }
 
+  /**
+   * Returns an ancestor amp element or null.
+   * @return {?AmpElement}
+   */
+  getAmpAncestor() {
+    if (this.ampAncestor_ === undefined) {
+      let ancestor = null;
+      for (let n = this.element.parentElement; n; n = n.parentElement) {
+        if (isAmpElement(n)) {
+          ancestor = n;
+          break;
+        }
+      }
+      this.ampAncestor_ = ancestor;
+    }
+    return this.ampAncestor_;
+  }
+
   /**
    * Returns an owner element or null.
    * @return {?AmpElement}
    */
   getOwner() {
     if (this.owner_ === undefined) {
-      for (let n = this.element; n; n = n.parentElement) {
-        if (n[OWNER_PROP_]) {
-          this.owner_ = n[OWNER_PROP_];
-          break;
+      const ancestor = this.getAmpAncestor();
+      let owner = null;
+      if (ancestor) {
+        for (let n = this.element; n !== ancestor; n = n.parentElement) {
+          if (n[OWNER_PROP_]) {
+            owner = n[OWNER_PROP_];
+            break;
+          }
         }
       }
-      if (this.owner_ === undefined) {
-        this.owner_ = null;
-      }
+      this.owner_ = owner;
     }
     return this.owner_;
   }
@@ -365,19 +389,31 @@ export class Resource {
    * transitioned to the "ready for layout" state.
    */
   measure() {
+    let current = this;
+    let ancestor = this.getAmpAncestor();
     // Check if the element is ready to be measured.
-    // Placeholders are special. They are technically "owned" by parent AMP
-    // elements, sized by parents, but laid out independently. This means
-    // that placeholders need to at least wait until the parent element
-    // has been stubbed. We can tell whether the parent has been stubbed
-    // by whether a resource has been attached to it.
-    if (this.isPlaceholder_ &&
-        this.element.parentElement &&
-        // Use prefix to recognize AMP element. This is necessary because stub
-        // may not be attached yet.
-        startsWith(this.element.parentElement.tagName, 'AMP-') &&
-        !(RESOURCE_PROP_ in this.element.parentElement)) {
-      return;
+    while (ancestor) {
+      const resource = Resource.forElementOptional(ancestor);
+      // If there's an AMP ancestor that's still not stubbed (has a Resource),
+      // we don't know what to do yet.
+      if (!resource) {
+        return;
+      }
+      // If the current resource (not the ancestor) is a placeholder, allow it to
+      // measure. This is because placeholders are laid out independently of
+      // the ancestor element (even if they are sized and "owned" by it).
+      if (current.isPlaceholder_) {
+        break;
+      }
+      // If this ancestor isn't built yet, that means we don't know what kind
+      // of styles will be applied to this element. We must wait.
+      // Unless the ancestor is a container, in which case the element will
+      // define its own sizing.
+      if (!ancestor.isBuilt() && ancestor.getLayout() !== Layout.CONTAINER) {
+        return;
+      }
+      current = resource;
+      ancestor = current.getAmpAncestor();
     }
 
     this.isMeasureRequested_ = false;