Index: third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/animation-effect-timing/getComputedStyle.html |
diff --git a/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/animation-effect-timing/getComputedStyle.html b/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/animation-effect-timing/getComputedStyle.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..278392c6f16a643468fc038074786614ccf1da66 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/animation-effect-timing/getComputedStyle.html |
@@ -0,0 +1,107 @@ |
+<!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: [ 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', |
+ 'set currentTime same as endTime'); |
+ |
+ anim.currentTime = 9999; |
+ assert_equals(getComputedStyle(div).opacity, '0', |
+ 'set currentTime during duration'); |
+ |
+ anim.currentTime = 10000; |
+ assert_equals(getComputedStyle(div).opacity, '0', |
+ 'set currentTime after endTime'); |
+}, 'change currentTime when fill forwards and endDelay is negative'); |
+ |
+</script> |
+</body> |