Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset=utf-8>
<title>Processing a keyframes argument (easing)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../resources/easing-tests.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
<script>
'use strict';
test(() => {
for (const [easing, expected] of gEasingParsingTests) {
const effect = new KeyframeEffect(target, {
left: ['10px', '20px'],
easing: easing
});
assert_equals(effect.getKeyframes()[0].easing, expected,
`resulting easing for '${easing}'`);
}
}, 'easing values are parsed correctly when set on a property-indexed'
+ ' keyframe');
test(() => {
for (const [easing, expected] of gEasingParsingTests) {
const effect = new KeyframeEffect(target, [
{ offset: 0, left: '10px', easing: easing },
{ offset: 1, left: '20px' }
]);
assert_equals(effect.getKeyframes()[0].easing, expected,
`resulting easing for '${easing}'`);
}
}, 'easing values are parsed correctly when using a keyframe sequence');
test(() => {
for (const invalidEasing of gInvalidEasings) {
assert_throws_js(TypeError, () => {
new KeyframeEffect(target, { easing: invalidEasing });
}, `TypeError is thrown for easing '${invalidEasing}'`);
}
}, 'Invalid easing values are correctly rejected when set on a property-'
+ 'indexed keyframe');
test(() => {
for (const invalidEasing of gInvalidEasings) {
assert_throws_js(TypeError, () => {
new KeyframeEffect(target, [{ easing: invalidEasing }]);
}, `TypeError is thrown for easing '${invalidEasing}'`);
}
}, 'Invalid easing values are correctly rejected when using a keyframe'
+ ' sequence');
test(() => {
let readToEnd = false;
const keyframe_obj = {
*[Symbol.iterator]() {
yield { left: '100px', easing: '' };
yield { left: '200px' };
readToEnd = true;
},
};
assert_throws_js(
TypeError,
() => {
new KeyframeEffect(null, keyframe_obj);
},
'TypeError is thrown for an invalid easing'
);
assert_true(
readToEnd,
'Read all the keyframe properties before reporting invalid easing'
);
}, 'Invalid easing values are correctly rejected after doing all the'
+ ' iterating');
test(() => {
let propAccessCount = 0;
const keyframe = {};
const addProp = prop => {
Object.defineProperty(keyframe, prop, {
get: () => { propAccessCount++; },
enumerable: true
});
}
addProp('height');
addProp('width');
keyframe.easing = 'easy-peasy';
assert_throws_js(TypeError, () => {
new KeyframeEffect(target, keyframe);
});
assert_equals(propAccessCount, 2,
'All properties were read before throwing the easing error');
}, 'Errors from invalid easings on a property-indexed keyframe are thrown after reading all properties');
test(() => {
let propAccessCount = 0;
const addProp = (keyframe, prop) => {
Object.defineProperty(keyframe, prop, {
get: () => { propAccessCount++; },
enumerable: true
});
}
const kf1 = {};
addProp(kf1, 'height');
addProp(kf1, 'width');
kf1.easing = 'easy-peasy';
const kf2 = {};
addProp(kf2, 'height');
addProp(kf2, 'width');
assert_throws_js(TypeError, () => {
new KeyframeEffect(target, [ kf1, kf2 ]);
});
assert_equals(propAccessCount, 4,
'All properties were read before throwing the easing error');
}, 'Errors from invalid easings on a keyframe sequence are thrown after reading all properties');
</script>