Test content for https://github.com/ampproject/amp-wp/pull/6546

loose.html

<!-- wp:paragraph -->
<p>Page setup:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Commenting is enabled.</li><li>There is at least one comment.</li><li>There is a custom script on the page.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Therefore, in loose sandboxing:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>The page should not be served as <code>amp</code>.</li><li>The <code>amp-form</code> extension must not be on the page.</li><li>The comments form must have <code>action</code> and not <code>action-xhr</code>.</li><li>The <code>comment-reply.js</code> file must be on the page, and amp-bind implementation of threaded comments must be absent.</li><li>Tree-shaking must be turned off.</li><li>Noscript unwrapping should not be performed.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Verify that there are no elements on the page with red dashed borders. They should be green instead.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<form id="external-form" action="https://brook-paranthodon-k6ttvyw9a.glitch.me/" method="post" target="_blank">
    <input type="hidden" name="test_post_form_request_type" value="200">
    <button type="submit">Submit POST form</button>
</form>
<!-- /wp:html -->

<!-- wp:html -->
<p id="important-paragraph" style="font-weight: bold !important">This paragraph is important!</p>

<noscript><div style="border: dashed 10px red;">This is the noscript tag! I SHOULD NOT BE SEEN!</div></noscript>
<div id="document-write-container" style="border: dashed 10px red;"><script>document.write('This was written with document.write!'); document.getElementById('document-write-container').style.borderColor = "lime";</script></div>

<amp-script layout="fixed-height" height="60" script="class-list-adder">
  <p id="tree-shaking-status">I will have a green border if tree-shaking is <em>disabled!</em></p>
</amp-script>
<script type="text/plain" target="amp-script" id="class-list-adder">
document.querySelector('p').classList.add('added-with-script');
</script>

<style>
html, #commentform, #external-form, .comment-reply-link, #important-paragraph { border: dashed 10px red; }

html:not([amp]), #external-form[action], #commentform[action]:not([on]),.comment-reply-link:not([on][href^="#"]), #important-paragraph[style*="important"]:not([data-amp-original-style]) { border-color: lime; }

#tree-shaking-status { border:dashed 10px red; }
#tree-shaking-status.added-with-script { border-color: lime; }
</style>
<!-- /wp:html -->

moderate.html

<!-- wp:paragraph -->
<p>Page setup:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Commenting is enabled.</li><li>There is at least one comment.</li><li>There <em>is</em> another POST form other than the comment form.</li><li>But there are no custom scripts being added to the page.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Therefore, when on loose or moderate sandboxing:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>It should <em>not</em> served as AMP (so the <code>amp</code> attribute on the <code>html</code> element should be omitted).</li><li>The <code>amp-form</code> extension must <em>not</em> be on the page.</li><li>The <code>action-xhr</code> attribute must <em>not</em> be on the comment form nor on the other POST form.</li><li>The amp-bind implementation for threaded comments is omitted since the page is not going for AMP validity anyway, so the comment form must not have an <code>on</code> attribute and any comment reply links must also omit any <code>on</code> attributes.</li><li>Tree-shaking is enabled, but inline styles and <code>!important</code> quantifiers are left as-is.</li><li>Any <code>noscript</code> tags should continue to get unwrapped.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Verify that there are no elements on the page with red dashed borders. They should be green instead.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<form id="external-form" action="https://brook-paranthodon-k6ttvyw9a.glitch.me/" method="post" target="_blank">
    <input type="hidden" name="test_post_form_request_type" value="200">
    <button type="submit">Submit POST form</button>
</form>
<!-- /wp:html -->

<!-- wp:html -->
<p id="important-paragraph" style="font-weight: bold !important">This paragraph is important!</p>

<noscript><div class="noscript-wrapper">This is the noscript tag!</div></noscript>
<div class="after-noscript-wrapper">This should come after an unwrapped noscript!</div>
<style>
.noscript-wrapper,
.after-noscript-wrapper { border: dashed 10px red; }
.noscript-wrapper,
.noscript-wrapper + .after-noscript-wrapper { border-color: lime;  }
</style>

<meta name="amp-script-src" content="sha384-0vX6fLFZgSAO9LZFARSG3xkx99DNaRGS7hgf3uXdLU_adOvGwCBUi-qqKtQSldGW ">
<amp-script layout="fixed-height" height="60" script="class-list-adder">
  <p id="tree-shaking-status">I will have a green border if tree-shaking is <em>enabled!</em></p>
</amp-script>
<script type="text/plain" target="amp-script" id="class-list-adder">document.querySelector('p').classList.add('added-with-script');</script>

<style>
html, #commentform, #external-form, .comment-reply-link, #important-paragraph { border: dashed 10px red; }

html:not([amp]), #external-form[action], #commentform[action]:not([on]),.comment-reply-link:not([on][href^="#"]), #important-paragraph[style*="important"]:not([data-amp-original-style]) { border-color: lime; }

#tree-shaking-status { border:dashed 10px lime; }
#tree-shaking-status.added-with-script { border-color: red; }
</style>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

strict.html

<!-- wp:paragraph -->
<p>Page setup:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Commenting is enabled.</li><li>There is at least one comment.</li><li>There is no POST form other than the comment form.</li><li>There are no custom scripts being added to the page.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Therefore, in any sandboxing level:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>It should be served as AMP (with the <code>amp</code> attribute on the <code>html</code> element).</li><li>The <code>amp-form</code> extension should be on the page.</li><li>The <code>action-xhr</code> attribute should be on the comment form.</li><li>The comment form should have an <code>on</code> attribute that clears the form upon submission.</li><li>The comment reply links should have <code>on</code> attributes with <code>tap</code> actions and the links should go down to the comment form.</li><li>Tree-shaking remains enabled.</li><li>Inline style attributes (and <code>!important</code> qualifiers) are transformed.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Verify that there are no elements on the page with red dashed borders. They should be green instead.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<p id="important-paragraph" style="font-weight: bold !important">This paragraph is important!</p>
<style>
#important-paragraph { border: dashed 10px red; }
#important-paragraph[data-amp-original-style] { border-color: lime; }
</style>

<meta name="amp-script-src" content="sha384-0vX6fLFZgSAO9LZFARSG3xkx99DNaRGS7hgf3uXdLU_adOvGwCBUi-qqKtQSldGW ">
<amp-script layout="fixed-height" height="60" script="class-list-adder">
  <p id="tree-shaking-status">I will have a green border if tree-shaking is <em>enabled!</em></p>
</amp-script>
<script type="text/plain" target="amp-script" id="class-list-adder">document.querySelector('p').classList.add('added-with-script');</script>

<style>
html, #commentform, .comment-reply-link { border: dashed 10px red; }

html[amp], #commentform[action-xhr][on],.comment-reply-link[on^="tap"][href^="#"] { border-color: lime; }

#tree-shaking-status { border:dashed 10px lime; }
#tree-shaking-status.added-with-script { border-color: red; }
</style>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->