mirror of
https://github.com/servo/servo.git
synced 2025-06-24 00:54:32 +01:00
172 lines
6.2 KiB
HTML
172 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>getComputedStyle tests</title>
|
|
<link rel="help" href="http://w3c.github.io/web-animations/#animationeffecttiming">
|
|
<link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="../../testcommon.js"></script>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
|
|
anim.finish();
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
|
|
anim.effect.timing.duration *= 2;
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'set double duration');
|
|
anim.effect.timing.duration = 0;
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'set duration 0');
|
|
anim.effect.timing.duration = 'auto';
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'set duration \'auto\'');
|
|
}, 'changed duration immediately updates its computed styles');
|
|
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
|
|
anim.finish();
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
|
|
anim.effect.timing.iterations = 2;
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'set 2 iterations');
|
|
anim.effect.timing.iterations = 0;
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'set iterations 0');
|
|
anim.effect.timing.iterations = Infinity;
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'set iterations Infinity');
|
|
}, 'changed iterations immediately updates its computed styles');
|
|
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 1, 0 ] },
|
|
{ duration: 10000, endDelay: 1000, fill: 'none' });
|
|
|
|
anim.currentTime = 9000;
|
|
assert_equals(getComputedStyle(div).opacity, '0.1',
|
|
'set currentTime during duration');
|
|
|
|
anim.currentTime = 10900;
|
|
assert_equals(getComputedStyle(div).opacity, '1',
|
|
'set currentTime during endDelay');
|
|
|
|
anim.currentTime = 11100;
|
|
assert_equals(getComputedStyle(div).opacity, '1',
|
|
'set currentTime after endDelay');
|
|
}, 'change currentTime when fill is none and endDelay is positive');
|
|
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 1, 0 ] },
|
|
{ duration: 10000,
|
|
endDelay: 1000,
|
|
fill: 'forwards' });
|
|
anim.currentTime = 5000;
|
|
assert_equals(getComputedStyle(div).opacity, '0.5',
|
|
'set currentTime during duration');
|
|
|
|
anim.currentTime = 9999;
|
|
assert_equals(getComputedStyle(div).opacity, '0.0001',
|
|
'set currentTime just a little before duration');
|
|
|
|
anim.currentTime = 10900;
|
|
assert_equals(getComputedStyle(div).opacity, '0',
|
|
'set currentTime during endDelay');
|
|
|
|
anim.currentTime = 11100;
|
|
assert_equals(getComputedStyle(div).opacity, '0',
|
|
'set currentTime after endDelay');
|
|
}, 'change currentTime when fill forwards and endDelay is positive');
|
|
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 1, 0 ] },
|
|
{ duration: 10000, endDelay: -5000, fill: 'none' });
|
|
|
|
anim.currentTime = 1000;
|
|
assert_equals(getComputedStyle(div).opacity, '0.9',
|
|
'set currentTime before endTime');
|
|
|
|
anim.currentTime = 10000;
|
|
assert_equals(getComputedStyle(div).opacity, '1',
|
|
'set currentTime after endTime');
|
|
}, 'change currentTime when fill none and endDelay is negative');
|
|
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 1, 0 ] },
|
|
{ duration: 10000,
|
|
endDelay: -5000,
|
|
fill: 'forwards' });
|
|
|
|
anim.currentTime = 1000;
|
|
assert_equals(getComputedStyle(div).opacity, '0.9',
|
|
'set currentTime before endTime');
|
|
|
|
anim.currentTime = 5000;
|
|
assert_equals(getComputedStyle(div).opacity, '0.5',
|
|
'set currentTime same as endTime');
|
|
|
|
anim.currentTime = 10000;
|
|
assert_equals(getComputedStyle(div).opacity, '0',
|
|
'set currentTime after endTime');
|
|
}, 'change currentTime when fill forwards and endDelay is negative');
|
|
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 0, 1 ] },
|
|
{ duration: 10000,
|
|
direction: 'normal' });
|
|
|
|
anim.currentTime = 7000;
|
|
anim.effect.timing.direction = 'reverse';
|
|
|
|
assert_equals(getComputedStyle(div).opacity, '0.3',
|
|
'change direction from "normal" to "reverse"');
|
|
}, 'change direction from "normal" to "reverse"');
|
|
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 0, 1 ] },
|
|
{ iterations: 2,
|
|
duration: 10000,
|
|
direction: 'normal' });
|
|
|
|
anim.currentTime = 17000;
|
|
anim.effect.timing.direction = 'alternate';
|
|
|
|
assert_equals(getComputedStyle(div).opacity, '0.3',
|
|
'change direction from "normal" to "alternate"');
|
|
}, 'change direction from "normal" to "alternate"');
|
|
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 0, 1 ] },
|
|
{ iterations: 2,
|
|
duration: 10000,
|
|
direction: 'normal' });
|
|
|
|
anim.currentTime = 17000;
|
|
anim.effect.timing.direction = 'alternate-reverse';
|
|
|
|
assert_equals(getComputedStyle(div).opacity, '0.7',
|
|
'change direction from "normal" to "alternate-reverse"');
|
|
}, 'change direction from "normal" to "alternate-reverse"');
|
|
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 0, 1 ] },
|
|
{ fill: 'backwards',
|
|
duration: 10000,
|
|
direction: 'normal' });
|
|
|
|
// test for a flip of value at the currentTime = 0
|
|
anim.effect.timing.direction = 'reverse';
|
|
|
|
assert_equals(getComputedStyle(div).opacity, '1',
|
|
'change direction from "normal" to "reverse" ' +
|
|
'at the starting point');
|
|
}, 'change direction from "normal" to "reverse" when currentTime is 0');
|
|
|
|
</script>
|
|
</body>
|