bower_components/web-animations-js/test/testcases/auto-test-playback-rate.html - Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

Side by Side Diff: bower_components/web-animations-js/test/testcases/auto-test-playback-rate.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master

Patch Set: Created 5 years, 11 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

« no previous file with comments | « bower_components/web-animations-js/test/testcases/auto-test-perspective-origin-checks.js ('k') | bower_components/web-animations-js/test/testcases/auto-test-playback-rate-checks.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(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 .animContainer {

20 position: absolute;

21 left: 0px;

22 }

23

24 .anim {

25 left: 0px;

26 width: 100px;

27 height: 25px;

28 background-color: lightsteelblue;

29 position: relative;

30 }

31

32 #ca {

33 top: 50px;

34 }

35

36 #cb {

37 top: 250px;

38 }

39

40 .expectation {

41 position: absolute;

42 width: 100px;

43 background: red;

44 }

45 #expectation1 {

46 top: 50px;

47 left: 300px;

48 height: 175px;

49 }

50 #expectation2 {

51 top: 250px;

52 left: 100px;

53 height: 150px;

54 }

55 #expectation3 {

56 top: 400px;

57 left: 300px;

58 height: 25px;

59 }

60 </style>

61

62 <div>All movement should be at the same speed.</div>

63

64 <div class="expectation" id="expectation1"></div>

65 <div class="expectation" id="expectation2"></div>

66 <div class="expectation" id="expectation3"></div>

67

68 <div class="animContainer" id="ca">

69 <div class="anim a" id="a"></div>

70 <div class="anim b" id="b"></div>

71 <div class="anim c" id="c"></div>

72 <div class="anim d" id="d"></div>

73 <div class="anim e" id="e"></div>

74 <div class="anim f" id="f"></div>

75 <div class="anim g" id="g"></div>

76 </div>

77

78 <div class="animContainer" id="cb">

79 <div class="anim a" id="h"></div>

80 <div class="anim b" id="i"></div>

81 <div class="anim c" id="j"></div>

82 <div class="anim d" id="k"></div>

83 <div class="anim e" id="l"></div>

84 <div class="anim f" id="m"></div>

85 <div class="anim g" id="n"></div>

86 </div>

87

88 <div style="height: 450px"></div>

89

90 <script src="../bootstrap.js"></script>

91 <script>

92 "use strict";

93

94 var containers = ["ca", "cb"];

95

96 var directions = ["normal", "reverse"];

97 var groups = [];

98

99 var effect100To300 = [{left: "100px"}, {left: "300px"}];

100 var effect300To100 = [{left: "300px"}, {left: "100px"}];

101

102 for (var i = 0; i < directions.length; i++) {

103 var dir = directions[i];

104 groups.push(new AnimationGroup([], {direction: dir, duration: 3 * 1000}));

105 }

106

107 for (var i = 0; i < containers.length; i++) {

108 var container = document.getElementById(containers[i]);

109 // Test basic use.

110 groups[i].append(new Animation(container.getElementsByClassName("a")[0],

111 effect100To300, {duration: 1.0 * 1000, fill: 'forwards'}));

112 groups[i].append(new Animation(container.getElementsByClassName("b")[0],

113 effect100To300, {duration: 0.5 * 1000, playbackRate: 0.5, fill: 'forwards' }));

114 groups[i].append(new Animation(container.getElementsByClassName("c")[0],

115 effect100To300, {duration: 2.0 * 1000, playbackRate: 2.0, fill: 'forwards' }));

116 // Test negative values.

117 groups[i].append(new Animation(container.getElementsByClassName("d")[0],

118 effect300To100, {duration: 1.0 * 1000, playbackRate: -1.0, fill: 'forwards '}));

119 groups[i].append(new Animation(container.getElementsByClassName("e")[0],

120 effect300To100, {duration: 0.5 * 1000, playbackRate: -0.5, fill: 'forwards '}));

121 groups[i].append(new Animation(container.getElementsByClassName("f")[0],

122 effect300To100, {duration: 2.0 * 1000, playbackRate: -2.0, fill: 'forwards '}));

123 // Test zero.

124 groups[i].append(new Animation(container.getElementsByClassName("g")[0],

125 effect300To100, {duration: 1.0 * 1000, playbackRate: 0.0, fill: 'forwards' }));

126 document.timeline.play(groups[i]);

127 }

128 </script>

OLD	NEW