## Overview
@@ -45,10 +37,10 @@ This example uses `amp-layout` to create a responsive container around a circle
```html
-
+
```
## 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 @@
+
+
+
+
+ amp-layout example
+
+
+
+
+
+
+
+
amp-layout
+
+
responsive - 2x1 ratio
+
+ This `amp-layout` acts like a `div` that always keeps a `2x1` aspect ratio.
+
+
+
+
+ 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.
+
+
+
responsive - 2x1 ratio - DIV Node
+
+
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.
+
+
+
responsive - svg - 1x1 ratio
+
+
+
+
+
fixed - 100x100 - Text Node
+
+ 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.
+
+
+
fixed - 100x100 - SPAN Node
+
+ 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.
+
+
+
fixed height - 100 - Text Node
+
+ 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.
+
+
+
fixed - 100x100 - SPAN Node
+
+ 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.
+
+
+
With Placeholder
+
+ 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.
+
+ SHOULD NOT SEE THIS
+
+
+
+
+
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 `` or `` 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 ``
@@ -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 `` 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 ``.
- 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.
```
-- Media: Videos must not enable autoplay. This includes
+- Media: Videos must not enable autoplay. This includes
both the ``
- tag as well as autoplay on ``, and 3P video
+ tag as well as autoplay on ``, and 3P video
tags such as ``.
- _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 ``
- 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 ``
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
```
-
+
_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
```
-_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 `