96 lines
2.6 KiB
HTML
96 lines
2.6 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<script src="../testcommon.js"></script>
|
|
<style>
|
|
:root {
|
|
--var-100px: 100px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<script>
|
|
'use strict';
|
|
|
|
function getKeyframes(e) {
|
|
return e.getAnimations()[0].effect.getKeyframes();
|
|
}
|
|
|
|
function assert_frames_equal(a, b, name) {
|
|
assert_equals(Object.keys(a).sort().toString(),
|
|
Object.keys(b).sort().toString(),
|
|
"properties on " + name);
|
|
for (var p in a) {
|
|
assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
|
|
}
|
|
}
|
|
|
|
test(function(t) {
|
|
var div = addDiv(t);
|
|
|
|
div.style.left = '0px';
|
|
window.getComputedStyle(div).transitionProperty;
|
|
div.style.transition = 'left 100s';
|
|
div.style.left = '100px';
|
|
|
|
var frames = getKeyframes(div);
|
|
|
|
assert_equals(frames.length, 2, "number of frames");
|
|
|
|
var expected = [
|
|
{ offset: 0, computedOffset: 0, easing: "ease", left: "0px" },
|
|
{ offset: 1, computedOffset: 1, easing: "linear", left: "100px" },
|
|
];
|
|
|
|
for (var i = 0; i < frames.length; i++) {
|
|
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
|
}
|
|
}, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a simple'
|
|
+ ' transition');
|
|
|
|
test(function(t) {
|
|
var div = addDiv(t);
|
|
|
|
div.style.left = '0px';
|
|
window.getComputedStyle(div).transitionProperty;
|
|
div.style.transition = 'left 100s steps(2,end)';
|
|
div.style.left = '100px';
|
|
|
|
var frames = getKeyframes(div);
|
|
|
|
assert_equals(frames.length, 2, "number of frames");
|
|
|
|
var expected = [
|
|
{ offset: 0, computedOffset: 0, easing: "steps(2)", left: "0px" },
|
|
{ offset: 1, computedOffset: 1, easing: "linear", left: "100px" },
|
|
];
|
|
|
|
for (var i = 0; i < frames.length; i++) {
|
|
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
|
}
|
|
}, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a simple'
|
|
+ ' transition with a non-default easing function');
|
|
|
|
test(function(t) {
|
|
var div = addDiv(t);
|
|
div.style.left = '0px';
|
|
window.getComputedStyle(div).transitionProperty;
|
|
div.style.transition = 'left 100s';
|
|
div.style.left = 'var(--var-100px)';
|
|
|
|
var frames = getKeyframes(div);
|
|
|
|
// CSS transition endpoints are based on the computed value so we
|
|
// shouldn't see the variable reference
|
|
var expected = [
|
|
{ offset: 0, computedOffset: 0, easing: 'ease', left: '0px' },
|
|
{ offset: 1, computedOffset: 1, easing: 'linear', left: '100px' },
|
|
];
|
|
for (var i = 0; i < frames.length; i++) {
|
|
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
|
}
|
|
}, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a'
|
|
+ ' transition with a CSS variable endpoint');
|
|
|
|
done();
|
|
</script>
|
|
</body>
|