From 7a254b3e586b22f187d9b730ad289ee00eebf3fe Mon Sep 17 00:00:00 2001
From: Ali Ghassemi <aghassemi@google.com>
Date: Tue, 21 Nov 2017 14:19:34 -0800
Subject: [PATCH] amp-layout: move it to builtin + bug fix + example file +
 visual tests (#12143)

---
 .../amp-layout/0.1 => builtins}/amp-layout.js |  25 +-
 .../amp-layout => builtins}/amp-layout.md     |  18 +-
 examples/amp-layout.amp.html                  |  38 +++
 .../amp-layout/amp-layout.amp.html            |  66 ++++
 extensions/amp-a4a/amp-a4a-format.md          | 285 +++++++++---------
 .../validator-amp-layout.protoascii           |  41 ---
 src/service/extensions-impl.js                |   2 +
 validator/engine/validator_test.js            |   1 +
 validator/validator-main.protoascii           |  15 +
 9 files changed, 292 insertions(+), 199 deletions(-)
 rename {extensions/amp-layout/0.1 => builtins}/amp-layout.js (52%)
 rename {extensions/amp-layout => builtins}/amp-layout.md (75%)
 create mode 100644 examples/amp-layout.amp.html
 create mode 100644 examples/visual-tests/amp-layout/amp-layout.amp.html
 delete mode 100644 extensions/amp-layout/validator-amp-layout.protoascii

diff --git a/extensions/amp-layout/0.1/amp-layout.js b/builtins/amp-layout.js
similarity index 52%
rename from extensions/amp-layout/0.1/amp-layout.js
rename to builtins/amp-layout.js
index 453bc5af1f5e..ae0d0fe7ea9e 100644
--- a/extensions/amp-layout/0.1/amp-layout.js
+++ b/builtins/amp-layout.js
@@ -14,14 +14,33 @@
  * limitations under the License.
  */
 
-import {isLayoutSizeDefined} from '../../../src/layout';
+import {BaseElement} from '../src/base-element';
+import {isLayoutSizeDefined} from '../src/layout';
+import {registerElement} from '../src/service/custom-element-registry';
 
