diff --git a/extensions/amp-anim/0.1/validator-amp-anim.protoascii b/extensions/amp-anim/0.1/validator-amp-anim.protoascii
index 21bb245cd664..84b6bf204ff4 100644
--- a/extensions/amp-anim/0.1/validator-amp-anim.protoascii
+++ b/extensions/amp-anim/0.1/validator-amp-anim.protoascii
@@ -62,6 +62,7 @@ tags: {  # <amp-anim>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-brid-player/0.1/validator-amp-brid-player.protoascii b/extensions/amp-brid-player/0.1/validator-amp-brid-player.protoascii
index ea67dab1e9b1..a704eeb337a5 100644
--- a/extensions/amp-brid-player/0.1/validator-amp-brid-player.protoascii
+++ b/extensions/amp-brid-player/0.1/validator-amp-brid-player.protoascii
@@ -79,6 +79,7 @@ tags: {  # <amp-brid-player>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-brightcove/0.1/validator-amp-brightcove.protoascii b/extensions/amp-brightcove/0.1/validator-amp-brightcove.protoascii
index f8c6c5ba5cf7..d7f77c124836 100644
--- a/extensions/amp-brightcove/0.1/validator-amp-brightcove.protoascii
+++ b/extensions/amp-brightcove/0.1/validator-amp-brightcove.protoascii
@@ -66,6 +66,7 @@ tags: {  # <amp-brightcove>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-carousel/0.1/validator-amp-carousel.protoascii b/extensions/amp-carousel/0.1/validator-amp-carousel.protoascii
index 2cc28bf5bfd3..d8776d9c6d15 100644
--- a/extensions/amp-carousel/0.1/validator-amp-carousel.protoascii
+++ b/extensions/amp-carousel/0.1/validator-amp-carousel.protoascii
@@ -64,6 +64,7 @@ tags: {  # <amp-carousel>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-dailymotion/0.1/validator-amp-dailymotion.protoascii b/extensions/amp-dailymotion/0.1/validator-amp-dailymotion.protoascii
index 629116024905..743edd578699 100644
--- a/extensions/amp-dailymotion/0.1/validator-amp-dailymotion.protoascii
+++ b/extensions/amp-dailymotion/0.1/validator-amp-dailymotion.protoascii
@@ -68,6 +68,7 @@ tags: {  # <amp-dailymotion>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: RESPONSIVE
   }
 }
diff --git a/extensions/amp-facebook/0.1/validator-amp-facebook.protoascii b/extensions/amp-facebook/0.1/validator-amp-facebook.protoascii
index fd78c151171d..d315c93b8b29 100644
--- a/extensions/amp-facebook/0.1/validator-amp-facebook.protoascii
+++ b/extensions/amp-facebook/0.1/validator-amp-facebook.protoascii
@@ -59,6 +59,7 @@ tags: {  # <amp-facebook>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-fit-text/0.1/validator-amp-fit-text.protoascii b/extensions/amp-fit-text/0.1/validator-amp-fit-text.protoascii
index b0443055f46b..76fc4fda7fa9 100644
--- a/extensions/amp-fit-text/0.1/validator-amp-fit-text.protoascii
+++ b/extensions/amp-fit-text/0.1/validator-amp-fit-text.protoascii
@@ -62,6 +62,7 @@ tags: {  # <amp-fit-text>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-iframe/0.1/validator-amp-iframe.protoascii b/extensions/amp-iframe/0.1/validator-amp-iframe.protoascii
index a9f540ee422b..2d57acb8d1ca 100644
--- a/extensions/amp-iframe/0.1/validator-amp-iframe.protoascii
+++ b/extensions/amp-iframe/0.1/validator-amp-iframe.protoascii
@@ -73,6 +73,7 @@ tags: {  # <amp-iframe>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-instagram/0.1/validator-amp-instagram.protoascii b/extensions/amp-instagram/0.1/validator-amp-instagram.protoascii
index ca897e353d17..47c7a978cf8b 100644
--- a/extensions/amp-instagram/0.1/validator-amp-instagram.protoascii
+++ b/extensions/amp-instagram/0.1/validator-amp-instagram.protoascii
@@ -76,6 +76,7 @@ tags: {  # <amp-instagram>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-jwplayer/0.1/validator-amp-jwplayer.protoascii b/extensions/amp-jwplayer/0.1/validator-amp-jwplayer.protoascii
index 5ec759e786af..1f975c17b1f3 100644
--- a/extensions/amp-jwplayer/0.1/validator-amp-jwplayer.protoascii
+++ b/extensions/amp-jwplayer/0.1/validator-amp-jwplayer.protoascii
@@ -73,6 +73,7 @@ tags: {  # <amp-jwplayer>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-list/0.1/validator-amp-list.protoascii b/extensions/amp-list/0.1/validator-amp-list.protoascii
index d470d40530a3..8cad714e2816 100644
--- a/extensions/amp-list/0.1/validator-amp-list.protoascii
+++ b/extensions/amp-list/0.1/validator-amp-list.protoascii
@@ -69,6 +69,7 @@ tags: {  # <amp-list>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-pinterest/0.1/validator-amp-pinterest.protoascii b/extensions/amp-pinterest/0.1/validator-amp-pinterest.protoascii
index 84e0a6f0b91d..d19a2f6ffa92 100644
--- a/extensions/amp-pinterest/0.1/validator-amp-pinterest.protoascii
+++ b/extensions/amp-pinterest/0.1/validator-amp-pinterest.protoascii
@@ -62,6 +62,7 @@ tags: {  # <amp-pinterest>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-reach-player/0.1/validator-amp-reach-player.protoascii b/extensions/amp-reach-player/0.1/validator-amp-reach-player.protoascii
index 0c7dccf55212..78b8b61cdb24 100644
--- a/extensions/amp-reach-player/0.1/validator-amp-reach-player.protoascii
+++ b/extensions/amp-reach-player/0.1/validator-amp-reach-player.protoascii
@@ -65,6 +65,7 @@ tags: {  # <amp-reach-player>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: RESPONSIVE
   }
 }
diff --git a/extensions/amp-springboard-player/0.1/validator-amp-springboard-player.protoascii b/extensions/amp-springboard-player/0.1/validator-amp-springboard-player.protoascii
index 9260631ed022..86159f4e9c37 100644
--- a/extensions/amp-springboard-player/0.1/validator-amp-springboard-player.protoascii
+++ b/extensions/amp-springboard-player/0.1/validator-amp-springboard-player.protoascii
@@ -83,6 +83,7 @@ tags: {  # <amp-springboard-player>
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
+    supported_layouts: FLEX_ITEM
     supported_layouts: RESPONSIVE
   }
 }
diff --git a/extensions/amp-twitter/0.1/validator-amp-twitter.protoascii b/extensions/amp-twitter/0.1/validator-amp-twitter.protoascii
index 0603909c00a9..92b9b5369dd8 100644
--- a/extensions/amp-twitter/0.1/validator-amp-twitter.protoascii
+++ b/extensions/amp-twitter/0.1/validator-amp-twitter.protoascii
@@ -67,6 +67,7 @@ tags: {  # <amp-twitter>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-vimeo/0.1/validator-amp-vimeo.protoascii b/extensions/amp-vimeo/0.1/validator-amp-vimeo.protoascii
index 12cb92b0e116..5965dee02a52 100644
--- a/extensions/amp-vimeo/0.1/validator-amp-vimeo.protoascii
+++ b/extensions/amp-vimeo/0.1/validator-amp-vimeo.protoascii
@@ -62,6 +62,7 @@ tags: {  # <amp-vimeo>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: RESPONSIVE
   }
 }
diff --git a/extensions/amp-vine/0.1/validator-amp-vine.protoascii b/extensions/amp-vine/0.1/validator-amp-vine.protoascii
index 7b28e9e0f7dd..398da5851277 100644
--- a/extensions/amp-vine/0.1/validator-amp-vine.protoascii
+++ b/extensions/amp-vine/0.1/validator-amp-vine.protoascii
@@ -59,6 +59,7 @@ tags: {  # <amp-vine>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-youtube/0.1/validator-amp-youtube.protoascii b/extensions/amp-youtube/0.1/validator-amp-youtube.protoascii
index f5d309e1eac2..3c59aeea1119 100644
--- a/extensions/amp-youtube/0.1/validator-amp-youtube.protoascii
+++ b/extensions/amp-youtube/0.1/validator-amp-youtube.protoascii
@@ -78,6 +78,7 @@ tags: {  # <amp-youtube>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/validator/testdata/feature_tests/amp_layouts.html b/validator/testdata/feature_tests/amp_layouts.html
index 78d67026346a..b929249b62d1 100644
--- a/validator/testdata/feature_tests/amp_layouts.html
+++ b/validator/testdata/feature_tests/amp_layouts.html
@@ -71,6 +71,22 @@
   <!-- valid: layout=fill -->
   <amp-img layout="fill" src="itshappening.gif"></amp-img>
 
+  <!-- invalid: layout=fill with height=auto; height=auto is only allowed
+       for flex-item -->
+  <amp-img layout="fill" width="50" height="auto"></amp-img>
+
+  <!-- valid: layout=flex-item -->
+  <amp-img layout="flex-item" src="itshappening.gif"></amp-img>
+  <!-- valid: layout=flex-item with width="auto" -->
+  <amp-img layout="flex-item" width="auto" height="50"
+           src="itshappening.gif"></amp-img>
+  <!-- valid: layout=flex-item with height=auto -->
+  <amp-img layout="flex-item" width="50" height="auto"
+           src="itshappening.gif"></amp-img>
+  <!-- valid: layout=flex-item with width and height -->
+  <amp-img layout="flex-item" width="50" height="50"
+           src="itshappening.gif"></amp-img>
+
   <!-- invalid: layout=container
        Note that this would be valid if amp-img allowed container.
        It doesn't and there is no other element that does.
diff --git a/validator/testdata/feature_tests/amp_layouts.out b/validator/testdata/feature_tests/amp_layouts.out
index c0fd01b6a2ab..1bea57934266 100644
--- a/validator/testdata/feature_tests/amp_layouts.out
+++ b/validator/testdata/feature_tests/amp_layouts.out
@@ -2,10 +2,11 @@ FAIL
 feature_tests/amp_layouts.html:41:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
 feature_tests/amp_layouts.html:51:2 Invalid value '300' for attribute 'width' in tag 'amp-img' - for layout 'FIXED_HEIGHT', set the attribute 'width' to value 'auto'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
 feature_tests/amp_layouts.html:61:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
-feature_tests/amp_layouts.html:80:2 The specified layout 'CONTAINER' is not supported by tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
-feature_tests/amp_layouts.html:83:2 The attribute 'layout' in tag 'amp-img' is set to the invalid value 'unknown'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
-feature_tests/amp_layouts.html:113:2 The implied layout 'FIXED_HEIGHT' is not supported by tag 'amp-pixel'. (see https://www.ampproject.org/docs/reference/amp-pixel.html) [AMP_LAYOUT_PROBLEM]
-feature_tests/amp_layouts.html:117:2 The attribute 'width' in tag 'amp-pixel' is set to the invalid value 'X'. (see https://www.ampproject.org/docs/reference/amp-pixel.html) [AMP_LAYOUT_PROBLEM]
-feature_tests/amp_layouts.html:121:2 The attribute 'height' in tag 'amp-pixel' is set to the invalid value 'X'. (see https://www.ampproject.org/docs/reference/amp-pixel.html) [AMP_LAYOUT_PROBLEM]
-feature_tests/amp_layouts.html:133:2 The attribute 'heights' in tag 'amp-img' is disallowed by specified layout 'FIXED'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
-feature_tests/amp_layouts.html:137:2 The attribute 'heights' in tag 'amp-img' is disallowed by implied layout 'FIXED_HEIGHT'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
+feature_tests/amp_layouts.html:76:2 The attribute 'height' in tag 'amp-img' is set to the invalid value 'auto'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
+feature_tests/amp_layouts.html:96:2 The specified layout 'CONTAINER' is not supported by tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
+feature_tests/amp_layouts.html:99:2 The attribute 'layout' in tag 'amp-img' is set to the invalid value 'unknown'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
+feature_tests/amp_layouts.html:129:2 The implied layout 'FIXED_HEIGHT' is not supported by tag 'amp-pixel'. (see https://www.ampproject.org/docs/reference/amp-pixel.html) [AMP_LAYOUT_PROBLEM]
+feature_tests/amp_layouts.html:133:2 The attribute 'width' in tag 'amp-pixel' is set to the invalid value 'X'. (see https://www.ampproject.org/docs/reference/amp-pixel.html) [AMP_LAYOUT_PROBLEM]
+feature_tests/amp_layouts.html:137:2 The attribute 'height' in tag 'amp-pixel' is set to the invalid value 'X'. (see https://www.ampproject.org/docs/reference/amp-pixel.html) [AMP_LAYOUT_PROBLEM]
+feature_tests/amp_layouts.html:149:2 The attribute 'heights' in tag 'amp-img' is disallowed by specified layout 'FIXED'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
+feature_tests/amp_layouts.html:153:2 The attribute 'heights' in tag 'amp-img' is disallowed by implied layout 'FIXED_HEIGHT'. (see https://www.ampproject.org/docs/reference/amp-img.html) [AMP_LAYOUT_PROBLEM]
diff --git a/validator/validator-main.protoascii b/validator/validator-main.protoascii
index 547d3bc4f353..88fb259dbae3 100644
--- a/validator/validator-main.protoascii
+++ b/validator/validator-main.protoascii
@@ -20,12 +20,12 @@
 # in production from crashing. This id is not relevant to validator.js
 # because thus far, engine (validator.js) and spec file
 # (validator-main.protoascii) are always released together.
-min_validator_revision_required: 131
+min_validator_revision_required: 133
 # The spec file revision allows the validator engine to distinguish
 # newer versions of the spec file. This is currently a Google internal
 # mechanism, validator.js does not use this facility. However, any
 # change to this file (validator-main.js) requires updating this revision id.
-spec_file_revision: 211
+spec_file_revision: 212
 
 # Validator extensions.
 # =====================
@@ -2148,6 +2148,7 @@ tags: {  # <amp-ad>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
@@ -2174,6 +2175,7 @@ tags: {  # <amp-embed>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
@@ -2193,6 +2195,7 @@ tags: {  # <amp-img>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
@@ -2243,6 +2246,7 @@ tags: {  # <amp-video>
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
diff --git a/validator/validator.js b/validator/validator.js
index 5510983459c1..0de4cb923ed8 100644
--- a/validator/validator.js
+++ b/validator/validator.js
@@ -2203,7 +2203,7 @@ class ParsedTagSpec {
       return;
     }
     const inputHeight = new amp.validator.CssLengthAndUnit(
-        heightAttr, /* allowAuto */ false);
+        heightAttr, /* allowAuto */ true);
     if (!inputHeight.isValid) {
       context.addError(
           amp.validator.ValidationError.Code.INVALID_ATTR_VALUE,
@@ -2219,6 +2219,16 @@ class ParsedTagSpec {
     const layout =
         CalculateLayout(inputLayout, width, height, sizesAttr, heightsAttr);
 
+    // height="auto" is only allowed if the layout is FLEX_ITEM.
+    if (height.isAuto &&
+        layout !== amp.validator.AmpLayout.Layout.FLEX_ITEM) {
+      context.addError(
+          amp.validator.ValidationError.Code.INVALID_ATTR_VALUE,
+          /* params */['height', getTagSpecName(this.spec_), heightAttr],
+          this.spec_.specUrl, result);
+      return;
+    }
+
     // Does the tag support the computed layout?
     if (this.spec_.ampLayout.supportedLayouts.indexOf(layout) === -1) {
       const code = layoutAttr === undefined ?
diff --git a/validator/validator.proto b/validator/validator.proto
index 5eae8318a26a..e62d4bb9a61c 100644
--- a/validator/validator.proto
+++ b/validator/validator.proto
@@ -209,6 +209,7 @@ message AmpLayout {
     RESPONSIVE = 4;
     CONTAINER = 5;
     FILL = 6;
+    FLEX_ITEM = 7;
   }
   // Specifies which layouts are supported by this element.
   repeated Layout supported_layouts = 1;
diff --git a/validator/webui/index.html b/validator/webui/index.html
new file mode 100644
index 000000000000..36fd15957e0a
--- /dev/null
+++ b/validator/webui/index.html
@@ -0,0 +1,411 @@
+<!--
+  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.
+-->
+<!doctype html>
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>The AMP Validator</title>
+  <meta charset="utf-8"/>
+  <script src="webcomponents-lite.js"></script>
+  <link rel="import" href="/pm/iron-collapse/iron-collapse.html">
+  <link rel="import" href="/pm/iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="/pm/iron-icon/iron-icon.html">
+  <link rel="import" href="/pm/iron-icons/communication-icons.html">
+  <link rel="import" href="/pm/iron-icons/iron-icons.html">
+  <link rel="import" href="/pm/paper-button/paper-button.html">
+  <link rel="import" href="/pm/paper-input/paper-input.html">
+  <link rel="import" href="/pm/paper-item/paper-item.html">
+  <link rel="import" href="/pm/paper-listbox/paper-listbox.html">
+  <link rel="import" href="/pm/paper-material/paper-material.html">
+  <link rel="import" href="/pm/paper-styles/demo-pages.html">
+  <link rel="import" href="/pm/paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="/pm/polymer/polymer.html">
+  <link rel="stylesheet" href="/cm/lib/codemirror.css">
+  <script src="/cm/lib/codemirror.js"></script>
+  <script src="/cm/addon/selection/selection-pointer.js"></script>
+  <script src="/cm/mode/css/css.js"></script>
+  <script src="/cm/mode/htmlmixed/htmlmixed.js"></script>
+  <script src="/cm/mode/javascript/javascript.js"></script>
+  <script src="/cm/mode/xml/xml.js"></script>
+  <script src="$$VALIDATOR_SCRIPT$$"></script>
+  <style is="custom-style">
+    paper-item {
+      --paper-item: {
+        cursor: pointer;
+      };
+    }
+    .CodeMirror {
+      height: 500px;
+    }
+    .CodeMirror-cursor {
+      border-left: 3px solid black;
+      border-right: none;
+      width: 3;
+    }
+    paper-toolbar {
+      --paper-toolbar-background: #fbfafb;
+      --paper-toolbar-color: #0379C4;
+      --paper-toolbar: { font-family: Roboto, verdana, arial, sans-serif; }
+    }
+    .ampproject {
+      color: #0379C4;
+
+      padding: 15px 10px 15px 50px;
+      margin: 10px 0;
+      width: auto;
+      text-transform: none;
+      white-space: nowrap;
+      background-image: url('data:image/svg+xml;utf-8,<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>AMP Logo</title><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="AMP-Logo" fill="#0379C4"><path d="M8.657817,0.216062 L7.647297,5.589962 L10.085327,5.589962 C10.188787,5.589962 10.256477,5.698322 10.211117,5.791282 L6.230217,13.958532 C6.480467,13.985622 6.734567,13.999972 6.992097,13.999972 C10.853717,13.999972 13.984117,10.869572 13.984117,7.007952 C13.984117,3.720402 11.715067,0.963312 8.657817,0.216062" id="Fill-4"></path><path d="M6.425398,8.529948 L3.987158,8.529948 C3.883698,8.529948 3.815938,8.421588 3.861298,8.328628 L7.885808,0.072478 C7.591808,0.034958 7.292138,0.015708 6.987848,0.015848 C3.168228,0.018088 0.028028,3.136308 0.000168,6.955858 C-0.024192,10.303328 2.304078,13.111168 5.429718,13.824608 L6.425398,8.529948 Z" id="Fill-1"></path></g></g></svg>');
+      background-repeat: no-repeat;
+      background-size: 40px 40px;
+      background-position: center left;
+    }
+    .ampproject a:link { color: #0379C4; text-decoration: none; }
+    .ampproject a:visited { color: #0379C4; text-decoration: none; }
+    .ampproject a:hover { color: #0379C4; text-decoration: none; }
+    .ampproject a:active { color: #0379C4; text-decoration: none; }
+    .ampproject-message { background-color: #FFF9C4; }
+  </style>
+  <style scope="iron-icon">
+    .ampproject-warning { color: #FF9800; }
+    .ampproject-error { color: #F44336; }
+  </style>
+</head>
+
+<body unresolved>
+  <!-- An editor control using CodeMirror. This fires 'amphtml-editor-changes'
+       events which are not parameterized, and allows clients to get / set
+       the editor value, add line widgets (inline displays of errors) and move
+       the cursor around. See https://codemirror.net/doc/manual.html when
+       adding additional features. -->
+  <dom-module id="amphtml-editor">
+    <template>
+      <paper-material elevation="1">
+        <textarea id="code" name="code" rows="100"
+                  style="width:100%;height:300px"></textarea>
+      </paper-material>
+    </template>
+    <script>
+      Polymer({
+        is: 'amphtml-editor',
+        ready: function() {
+          this.editor = CodeMirror.fromTextArea(this.$.code, {
+            mode: "text/html",
+            selectionPointer: true,
+            lineNumbers: true,
+            showCursorWhenSelecting: true,
+            cursorBlinkRate: 300
+          });
+          this.editor.on('changes', function() {
+            this.fire('amphtml-editor-changes');
+          }.bind(this));
+        },
+        setEditorValue: function(text) {
+          this.editor.setValue(text);
+        },
+        getEditorValue: function() {
+          return this.editor.getValue();
+        },
+        setCursorAndFocus: function(line, col) {
+          // We first scroll further than the actual line / col we care about,
+          // to get the error line widget into view. This doesn't seem
+          // to work perfectly yet.
+          this.editor.getDoc().setCursor(line + 1, col + 80, {'scroll': true});
+          this.editor.getDoc().setCursor(line, col, {'scroll': true});
+          this.editor.focus();
+        },
+        addLineWidget(line, domElement) {
+          return this.editor.getDoc().addLineWidget(line, domElement);
+        }
+      });
+    </script>
+  </dom-module>
+
+  <!-- Very simple status bar displaying PASS / FAIL
+       below the editor window. -->
+  <dom-module id="status-bar">
+    <style>
+      .ampproject-fail {
+        color: #F44336;
+      }
+      .ampproject-pass {
+        color: #4CAF50;
+      }
+      .ampproject-result {
+        margin: 8px;
+        padding: 16px;
+      }
+    </style>
+    <template>
+      <paper-material elevation="3">
+        <div class="ampproject-result">Validation Status:
+          <span class$="{{getClass(status)}}">{{status}}</span>
+        </div>
+      </paper-material>
+    </template>
+    <script>
+      Polymer({
+        is: 'status-bar',
+        properties: {
+          status: {
+            type: String,
+            notify: true,
+            value: ''
+          }
+        },
+        getClass: function(status) {
+          if (status === 'PASS') {
+            return 'ampproject-pass';
+          } else {
+            return 'ampproject-fail';
+          }
+        }
+      });
+    </script>
+  </dom-module>
+
+  <!-- A custom element for the error list below the editor window. The errors
+       are kept as an array of validation errors, and selection changes will
+       fire an event ('error-selected') with the appropriate error. -->
+  <dom-module id="error-list">
+    <template>
+      <paper-listbox on-iron-select="handleSelect" selected="{{selectedError}}">
+        <template is="dom-repeat" items='{{errors}}' as="e">
+          <paper-item>
+            <template is="dom-if" if="{{e.isError}}">
+              <iron-icon class="ampproject-error" icon='{{e.icon}}'></iron-icon>&nbsp;&nbsp;
+            </template>
+            <template is="dom-if" if="{{e.isWarning}}">
+              <iron-icon class="ampproject-warning" icon='{{e.icon}}'></iron-icon>&nbsp;&nbsp;
+            </template>
+            <paper-item-body two-line>
+              <div>{{e.message}}</div>
+              <div secondary><small>line {{e.line}}, column {{e.col}}</small></div>
+            </paper-item-body>
+          </paper-item>
+        </template>
+      </paper-listbox>
+    </template>
+
+    <script>
+      Polymer({
+        is: 'error-list',
+          clearErrors: function() {
+            this.splice('errors', 0);
+          },
+        addError: function(error) {
+          this.push('errors', error);
+        },
+        properties: {
+          errors: {
+            type: Array,
+            value: function() { return []; },
+            notify: true
+          },
+          selectedError: {
+            type: Number,
+            value: -1  // don't select anything by default.
+          }
+        },
+        handleSelect: function(e) {
+          var error = this.errors[this.selectedError];
+          if (!error) {
+            return;
+          }
+          this.fire('error-selected', {'error': error});
+        },
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id="url-form">
+    <style scope="url-form">
+      .flex-horizontal {
+        @apply(--layout-horizontal);
+        @apply(--layout-center);
+        margin-bottom: 10px;
+      }
+      .flexchild {
+        @apply(--layout-flex);
+      }
+    </style>
+    <template>
+      <div class="container flex-horizontal">
+        <paper-input auto-validate required pattern="[^ \s]+:.*" error-message="Please enter a valid URL" on-focus="checkURL" on-input="checkURL" label="URL" id="urlToFetch" class="flexchild"></paper-input>
+        <paper-material elevation="0">
+          <paper-button disabled$="{{!validURL}}" raised id="validateButton">Validate</paper-button>
+        </paper-material>
+      </div>
+    </template>
+    <script>
+      Polymer({
+        is: 'url-form',
+        properties: {
+          validURL: {
+            type: Boolean,
+            value: false
+          }
+        },
+        checkURL: function(e) {
+          this.validURL = !this.$.urlToFetch.invalid;
+        }
+      });
+    </script>
+  </dom-module>
+
+  <!-- Below, the main contents of the page, which instantiates the
+       custom elements defined above. -->
+  <paper-toolbar>
+      <div class="ampproject">
+        <a href="https://www.ampproject.org/">Accelerated Mobile Pages Project</a>
+      </div>
+  </paper-toolbar>
+
+  <script>
+    function setExample(featureTestName) {
+      var urlToFetch = document.getElementById('urlToFetch');
+      urlToFetch.value =
+        'https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/' + featureTestName;
+      urlToFetch.validate();
+      document.getElementById('validateButton').click();
+    }
+  </script>
+
+  This web UI runs
+  the <a href="https://github.com/ampproject/amphtml/tree/master/validator">AMP
+  Validator</a> to verify that an HTML page conforms to
+  the <a href="https://www.ampproject.org/docs/reference/spec.html">AMP
+  HTML specification</a>. Enter HTML directly, copy/paste, or load by
+  specifying a URL and clicking VALIDATE.
+  Not sure what to try? Click
+  <a href="javascript:setExample('minimum_valid_amp.html')">this</a>
+  for a valid example or
+  <a href="javascript:setExample('several_errors.html')">this</a> for
+  an invalid example document.
+
+  <url-form></url-form>
+  <amphtml-editor id="amphtmlEditor"></amphtml-editor>
+  <status-bar id="statusBar"></status-bar>
+  <error-list id="errorListBox"></error-list>
+
+  <!-- Below, we wire up the custom elements of the main page. -->
+  <script>
+    document.addEventListener('WebComponentsReady', function() {
+
+      // The editor control in the center of the screen.
+      var editor = document.getElementById('amphtmlEditor');
+
+      // validationTimeout is used to implement a slight delay for validation
+      // to prevent jank.
+      var validationTimeout;
+
+      // The inline error messages are represented as CodeMirror line widgets.
+      // We keep track of them here so that we can clear them when we revalidate.
+      var lineWidgets = [];
+
+      // The listbox has the errors at the bottom of the screen.
+      var listbox = document.getElementById('errorListBox');
+
+      // When the editor contents change, trigger validation (with a delay)
+      // and propagate the validation errors into the editor (as line widgets)
+      // and the listbox below the editor as clickable errors.
+      editor.addEventListener('amphtml-editor-changes', function() {
+        clearTimeout(validationTimeout);
+        validationTimeout = setTimeout(function() {
+
+          // Clear the list of errors below the editor, and the inline messages.
+          listbox.clearErrors();
+          while (lineWidgets.length > 0) {
+            lineWidgets.shift().clear();
+          }
+
+          // Validate - result is of type amp.validator.ValidationResult.
+          // See validator.proto for the provided fields.
+          var validationResult = amp.validator.validateString(
+              editor.getEditorValue());
+
+          // Set the status property, which will cause the status bar below
+          // the editor to redisplay.
+          document.getElementById('statusBar').status = validationResult.status;
+
+          for (var ii = 0; ii < validationResult.errors.length; ++ii) {
+
+            // Grab the error, and set message and icon as well. Conveniently
+            // the severity maps to 'error' / 'warning' icons in the
+            // Polymer icons (https://elements.polymer-project.org/elements/iron-icons?view=demo:demo/index.html&active=iron-icons).
+            var error = validationResult.errors[ii];
+            error.message = amp.validator.renderErrorMessage(error);
+            error.icon = error.severity.toLowerCase();
+            error.isError = error.severity === 'ERROR';
+            error.isWarning = error.severity === 'WARNING';
+            listbox.addError(error);
+
+            // Create a dom element for the inline display of errors
+            // inside the editor. TODO(powdercloud): Make this a Polymer
+            // custom element.
+            var div = document.createElement('div');
+            div.setAttribute('class', 'ampproject-message');
+            div.appendChild(document.createTextNode(
+                                new Array(error.col).join('\u00A0')));
+            var span = document.createElement('span');
+            span.setAttribute('class',
+                              'ampproject-' + error.severity.toLowerCase());
+            var icon = document.createElement('iron-icon');
+            icon.setAttribute('icon', error.icon);
+            span.appendChild(icon);
+            div.appendChild(span);
+            div.appendChild(document.createTextNode(' ' + error.message));
+            if (error.specUrl) {
+              div.appendChild(document.createTextNode(' '));
+              var a = document.createElement('a');
+              a.setAttribute('href', error.specUrl);
+              a.setAttribute('target', '_blank');
+              a.appendChild(document.createTextNode('Learn more'));
+              div.appendChild(a);
+              div.appendChild(document.createTextNode('.'));
+            }
+            lineWidgets.push(editor.addLineWidget(error.line - 1, div));
+          }
+        }, 300);
+      });
+
+      // Clicking in the error list at the bottom of the screen moves
+      // the editor cursor.
+      listbox.addEventListener('error-selected', function(e) {
+        var error = e.detail.error;
+        editor.setCursorAndFocus(error.line - 1, error.col);
+      });
+
+      // Fetches a doc with JSON from the local server (index.js) and
+      // puts it into the editor.
+      var input = document.getElementById('urlToFetch');
+      var button = document.getElementById('validateButton');
+      button.addEventListener('click', function() {
+        var urlToFetch = input.value.trim();
+        if (urlToFetch.length > 0) {
+          var xmlHttp = new XMLHttpRequest();
+          xmlHttp.onreadystatechange = function() {
+            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+              editor.setEditorValue(JSON.parse(xmlHttp.responseText).contents);
+            }
+          };
+          xmlHttp.open("GET", "/fetch?url=" + encodeURIComponent(urlToFetch), true);
+          xmlHttp.send();
+        }
+      });
+    });
+</script>
+</body>
+</html>