125 lines
3.6 KiB
HTML
125 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>Processing a keyframes argument (easing)</title>
|
|
<link rel="help" href="https://drafts.csswg.org/web-animations/#processing-a-keyframes-argument">
|
|
<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>
|