validator/testdata/feature_tests/inline_style.html - main - githubmirror/amphtml

validator/testdata/feature_tests/inline_style.html

34 строки2 KB

honeybadgerdontcare

Validator rollup 20210819 (#35748)

20 авг 2021, 21:08

20 авг 2021, 21:0815f658d

<!--
  Test Description:
  Tests style attributes on tags (inline style).
-->
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="./regular-html-version.html">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
  <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 src="https://cdn.ampproject.org/v0.js" async></script>
</head>
<body>
  <!-- Valid -->
  <amp-img layout=fill src=lemur.png style="display:block; position:relative; width:100px;"></amp-img>

  <!-- Valid: position:fixed is allowed since it is allowed in the style tag -->
  <amp-img layout=fill src=lemur.png style="display: block; position: fixed; width: 100px;"></amp-img>

  <!-- Valid: made up declaration is allowed since it is allowed in the style tag -->
  <amp-img layout=fill src=lemur.png style="lemur: lemur;"></amp-img>

  <!-- Invalid: !important is not allowed -->
  <amp-img layout=fill src=lemur.png style="display:block !important; width:100px;"></amp-img>
  <amp-img layout=fill src=lemur.png style="display:block ! important; width:100px;"></amp-img>

  <!-- Invalid: attribute [style] is not allowed -->
  <amp-img layout=fill src=lemur.png style="display:block;" [style]="display:block;"></amp-img>

  <!-- Invalid: mailto protocol not allowed in URLs -->
  <b style="background-image: url('mailto:foo@bar.com')"></b>
</body>
</html>