extensions/amp-dynamic-css-classes/0.1/test/validator-amp-dynamic-css-classes.html - main - githubmirror/amphtml

extensions/amp-dynamic-css-classes/0.1/test/validator-amp-dynamic-css-classes.html

52 строки3 KB

Shihua Zheng

Remove outdated references to ampbyexamples.com (#40097)

24 июл 2024, 23:31

24 июл 2024, 23:3167ce6d2

<!--
  Test Description:
  Test for the amp-dynamic-css-classes extension from amp.dev.
-->
<!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-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-latest.js"></script>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-custom>
    body:not(.amp-referrer-pinterest-com) .if-pinterest,
    body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample,
    body:not(.amp-referrer-google-com) .if-google,
    body:not(.amp-referrer-twitter-com) .if-twitter,
    body:not(.amp-referrer-linkedin-com) .if-linkedin,
    body:not(.amp-referrer-localhost) .if-localhost {
      display: none;
    }
    body:not(.amp-viewer) .if-viewer,
    body.amp-viewer .if-not-viewer {
      display: none;
    }
    p {
      padding: 1rem;
    }
  </style>
</head>
<body>
  <!-- #### Referrer -->
  <!--
    Using these referrer classes will conditionally include elements.
  -->
  <div>
    <p class="if-pinterest">You were referred here or embedded by Pinterest!</p>
    <p class="if-twitter">You were referred here or embedded by Twitter!</p>
    <p class="if-google">You were referred here or embedded by Google!</p>
    <p class="if-ampbyexample">You came here directly!  Cool :)</p>
    <p class="if-localhost">You came here directly!  Cool :)</p>
  </div>
  <!-- #### Viewer -->
  <!--
    These classes styles the page based on whether it's embedded inside an AMP viewer. -->
  <div>
    <p class="if-not-viewer">Hey! You're not visiting within the context of an AMP Viewer!</p>
    <p class="if-viewer">Ahoy! Since you're coming from a viewer.</p>
  </div>
</body>
</html>