mirror of
https://github.com/servo/servo.git
synced 2025-06-28 11:03:39 +01:00
102 lines
3.1 KiB
HTML
102 lines
3.1 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 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({ name: '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({ name: '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>
|