-class AmpLayout extends AMP.BaseElement {
+class AmpLayout extends BaseElement {
 
     /** @override */
   isLayoutSupported(layout) {
     return isLayoutSizeDefined(layout);
   }
+
+  /** @override */
+  buildCallback() {
+    const container = this.win.document.createElement('div');
+    this.applyFillContent(container);
+    this.getRealChildNodes().forEach(child => {
+      container.appendChild(child);
+    });
+    this.element.appendChild(container);
+  }
 }
 
-AMP.registerElement('amp-layout', AmpLayout);
+/**
+ * @param {!Window} win Destination window for the new element.
+ */
+export function installLayout(win) {
+  registerElement(win, 'amp-layout', AmpLayout);
+}
+
+
diff --git a/extensions/amp-layout/amp-layout.md b/builtins/amp-layout.md
similarity index 75%
rename from extensions/amp-layout/amp-layout.md
rename to builtins/amp-layout.md
index 1eea000abbb9..ec856d304503 100644
--- a/extensions/amp-layout/amp-layout.md
+++ b/builtins/amp-layout.md
@@ -21,18 +21,10 @@ limitations under the License.
     <td width="40%"><strong>Description</strong></td>
     <td>A generic, multi-purpose container element that brings AMP's powerful <a href="https://www.ampproject.org/docs/guides/responsive/control_layout#the-layout-attribute">layouts </a> to any element.</td>
   </tr>
-  <tr>
-    <td width="40%"><strong>Required Script</strong></td>
-    <td><code>&lt;script async custom-element="amp-layout" src="https://cdn.ampproject.org/v0/amp-layout-0.1.js">&lt;/script></code></td>
-  </tr>
   <tr>
     <td class="col-fourty"><strong><a href="https://www.ampproject.org/docs/guides/responsive/control_layout.html">Supported Layouts</a></strong></td>
     <td>fill, fixed, fixed-height, flex-item, responsive</td>
   </tr>
-  <tr>
-    <td width="40%"><strong>Availability</strong></td>
-    <td><a href="https://www.ampproject.org/docs/reference/experimental.html">Experimental</a></td>
-  </tr> 
 </table>
 
 ## Overview
@@ -45,10 +37,10 @@ This example uses `amp-layout` to create a responsive container around a circle
 
 ```html
 <amp-layout layout="responsive" width="1" height="1">
-  <svg height="100" width="100">
-    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" />
-    Sorry, your browser does not support inline SVG.  
-  </svg> 
+  <svg viewBox="0 0 100 100">
+    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
+    Sorry, your browser does not support inline SVG.
+  </svg>
 </amp-layout>
 ```
 ## Attributes
@@ -57,4 +49,4 @@ This element includes [common attributes](https://www.ampproject.org/docs/refere
 
 ## Validation
 
-See [amp-layout rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-layout/validator-amp-layout.protoascii) in the AMP validator specification.
+See [amp-layout rules](https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii) in the AMP validator specification.
diff --git a/examples/amp-layout.amp.html b/examples/amp-layout.amp.html
new file mode 100644
index 000000000000..bdfd7235293e
--- /dev/null
+++ b/examples/amp-layout.amp.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-layout example</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <style amp-custom>
+    amp-layout {
+      background-color: yellow;
+    }
+  </style>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>amp-layout</h1>
+
+  <h2>responsive - 2x1 ratio</h2>
+  <amp-layout layout="responsive" width="2" height="1">
+    This `amp-layout` acts like a `div` that always keeps a `2x1` aspect ratio.
+  </amp-layout>
+
+  <h2>fixed - 100x100</h2>
+  <amp-layout layout="fixed" width="100" height="100">
+    will act like a 100px by 100px div
+  </amp-layout>
+
+  <h2>responsive - svg - 1x1 ratio </h2>
+  <amp-layout layout="responsive" width="1" height="1">
+    <svg viewBox="0 0 100 100">
+      <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
+      Sorry, your browser does not support inline SVG.
+    </svg>
+  </amp-layout>
+
+</body>
+</html>
diff --git a/examples/visual-tests/amp-layout/amp-layout.amp.html b/examples/visual-tests/amp-layout/amp-layout.amp.html
new file mode 100644
index 000000000000..22d192a0bed3
--- /dev/null
+++ b/examples/visual-tests/amp-layout/amp-layout.amp.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-layout example</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <style amp-custom>
+    amp-layout {
+      background-color: yellow;
+    }
+  </style>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>amp-layout</h1>
+
+  <h2>responsive - 2x1 ratio - Text Node</h2>
+  <amp-layout layout="responsive" width="2" height="1">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt augue ut dolor rutrum, sit amet tristique velit fringilla. Duis pretium ante dui, a congue erat elementum dictum. Suspendisse sit amet dui libero. Sed sodales quam in mauris aliquet laoreet. Ut iaculis leo ipsum, ac commodo tellus tempus lobortis. Nam molestie semper suscipit. Quisque consectetur purus et tortor mollis porttitor. Morbi tempus sit amet mauris eget mattis. Sed dignissim, quam ut mattis ullamcorper, lorem ex venenatis purus, a sollicitudin enim tortor sit amet justo.
+  </amp-layout>
+
+  <h2>responsive - 2x1 ratio - DIV Node</h2>
+  <amp-layout layout="responsive" width="2" height="1">
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt augue ut dolor rutrum, sit amet tristique velit fringilla. Duis pretium ante dui, a congue erat elementum dictum. Suspendisse sit amet dui libero. Sed sodales quam in mauris aliquet laoreet. Ut iaculis leo ipsum, ac commodo tellus tempus lobortis. Nam molestie semper suscipit. Quisque consectetur purus et tortor mollis porttitor. Morbi tempus sit amet mauris eget mattis. Sed dignissim, quam ut mattis ullamcorper, lorem ex venenatis purus, a sollicitudin enim tortor sit amet justo.</div>
+  </amp-layout>
+
+  <h2>responsive - svg - 1x1 ratio </h2>
+  <amp-layout layout="responsive" width="1" height="1">
+    <svg viewBox="0 0 100 100">
+      <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
+      Sorry, your browser does not support inline SVG.
+    </svg>
+  </amp-layout>
+
+  <h2>fixed - 100x100 - Text Node</h2>
+  <amp-layout layout="fixed" width="100" height="100">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt augue ut dolor rutrum, sit amet tristique velit fringilla. Duis pretium ante dui, a congue erat elementum dictum. Suspendisse sit amet dui libero. Sed sodales quam in mauris aliquet laoreet. Ut iaculis leo ipsum, ac commodo tellus tempus lobortis. Nam molestie semper suscipit. Quisque consectetur purus et tortor mollis porttitor. Morbi tempus sit amet mauris eget mattis. Sed dignissim, quam ut mattis ullamcorper, lorem ex venenatis purus, a sollicitudin enim tortor sit amet justo.
+  </amp-layout>
+
+  <h2>fixed - 100x100 - SPAN Node</h2>
+  <amp-layout layout="fixed" width="100" height="100">
+    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt augue ut dolor rutrum, sit amet tristique velit fringilla. Duis pretium ante dui, a congue erat elementum dictum. Suspendisse sit amet dui libero. Sed sodales quam in mauris aliquet laoreet. Ut iaculis leo ipsum, ac commodo tellus tempus lobortis. Nam molestie semper suscipit. Quisque consectetur purus et tortor mollis porttitor. Morbi tempus sit amet mauris eget mattis. Sed dignissim, quam ut mattis ullamcorper, lorem ex venenatis purus, a sollicitudin enim tortor sit amet justo.</span>
+  </amp-layout>
+
+  <h2>fixed height - 100 - Text Node</h2>
+  <amp-layout layout="fixed-height" height="100">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt augue ut dolor rutrum, sit amet tristique velit fringilla. Duis pretium ante dui, a congue erat elementum dictum. Suspendisse sit amet dui libero. Sed sodales quam in mauris aliquet laoreet. Ut iaculis leo ipsum, ac commodo tellus tempus lobortis. Nam molestie semper suscipit. Quisque consectetur purus et tortor mollis porttitor. Morbi tempus sit amet mauris eget mattis. Sed dignissim, quam ut mattis ullamcorper, lorem ex venenatis purus, a sollicitudin enim tortor sit amet justo.
+  </amp-layout>
+
+  <h2>fixed - 100x100 - SPAN Node</h2>
+  <amp-layout layout="fixed-height" height="100">
+    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt augue ut dolor rutrum, sit amet tristique velit fringilla. Duis pretium ante dui, a congue erat elementum dictum. Suspendisse sit amet dui libero. Sed sodales quam in mauris aliquet laoreet. Ut iaculis leo ipsum, ac commodo tellus tempus lobortis. Nam molestie semper suscipit. Quisque consectetur purus et tortor mollis porttitor. Morbi tempus sit amet mauris eget mattis. Sed dignissim, quam ut mattis ullamcorper, lorem ex venenatis purus, a sollicitudin enim tortor sit amet justo.</span>
+  </amp-layout>
+
+  <h2>With Placeholder</h2>
+  <amp-layout layout="fixed" width="100" height="100">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt augue ut dolor rutrum, sit amet tristique velit fringilla. Duis pretium ante dui, a congue erat elementum dictum. Suspendisse sit amet dui libero. Sed sodales quam in mauris aliquet laoreet. Ut iaculis leo ipsum, ac commodo tellus tempus lobortis. Nam molestie semper suscipit. Quisque consectetur purus et tortor mollis porttitor. Morbi tempus sit amet mauris eget mattis. Sed dignissim, quam ut mattis ullamcorper, lorem ex venenatis purus, a sollicitudin enim tortor sit amet justo.
+    <div placeholder>
+      SHOULD NOT SEE THIS
+    </div>
+  </amp-layout>
+
+</body>
+</html>
diff --git a/extensions/amp-a4a/amp-a4a-format.md b/extensions/amp-a4a/amp-a4a-format.md
index 6071edd029f4..6484b41c9b3c 100644
--- a/extensions/amp-a4a/amp-a4a-format.md
+++ b/extensions/amp-a4a/amp-a4a-format.md
@@ -29,7 +29,7 @@ rules.  Similar in spirit to the
 access to a limited set of allowed tags, capabilities, and extensions.
 
 ## AMP Ad Format Rules
- 
+
 - Unless otherwise specified below, the creative must obey all rules
    given by the [AMP format rules](../../spec/amp-html-format.md),
    included here by reference.  For example, the AMP AD
@@ -41,7 +41,7 @@ access to a limited set of allowed tags, capabilities, and extensions.
 - The creative must use `<html ⚡4ads>` or `<html amp4ads>` as its enclosing
    tags.
 
-   _Rationale_: Allows validators to identify a creative document as either a 
+   _Rationale_: Allows validators to identify a creative document as either a
    general AMP doc or a restricted AMP ad doc and to dispatch appropriately.
 
 - The creative must include `<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>`
@@ -49,7 +49,7 @@ access to a limited set of allowed tags, capabilities, and extensions.
 
    _Rationale_: Allows tailored runtime behaviors for AMP ads served in cross-origin iframes.
 
-- Unlike in general AMP, the creative must not include a `<link 
+- Unlike in general AMP, the creative must not include a `<link
 rel="canonical">` tag.
 
    _Rationale_: Ad creatives don't have a "non-AMP canonical version"
@@ -58,12 +58,12 @@ rel="canonical">` tag.
 
 - The creative can include optional meta tags in HTML head as identifiers,
    in the format of `<meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">`.
-   Those meta tags must be placed before the `amp4ads-v0.js` script. The 
+   Those meta tags must be placed before the `amp4ads-v0.js` script. The
    value of `vendor` and `id` are strings containing only [0-9a-zA-Z_-].
-   The value of `type` is either `creative-id` or `impression-id`. 
+   The value of `type` is either `creative-id` or `impression-id`.
 
    _Rationale_: Those custom identifiers can be used to identify the impression
-   or the creative. They can be helpful for reporting and debugging. 
+   or the creative. They can be helpful for reporting and debugging.
 
    _Example_:
 ```html
@@ -71,16 +71,16 @@ rel="canonical">` tag.
 <meta name="amp4ads-id" content="vendor=adsense,type=impression-id,id=xIsjdf921S">
 ```
 
-- Media: Videos must not enable autoplay.  This includes 
+- Media: Videos must not enable autoplay.  This includes
 both the `<amp-video>`
-   tag as well as autoplay on `<amp-anim>`, and 3P video 
+   tag as well as autoplay on `<amp-anim>`, and 3P video
    tags such as `<amp-youtube>`.
 
-   _Rationale_: Autoplay forces video content to be downloaded immediately, 
+   _Rationale_: Autoplay forces video content to be downloaded immediately,
    which slows the page load.
 
 - Media: Audio must not enable autoplay.  This includes both the `<amp-audio>`
-   tag as well as all audio-including video tags, as described in the previous 
+   tag as well as all audio-including video tags, as described in the previous
    point.
 
    _Rationale_: Same as for video.
@@ -89,15 +89,15 @@ both the `<amp-video>`
    selector, via  `"visibilitySpec": { "selector": "amp-ad" }`, as defined in
    [Issue #4018](https://github.com/ampproject/amphtml/issues/4018) and
    [PR #4368](https://github.com/ampproject/amphtml/pull/4368).  In
-   particular, it may not target any selectors for elements within the ad 
+   particular, it may not target any selectors for elements within the ad
    creative.
 
-   _Rationale_: In some cases, AMP ad may choose to render an ad creative in an 
-   iframe.  In those cases, host page analytics can only target the entire 
+   _Rationale_: In some cases, AMP ad may choose to render an ad creative in an
+   iframe.  In those cases, host page analytics can only target the entire
    iframe anyway, and won’t have access to any finer-grained selectors.
 
    _Example_:
-  
+
 ```html
 <amp-analytics id="nestedAnalytics">
   <script type="application/json">
@@ -116,7 +116,7 @@ both the `<amp-video>`
   </script>
 </amp-analytics>
 ```
-  
+
   _This configuration sends a request to URL
   `https://example.com/nestedAmpAnalytics` when 50% of the enclosing ad has been
   continuously visible on the screen for 1 second._
@@ -130,21 +130,21 @@ AMP ad creatives require a different, and considerably simpler, boilerplate styl
 <style amp4ads-boilerplate>body{visibility:hidden}</style>
 ```
 
-_Rationale:_ The `amp-boilerplate` style hides body content until the AMP 
-runtime is ready and can unhide it.  If Javascript is disabled or the AMP 
-runtime fails to load, the default boilerplate ensures that the content is 
-eventually displayed regardless.  In A4A, however, if Javascript is entirely 
+_Rationale:_ The `amp-boilerplate` style hides body content until the AMP
+runtime is ready and can unhide it.  If Javascript is disabled or the AMP
+runtime fails to load, the default boilerplate ensures that the content is
+eventually displayed regardless.  In A4A, however, if Javascript is entirely
 disabled, AMP ads won't run and no ad will ever be shown, so there is no need for
-the `<noscript>` section.  In the absence of the AMP runtime, most of the 
-machinery that AMP ads rely on (e.g., analytics for visibility 
-tracking or `amp-img` for content display) won't be available, so it's better to 
+the `<noscript>` section.  In the absence of the AMP runtime, most of the
+machinery that AMP ads rely on (e.g., analytics for visibility
+tracking or `amp-img` for content display) won't be available, so it's better to
 display no ad than a malfunctioning one.
 
 Finally, the AMP ad boilerplate uses `amp-a4a-boilerplate` rather than
 `amp-boilerplate` so that validators can easily identify it and produce
 more accurate error messages to help developers.
 
-Note that the same rules about mutations to the boilerplate text apply as in 
+Note that the same rules about mutations to the boilerplate text apply as in
 the [general AMP boilerplate](https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md).
 
 ### CSS
@@ -156,27 +156,27 @@ the [general AMP boilerplate](https://github.com/ampproject/amphtml/blob/master/
 
 1. `touch-action` is prohibited.
 
-   _Rationale_: An ad that can manipulate `touch-action` can interfere with 
+   _Rationale_: An ad that can manipulate `touch-action` can interfere with
    the user's ability to scroll the host document.
 
 1. Creative CSS is limited to 20,000 bytes.
 
-   _Rationale_: Large CSS blocks bloat the creative, increase network 
+   _Rationale_: Large CSS blocks bloat the creative, increase network
    latency, and degrade page performance.
 
 1. CSS: transition and animation are subject to additional restrictions.
 
-   _Rationale_: AMP must be able to control all animations belonging to an 
+   _Rationale_: AMP must be able to control all animations belonging to an
    ad, so that it can stop them when the ad is not on screen or system resources are very low.
 
 1. CSS: Vendor-specific prefixes are considered aliases for the same symbol
    without the prefix for the purposes of validation.  This means that if
    a symbol `foo` is prohibited by CSS validation rules, then the symbol
    `-vendor-foo` will also be prohibited.
-   
+
    _Rationale:_ Some vendor-prefixed properties provide equivalent functionality
    to properties that are otherwise prohibited or constrained under these rules.
-   
+
    _Example_: `-webkit-transition` and `-moz-transition` are both considered
    aliases for `transition`.  They will only be allowed in contexts where
    bare `transition` would be allowed (see [Selectors](#selectors) below).
@@ -186,7 +186,7 @@ the [general AMP boilerplate](https://github.com/ampproject/amphtml/blob/master/
 ##### Selectors
 
 The `transition` and `animation` properties are only allowed on selectors that:
-- Contain only `transition`, `animation`, `transform`, `visibility`, or 
+- Contain only `transition`, `animation`, `transform`, `visibility`, or
   `opacity` properties.
 - Start with `.amp-animate` followed by a space.
 
@@ -241,7 +241,7 @@ transition: background-color 2s;
   from {
     transform: rotate(180deg);
   }
-  
+
   to {
     transform: rotate(90deg);
   }
@@ -255,7 +255,7 @@ transition: background-color 2s;
     margin-left:100%;
     width:300%
   }
-  
+
   to {
     margin-left:0%;
     width:100%;
@@ -266,7 +266,7 @@ transition: background-color 2s;
 
 ### AMP Extensions and Builtins
 
-The following are _allowed_ AMP extension modules and AMP builtin tags in an 
+The following are _allowed_ AMP extension modules and AMP builtin tags in an
 A4A creative. Extensions or builtin tags not explicitly allowed are prohibited.
 
 Most of the omissions are either for performance or to make AMP ads
@@ -276,19 +276,19 @@ _Example:_ `<amp-ad>` is omitted from this list.  It is explicitly disallowed
 because allowing an `<amp-ad>` inside an `<amp-ad>` could potentially lead to
 unbounded waterfalls of ad loading, which does not meet AMP ad performance goals.
 
-_Example:_ `<amp-iframe>` is omitted from this list.  It is disallowed 
-because ads could use it to execute arbitrary Javascript and load arbitrary 
-content. Ads wanting to use such capabilities should return `false` from 
+_Example:_ `<amp-iframe>` is omitted from this list.  It is disallowed
+because ads could use it to execute arbitrary Javascript and load arbitrary
+content. Ads wanting to use such capabilities should return `false` from
 their
 [a4aRegistry](https://github.com/ampproject/amphtml/blob/master/ads/_a4a-config.js#L40)
 entry and use the existing '3p iframe' ad rendering mechanism.
 
-_Example:_ `<amp-facebook>`, `<amp-instagram>`, `<amp-twitter>`, and 
-`<amp-youtube>` are all omitted for the same reason as `<amp-iframe>`: They 
+_Example:_ `<amp-facebook>`, `<amp-instagram>`, `<amp-twitter>`, and
+`<amp-youtube>` are all omitted for the same reason as `<amp-iframe>`: They
 all create iframes and can potentially consume unbounded resources in them.
 
-_Example:_ `<amp-ad-network-*-impl>` are omitted from this list.  The 
-`<amp-ad>` tag handles delegation to these implementation tags; creatives 
+_Example:_ `<amp-ad-network-*-impl>` are omitted from this list.  The
+`<amp-ad>` tag handles delegation to these implementation tags; creatives
 should not attempt to include them directly.
 
 _Example:_ `<amp-lightbox>` is not yet included because even some AMP ad creatives
@@ -308,6 +308,7 @@ is demonstrated desire for it.
   <tr><td>amp-font</td></tr>
   <tr><td>amp-form</td></tr>
   <tr><td>amp-img</td></tr>
+  <tr><td>amp-layout</td></tr>
   <tr><td>amp-pixel</td></tr>
   <tr><td>amp-position-observer</td></tr>
   <tr><td>amp-social-share</td></tr>
@@ -317,15 +318,15 @@ is demonstrated desire for it.
 
 ### HTML Tags
 
-The following are _allowed_ tags in an A4A creative.  Tags not explicitly 
-allowed are prohibited.  This list is a subset of the general [AMP tag 
-addendum whitelist](../../spec/amp-tag-addendum.md). Like that list, it is 
+The following are _allowed_ tags in an A4A creative.  Tags not explicitly
+allowed are prohibited.  This list is a subset of the general [AMP tag
+addendum whitelist](../../spec/amp-tag-addendum.md). Like that list, it is
 ordered consistent with HTML5 spec in section 4 [The Elements of HTML](http://www.w3.org/TR/html5/single-page.html#html-elements).
 
 Most of the omissions are either for performance or because the tags are not
 HTML5 standard.  For example, `<noscript>` is omitted because AMP ad depends on
 JavaScript being enabled, so a `<noscript>` block will never execute and,
-therefore, will only bloat the creative and cost bandwidth and latency. 
+therefore, will only bloat the creative and cost bandwidth and latency.
 Similarly, `<acronym>`, `<big>`, et al. are prohibited because they are not
 HTML5 compatible.
 
@@ -343,122 +344,122 @@ HTML5 compatible.
   - __Note:__ Unlike in general AMP, `<link rel="canonical">` tags are
     prohibited.
 
-4.2.5 `<style>`  
+4.2.5 `<style>`
 4.2.6 `<meta>`
-  
+
 #### 4.3 Sections
-4.3.1 `<body>`  
-4.3.2 `<article>`  
-4.3.3 `<section>`  
-4.3.4 `<nav>`  
-4.3.5 `<aside>`  
-4.3.6 `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, and `<h6>`  
-4.3.7 `<header>`  
-4.3.8 `<footer>`  
-4.3.9 `<address>`  
+4.3.1 `<body>`
+4.3.2 `<article>`
+4.3.3 `<section>`
+4.3.4 `<nav>`
+4.3.5 `<aside>`
+4.3.6 `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, and `<h6>`
+4.3.7 `<header>`
+4.3.8 `<footer>`
+4.3.9 `<address>`
 
 #### 4.4 Grouping Content
-4.4.1 `<p>`  
-4.4.2 `<hr>`  
-4.4.3 `<pre>`  
-4.4.4 `<blockquote>`  
-4.4.5 `<ol>`  
-4.4.6 `<ul>`  
-4.4.7 `<li>`  
-4.4.8 `<dl>`  
-4.4.9 `<dt>`  
-4.4.10 `<dd>`  
-4.4.11 `<figure>`  
-4.4.12 `<figcaption>`  
-4.4.13 `<div>`  
-4.4.14 `<main>`  
+4.4.1 `<p>`
+4.4.2 `<hr>`
+4.4.3 `<pre>`
+4.4.4 `<blockquote>`
+4.4.5 `<ol>`
+4.4.6 `<ul>`
+4.4.7 `<li>`
+4.4.8 `<dl>`
+4.4.9 `<dt>`
+4.4.10 `<dd>`
+4.4.11 `<figure>`
+4.4.12 `<figcaption>`
+4.4.13 `<div>`
+4.4.14 `<main>`
 
 #### 4.5 Text-level semantics
-4.5.1 `<a>`  
-4.5.2 `<em>`  
-4.5.3 `<strong>`  
-4.5.4 `<small>`  
-4.5.5 `<s>`  
-4.5.6 `<cite>`  
-4.5.7 `<q>`  
-4.5.8 `<dfn>`  
-4.5.9 `<abbr>`  
-4.5.10 `<data>`  
-4.5.11 `<time>`  
-4.5.12 `<code>`  
-4.5.13 `<var>`  
-4.5.14 `<samp>`  
-4.5.15 `<kbd >`  
-4.5.16 `<sub>` and `<sup>`  
-4.5.17 `<i>`  
-4.5.18 `<b>`  
-4.5.19 `<u>`  
-4.5.20 `<mark>`  
-4.5.21 `<ruby>`  
-4.5.22 `<rb>`  
-4.5.23 `<rt>`  
-4.5.24 `<rtc>`  
-4.5.25 `<rp>`  
-4.5.26 `<bdi>`  
-4.5.27 `<bdo>`  
-4.5.28 `<span>`  
-4.5.29 `<br>`  
-4.5.30 `<wbr>`  
+4.5.1 `<a>`
+4.5.2 `<em>`
+4.5.3 `<strong>`
+4.5.4 `<small>`
+4.5.5 `<s>`
+4.5.6 `<cite>`
+4.5.7 `<q>`
+4.5.8 `<dfn>`
+4.5.9 `<abbr>`
+4.5.10 `<data>`
+4.5.11 `<time>`
+4.5.12 `<code>`
+4.5.13 `<var>`
+4.5.14 `<samp>`
+4.5.15 `<kbd >`
+4.5.16 `<sub>` and `<sup>`
+4.5.17 `<i>`
+4.5.18 `<b>`
+4.5.19 `<u>`
+4.5.20 `<mark>`
+4.5.21 `<ruby>`
+4.5.22 `<rb>`
+4.5.23 `<rt>`
+4.5.24 `<rtc>`
+4.5.25 `<rp>`
+4.5.26 `<bdi>`
+4.5.27 `<bdo>`
+4.5.28 `<span>`
+4.5.29 `<br>`
+4.5.30 `<wbr>`
 #### 4.6 Edits
-4.6.1 `<ins>`  
-4.6.2 `<del>`  
+4.6.1 `<ins>`
+4.6.2 `<del>`
 #### 4.7 Embedded Content
-- Embedded content is supported only via AMP tags, such as `<amp-img>` or 
+- Embedded content is supported only via AMP tags, such as `<amp-img>` or
 `<amp-video>`.
 
 #### 4.7.8
-4.7.8 `<source>`  
+4.7.8 `<source>`
 
 #### 4.7.15 SVG
 SVG tags are not in the HTML5 namespace. They are listed below without section ids.
 
-`<svg>`  
-`<g>`  
-`<path>`  
-`<glyph>`  
-`<glyphref>`  
-`<marker>`  
-`<view>`  
-`<circle>`  
-`<line>`  
-`<polygon>`  
-`<polyline>`  
-`<rect>`  
-`<text>`  
-`<textpath>`  
-`<tref>`  
-`<tspan>`  
-`<clippath>`  
-`<filter>`  
-`<lineargradient>`  
-`<radialgradient>`  
-`<mask>`  
-`<pattern>`  
-`<vkern>`  
-`<hkern>`  
-`<defs>`  
-`<use>`  
-`<symbol>`  
-`<desc>`  
-`<title>`  
+`<svg>`
+`<g>`
+`<path>`
+`<glyph>`
+`<glyphref>`
+`<marker>`
+`<view>`
+`<circle>`
+`<line>`
+`<polygon>`
+`<polyline>`
+`<rect>`
+`<text>`
+`<textpath>`
+`<tref>`
+`<tspan>`
+`<clippath>`
+`<filter>`
+`<lineargradient>`
+`<radialgradient>`
+`<mask>`
+`<pattern>`
+`<vkern>`
+`<hkern>`
+`<defs>`
+`<use>`
+`<symbol>`
+`<desc>`
+`<title>`
 #### 4.9 Tabular data
-4.9.1 `<table>`  
-4.9.2 `<caption>`  
-4.9.3 `<colgroup>`  
-4.9.4 `<col>`  
-4.9.5 `<tbody>`  
-4.9.6 `<thead>`  
-4.9.7 `<tfoot>`  
-4.9.8 `<tr>`  
-4.9.9 `<td>`  
-4.9.10 `<th>`  
+4.9.1 `<table>`
+4.9.2 `<caption>`
+4.9.3 `<colgroup>`
+4.9.4 `<col>`
+4.9.5 `<tbody>`
+4.9.6 `<thead>`
+4.9.7 `<tfoot>`
+4.9.8 `<tr>`
+4.9.9 `<td>`
+4.9.10 `<th>`
 #### 4.10 Forms
-4.10.8 `<button>`  
+4.10.8 `<button>`
 #### 4.11 Scripting
 - Like a general AMP document, the creative's `<head>` tag must contain a
   `<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>` tag.
diff --git a/extensions/amp-layout/validator-amp-layout.protoascii b/extensions/amp-layout/validator-amp-layout.protoascii
deleted file mode 100644
index ff85ec317b2e..000000000000
--- a/extensions/amp-layout/validator-amp-layout.protoascii
+++ /dev/null
@@ -1,41 +0,0 @@
-#
-# Copyright 2017 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.
-#
-
-tags: {  # amp-layout
-  html_format: AMP
-  tag_name: "SCRIPT"
-  extension_spec: {
-    name: "amp-layout"
-    allowed_versions: "0.1"
-    allowed_versions: "latest"
-  }
-  attr_lists: "common-extension-attrs"
-}
-tags: {  # <amp-layout>
-  html_format: AMP
-  tag_name: "AMP-LAYOUT"
-  requires_extension: "amp-layout"
-  attr_lists: "extended-amp-global"
-  spec_url: "https://www.ampproject.org/docs/reference/components/amp-layout"
-  amp_layout: {
-    supported_layouts: FILL
-    supported_layouts: FIXED
-    supported_layouts: FIXED_HEIGHT
-    supported_layouts: FLEX_ITEM
-    supported_layouts: NODISPLAY
-    supported_layouts: RESPONSIVE
-  }
-}
diff --git a/src/service/extensions-impl.js b/src/service/extensions-impl.js
index 1fa693d21a5e..c78defa1c822 100644
--- a/src/service/extensions-impl.js
+++ b/src/service/extensions-impl.js
@@ -39,6 +39,7 @@ import {
 } from '../polyfills/domtokenlist-toggle';
 import {installImg} from '../../builtins/amp-img';
 import {installPixel} from '../../builtins/amp-pixel';
+import {installLayout} from '../../builtins/amp-layout';
 import {installStylesForDoc, installStylesLegacy} from '../style-installer';
 import {calculateExtensionScriptUrl} from './extension-location';
 import {map} from '../utils/object';
@@ -655,6 +656,7 @@ export class Extensions {
 export function installBuiltinElements(win) {
   installImg(win);
   installPixel(win);
+  installLayout(win);
 }
 
 
diff --git a/validator/engine/validator_test.js b/validator/engine/validator_test.js
index 81cb804757e8..0366de66e3c9 100644
--- a/validator/engine/validator_test.js
+++ b/validator/engine/validator_test.js
@@ -575,6 +575,7 @@ describe('ValidatorRulesMakeSense', () => {
         'AMP-FORM': 0,
         'AMP-GWD-ANIMATION': 0,
         'AMP-IMG': 0,
+        'AMP-LAYOUT': 0,
         'AMP-PIXEL': 0,
         'AMP-POSITION-OBSERVER': 0,
         'AMP-SOCIAL-SHARE': 0,
diff --git a/validator/validator-main.protoascii b/validator/validator-main.protoascii
index 02dc15a1f26a..dba93f7baf5b 100644
--- a/validator/validator-main.protoascii
+++ b/validator/validator-main.protoascii
@@ -3523,6 +3523,21 @@ tags: {  # <amp-img>
     supported_layouts: RESPONSIVE
   }
 }
+tags: {  # <amp-layout>
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "AMP-LAYOUT"
+  attr_lists: "extended-amp-global"
+  spec_url: "https://www.ampproject.org/docs/reference/components/amp-layout"
+  amp_layout: {
+    supported_layouts: FILL
+    supported_layouts: FIXED
+    supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
+    supported_layouts: NODISPLAY
+    supported_layouts: RESPONSIVE
+  }
+}
 tags: {  # <amp-pixel>
   html_format: AMP
   html_format: AMP4ADS