Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(248)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-path.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-partial-keyframes-checks.js ('k') | pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-path-checks.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!--
2 Copyright 2012 Google Inc. All Rights Reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15 -->
16
17 <!DOCTYPE html><meta charset="UTF-8">
18 <style>
19 .animation {
20 position: absolute;
21 width: 25px;
22 height: 25px;
23 top: 0px;
24 left: 0px;
25 background: lightsteelblue;
26 }
27 .expectation {
28 background: red;
29 position: absolute;
30 width: 25px;
31 height: 25px;
32 top: 0px;
33 left: 0px;
34 }
35 #e1 {
36 -webkit-transform: translate(87.5px, 87.5px);
37 transform: translate(87.5px, 87.5px);
38 }
39 #e2 {
40 -webkit-transform: translate(387.5px, 87.5px);
41 transform: translate(387.5px, 87.5px);
42 }
43 #e3 {
44 -webkit-transform: translate(87.5px, 287.5px);
45 transform: translate(87.5px, 287.5px);
46 }
47 #e4, #anim4 {
48 -webkit-transform: translate(387.5px, 287.5px);
49 transform: translate(387.5px, 287.5px);
50 }
51 svg {
52 position:absolute;
53 top: 0px;
54 left: 0px;
55 width: 800px;
56 height: 600px;
57 }
58 </style>
59
60 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
61 <path id=path1 d="M 100,100 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 " />
62 <path d="M 100,100 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "
63 stroke="black" stroke-width="1" fill="none" />
64 <path id=path2 d="M400,100l0,0l0,-50l100,0l86.3325,122.665z" />
65 <path d="M400,100l0,0l0,-50l100,0l86.3325,122.665z" stroke="black"
66 stroke-width="1" fill="none" />
67 <path id=path3 d="M100,300l0,0l0,-50l100,0l86.3325,122.665z" />
68 <path d="M100,300l0,0l0,-50l100,0l86.3325,122.665z" stroke="black"
69 stroke-width="1" fill="none" />
70 <path id=path4 d="M400,300l0,0l0,-50l100,0l86.3325,122.665z" />
71 <path d="M400,300l0,0l0,-50l100,0l86.3325,122.665z" stroke="black"
72 stroke-width="1" fill="none" />
73 </svg>
74
75 <div id="e1" class="expectation"></div>
76 <div id="anim1" class="animation">&rarr;</div>
77 <div id="e2" class="expectation"></div>
78 <div id="anim2" class="animation">&rarr;</div>
79 <div id="e3" class="expectation"></div>
80 <div id="anim3" class="animation">&rarr;</div>
81 <div id="e4" class="expectation"></div>
82 <div id="anim4" class="animation">&rarr;</div>
83
84 <script>
85 var expected_failures = {
86 // Firefox
87 '/#anim1/': {
88 firefox: true,
89 msie: true,
90 message: "Doesn't quite follow path correctly."
91 },
92 '/#anim2 at t=(0|1|2|10|11)s/': {
93 firefox: true,
94 message: "Doesn't quite follow path correctly."
95 },
96 '/#anim2 at t=(7|8)s/': {
97 firefox: ['26.0', '27.0'],
98 message: "Doesn't quite follow path correctly."
99 },
100 '/#anim3 at t=(0|7|8|10)s/': {
101 firefox: true,
102 message: "Doesn't quite follow path correctly."
103 },
104 '/#anim3 at t=6s/': {
105 firefox: ['26.0', '27.0'],
106 message: "Doesn't quite follow path correctly."
107 },
108 '/#anim3 at t=5s/': {
109 firefox: ['28.0', '29.0'],
110 message: "Doesn't quite follow path correctly."
111 },
112 '/#anim4 at t=(0|10)s/': {
113 firefox: true,
114 message: "Doesn't quite follow path correctly."
115 },
116 '/#anim4 at t=(3|8|9)s/': {
117 firefox: ['28.0', '29.0'],
118 message: "Doesn't quite follow path correctly."
119 },
120
121 // Internet Explorer
122 '/#anim2 at t=(0|1|2|3|4|9|10|11)s/': {
123 msie: true,
124 message: "Doesn't quite follow path correctly."
125 },
126 '/#anim3 at t=(0|1|3|4|7|8|10|11)s/': {
127 msie: true,
128 message: "Doesn't quite follow path correctly."
129 },
130 '/#anim4 at t=(0|1|3|9|10|11)s/': {
131 msie: true,
132 message: "Doesn't quite follow path correctly."
133 },
134
135 // Android Chrome
136 '/#anim3 at t=(7|8)s/' : {
137 android: true,
138 message: "Android uses integer SVG implementation."
139 },
140 '/#anim4 at t=8s/' : {
141 android: true,
142 message: "Android uses integer SVG implementation."
143 },
144
145 // Firefox & Android Chrome
146 '/#anim2 at t=9s/' : {
147 firefox: ['28.0', '29.0'],
148 android: true,
149 message: "Firefox is non-visibly different and Android uses an integer SVG i mplementation."
150 },
151 };
152 </script>
153 <script src="../bootstrap.js"></script>
154 <script>
155 "use strict";
156
157 var animFunc1 = new MotionPathEffect(
158 document.querySelector('#path1').pathSegList, 'auto-rotate');
159 document.timeline.play(new Animation(document.querySelector("#anim1"),
160 animFunc1, {duration: 10, iterations: 2}));
161
162 var animFunc2 = new MotionPathEffect(
163 document.querySelector('#path2').pathSegList, 'auto-rotate');
164 document.timeline.play(new Animation(document.querySelector("#anim2"),
165 animFunc2, {duration: 10, iterations: 2}));
166
167 var animFunc3 = new MotionPathEffect(
168 document.querySelector('#path3').pathSegList, 'auto-rotate');
169 document.timeline.play(new Animation(
170 document.querySelector("#anim3"), animFunc3,
171 {duration: 10, iterations: 2, easing: "paced"}));
172
173 var animFunc4KeyFrames = new KeyframeEffect(
174 [{transform: "translate(387.5px, 287.5px) rotate(180deg)"}], "replace");
175 var animFunc4Path = new MotionPathEffect(
176 document.querySelector('#path4').pathSegList, 'auto-rotate');
177 var anim4 = new Animation(document.querySelector("#anim4"), animFunc4Path,
178 {duration: 10, iterations: 2, easing: "paced"});
179 document.timeline.play(anim4);
180
181 testharness_timeline.schedule(function() {
182 anim4.effect = animFunc4KeyFrames;
183 }, 3000);
184 testharness_timeline.schedule(function() {
185 anim4.effect = animFunc4Path;
186 }, 6000);
187 </script>
OLDNEW
« no previous file with comments | « pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-partial-keyframes-checks.js ('k') | pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-path-checks.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698