<!DOCTYPE html>
<!--
  Copyright 2015 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:
  Tests support for the amp-sidebar tag.
  TODO(honeybadgerdontcare): Include spec url once publicly available.
--><html amp><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 src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
  <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
</head>
<body>
  <!-- Example of a valid amp-sidebar. -->
  <amp-sidebar side="left" layout="nodisplay">
    <amp-accordion>
      <section>
        <h2>Section 1</h2>
        <p>Content</p>
      </section>
      <section>
        <h2>Section 2</h2>
        <p>Content</p>
      </section>
    </amp-accordion>
    <amp-fit-text layout="fill"></amp-fit-text>
    <amp-img layout="fill" src="img"></amp-img>
  </amp-sidebar>
  <!-- Invalid example: more than one amp-sidebar and invalid children. -->
  
  <!-- Invalid example with invalid side value. -->
  <amp-sidebar layout="nodisplay"></amp-sidebar>
</body>

</html>


ORIGINAL HTML
---------------
Line  1: <!--
Line  2:   Copyright 2015 The AMP HTML Authors. All Rights Reserved.
Line  3: 
Line  4:   Licensed under the Apache License, Version 2.0 (the "License");
Line  5:   you may not use this file except in compliance with the License.
Line  6:   You may obtain a copy of the License at
Line  7: 
Line  8:       http://www.apache.org/licenses/LICENSE-2.0
Line  9: 
Line 10:   Unless required by applicable law or agreed to in writing, software
Line 11:   distributed under the License is distributed on an "AS-IS" BASIS,
Line 12:   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
Line 13:   See the License for the specific language governing permissions and
Line 14:   limitations under the license.
Line 15: -->
Line 16: <!--
Line 17:   Test Description:
Line 18:   Tests support for the amp-sidebar tag.
Line 19:   TODO(honeybadgerdontcare): Include spec url once publicly available.
Line 20: -->
Line 21: <!doctype html>
Line 22: <html ⚡>
Line 23: <head>
Line 24:   <meta charset="utf-8">
Line 25:   <link rel="canonical" href="./regular-html-version.html" />
Line 26:   <meta name="viewport" content="width=device-width,minimum-scale=1">
Line 27:   <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>
Line 28:   <script async src="https://cdn.ampproject.org/v0.js"></script>
Line 29:   <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Line 30:   <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
Line 31:   <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
Line 32: </head>
Line 33: <body>
Line 34:   <!-- Example of a valid amp-sidebar. -->
Line 35:   <amp-sidebar side="left" layout="nodisplay">
Line 36:     <amp-accordion>
Line 37:       <section>
Line 38:         <h2>Section 1</h2>
Line 39:         <p>Content</p>
Line 40:       </section>
Line 41:       <section>
Line 42:         <h2>Section 2</h2>
Line 43:         <p>Content</p>
Line 44:       </section>
Line 45:     </amp-accordion>
Line 46:     <amp-fit-text layout="fill"></amp-fit-text>
Line 47:     <amp-img layout="fill" src="img"></amp-img>
Line 48:   </amp-sidebar>
Line 49:   <!-- Invalid example: more than one amp-sidebar and invalid children. -->
Line 50:   <amp-sidebar layout="nodisplay">
Line 51:     <amp-ad layout="fill" src="https://ad" type="ad"></amp-ad>
Line 52:   </amp-sidebar>
Line 53:   <!-- Invalid example with invalid side value. -->
Line 54:   <amp-sidebar side="center" layout="nodisplay"></amp-sidebar>
Line 55: </body>
Line 56: </html>
Line 57: 



AMP-HTML Validation Issues and Fixes
-------------------------------------
FAIL

<amp-sidebar layout="nodisplay"> on line 50
- The tag 'amp-sidebar' appears more than once in the document.
   [code: DUPLICATE_UNIQUE_TAG  category: MANDATORY_AMP_TAG_MISSING_OR_INCORRECT see: https://github.com/ampproject/amphtml/blob/master/extensions/amp-sidebar/amp-sidebar.md]
   ACTION TAKEN: amp-sidebar tag was removed due to validation issues.

<amp-ad layout="fill" src="https://ad" type="ad"> on line 51
- The tag 'amp-ad' may not appear as a descendant of tag 'amp-sidebar'.
   [code: DISALLOWED_TAG_ANCESTOR  category: AMP_TAG_PROBLEM see: https://www.ampproject.org/docs/reference/amp-ad.html]
   ACTION TAKEN: amp-ad tag was removed due to validation issues.

<amp-sidebar side="center" layout="nodisplay"> on line 54
- The attribute 'side' in tag 'amp-sidebar' is set to the invalid value 'center'.
   [code: INVALID_ATTR_VALUE  category: AMP_TAG_PROBLEM see: https://github.com/ampproject/amphtml/blob/master/extensions/amp-sidebar/amp-sidebar.md]
   ACTION TAKEN: amp-sidebar.side attribute was removed due to validation issues.

COMPONENT NAMES WITH JS PATH
------------------------------
'amp-fit-text', include path 'https://cdn.ampproject.org/v0/amp-fit-text-0.1.js'

