✨Added validation for interactives (#29748)

* Added beginning of validation * Added most functionality to validator * Added text to results category * Created more validation tsets * Updated years * Fixed numbers in valdator example * Updated validator out * Added chip style transparent and grid-layer * Grid layer as ancestor
ampproject · Aug 11, 2020 · 82f11dc · 82f11dc
1 parent afd7c3f
commit 82f11dc
Show file tree

Hide file tree

Showing 8 changed files with 653 additions and 0 deletions.
diff --git a/extensions/amp-story-interactive/1.0/test/validator-amp-story-interactive-poll.html b/extensions/amp-story-interactive/1.0/test/validator-amp-story-interactive-poll.html
@@ -0,0 +1,74 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Correct poll, as well as 2 incorrect polls and a correct binary poll
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>STAMP examples</title>
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-story-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-1.0.js"></script>
+</head>
+<body>
+  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+    <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
+      <amp-story-grid-layer template="fill">
+        <amp-story-interactive-poll
+          id="complete-poll"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          theme="dark"
+          chip-style="shadow"
+          class="nice-quiz"
+          prompt-text="What country do you like the most?"
+          option-1-text="France" option-1-confetti="🇺🇾" option-1-results-category="Dog"
+          option-2-text="Spain" option-2-confetti="🇺🇾" option-2-results-category="Cat"
+          option-3-text="Uruguay" option-3-confetti="🇺🇾" option-3-results-category="Bunny"
+          option-4-text="Brazil" option-4-confetti="🇺🇾" option-4-results-category="Mouse">
+        </amp-story-interactive-poll>
+        <amp-story-interactive-poll
+          id="missing-endpoint-poll"
+          option-1-text="France"
+          option-2-text="Spain"
+          option-3-text="Uruguay">
+        </amp-story-interactive-poll>
+        <amp-story-interactive-poll
+          id="wrong-correct-poll"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          option-1-text="France" option-1-correct
+          option-2-text="Spain"
+          option-3-text="Uruguay"
+          option-4-text="Spain">
+        </amp-story-interactive-poll>
+        <amp-story-interactive-binary-poll
+          id="correct-binary-poll"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          theme="dark"
+          class="cool-binary-poll"
+          option-1-text="France" option-1-confetti="🇺🇾"
+          option-2-text="Spain" option-2-confetti="🇺🇾">
+        </amp-story-interactive-binarypoll>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-story-interactive/1.0/test/validator-amp-story-interactive-poll.out b/extensions/amp-story-interactive/1.0/test/validator-amp-story-interactive-poll.out
@@ -0,0 +1,79 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Correct poll, as well as 2 incorrect polls and a correct binary poll
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <title>STAMP examples</title>
+|    <link rel="canonical" href="http://nonblocking.io/" >
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+|    <script async custom-element="amp-story-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-1.0.js"></script>
+|  </head>
+|  <body>
+|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+|      <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
+|        <amp-story-grid-layer template="fill">
+|          <amp-story-interactive-poll
+|            id="complete-poll"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            theme="dark"
+|            chip-style="shadow"
+|            class="nice-quiz"
+|            prompt-text="What country do you like the most?"
+|            option-1-text="France" option-1-confetti="🇺🇾" option-1-results-category="Dog"
+|            option-2-text="Spain" option-2-confetti="🇺🇾" option-2-results-category="Cat"
+|            option-3-text="Uruguay" option-3-confetti="🇺🇾" option-3-results-category="Bunny"
+|            option-4-text="Brazil" option-4-confetti="🇺🇾" option-4-results-category="Mouse">
+|          </amp-story-interactive-poll>
+|          <amp-story-interactive-poll
+>>         ^~~~~~~~~
+amp-story-interactive/1.0/test/validator-amp-story-interactive-poll.html:48:8 The mandatory attribute 'endpoint' is missing in tag 'amp-story-interactive-poll'. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="missing-endpoint-poll"
+|            option-1-text="France"
+|            option-2-text="Spain"
+|            option-3-text="Uruguay">
+|          </amp-story-interactive-poll>
+|          <amp-story-interactive-poll
+>>         ^~~~~~~~~
+amp-story-interactive/1.0/test/validator-amp-story-interactive-poll.html:54:8 The attribute 'option-1-correct' may not appear in tag 'amp-story-interactive-poll'. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="wrong-correct-poll"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            option-1-text="France" option-1-correct
+|            option-2-text="Spain"
+|            option-3-text="Uruguay"
+|            option-4-text="Spain">
+|          </amp-story-interactive-poll>
+|          <amp-story-interactive-binary-poll
+|            id="correct-binary-poll"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            theme="dark"
+|            class="cool-binary-poll"
+|            option-1-text="France" option-1-confetti="🇺🇾"
+|            option-2-text="Spain" option-2-confetti="🇺🇾">
+|          </amp-story-interactive-binarypoll>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|    </amp-story>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-interactive/1.0/test/validator-amp-story-interactive-quiz.html b/extensions/amp-story-interactive/1.0/test/validator-amp-story-interactive-quiz.html
@@ -0,0 +1,67 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Correct quiz, as well as 2 incorrect quizzes
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>STAMP examples</title>
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-story-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-1.0.js"></script>
+</head>
+<body>
+  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+    <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
+      <amp-story-grid-layer template="fill">
+        <amp-story-interactive-quiz
+          id="complete-quiz"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          theme="dark"
+          chip-style="shadow"
+          class="nice-quiz"
+          prompt-text="Who won the first soccer world cup?"
+          option-1-text="France"
+          option-2-text="Spain"
+          option-3-text="Uruguay" option-3-correct option-3-confetti="🇺🇾"
+          option-4-text="Brazil">
+        </amp-story-interactive-quiz>
+        <amp-story-interactive-quiz
+          id="missing-correct-quiz"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          option-1-text="France"
+          option-2-text="Spain"
+          option-3-text="Uruguay">
+        </amp-story-interactive-quiz>
+        <amp-story-interactive-poll
+          id="wrong-endpoint-quiz"
+          endpoint="hi"
+          option-1-text="France"
+          option-2-text="Spain"
+          option-3-text="Uruguay"
+          option-4-text="Spain">
+        </amp-story-interactive-quiz>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-story-interactive/1.0/test/validator-amp-story-interactive-quiz.out b/extensions/amp-story-interactive/1.0/test/validator-amp-story-interactive-quiz.out
@@ -0,0 +1,72 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Correct quiz, as well as 2 incorrect quizzes
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <title>STAMP examples</title>
+|    <link rel="canonical" href="http://nonblocking.io/" >
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+|    <script async custom-element="amp-story-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-1.0.js"></script>
+|  </head>
+|  <body>
+|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+|      <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
+|        <amp-story-grid-layer template="fill">
+|          <amp-story-interactive-quiz
+|            id="complete-quiz"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            theme="dark"
+|            chip-style="shadow"
+|            class="nice-quiz"
+|            prompt-text="Who won the first soccer world cup?"
+|            option-1-text="France"
+|            option-2-text="Spain"
+|            option-3-text="Uruguay" option-3-correct option-3-confetti="🇺🇾"
+|            option-4-text="Brazil">
+|          </amp-story-interactive-quiz>
+|          <amp-story-interactive-quiz
+>>         ^~~~~~~~~
+amp-story-interactive/1.0/test/validator-amp-story-interactive-quiz.html:48:8 The tag 'amp-story-interactive-quiz' is missing a mandatory attribute - pick one of ['option-1-correct', 'option-2-correct', 'option-3-correct', 'option-4-correct']. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="missing-correct-quiz"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            option-1-text="France"
+|            option-2-text="Spain"
+|            option-3-text="Uruguay">
+|          </amp-story-interactive-quiz>
+|          <amp-story-interactive-poll
+>>         ^~~~~~~~~
+amp-story-interactive/1.0/test/validator-amp-story-interactive-quiz.html:55:8 The relative URL 'hi' for attribute 'endpoint' in tag 'amp-story-interactive-poll' is disallowed. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="wrong-endpoint-quiz"
+|            endpoint="hi"
+|            option-1-text="France"
+|            option-2-text="Spain"
+|            option-3-text="Uruguay"
+|            option-4-text="Spain">
+|          </amp-story-interactive-quiz>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|    </amp-story>
+|  </body>
+|  </html>