| 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 |