diff --git a/build-system/tasks/presubmit-checks.js b/build-system/tasks/presubmit-checks.js
index 0232c1355f20..139f70c2b107 100644
--- a/build-system/tasks/presubmit-checks.js
+++ b/build-system/tasks/presubmit-checks.js
@@ -517,6 +517,7 @@ var forbiddenTermsSrcInclusive = {
     message: bannedTermsHelpString,
     whitelist: [
       'src/element-stub.js',
+      'src/friendly-iframe-embed.js',
       'src/runtime.js',
       'src/service/extensions-impl.js',
       'src/service/lightbox-manager-discovery.js',
@@ -546,6 +547,7 @@ var forbiddenTermsSrcInclusive = {
     whitelist: [
       'src/base-element.js',
       'src/event-helper.js',
+      'src/friendly-iframe-embed.js',
       'src/service/performance-impl.js',
       'src/service/url-replacements-impl.js',
       'extensions/amp-ad/0.1/amp-ad-api-handler.js',
diff --git a/src/custom-element.js b/src/custom-element.js
index 4244537ae823..11214b2ca843 100644
--- a/src/custom-element.js
+++ b/src/custom-element.js
@@ -145,10 +145,7 @@ export function stubElements(win) {
     // If amp-ad and amp-embed haven't been registered, manually register them
     // with ElementStub, in case the script to the element is not included.
     if (!knownElements['amp-ad'] && !knownElements['amp-embed']) {
-      win.ampExtendedElements['amp-ad'] = true;
-      registerElement(win, 'amp-ad', ElementStub);
-      win.ampExtendedElements['amp-embed'] = true;
-      registerElement(win, 'amp-embed', ElementStub);
+      stubLegacyElements(win);
     }
   }
   const list = win.document.querySelectorAll('[custom-element]');
@@ -166,6 +163,16 @@ export function stubElements(win) {
   }
 }
 
+/**
+ * @param {!Window} win
+ */
+function stubLegacyElements(win) {
+  win.ampExtendedElements['amp-ad'] = true;
+  registerElement(win, 'amp-ad', ElementStub);
+  win.ampExtendedElements['amp-embed'] = true;
+  registerElement(win, 'amp-embed', ElementStub);
+}
+
 /**
  * Stub element if not yet known.
  * @param {!Window} win
@@ -182,6 +189,22 @@ export function stubElementIfNotKnown(win, name) {
   registerElement(win, name, ElementStub);
 }
 
+/**
+ * Copies the specified element to child window (friendly iframe). This way
+ * all implementations of the AMP elements are shared between all friendly
+ * frames.
+ * @param {!Window} childWin
+ * @param {string} name
+ */
+export function copyElementToChildWindow(childWin, name) {
+  if (!childWin.ampExtendedElements) {
+    childWin.ampExtendedElements = {};
+    stubLegacyElements(childWin);
+  }
+  childWin.ampExtendedElements[name] = true;
+  registerElement(childWin, name, knownElements[name] || ElementStub);
+}
+
 
 /**
  * Applies layout to the element. Visible for testing only.
diff --git a/src/dom.js b/src/dom.js
index 0bbf77f35478..b976c2c62b03 100644
--- a/src/dom.js
+++ b/src/dom.js
@@ -18,6 +18,16 @@ import {dev} from './log';
 import {cssEscape} from '../third_party/css-escape/css-escape';
 import {toArray} from './types';
 
+const HTML_ESCAPE_CHARS = {
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#x27;',
+  '`': '&#x60;',
+};
+const HTML_ESCAPE_REGEX = /(&|<|>|"|'|`)/g;
+
 
 /**
  * Waits until the child element is constructed. Once the child is found, the
@@ -544,3 +554,24 @@ export function escapeCssSelectorIdent(win, ident) {
   // Polyfill.
   return cssEscape(ident);
 }
+
+
+/**
+ * Escapes `<`, `>` and other HTML charcaters with their escaped forms.
+ * @param {string} text
+ * @return {string}
+ */
+export function escapeHtml(text) {
+  if (!text) {
+    return text;
+  }
+  return text.replace(HTML_ESCAPE_REGEX, escapeHtmlChar);
+}
+
+/**
+ * @param {string} c
+ * @return string
+ */
+function escapeHtmlChar(c) {
+  return HTML_ESCAPE_CHARS[c];
+}
diff --git a/src/friendly-iframe-embed.js b/src/friendly-iframe-embed.js
new file mode 100644
index 000000000000..acf713f928de
--- /dev/null
+++ b/src/friendly-iframe-embed.js
@@ -0,0 +1,223 @@
+/**
+ * Copyright 2016 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 {escapeHtml} from './dom';
+import {extensionsFor} from './extensions';
+import {getTopWindow} from './service';
+import {loadPromise} from './event-helper';
+import {resourcesForDoc} from './resources';
+
+
+/**
+ * Parameters used to create the new "friendly iframe" embed.
+ * - html: The complete content of an AMP embed, which is itself an AMP
+ *   document. Can include whatever is normally allowed in an AMP document,
+ *   except for AMP `<script>` declarations. Those should be passed as an
+ *   array of `extensionIds`.
+ * - extensionsIds: An optional array of AMP extension IDs used in this embed.
+ * - fonts: An optional array of fonts used in this embed.
+ *
+ * @typedef {{
+ *   url: string,
+ *   html: string,
+ *   extensionIds: (?Array<string>|undefined),
+ *   fonts: (?Array<string>|undefined),
+ * }}
+ */
+export let FriendlyIframeSpec;
+
+
+/**
+ * @type {boolean|undefined}
+ * @visiblefortesting
+ */
+let srcdocSupported;
+
+/**
+ * @param {boolean|undefined} val
+ * @visiblefortesting
+ */
+export function setSrcdocSupportedForTesting(val) {
+  srcdocSupported = val;
+}
+
+/**
+ * Returns `true` if the Friendly Iframes are supported.
+ * @return {boolean}
+ */
+function isSrcdocSupported() {
+  if (srcdocSupported === undefined) {
+    srcdocSupported = 'srcdoc' in HTMLIFrameElement.prototype;
+  }
+  return srcdocSupported;
+}
+
+
+/**
+ * Creates the requested "friendly iframe" embed. Returns the promise that
+ * will be resolved as soon as the embed is available. The actual
+ * initialization of the embed will start as soon as the `iframe` is added
+ * to the DOM.
+ * @param {!HTMLIFrameElement} iframe
+ * @param {!Element} container
+ * @param {!FriendlyIframeSpec} spec
+ * @return {!Promise<FriendlyIframeEmbed>}
+ */
+export function installFriendlyIframeEmbed(iframe, container, spec) {
+  const win = getTopWindow(iframe.ownerDocument.defaultView);
+  const extensions = extensionsFor(win);
+
+  iframe.style.visibility = 'hidden';
+  iframe.setAttribute('referrerpolicy', 'unsafe-url');
+
+  // Pre-load extensions.
+  if (spec.extensionIds) {
+    spec.extensionIds.forEach(
+        extensionId => extensions.loadExtension(extensionId));
+  }
+
+  const html = mergeHtml(spec);
+
+  // Receive the signal when iframe is ready: it's document is formed.
+  iframe.onload = () => {
+    // Chrome does not reflect the iframe readystate.
+    iframe.readyState = 'complete';
+  };
+  let readyPromise;
+  if (isSrcdocSupported()) {
+    iframe.srcdoc = html;
+    // TODO(dvoytenko): Look for a way to get a faster call from here.
+    // Experiments show that the iframe's "load" event is consistently 50-100ms
+    // later than the contentWindow actually available.
+    readyPromise = loadPromise(iframe);
+    container.appendChild(iframe);
+  } else {
+    iframe.src = 'about:blank';
+    container.appendChild(iframe);
+    const childDoc = iframe.contentWindow.document;
+    childDoc.open();
+    childDoc.write(html);
+    childDoc.close();
+    // Window is created synchornously in this case.
+    readyPromise = Promise.resolve();
+  }
+  return readyPromise.then(() => {
+    // Add extensions.
+    extensions.installExtensionsInChildWindow(
+        iframe.contentWindow, spec.extensionIds || []);
+    // Ready to be shown.
+    iframe.style.visibility = '';
+    return new FriendlyIframeEmbed(iframe, spec);
+  });
+}
+
+
+/**
+ * Merges base and fonts into html document.
+ * @param {!FriendlyIframeSpec} spec
+ */
+function mergeHtml(spec) {
+  const originalHtml = spec.html;
+  const originalHtmlUp = originalHtml.toUpperCase();
+
+  // Find the insertion point.
+  let ip = originalHtmlUp.indexOf('<HEAD');
+  if (ip != -1) {
+    ip = originalHtmlUp.indexOf('>', ip + 1) + 1;
+  }
+  if (ip == -1) {
+    ip = originalHtmlUp.indexOf('<BODY');
+  }
+  if (ip == -1) {
+    ip = originalHtmlUp.indexOf('<HTML');
+    if (ip != -1) {
+      ip = originalHtmlUp.indexOf('>', ip + 1) + 1;
+    }
+  }
+
+  const result = [];
+
+  // Preambule.
+  if (ip > 0) {
+    result.push(originalHtml.substring(0, ip));
+  }
+
+  // Add <BASE> tag.
+  result.push(`<base href="${escapeHtml(spec.url)}">`);
+
+  // Load fonts.
+  if (spec.fonts) {
+    spec.fonts.forEach(font => {
+      result.push(
+          `<link href="${escapeHtml(font)}" rel="stylesheet" type="text/css">`);
+    });
+  }
+
+  // Postambule.
+  if (ip > 0) {
+    result.push(originalHtml.substring(ip));
+  } else {
+    result.push(originalHtml);
+  }
+
+  return result.join('');
+}
+
+
+/**
+ * Exposes `mergeHtml` for testing purposes.
+ * @param {!FriendlyIframeSpec} spec
+ * @visibleForTesting
+ */
+export function mergeHtmlForTesting(spec) {
+  return mergeHtml(spec);
+}
+
+
+/**
+ * A "friendly iframe" embed. This is the iframe that's fully accessible to
+ * the AMP runtime. It's similar to Shadow DOM in many respects, but it also
+ * provides iframe/viewport measurements and enables the use of `vh`, `vw` and
+ * `@media` CSS.
+ *
+ * The friendly iframe is managed by the top-level AMP Runtime. When it's
+ * destroyed, the `destroy` method must be called to free up the shared
+ * resources.
+ */
+export class FriendlyIframeEmbed {
+
+  /**
+   * @param {!HTMLIFrameElement} iframe
+   * @param {!FriendlyIframeSpec} spec
+   */
+  constructor(iframe, spec) {
+    /** @const {!HTMLIFrameElement} */
+    this.iframe = iframe;
+
+    /** @const {!Window} */
+    this.win = iframe.contentWindow;
+
+    /** @const {!FriendlyIframeSpec} */
+    this.spec = spec;
+  }
+
+  /**
+   * Ensures that all resources from this iframe have been released.
+   */
+  destroy() {
+    resourcesForDoc(this.iframe).removeForChildWindow(this.win);
+  }
+}
diff --git a/src/runtime.js b/src/runtime.js
index 841be6504092..fa5abf109267 100644
--- a/src/runtime.js
+++ b/src/runtime.js
@@ -20,6 +20,7 @@ import {
   addDocFactoryToExtension,
   addElementToExtension,
   addShadowRootFactoryToExtension,
+  installBuiltinElements,
   installExtensionsInShadowDoc,
   installExtensionsService,
   registerExtension,
@@ -39,8 +40,6 @@ import {installActionServiceForDoc} from './service/action-impl';
 import {installGlobalSubmitListener} from './document-submit';
 import {extensionsFor} from './extensions';
 import {installHistoryService} from './service/history-impl';
-import {installImg} from '../builtins/amp-img';
-import {installPixel} from '../builtins/amp-pixel';
 import {installPlatformService} from './service/platform-impl';
 import {installResourcesServiceForDoc} from './service/resources-impl';
 import {
@@ -54,7 +53,6 @@ import {installStyles} from './style-installer';
 import {installTimerService} from './service/timer-impl';
 import {installTemplatesService} from './service/template-impl';
 import {installUrlReplacementsService} from './service/url-replacements-impl';
-import {installVideo} from '../builtins/amp-video';
 import {installVideoManagerForDoc} from './service/video-manager-impl';
 import {installViewerService} from './service/viewer-impl';
 import {installViewportService} from './service/viewport-impl';
@@ -120,9 +118,7 @@ export function installAmpdocServices(ampdoc) {
  * @param {!Window} global Global scope to adopt.
  */
 export function installBuiltins(global) {
-  installImg(global);
-  installPixel(global);
-  installVideo(global);
+  installBuiltinElements(global);
 }
 
 
@@ -338,7 +334,7 @@ export function adoptShadowMode(global) {
  */
 function prepareAndRegisterElement(global, extensions,
     name, implementationClass, opt_css) {
-  addElementToExtension(extensions, name, implementationClass);
+  addElementToExtension(extensions, name, implementationClass, opt_css);
   if (opt_css) {
     installStyles(global.document, opt_css, () => {
       registerElementClass(global, name, implementationClass, opt_css);
@@ -359,7 +355,7 @@ function prepareAndRegisterElement(global, extensions,
  */
 function prepareAndRegisterElementShadowMode(global, extensions,
     name, implementationClass, opt_css) {
-  addElementToExtension(extensions, name, implementationClass);
+  addElementToExtension(extensions, name, implementationClass, opt_css);
   registerElementClass(global, name, implementationClass, opt_css);
   if (opt_css) {
     addShadowRootFactoryToExtension(extensions, shadowRoot => {
diff --git a/src/service.js b/src/service.js
index e766f6ba5dff..48ef7883a117 100644
--- a/src/service.js
+++ b/src/service.js
@@ -39,6 +39,7 @@ let ServiceHolderDef;
  * @return {!Object} The service.
  */
 export function getExistingServiceForWindow(win, id) {
+  win = getTopWindow(win);
   const exists = win.services && win.services[id] && win.services[id].obj;
   return dev().assert(exists, `${id} service not found. Make sure it is ` +
       `installed.`);
@@ -75,6 +76,7 @@ export function getExistingServiceForDoc(nodeOrDoc, id) {
  * @return {T}
  */
 export function getService(win, id, opt_factory) {
+  win = getTopWindow(win);
   return getServiceInternal(win, win, id,
       opt_factory ? opt_factory : undefined);
 }
@@ -89,6 +91,7 @@ export function getService(win, id, opt_factory) {
  * @template T
  */
 export function fromClass(win, id, constructor) {
+  win = getTopWindow(win);
   return getServiceInternal(win, win, id, undefined, constructor);
 }
 
@@ -183,6 +186,53 @@ export function getServicePromiseOrNullForDoc(nodeOrDoc, id) {
       id);
 }
 
+/**
+ * Set the parent and top windows on a child window (friendly iframe).
+ * @param {!Window} win
+ * @param {!Window} parentWin
+ */
+export function setParentWindow(win, parentWin) {
+  win.__AMP_PARENT = parentWin;
+  win.__AMP_TOP = getTopWindow(parentWin);
+}
+
+/**
+ * Returns the parent window for a child window (friendly iframe).
+ * @param {!Window} win
+ * @return {!Window}
+ */
+export function getParentWindow(win) {
+  return win.__AMP_PARENT || win;
+}
+
+/**
+ * Returns the top window where AMP Runtime is installed for a child window
+ * (friendly iframe).
+ * @param {!Window} win
+ * @return {!Window}
+ */
+export function getTopWindow(win) {
+  return win.__AMP_TOP || win;
+}
+
+/**
+ * Returns the parent "friendly" iframe if the node belongs to a child window.
+ * @param {!Node} node
+ * @param {!Window} topWin
+ * @return {?HTMLIFrameElement}
+ */
+export function getParentWindowFrameElement(node, topWin) {
+  const childWin = (node.ownerDocument || node).defaultView;
+  if (childWin && childWin != topWin && getTopWindow(childWin) == topWin) {
+    try {
+      return /** @type {?HTMLIFrameElement} */ (childWin.frameElement);
+    } catch (e) {
+      // Ignore the error.
+    }
+  }
+  return null;
+}
+
 /**
  * @param {!Node|!./service/ampdoc-impl.AmpDoc} nodeOrDoc
  * @return {!./service/ampdoc-impl.AmpDoc}
diff --git a/src/service/ampdoc-impl.js b/src/service/ampdoc-impl.js
index ada70b1a81db..a96a2ab33da6 100644
--- a/src/service/ampdoc-impl.js
+++ b/src/service/ampdoc-impl.js
@@ -16,7 +16,10 @@
 
 import {closestNode} from '../dom';
 import {dev} from '../log';
-import {getService} from '../service';
+import {
+  getParentWindowFrameElement,
+  getService,
+} from '../service';
 import {isShadowRoot} from '../types';
 import {isDocumentReady, whenDocumentReady} from '../document-ready';
 import {waitForBodyPromise} from '../dom';
@@ -120,6 +123,14 @@ export class AmpDocService {
         }
       }
 
+      // Traverse the boundary of a friendly iframe.
+      const frameElement = getParentWindowFrameElement(n, this.win);
+      if (frameElement) {
+        n = frameElement;
+        continue;
+      }
+
+      // Shadow doc.
       // TODO(dvoytenko): Replace with `getRootNode()` API when it's available.
       const shadowRoot = closestNode(n, n => isShadowRoot(n));
       if (!shadowRoot) {
diff --git a/src/service/extensions-impl.js b/src/service/extensions-impl.js
index da0c25722fcd..b88b938d26ce 100644
--- a/src/service/extensions-impl.js
+++ b/src/service/extensions-impl.js
@@ -14,24 +14,43 @@
  * limitations under the License.
  */
 
-import {urls} from '../config';
+import {
+  copyElementToChildWindow,
+  stubElementIfNotKnown,
+} from '../custom-element';
+import {cssText} from '../../build/css';
 import {dev, rethrowAsync} from '../log';
 import {getMode} from '../mode';
-import {fromClass} from '../service';
-import {stubElementIfNotKnown} from '../custom-element';
+import {fromClass, setParentWindow} from '../service';
+import {installImg} from '../../builtins/amp-img';
+import {installPixel} from '../../builtins/amp-pixel';
+import {installStyles} from '../style-installer';
+import {installVideo} from '../../builtins/amp-video';
+import {urls} from '../config';
 
 
 const TAG = 'extensions';
 const UNKNOWN_EXTENSION = '_UNKNOWN_';
 
 
+/**
+ * The structure that contains the declaration of a custom element.
+ *
+ * @typedef {{
+ *   implementationClass:
+ *       function(new:../base-element.BaseElement, !Element),
+ *   css: (?string|undefined),
+ * }}
+ */
+let ExtensionElementDef;
+
+
 /**
  * The structure that contains the resources declared by an extension.
  * Currently only limitted to elements.
  *
  * @typedef {{
- *   elements: !Object<string, !{implementationClass:
- *       function(new:../base-element.BaseElement, !Element)}>,
+ *   elements: !Object<string, !ExtensionElementDef>,
  * }}
  */
 let ExtensionDef;
@@ -102,10 +121,12 @@ export function installExtensionsInShadowDoc(extensions, ampdoc, extensionIds) {
  * @param {string} name
  * @param {function(new:../base-element.BaseElement, !Element)}
  *     implementationClass
+ * @param {?string|undefined} css
  * @restricted
  */
-export function addElementToExtension(extensions, name, implementationClass) {
-  extensions.addElement_(name, implementationClass);
+export function addElementToExtension(
+    extensions, name, implementationClass, css) {
+  extensions.addElement_(name, implementationClass, css);
 }
 
 
@@ -239,12 +260,13 @@ export class Extensions {
    * Registers the element implementation with the current extension.
    * @param {string} name
    * @param {!Function} implementationClass
+   * @param {?string|undefined} css
    * @private
    * @restricted
    */
-  addElement_(name, implementationClass) {
+  addElement_(name, implementationClass, css) {
     const holder = this.getCurrentExtensionHolder_(name);
-    holder.extension.elements[name] = {implementationClass};
+    holder.extension.elements[name] = {implementationClass, css};
   }
 
   /**
@@ -329,6 +351,48 @@ export class Extensions {
     return Promise.all(promises);
   }
 
+  /**
+   * Install extensions in the child window (friendly iframe).
+   * @param {!Window} childWin
+   * @param {!Array<string>} extensionIds
+   * @return {!Promise}
+   * @restricted
+   */
+  installExtensionsInChildWindow(childWin, extensionIds) {
+    const topWin = this.win;
+    const parentWin = childWin.frameElement.ownerDocument.defaultView;
+    setParentWindow(childWin, parentWin);
+
+    // Install necessary polyfills.
+    installPolyfillsInChildWindow(childWin);
+
+    // Install runtime styles.
+    installStyles(childWin.document, cssText, () => {},
+        /* opt_isRuntimeCss */ true, /* opt_ext */ 'amp-runtime');
+
+    // Install built-ins.
+    copyBuiltinElementsToChildWindow(childWin);
+
+    const promises = [];
+    extensionIds.forEach(extensionId => {
+      // This will extend automatic upgrade of custom elements from top
+      // window to the child window.
+      stubElementIfNotKnown(topWin, extensionId);
+      copyElementToChildWindow(childWin, extensionId);
+
+      // Install CSS.
+      const promise = this.loadExtension(extensionId).then(extension => {
+        const elementDef = extension.elements[extensionId];
+        if (elementDef && elementDef.css) {
+          installStyles(childWin.document, elementDef.css, () => {},
+              /* isRuntime */ false, extensionId);
+        }
+      });
+      promises.push(promise);
+    });
+    return Promise.all(promises);
+  }
+
   /**
    * Creates or returns an existing extension holder.
    * @param {string} extensionId
@@ -521,3 +585,34 @@ function shouldUseCompiledJs() {
   return getMode().test && self.ampTestRuntimeConfig &&
       self.ampTestRuntimeConfig.useCompiledJs;
 }
+
+
+/**
+ * Install builtins.
+ * @param {!Window} win
+ * @restricted
+ */
+export function installBuiltinElements(win) {
+  installImg(win);
+  installPixel(win);
+  installVideo(win);
+}
+
+/**
+ * Copy builtins to a child window.
+ * @param {!Window} childWin
+ */
+function copyBuiltinElementsToChildWindow(childWin) {
+  copyElementToChildWindow(childWin, 'amp-img');
+  copyElementToChildWindow(childWin, 'amp-pixel');
+  copyElementToChildWindow(childWin, 'amp-video');
+}
+
+/**
+ * Install polyfills in the child window (friendly iframe).
+ * @param {!Window} unusedChildWin
+ */
+function installPolyfillsInChildWindow(unusedChildWin) {
+  // TODO(dvoytenko): polyfill APIs in the childWin as needed. At the very
+  // least, it will be a `registerElement` API.
+}
diff --git a/src/service/resource.js b/src/service/resource.js
index 5a6d16885226..7900cbe3d285 100644
--- a/src/service/resource.js
+++ b/src/service/resource.js
@@ -115,6 +115,9 @@ export class Resource {
     /** @export @const {string} */
     this.debugid = element.tagName.toLowerCase() + '#' + id;
 
+    /** @const {!Window} */
+    this.hostWin = element.ownerDocument.defaultView;
+
     /** @private {!./resources-impl.Resources} */
     this.resources_ = resources;
 
diff --git a/src/service/resources-impl.js b/src/service/resources-impl.js
index 5e1cabba22f2..db19bad9972c 100644
--- a/src/service/resources-impl.js
+++ b/src/service/resources-impl.js
@@ -414,6 +414,14 @@ export class Resources {
     if (!resource) {
       return;
     }
+    this.removeResource_(resource);
+  }
+
+  /**
+   * @param {!Resource} resource
+   * @private
+   */
+  removeResource_(resource) {
     const index = this.resources_.indexOf(resource);
     if (index != -1) {
       this.resources_.splice(index, 1);
@@ -423,6 +431,15 @@ export class Resources {
     dev().fine(TAG_, 'element removed:', resource.debugid);
   }
 
+  /**
+   * Removes all resources belonging to the specified child window.
+   * @param {!Window} childWin
+   */
+  removeForChildWindow(childWin) {
+    const toRemove = this.resources_.filter(r => r.hostWin == childWin);
+    toRemove.forEach(r => this.removeResource_(r));
+  }
+
   /**
    * Signals that an element has been upgraded to the DOM. Resources manager
    * will perform build and enable layout/viewport signals for this element.
diff --git a/src/service/viewport-impl.js b/src/service/viewport-impl.js
index 993cf4bcb1db..7c0855d7373b 100644
--- a/src/service/viewport-impl.js
+++ b/src/service/viewport-impl.js
@@ -19,7 +19,10 @@ import {FixedLayer} from './fixed-layer';
 import {Observable} from '../observable';
 import {checkAndFix as checkAndFixIosScrollfreezeBug,} from
     './ios-scrollfreeze-bug';
-import {getService} from '../service';
+import {
+  getParentWindowFrameElement,
+  getService,
+} from '../service';
 import {layoutRectLtwh} from '../layout-rect';
 import {dev} from '../log';
 import {numeric} from '../transition';
@@ -29,8 +32,8 @@ import {px, setStyle, setStyles} from '../style';
 import {timerFor} from '../timer';
 import {installVsyncService} from './vsync-impl';
 import {installViewerService} from './viewer-impl';
-import {waitForBody} from '../dom';
 import {isExperimentOn} from '../experiments';
+import {waitForBody} from '../dom';
 
 
 const TAG_ = 'Viewport';
@@ -286,8 +289,22 @@ export class Viewport {
    * @return {!../layout-rect.LayoutRectDef}}
    */
   getLayoutRect(el) {
-    return this.binding_.getLayoutRect(el,
-        this.getScrollLeft(), this.getScrollTop());
+    const scrollLeft = this.getScrollLeft();
+    const scrollTop = this.getScrollTop();
+
+    // Go up the window hierarchy through friendly iframes.
+    const frameElement = getParentWindowFrameElement(el, this.win_);
+    if (frameElement) {
+      const b = this.binding_.getLayoutRect(el, 0, 0);
+      const c = this.binding_.getLayoutRect(
+          frameElement, scrollLeft, scrollTop);
+      return layoutRectLtwh(Math.round(b.left + c.left),
+          Math.round(b.top + c.top),
+          Math.round(b.width),
+          Math.round(b.height));
+    }
+
+    return this.binding_.getLayoutRect(el, scrollLeft, scrollTop);
   }
 
   /**
diff --git a/test/functional/test-custom-element.js b/test/functional/test-custom-element.js
index fc05a4af4a73..2be4e498d88d 100644
--- a/test/functional/test-custom-element.js
+++ b/test/functional/test-custom-element.js
@@ -24,6 +24,7 @@ import * as sinon from 'sinon';
 
 import {getService, resetServiceForTesting} from '../../src/service';
 import {
+  copyElementToChildWindow,
   createAmpElementProto,
   getElementClassForTesting,
   markElementScheduledForTesting,
@@ -1772,6 +1773,30 @@ describe('CustomElement Overflow Element', () => {
       expect(doc.registerElement.callCount).to.equal(1);
     });
 
+    it('should copy or stub element definitions in a child window', () => {
+      stubElementIfNotKnown(win, 'amp-test1');
+
+      const registerElement = sandbox.spy();
+      const childWin = {Object, HTMLElement, document: {registerElement}};
+
+      copyElementToChildWindow(childWin, 'amp-test1');
+      expect(childWin.ampExtendedElements['amp-test1']).to.be.true;
+      const firstCallCount = registerElement.callCount;
+      expect(firstCallCount > 1).to.be.true;
+      expect(registerElement.getCall(firstCallCount - 1).args[0])
+          .to.equal('amp-test1');
+
+      // Also stubs legacy elements.
+      expect(childWin.ampExtendedElements['amp-ad']).to.be.true;
+      expect(childWin.ampExtendedElements['amp-embed']).to.be.true;
+
+      copyElementToChildWindow(childWin, 'amp-test2');
+      expect(childWin.ampExtendedElements['amp-test1']).to.be.true;
+      expect(registerElement.callCount > firstCallCount).to.be.true;
+      expect(registerElement.getCall(registerElement.callCount - 1).args[0])
+          .to.equal('amp-test2');
+    });
+
     it('getElementService should wait for body when not available', () => {
       doc.body = null;  // Body not available
       let resolvedService;
diff --git a/test/functional/test-dom.js b/test/functional/test-dom.js
index 504cb1c405f5..5c3a3ba9e3a4 100644
--- a/test/functional/test-dom.js
+++ b/test/functional/test-dom.js
@@ -713,4 +713,19 @@ describe('DOM', () => {
       expect(dom.escapeCssSelectorIdent({}, 'a b')).to.equal('a\\ b');
     });
   });
+
+  describe('escapeHtml', () => {
+    it('should tolerate empty string', () => {
+      expect(dom.escapeHtml('')).to.equal('');
+    });
+
+    it('should ignore non-escapes', () => {
+      expect(dom.escapeHtml('abc')).to.equal('abc');
+    });
+
+    it('should subsctitute escapes', () => {
+      expect(dom.escapeHtml('a<b>&c"d\'e\`f')).to.equal(
+          'a&lt;b&gt;&amp;c&quot;d&#x27;e&#x60;f');
+    });
+  });
 });
diff --git a/test/functional/test-extensions.js b/test/functional/test-extensions.js
index 9eec50cfa672..7e1ea3aecb31 100644
--- a/test/functional/test-extensions.js
+++ b/test/functional/test-extensions.js
@@ -34,6 +34,7 @@ import {
   initLogConstructor,
   resetLogConstructorForTesting,
 } from '../../src/log';
+import {loadPromise} from '../../src/event-helper';
 import * as cust from '../../src/custom-element';
 import * as sinon from 'sinon';
 
@@ -449,6 +450,86 @@ describe('Extensions', () => {
     });
   });
 
+  describe('installExtensionsInChildWindow', () => {
+
+    let parentWin;
+    let extensions;
+    let extensionsMock;
+    let iframe;
+    let iframeWin;
+
+    beforeEach(() => {
+      return createIframePromise().then(f => {
+        parentWin = f.win;
+        extensions = installExtensionsService(parentWin);
+        extensionsMock = sandbox.mock(extensions);
+
+        iframe = parentWin.document.createElement('iframe');
+        const promise = loadPromise(iframe);
+        const html = '<div id="one"></div>';
+        if ('srcdoc' in iframe) {
+          iframe.srcdoc = html;
+        } else {
+          iframe.src = 'about:blank';
+          const childDoc = iframe.contentWindow.document;
+          childDoc.open();
+          childDoc.write(html);
+          childDoc.close();
+        }
+        parentWin.document.body.appendChild(iframe);
+        return promise.then(() => {
+          iframeWin = iframe.contentWindow;
+        });
+      });
+    });
+
+    afterEach(() => {
+      if (iframe.parentElement) {
+        iframe.parentElement.removeChild(iframe);
+      }
+      extensionsMock.verify();
+    });
+
+    it('should set window hierarchy', () => {
+      extensions.installExtensionsInChildWindow(iframeWin, []);
+      expect(iframeWin.__AMP_PARENT).to.equal(parentWin);
+      expect(iframeWin.__AMP_TOP).to.equal(parentWin);
+    });
+
+    it('should install runtime styles', () => {
+      extensions.installExtensionsInChildWindow(iframeWin, []);
+      expect(iframeWin.document.querySelector('style[amp-runtime]'))
+          .to.exist;
+    });
+
+    it('should install built-ins', () => {
+      extensions.installExtensionsInChildWindow(iframeWin, []);
+      expect(iframeWin.ampExtendedElements).to.exist;
+      expect(iframeWin.ampExtendedElements['amp-img']).to.be.true;
+      expect(iframeWin.ampExtendedElements['amp-video']).to.be.true;
+      expect(iframeWin.ampExtendedElements['amp-pixel']).to.be.true;
+      expect(iframeWin.ampExtendedElements['amp-ad']).to.be.true;
+      expect(iframeWin.ampExtendedElements['amp-embed']).to.be.true;
+    });
+
+    it('should install extensions', () => {
+      extensionsMock.expects('loadExtension')
+          .withExactArgs('amp-test')
+          .returns(Promise.resolve({
+            elements: {'amp-test': {css: 'a{}'}},
+          }))
+          .once();
+      const promise = extensions.installExtensionsInChildWindow(
+          iframeWin, ['amp-test']);
+      return promise.then(() => {
+        expect(parentWin.ampExtendedElements['amp-test']).to.be.true;
+        expect(iframeWin.ampExtendedElements['amp-test']).to.be.true;
+        expect(iframeWin.document
+            .querySelector('style[amp-extension=amp-test]')).to.exist;
+      });
+    });
+  });
+
   describe('get correct script source', () => {
 
     beforeEach(() => {
diff --git a/test/functional/test-friendly-iframe-embed.js b/test/functional/test-friendly-iframe-embed.js
new file mode 100644
index 000000000000..8bf77dc6238e
--- /dev/null
+++ b/test/functional/test-friendly-iframe-embed.js
@@ -0,0 +1,244 @@
+/**
+ * Copyright 2016 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 {
+  installFriendlyIframeEmbed,
+  mergeHtmlForTesting,
+  setSrcdocSupportedForTesting,
+} from '../../src/friendly-iframe-embed';
+import {extensionsFor} from '../../src/extensions';
+import {loadPromise} from '../../src/event-helper';
+import {resourcesForDoc} from '../../src/resources';
+import * as sinon from 'sinon';
+
+
+describe('friendly-iframe-embed', () => {
+
+  let sandbox;
+  let iframe;
+  let extensionsMock;
+  let resourcesMock;
+
+  beforeEach(() => {
+    sandbox = sinon.sandbox.create();
+
+    const extensions = extensionsFor(window);
+    const resources = resourcesForDoc(window.document);
+    extensionsMock = sandbox.mock(extensions);
+    resourcesMock = sandbox.mock(resources);
+
+    iframe = document.createElement('iframe');
+  });
+
+  afterEach(() => {
+    if (iframe.parentElement) {
+      iframe.parentElement.removeChild(iframe);
+    }
+    extensionsMock.verify();
+    resourcesMock.verify();
+    setSrcdocSupportedForTesting(undefined);
+    sandbox.restore();
+  });
+
+  it('should follow main install steps', () => {
+
+    // Resources are not involved.
+    extensionsMock.expects('loadExtension').never();
+    resourcesMock.expects('add').never();
+
+    const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
+      url: 'https://acme.org/url1',
+      html: '<a href="/url2"></a>',
+    });
+
+    // Attributes set.
+    expect(iframe.style.visibility).to.equal('hidden');
+    expect(iframe.getAttribute('referrerpolicy')).to.equal('unsafe-url');
+
+    // Iframe has been appended to DOM.
+    expect(iframe.parentElement).to.equal(document.body);
+
+    return embedPromise.then(embed => {
+      expect(embed.win).to.be.ok;
+      expect(embed.win).to.equal(iframe.contentWindow);
+      expect(embed.iframe).to.equal(iframe);
+      expect(embed.spec.url).to.equal('https://acme.org/url1');
+
+      // Iframe is made visible again.
+      expect(iframe.style.visibility).to.equal('');
+
+      // BASE element has been inserted.
+      expect(embed.win.document.querySelector('base').href)
+          .to.equal('https://acme.org/url1');
+      expect(embed.win.document.querySelector('a').href)
+          .to.equal('https://acme.org/url2');
+
+      return loadPromise(iframe);
+    }).then(() => {
+      // Iframe is marked as complete.
+      expect(iframe.readyState).to.equal('complete');
+    });
+  });
+
+  it('should write doc if srcdoc is not available', () => {
+    setSrcdocSupportedForTesting(false);
+
+    const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
+      url: 'https://acme.org/url1',
+      html: '<a href="/url2"></a>',
+    });
+
+    return embedPromise.then(embed => {
+      expect(embed.iframe.src).to.equal('about:blank');
+      expect(!!embed.iframe.srcdoc).to.be.false;
+
+      expect(embed.win).to.be.ok;
+      expect(embed.win).to.equal(iframe.contentWindow);
+      expect(embed.iframe).to.equal(iframe);
+
+      expect(embed.win.document.querySelector('base')).to.exist;
+      expect(embed.win.document.querySelector('a')).to.exist;
+    });
+  });
+
+  it('should install extensions', () => {
+
+    // Extensions preloading have been requested.
+    extensionsMock.expects('loadExtension')
+        .withExactArgs('amp-test')
+        .returns(Promise.resolve())
+        .once();
+
+    // Extensions are installed.
+    let installExtWin;
+    extensionsMock.expects('installExtensionsInChildWindow')
+        .withExactArgs(sinon.match(arg => {
+          installExtWin = arg;
+          return true;
+        }), ['amp-test'])
+        .once();
+
+    const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
+      url: 'https://acme.org/url1',
+      html: '<amp-test></amp-test>',
+      extensionIds: ['amp-test'],
+    });
+    return embedPromise.then(embed => {
+      expect(installExtWin).to.equal(embed.win);
+    });
+  });
+
+  it('should uninstall all resources', () => {
+    extensionsMock.expects('loadExtension').atLeast(1);
+    extensionsMock.expects('installExtensionsInChildWindow').atLeast(1);
+    const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
+      url: 'https://acme.org/url1',
+      html: '<amp-test></amp-test>',
+      extensionIds: ['amp-test'],
+    });
+    return embedPromise.then(embed => {
+      resourcesMock.expects('removeForChildWindow')
+          .withExactArgs(embed.win)
+          .once();
+      embed.destroy();
+    });
+  });
+
+  describe('mergeHtml', () => {
+    let spec;
+
+    beforeEach(() => {
+      spec = {
+        url: 'https://acme.org/embed1',
+        html: '<a></a>',
+      };
+    });
+
+    it('should install base', () => {
+      const html = mergeHtmlForTesting(spec);
+      expect(html.indexOf('<base href="https://acme.org/embed1">')).to.equal(0);
+    });
+
+    it('should install fonts', () => {
+      const FONT1 = 'https://acme.org/font1';
+      const FONT2 = 'https://acme.org/font2';
+      spec.fonts = [FONT1, FONT2];
+      const html = mergeHtmlForTesting(spec);
+      const templ = '<link href="FONT" rel="stylesheet" type="text/css">';
+      expect(html.indexOf(templ.replace('FONT', FONT1))).to.be.greaterThan(0);
+      expect(html.indexOf(templ.replace('FONT', FONT2))).to.be.greaterThan(0);
+    });
+
+    it('should escape urls', () => {
+      spec.url = 'https://acme.org/embed<1';
+      spec.fonts = ['https://acme.org/font<1'];
+      const html = mergeHtmlForTesting(spec);
+      expect(html.indexOf('<base href="https://acme.org/embed&lt;1">'))
+          .to.greaterThan(-1);
+      expect(html.indexOf('<link href="https://acme.org/font&lt;1"'))
+          .to.greaterThan(-1);
+    });
+
+    it('should pre-pend to html', () => {
+      const html = mergeHtmlForTesting(spec);
+      expect(html).to.equal('<base href="https://acme.org/embed1"><a></a>');
+    });
+
+    it('should insert into head', () => {
+      spec.html = '<html><head>head</head><body>body';
+      const html = mergeHtmlForTesting(spec);
+      expect(html).to.equal(
+          '<html><head>'
+          + '<base href="https://acme.org/embed1">'
+          + 'head</head><body>body');
+    });
+
+    it('should insert into head w/o html', () => {
+      spec.html = '<head>head</head><body>body';
+      const html = mergeHtmlForTesting(spec);
+      expect(html).to.equal(
+          '<head>'
+          + '<base href="https://acme.org/embed1">'
+          + 'head</head><body>body');
+    });
+
+    it('should insert before body', () => {
+      spec.html = '<html><body>body';
+      const html = mergeHtmlForTesting(spec);
+      expect(html).to.equal(
+          '<html>'
+          + '<base href="https://acme.org/embed1">'
+          + '<body>body');
+    });
+
+    it('should insert before body w/o html', () => {
+      spec.html = '<body>body';
+      const html = mergeHtmlForTesting(spec);
+      expect(html).to.equal(
+          '<base href="https://acme.org/embed1">'
+          + '<body>body');
+    });
+
+    it('should insert after html', () => {
+      spec.html = '<html>content';
+      const html = mergeHtmlForTesting(spec);
+      expect(html).to.equal(
+          '<html>'
+          + '<base href="https://acme.org/embed1">'
+          + 'content');
+    });
+  });
+});
diff --git a/test/functional/test-resource.js b/test/functional/test-resource.js
index 042450fa79c5..d863eaa6d12f 100644
--- a/test/functional/test-resource.js
+++ b/test/functional/test-resource.js
@@ -34,6 +34,7 @@ describe('Resource', () => {
     sandbox = sinon.sandbox.create();
 
     element = {
+      ownerDocument: {defaultView: window},
       tagName: 'AMP-AD',
       style: {},
       isBuilt: () => false,
@@ -717,6 +718,7 @@ describe('Resource renderOutsideViewport', () => {
     sandbox = sinon.sandbox.create();
 
     element = {
+      ownerDocument: {defaultView: window},
       tagName: 'AMP-AD',
       isBuilt: () => false,
       isUpgraded: () => false,
diff --git a/test/functional/test-resources.js b/test/functional/test-resources.js
index 5033a2657e66..c59613da3858 100644
--- a/test/functional/test-resources.js
+++ b/test/functional/test-resources.js
@@ -286,6 +286,7 @@ describe('Resources pause/resume/unlayout scheduling', () => {
 
   function createElement() {
     return {
+      ownerDocument: {defaultView: window},
       tagName: 'amp-test',
       isBuilt() {
         return true;
@@ -467,6 +468,7 @@ describe('Resources schedulePreload', () => {
 
   function createElement() {
     return {
+      ownerDocument: {defaultView: window},
       tagName: 'amp-test',
       isBuilt() {
         return true;
@@ -592,6 +594,7 @@ describe('Resources discoverWork', () => {
 
   function createElement(rect) {
     return {
+      ownerDocument: {defaultView: window},
       tagName: 'amp-test',
       isBuilt: () => {
         return true;
@@ -854,6 +857,7 @@ describe('Resources changeSize', () => {
 
   function createElement(rect) {
     return {
+      ownerDocument: {defaultView: window},
       tagName: 'amp-test',
       isBuilt: () => {
         return true;
@@ -1208,6 +1212,7 @@ describe('Resources mutateElement and collapse', () => {
 
   function createElement(rect, isAmp) {
     return {
+      ownerDocument: {defaultView: window},
       tagName: isAmp ? 'amp-test' : 'div',
       classList: {
         contains: className => isAmp && className == '-amp-element',
@@ -1415,6 +1420,7 @@ describe('Resources.add', () => {
 
   function createElement() {
     const element = {
+      ownerDocument: {defaultView: window},
       tagName: 'amp-test',
       isBuilt() {
         return true;
diff --git a/test/functional/test-runtime.js b/test/functional/test-runtime.js
index b25ceb7e8956..17355d3571ca 100644
--- a/test/functional/test-runtime.js
+++ b/test/functional/test-runtime.js
@@ -321,6 +321,7 @@ describe('runtime', () => {
       expect(ext.elements['amp-ext']).exist;
       expect(ext.elements['amp-ext'].implementationClass)
           .to.equal(win.AMP.BaseElement);
+      expect(ext.elements['amp-ext'].css).to.equal('a{}');
 
       expect(installStylesStub.callCount).to.equal(1);
       expect(installStylesStub.calledWithExactly(
@@ -464,6 +465,7 @@ describe('runtime', () => {
       expect(ext.elements['amp-ext']).exist;
       expect(ext.elements['amp-ext'].implementationClass)
           .to.equal(win.AMP.BaseElement);
+      expect(ext.elements['amp-ext'].css).to.equal('a{}');
 
       // Register is called immediately as well.
       expect(registerStub.calledWithExactly(win, 'amp-ext', AMP.BaseElement))
diff --git a/test/functional/test-service.js b/test/functional/test-service.js
index 0731f2c16ff9..a93f8a994124 100644
--- a/test/functional/test-service.js
+++ b/test/functional/test-service.js
@@ -18,12 +18,15 @@ import {
   fromClass,
   getExistingServiceForWindow,
   getExistingServiceForDoc,
+  getParentWindowFrameElement,
   getService,
   getServicePromise,
   getServiceForDoc,
   getServicePromiseForDoc,
   resetServiceForTesting,
+  setParentWindow,
 } from '../../src/service';
+import {loadPromise} from '../../src/event-helper';
 import * as sinon from 'sinon';
 
 
@@ -130,6 +133,22 @@ describe('service', () => {
         });
       });
     });
+
+    it('should resolve service for a child window', () => {
+      const c = getService(window, 'c', factory);
+
+      // A child.
+      const child = {};
+      setParentWindow(child, window);
+      expect(getService(child, 'c', factory)).to.equal(c);
+      expect(getExistingServiceForWindow(child, 'c')).to.equal(c);
+
+      // A grandchild.
+      const grandchild = {};
+      setParentWindow(grandchild, child);
+      expect(getService(grandchild, 'c', factory)).to.equal(c);
+      expect(getExistingServiceForWindow(grandchild, 'c')).to.equal(c);
+    });
   });
 
   describe('ampdoc singletons', () => {
@@ -250,5 +269,80 @@ describe('service', () => {
         });
       });
     });
+
+    it('should resolve service for a child window', () => {
+      ampdocMock.expects('isSingleDoc').returns(true).atLeast(1);
+      const c = getServiceForDoc(node, 'c', factory);
+
+      // A child.
+      const childWin = {};
+      const childWinNode =
+          {nodeType: 1, ownerDocument: {defaultView: childWin}};
+      setParentWindow(childWin, windowApi);
+      expect(getServiceForDoc(childWinNode, 'c', factory)).to.equal(c);
+      expect(getExistingServiceForDoc(childWinNode, 'c')).to.equal(c);
+
+      // A grandchild.
+      const grandchildWin = {};
+      const grandChildWinNode =
+          {nodeType: 1, ownerDocument: {defaultView: grandchildWin}};
+      setParentWindow(grandchildWin, childWin);
+      expect(getServiceForDoc(grandChildWinNode, 'c', factory)).to.equal(c);
+      expect(getExistingServiceForDoc(grandChildWinNode, 'c')).to.equal(c);
+    });
+  });
+
+
+  describe('getParentWindowFrameElement', () => {
+    let iframe;
+
+    beforeEach(() => {
+      iframe = document.createElement('iframe');
+      const promise = loadPromise(iframe);
+      const html = '<div id="one"></div>';
+      if ('srcdoc' in iframe) {
+        iframe.srcdoc = html;
+        document.body.appendChild(iframe);
+      } else {
+        iframe.src = 'about:blank';
+        document.body.appendChild(iframe);
+        const childDoc = iframe.contentWindow.document;
+        childDoc.open();
+        childDoc.write(html);
+        childDoc.close();
+      }
+      return promise.then(() => {
+        setParentWindow(iframe.contentWindow, window);
+      });
+    });
+
+    afterEach(() => {
+      if (iframe.parentElement) {
+        iframe.parentElement.removeChild(iframe);
+      }
+    });
+
+    it('should return frameElement', () => {
+      const div = iframe.contentWindow.document.getElementById('one');
+      expect(getParentWindowFrameElement(div, window)).to.equal(iframe);
+    });
+
+    it('should return null when not parented', () => {
+      iframe.contentWindow.__AMP_TOP = null;
+      const div = iframe.contentWindow.document.getElementById('one');
+      expect(getParentWindowFrameElement(div, window)).to.equal(null);
+    });
+
+    it('should survive exceptions', () => {
+      const childWin = {};
+      Object.defineProperties(childWin, {
+        frameElement: {
+          get: () => {throw new Error('intentional');},
+        },
+      });
+      setParentWindow(childWin, window);
+      const el = {ownerDocument: {defaultView: childWin}};
+      expect(getParentWindowFrameElement(el, window)).to.equal(null);
+    });
   });
 });
diff --git a/test/functional/test-viewport.js b/test/functional/test-viewport.js
index 8e6e147312cb..69af1e6c55d0 100644
--- a/test/functional/test-viewport.js
+++ b/test/functional/test-viewport.js
@@ -26,6 +26,8 @@ import {
 import {getStyle} from '../../src/style';
 import {installPlatformService} from '../../src/service/platform-impl';
 import {installViewerService} from '../../src/service/viewer-impl';
+import {loadPromise} from '../../src/event-helper';
+import {setParentWindow} from '../../src/service';
 import {toggleExperiment} from '../../src/experiments';
 import {vsyncFor} from '../../src/vsync';
 import * as sinon from 'sinon';
@@ -469,6 +471,79 @@ describe('Viewport', () => {
     expect(windowApi.document.documentElement.style['touch-action'])
         .to.equal('pan-y');
   });
+
+  describe('for child window', () => {
+    let viewport;
+    let bindingMock;
+    let iframe;
+    let iframeWin;
+
+    beforeEach(() => {
+      viewport = new Viewport(window, binding, viewer);
+      bindingMock = sandbox.mock(binding);
+      iframe = document.createElement('iframe');
+      const html = '<div id="one"></div>';
+      let promise;
+      if ('srcdoc' in iframe) {
+        iframe.srcdoc = html;
+        promise = loadPromise(iframe);
+        document.body.appendChild(iframe);
+      } else {
+        iframe.src = 'about:blank';
+        document.body.appendChild(iframe);
+        const childDoc = iframe.contentWindow.document;
+        childDoc.open();
+        childDoc.write(html);
+        childDoc.close();
+        promise = Promise.resolve();
+      }
+      return promise.then(() => {
+        iframeWin = iframe.contentWindow;
+        setParentWindow(iframeWin, window);
+      });
+    });
+
+    afterEach(() => {
+      if (iframe.parentElement) {
+        iframe.parentElement.removeChild(iframe);
+      }
+      bindingMock.verify();
+    });
+
+    it('should calculate child window element rect via parent', () => {
+      viewport.scrollLeft_ = 0;
+      viewport.scrollTop_ = 0;
+      const element = iframeWin.document.createElement('div');
+      iframeWin.document.body.appendChild(element);
+      bindingMock.expects('getLayoutRect')
+          .withExactArgs(element, 0, 0)
+          .returns({left: 20, top: 10}).once();
+      bindingMock.expects('getLayoutRect')
+          .withExactArgs(iframe, 0, 0)
+          .returns({left: 211, top: 111}).once();
+
+      const rect = viewport.getLayoutRect(element);
+      expect(rect.left).to.equal(211 + 20);
+      expect(rect.top).to.equal(111 + 10);
+    });
+
+    it('should offset child window element with parent scroll pos', () => {
+      viewport.scrollLeft_ = 200;
+      viewport.scrollTop_ = 100;
+      const element = iframeWin.document.createElement('div');
+      iframeWin.document.body.appendChild(element);
+      bindingMock.expects('getLayoutRect')
+          .withExactArgs(element, 0, 0)
+          .returns({left: 20, top: 10}).once();
+      bindingMock.expects('getLayoutRect')
+          .withExactArgs(iframe, 200, 100)
+          .returns({left: 211, top: 111}).once();
+
+      const rect = viewport.getLayoutRect(element);
+      expect(rect.left).to.equal(211 + 20);
+      expect(rect.top).to.equal(111 + 10);
+    });
+  });
 });