amp-layout: move it to builtin + bug fix + example file + visual tests (

ampproject#12143)
gzgogo · Jan 26, 2018 · 7a254b3 · 7a254b3
1 parent 16e4cd8
commit 7a254b3
Show file tree

Hide file tree

Showing 9 changed files with 292 additions and 199 deletions.
diff --git a/extensions/amp-layout/0.1/amp-layout.js → builtins/amp-layout.js b/extensions/amp-layout/0.1/amp-layout.js → 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 → builtins/amp-layout.md b/extensions/amp-layout/amp-layout.md → 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
@@ -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
@@ -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>