Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-24 21:31:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1244642 - Web-platform tests for AnimationEffectTiming.direction r=hiro

Browse Source 
MozReview-Commit-ID: Cxvizue8c9H

--HG--
extra : rebase_source : 1d6e7d8d55e9d09412a71fb3be9e716c53eac34f
This commit is contained in:
Ryo Kato 2016-03-26 16:47:40 +09:00
parent 7218d5dee1
commit 03ccfe82a9
3 changed files with 88 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
testing/web-platform/meta/MANIFEST.json
View File

@ -28413,6 +28413,10 @@
"path": "web-animations/animation-effect-timing/iterationStart.html",
"url": "/web-animations/animation-effect-timing/iterationStart.html"
},
{
"path": "web-animations/animation-effect-timing/direction.html",
"url": "/web-animations/animation-effect-timing/direction.html"
},
{
"path": "web-animations/animation-node/animation-node-after.html",
"url": "/web-animations/animation-node/animation-node-after.html"

28
testing/web-platform/tests/web-animations/animation-effect-timing/direction.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>direction tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-direction">
<link rel="author" title="Ryo Kato" href="mailto:foobar094@gmail.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
'use strict';
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
var directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
directions.forEach(function(direction) {
anim.effect.timing.direction = direction;
assert_equals(anim.effect.timing.direction, direction,
'set direction to ' + direction);
});
}, 'set direction to a valid keyword');
</script>
</body>

56
testing/web-platform/tests/web-animations/animation-effect-timing/getComputedStyle.html
View File

@ -117,5 +117,61 @@ test(function(t) {
'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"');
</script>
</body>