| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Animating with KeyframeEffect objects</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../external/wpt/web-animations/testcommon.js"></script> |
| <body> |
| <script> |
| "use strict"; |
| |
| test(function(t) { |
| var target = createDiv(t); |
| var effect = new KeyframeEffect(target, null); |
| var anim = target.animate(null); |
| anim.effect = effect; |
| assert_class_string(anim.effect, "KeyframeEffect"); |
| }, "An animation can be created with a KeyframeEffect, and the effect" |
| + " is of the expected type"); |
| |
| test(function(t) { |
| var target = createDiv(t); |
| var effect = new KeyframeEffect(target, { opacity: [0, 0.9] }, 1000); |
| var anim = target.animate(null); |
| anim.pause(); |
| anim.effect = effect; |
| anim.currentTime = 500; |
| assert_equals(getComputedStyle(target).opacity, '0.45', |
| 'opacity at mid-point'); |
| }, "An animation based on a KeyframeEffect applies an effect"); |
| |
| </script> |
| </body> |
