OLD | NEW |
| (Empty) |
1 /* | |
2 Distributed under both the W3C Test Suite License [1] and the W3C | |
3 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the | |
4 policies and contribution forms [3]. | |
5 | |
6 [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license | |
7 [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license | |
8 [3] http://www.w3.org/2004/10/27-testcases | |
9 */ | |
10 | |
11 "use strict"; | |
12 | |
13 var ANIMATION_END_TIME = 1000; | |
14 var ANIMATION_TOP_DEFAULT = 300; | |
15 var ANIMATION_TOP_0 = 10; | |
16 var ANIMATION_TOP_0_5 = 100; | |
17 var ANIMATION_TOP_1 = 200; | |
18 | |
19 var KEYFRAMES = [ { | |
20 top : ANIMATION_TOP_0 + 'px', | |
21 offset : 0 | |
22 }, { | |
23 top : ANIMATION_TOP_0_5 + 'px', | |
24 offset : 1 / 2 | |
25 }, { | |
26 top : ANIMATION_TOP_1 + 'px', | |
27 offset : 1 | |
28 } ]; | |
29 | |
30 // creates new animation for given target | |
31 function newAnimation(animationTarget) { | |
32 animationTarget.style.top = ANIMATION_TOP_DEFAULT + 'px'; | |
33 return new Animation(animationTarget, KEYFRAMES, ANIMATION_END_TIME); | |
34 } | |
35 | |
36 // creates div element, appends it to the document body and | |
37 // removes the created element during test cleanup | |
38 function createDiv(test, doc) { | |
39 if (!doc) { | |
40 doc = document; | |
41 } | |
42 var div = doc.createElement('div'); | |
43 doc.body.appendChild(div); | |
44 test.add_cleanup(function() { | |
45 div.remove(); | |
46 }); | |
47 return div; | |
48 } | |
49 | |
50 // Creates a style element with the specified rules, appends it to the document | |
51 // head and removes the created element during test cleanup. | |
52 // |rules| is an object. For example: | |
53 // { '@keyframes anim': '' , | |
54 // '.className': 'animation: anim 100s;' }; | |
55 // or | |
56 // { '.className1::before': 'content: ""; width: 0px; transition: all 10s;', | |
57 // '.className2::before': 'width: 100px;' }; | |
58 // The object property name could be a keyframes name, or a selector. | |
59 // The object property value is declarations which are property:value pairs | |
60 // split by a space. | |
61 function createStyle(test, rules, doc) { | |
62 if (!doc) { | |
63 doc = document; | |
64 } | |
65 var extraStyle = doc.createElement('style'); | |
66 doc.head.appendChild(extraStyle); | |
67 if (rules) { | |
68 var sheet = extraStyle.sheet; | |
69 for (var selector in rules) { | |
70 sheet.insertRule(selector + '{' + rules[selector] + '}', | |
71 sheet.cssRules.length); | |
72 } | |
73 } | |
74 test.add_cleanup(function() { | |
75 extraStyle.remove(); | |
76 }); | |
77 } | |
78 | |
79 // Create a pseudo element | |
80 function createPseudo(test, type) { | |
81 createStyle(test, { '@keyframes anim': '', | |
82 ['.pseudo::' + type]: 'animation: anim 10s;' }); | |
83 var div = createDiv(test); | |
84 div.classList.add('pseudo'); | |
85 var anims = document.getAnimations(); | |
86 assert_true(anims.length >= 1); | |
87 var anim = anims[anims.length - 1]; | |
88 assert_equals(anim.effect.target.parentElement, div); | |
89 assert_equals(anim.effect.target.type, '::' + type); | |
90 anim.cancel(); | |
91 return anim.effect.target; | |
92 } | |
93 | |
94 // Returns the type name of given object | |
95 function type(object) { | |
96 return Object.prototype.toString.call(object).slice(8, -1); | |
97 } | |
98 | |
99 // Convert px unit value to a Number | |
100 function pxToNum(str) { | |
101 return Number(String(str).match(/^(-?[\d.]+)px$/)[1]); | |
102 } | |
103 | |
104 // Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1). | |
105 function cubicBezier(x1, y1, x2, y2) { | |
106 function xForT(t) { | |
107 var omt = 1-t; | |
108 return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t; | |
109 } | |
110 | |
111 function yForT(t) { | |
112 var omt = 1-t; | |
113 return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t; | |
114 } | |
115 | |
116 function tForX(x) { | |
117 // Binary subdivision. | |
118 var mint = 0, maxt = 1; | |
119 for (var i = 0; i < 30; ++i) { | |
120 var guesst = (mint + maxt) / 2; | |
121 var guessx = xForT(guesst); | |
122 if (x < guessx) { | |
123 maxt = guesst; | |
124 } else { | |
125 mint = guesst; | |
126 } | |
127 } | |
128 return (mint + maxt) / 2; | |
129 } | |
130 | |
131 return function bezierClosure(x) { | |
132 if (x == 0) { | |
133 return 0; | |
134 } | |
135 if (x == 1) { | |
136 return 1; | |
137 } | |
138 return yForT(tForX(x)); | |
139 } | |
140 } | |
141 | |
142 function stepEnd(nsteps) { | |
143 return function stepEndClosure(x) { | |
144 return Math.floor(x * nsteps) / nsteps; | |
145 } | |
146 } | |
147 | |
148 function stepStart(nsteps) { | |
149 return function stepStartClosure(x) { | |
150 var result = Math.floor(x * nsteps + 1.0) / nsteps; | |
151 return (result > 1.0) ? 1.0 : result; | |
152 } | |
153 } | |
154 | |
155 function waitForAnimationFrames(frameCount) { | |
156 return new Promise(function(resolve, reject) { | |
157 function handleFrame() { | |
158 if (--frameCount <= 0) { | |
159 resolve(); | |
160 } else { | |
161 window.requestAnimationFrame(handleFrame); // wait another frame | |
162 } | |
163 } | |
164 window.requestAnimationFrame(handleFrame); | |
165 }); | |
166 } | |
OLD | NEW |