✨ [bento][amp-iframe] Add validator rules for 1.0 (#36182)

ampproject · Sep 28, 2021 · db53597 · db53597
1 parent cb5341d
commit db53597
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 1 deletion.
diff --git a/extensions/amp-iframe/1.0/test/validator-amp-iframe.html b/extensions/amp-iframe/1.0/test/validator-amp-iframe.html
@@ -0,0 +1,42 @@
+<!--
+  Test Description:
+  Tests for the amp-iframe tag. See the inline comments.
+-->
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-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 custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-1.0.js"></script>
+  <!-- Also include amp-bind to test special case interactions -->
+  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-latest.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <!-- Valid: Basic tests -->
+  <amp-iframe width="200" height="200" src="https://example.com"></amp-iframe>
+  <amp-iframe width="200" height="200" srcdoc="<p>Hello World</p>"></amp-iframe>
+
+  <!-- Valid: Allowed attributes tests -->
+  <amp-iframe width="200" height="200" src="https://example.com" allow="geolocation; microphone" allowfullscreen allowpaymentrequest allowtransparency frameborder="0" referrerpolicy="origin" tabindex="-1" resizable sandbox="allow-same-origin allow-scripts" scrolling="no" ></amp-iframe>
+
+  <!-- Valid: We allow the src attribute to be bindable -->
+  <amp-iframe width="200" height="200" src="https://example.com" [src]="iframeurl"></amp-iframe>
+
+  <!-- Invalid: We do not allow src and srcdoc value -->
+  <amp-iframe width="200" height="200" srcdoc="<p>Hello World</p>" src="https://example.com"></amp-iframe>
+
+  <!-- Invalid: We do not allow to bind to the src attribute, and also specify a srcdoc value -->
+  <amp-iframe width="200" height="200" srcdoc="<p>Hello World</p>" [src]="iframeurl"></amp-iframe>
+
+  <!-- Mandatory amp-state to avoid amp-bind validator errors -->
+  <amp-state id=myState>
+    <script type="application/json">
+      {"iframeurl": "https://example.com"}
+    </script>
+  </amp-state>
+
+</body>
+</html>
diff --git a/extensions/amp-iframe/1.0/test/validator-amp-iframe.out b/extensions/amp-iframe/1.0/test/validator-amp-iframe.out
@@ -0,0 +1,47 @@
+FAIL
+|  <!--
+|    Test Description:
+|    Tests for the amp-iframe tag. See the inline comments.
+|  -->
+|  <!doctype html>
+|  <html ⚡ lang="en">
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-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 custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-1.0.js"></script>
+|    <!-- Also include amp-bind to test special case interactions -->
+|    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-latest.js"></script>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid: Basic tests -->
+|    <amp-iframe width="200" height="200" src="https://example.com"></amp-iframe>
+|    <amp-iframe width="200" height="200" srcdoc="<p>Hello World</p>"></amp-iframe>
+|
+|    <!-- Valid: Allowed attributes tests -->
+|    <amp-iframe width="200" height="200" src="https://example.com" allow="geolocation; microphone" allowfullscreen allowpaymentrequest allowtransparency frameborder="0" referrerpolicy="origin" tabindex="-1" resizable sandbox="allow-same-origin allow-scripts" scrolling="no" ></amp-iframe>
+|
+|    <!-- Valid: We allow the src attribute to be bindable -->
+|    <amp-iframe width="200" height="200" src="https://example.com" [src]="iframeurl"></amp-iframe>
+|
+|    <!-- Invalid: We do not allow src and srcdoc value -->
+|    <amp-iframe width="200" height="200" srcdoc="<p>Hello World</p>" src="https://example.com"></amp-iframe>
+>>   ^~~~~~~~~
+amp-iframe/1.0/test/validator-amp-iframe.html:29:2 Mutually exclusive attributes encountered in tag 'amp-iframe' - pick one of ['src', 'srcdoc']. (see https://amp.dev/documentation/components/amp-iframe)
+|
+|    <!-- Invalid: We do not allow to bind to the src attribute, and also specify a srcdoc value -->
+|    <amp-iframe width="200" height="200" srcdoc="<p>Hello World</p>" [src]="iframeurl"></amp-iframe>
+>>   ^~~~~~~~~
+amp-iframe/1.0/test/validator-amp-iframe.html:32:2 The attribute 'src' in tag 'amp-iframe' is missing or incorrect, but required by attribute '[src]'. (see https://amp.dev/documentation/components/amp-iframe)
+|
+|    <!-- Mandatory amp-state to avoid amp-bind validator errors -->
+|    <amp-state id=myState>
+|      <script type="application/json">
+|        {"iframeurl": "https://example.com"}
+|      </script>
+|    </amp-state>
+|
+|  </body>
+|  </html>
diff --git a/extensions/amp-iframe/validator-amp-iframe.protoascii b/extensions/amp-iframe/validator-amp-iframe.protoascii
@@ -1,15 +1,33 @@
-tags: {  # amp-iframe
+tags: {  # amp-iframe 1.0
+  html_format: AMP
+  tag_name: "SCRIPT"
+  satisfies: "amp-iframe 1.0"
+  excludes: "amp-iframe 0.1"
+  extension_spec: {
+    name: "amp-iframe"
+    version_name: "v1.0"
+    version: "1.0"
+    bento_supported_version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
+
+tags: {  # amp-iframe 0.1 and latest
   html_format: AMP  # Iframes not allowed in ads.
   tag_name: "SCRIPT"
+  satisfies: "amp-iframe 0.1"
+  excludes: "amp-iframe 1.0"
   extension_spec: {
     name: "amp-iframe"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
     requires_usage: EXEMPTED
     deprecated_allow_duplicates: true
   }
   attr_lists: "common-extension-attrs"
 }
+
 tags: {  # <amp-iframe>
   html_format: AMP  # Iframes not allowed in ads.
   tag_name: "AMP-IFRAME"