forked from ampproject/amphtml
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvalidator-amp-story-animations-visual-effects-parameters-error.out
More file actions
114 lines (114 loc) · 6.78 KB
/
validator-amp-story-animations-visual-effects-parameters-error.out
File metadata and controls
114 lines (114 loc) · 6.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
FAIL
| <!--
| Copyright 2019 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 the validation rules of the `animate-in` attribute in amp-story animations.
| -->
| <!doctype html>
| <html ⚡>
| <head>
| <meta charset="utf-8">
| <title>amp-story</title>
| <link rel="canonical" href="/stories/features/animations/">
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
| <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
| <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>
| <style amp-custom>
| amp-story-page {
| font-family: 'Roboto', sans-serif;
| background: #fff;
| }
| amp-story-grid-layer {
| align-items: center;
| justify-items: center;
| }
| .img-container {
| position: absloute;
| }
| </style>
| </head>
| <body>
| <amp-story standalone title="Foo" publisher="AMP" publisher-logo-src="http://example.com/foo.png" poster-portrait-src="http://example.com/foo.png">
| <amp-story-page id="visual-effects">
| <amp-story-grid-layer template="vertical">
| <h1>visual-effects</h1>
| <div animate-in="zoom-in" animate-in-duration="5s" class="img-container" scale-start="20" scale-end="-1">
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:49:8 The attribute 'animate-in' may not appear in tag 'div'.
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:49:8 The attribute 'animate-in-duration' may not appear in tag 'div'.
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:49:8 The attribute 'scale-end' may not appear in tag 'div'.
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:49:8 The attribute 'scale-start' may not appear in tag 'div'.
| <amp-img id="ken-burns-img1"
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:50:12 The attribute 'animate-in' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:50:12 The attribute 'animate-in-duration' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:50:12 The attribute 'translate-x' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
| src="https://picsum.photos/1024/768?image=1077"
| animate-in="pan-left"
| translate-x="-100"
| animate-in-duration="5s"
| layout="fixed"
| width="1024"
| height="768">
| </amp-img>
| </div>
| <div animate-in="fade-in" animate-in-after="ken-burns-img1" animate-in-delay="0.25s" animate-in-duration="1s">
| <div
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:61:10 The attribute 'animate-in' may not appear in tag 'div'.
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:61:10 The attribute 'animate-in-after' may not appear in tag 'div'.
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:61:10 The attribute 'animate-in-duration' may not appear in tag 'div'.
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:61:10 The attribute 'scale-end' may not appear in tag 'div'.
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:61:10 The attribute 'scale-start' may not appear in tag 'div'.
| animate-in="zoom-out"
| scale-start="2"
| scale-end="invalid"
| animate-in-duration="10s"
| class="img-container"
| animate-in-after="ken-burns-img1">
| <amp-img id="ken-burns-img2"
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:68:12 The attribute 'animate-in-after' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:68:12 The attribute 'animate-in-duration' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:68:12 The attribute 'translate-y' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
| src="https://picsum.photos/1024/768?image=1026"
| layout="fixed"
| width="1024"
| height="768"
| translate-y="-200px"
| animate-in-duration="30s"
| animate-in-after="ken-burns-img1">
| </amp-img>
| </div>
| </div>
| </amp-story-grid-layer>
| </amp-story-page>
| </amp-story>
| </body>
| </html>