Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(254)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/web-animations-api/player-clip.html

Issue 1162253005: Animations: Add the effect clipping primitive to web animations (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | Source/core/animation/Animation.h » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/web-animations-api/player-clip.html
diff --git a/LayoutTests/web-animations-api/player-clip.html b/LayoutTests/web-animations-api/player-clip.html
new file mode 100644
index 0000000000000000000000000000000000000000..45f2a36cc80133cb03ffdea96722ffd2d4d42894
--- /dev/null
+++ b/LayoutTests/web-animations-api/player-clip.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+
+<div id="element" style="width: 50px;"></div>
+
+<script>
+var element = document.getElementById("element");
+
+function runTests(paused, reversed)
+{
+ function applyTestParameters(animation)
+ {
+ if (paused)
+ animation.pause();
+ if (reversed)
+ animation.playbackRate = -1;
+ }
+
+ function appendParametersToDescription(string)
+ {
+ if (paused)
+ string += "; running with paused";
+ if (reversed)
+ string += "; running with reverse";
+ return string;
+ }
+
+ test(function() {
+ var animation = element.animate([{ width: '100px' }, { width: '200px' }], 1000);
+ applyTestParameters(animation);
+ animation.startClip = 300;
+ animation.currentTime = 100;
+ assert_equals(getComputedStyle(element).width, '50px');
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(element).width, '150px');
+ animation.cancel();
+ }, appendParametersToDescription('startClip after start time'));
+
+ test(function() {
+ var animation = element.animate([{ width: '100px' }, { width: '200px' }], 1000);
+ applyTestParameters(animation);
+ animation.endClip = -400;
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(element).width, '150px');
+ animation.currentTime = 700;
+ assert_equals(getComputedStyle(element).width, '50px');
+ animation.cancel();
+ }, appendParametersToDescription('endClip before end time'));
+
+ test(function() {
+ var animation = element.animate([{ width: '100px' }, { width: '200px' }], { duration: 1000, fill: 'backwards' });
+ applyTestParameters(animation);
+ animation.startClip = -500;
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(element).width, '150px');
+ animation.currentTime = -200;
+ assert_equals(getComputedStyle(element).width, '100px');
+ animation.currentTime = -500;
+ assert_equals(getComputedStyle(element).width, '50px');
+ animation.currentTime = -1000;
+ assert_equals(getComputedStyle(element).width, '50px');
+ animation.cancel();
+ }, appendParametersToDescription('startClip, backwards fill'));
+
+ test(function() {
+ var animation = element.animate([{ width: '100px' }, { width: '200px' }], { duration: 1000, fill: 'forwards' });
+ applyTestParameters(animation);
+ animation.startClip = 1500;
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(element).width, '50px');
+ animation.currentTime = 1500;
+ assert_equals(getComputedStyle(element).width, '50px');
+ animation.currentTime = 2000;
+ assert_equals(getComputedStyle(element).width, '200px');
+ animation.cancel();
+ }, appendParametersToDescription('startClip, forwards fill'));
+
+ test(function() {
+ var animation = element.animate([{ width: '100px' }, { width: '200px' }], { duration: 1000, fill: 'forwards' });
+ applyTestParameters(animation);
+ animation.endClip = 500;
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(element).width, '150px');
+ animation.currentTime = 1000;
+ assert_equals(getComputedStyle(element).width, '200px');
+ animation.currentTime = 1200;
+ assert_equals(getComputedStyle(element).width, '200px');
+ animation.currentTime = 1500;
+ assert_equals(getComputedStyle(element).width, '200px');
+ animation.currentTime = 2000;
+ assert_equals(getComputedStyle(element).width, '50px');
+ animation.cancel();
+ }, appendParametersToDescription('endClip, forwards fill'));
+
+ test(function() {
+ var animation = element.animate([{ width: '100px' }, { width: '200px' }], { duration: 1000, fill: 'backwards' });
+ applyTestParameters(animation);
+ animation.endClip = -1500;
+ animation.currentTime = 500;
+ assert_equals(getComputedStyle(element).width, '50px');
+ animation.currentTime = -500;
+ assert_equals(getComputedStyle(element).width, '100px');
+ animation.currentTime = -1000;
+ assert_equals(getComputedStyle(element).width, '100px');
+ animation.cancel();
+ }, appendParametersToDescription('endClip, backwards fill'));
+}
+
+runTests(false, false);
+runTests(false, true);
+runTests(true, false);
+runTests(true, true);
+
+</script>
« no previous file with comments | « no previous file | Source/core/animation/Animation.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698