Bug 1244633 - Part 2: append tests for delay. r=birtles
MozReview-Commit-ID: 7jldzmXrqfj
--- a/dom/animation/test/chrome/test_animation_observers.html
+++ b/dom/animation/test/chrome/test_animation_observers.html
@@ -1631,16 +1631,57 @@ addAsyncAnimTest("change_iterations",
"records after animation restarted");
anim.cancel();
yield await_frame();
assert_records([{ added: [], changed: [], removed: [anim] }],
"records after animation end");
});
+addAsyncAnimTest("change_delay",
+ { observe: div, subtree: true }, function*() {
+ var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
+
+ yield await_frame();
+ assert_records([{ added: [anim], changed: [], removed: [] }],
+ "records after animation is added");
+
+ anim.effect.timing.delay = 100;
+ yield await_frame();
+ assert_records([{ added: [], changed: [anim], removed: [] }],
+ "records after delay is changed");
+
+ anim.effect.timing.delay = 100;
+ yield await_frame();
+ assert_records([], "records after assigning same value");
+
+ anim.effect.timing.delay = -100000;
+ yield await_frame();
+ assert_records([{ added: [], changed: [], removed: [anim] }],
+ "records after animation end");
+
+ anim.effect.timing.delay = 0;
+ yield await_frame();
+ assert_records([{ added: [anim], changed: [], removed: [] }],
+ "records after animation restarted");
+
+ anim.cancel();
+ yield await_frame();
+ assert_records([{ added: [], changed: [], removed: [anim] }],
+ "records after animation end");
+});
+
+addAsyncAnimTest("negative_delay_in_constructor",
+ { observe: div, subtree: true }, function*() {
+ var anim = div.animate({ opacity: [ 0, 1 ] },
+ { duration: 100, delay: -100 });
+ yield await_frame();
+ assert_records([], "records after assigning negative value");
+});
+
addAsyncAnimTest("exclude_animations_targeting_pseudo_elements",
{ observe: div, subtree: false }, function*() {
var anim = div.animate({ opacity: [ 0, 1 ] },
{ duration: 100 * MS_PER_SEC });
var pAnim = pseudoTarget.animate({ opacity: [ 0, 1 ] },
{ duration: 100 * MS_PER_SEC });
yield await_frame();
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -28385,16 +28385,20 @@
"path": "vibration/silent-ignore.html",
"url": "/vibration/silent-ignore.html"
},
{
"path": "web-animations/animatable/animate.html",
"url": "/web-animations/animatable/animate.html"
},
{
+ "path": "web-animations/animation-effect-timing/delay.html",
+ "url": "/web-animations/animation-effect-timing/delay.html"
+ },
+ {
"path": "web-animations/animation-effect-timing/duration.html",
"url": "/web-animations/animation-effect-timing/duration.html"
},
{
"path": "web-animations/animation-effect-timing/endDelay.html",
"url": "/web-animations/animation-effect-timing/endDelay.html"
},
{
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-effect-timing/delay.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>delay tests</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-delay">
+<link rel="author" title="Daisuke Akatsuka" href="mailto:daisuke@mozilla-japan.org">
+<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 ] }, 100);
+ anim.effect.timing.delay = 100;
+ assert_equals(anim.effect.timing.delay, 100, 'set delay 100');
+ assert_equals(anim.effect.getComputedTiming().delay, 100,
+ 'getComputedTiming() after set delay 100');
+}, 'set delay 100');
+
+test(function(t) {
+ var div = createDiv(t);
+ var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
+ anim.effect.timing.delay = -100;
+ assert_equals(anim.effect.timing.delay, -100, 'set delay -100');
+ assert_equals(anim.effect.getComputedTiming().delay, -100,
+ 'getComputedTiming() after set delay -100');
+}, 'set delay -100');
+
+test(function(t) {
+ var div = createDiv(t);
+ var anim = div.animate({ opacity: [ 0, 1 ] }, 100);
+ anim.effect.timing.delay = 100;
+ assert_equals(anim.effect.getComputedTiming().progress, null);
+ assert_equals(anim.effect.getComputedTiming().currentIteration, null);
+}, 'Test adding a positive delay to an animation without a backwards fill ' +
+ 'makes it no longer active');
+
+test(function(t) {
+ var div = createDiv(t);
+ var anim = div.animate({ opacity: [ 0, 1 ] },
+ { fill: 'both',
+ duration: 100 });
+ anim.effect.timing.delay = -50;
+ assert_equals(anim.effect.getComputedTiming().progress, 0.5);
+}, 'Test seeking an animation by setting a negative delay');
+
+test(function(t) {
+ var div = createDiv(t);
+ var anim = div.animate({ opacity: [ 0, 1 ] },
+ { fill: 'both',
+ duration: 100 });
+ anim.effect.timing.delay = -100;
+ assert_equals(anim.effect.getComputedTiming().progress, 1);
+ assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
+}, 'Test finishing an animation using a large negative delay');
+
+</script>
+</body>