LayoutTests/web-animations-api/player-clip.html - Issue 1162253005: Animations: Add the effect clipping primitive to web animations

Side by Side 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 unified diff | Download patch | Annotate | Revision Log

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <script src="../resources/testharness.js"></script>

	3 <script src="../resources/testharnessreport.js"></script>

	4

	5 <div id="element" style="width: 50px;"></div>

	6

	7 <script>

	8 var element = document.getElementById("element");

	9

	10 function runTests(paused, reversed)

	11 {

	12 function applyTestParameters(animation)

	13 {

	14 if (paused)

	15 animation.pause();

	16 if (reversed)

	17 animation.playbackRate = -1;

	18 }

	19

	20 function appendParametersToDescription(string)

	21 {

	22 if (paused)

	23 string += "; running with paused";

	24 if (reversed)

	25 string += "; running with reverse";

	26 return string;

	27 }

	28

	29 test(function() {

	30 var animation = element.animate([{ width: '100px' }, { width: '200px' }] , 1000);

	31 applyTestParameters(animation);

	32 animation.startClip = 300;

	33 animation.currentTime = 100;

	34 assert_equals(getComputedStyle(element).width, '50px');

	35 animation.currentTime = 500;

	36 assert_equals(getComputedStyle(element).width, '150px');

	37 animation.cancel();

	38 }, appendParametersToDescription('startClip after start time'));

	39

	40 test(function() {

	41 var animation = element.animate([{ width: '100px' }, { width: '200px' }] , 1000);

	42 applyTestParameters(animation);

	43 animation.endClip = -400;

	44 animation.currentTime = 500;

	45 assert_equals(getComputedStyle(element).width, '150px');

	46 animation.currentTime = 700;

	47 assert_equals(getComputedStyle(element).width, '50px');

	48 animation.cancel();

	49 }, appendParametersToDescription('endClip before end time'));

	50

	51 test(function() {

	52 var animation = element.animate([{ width: '100px' }, { width: '200px' }] , { duration: 1000, fill: 'backwards' });

	53 applyTestParameters(animation);

	54 animation.startClip = -500;

	55 animation.currentTime = 500;

	56 assert_equals(getComputedStyle(element).width, '150px');

	57 animation.currentTime = -200;

	58 assert_equals(getComputedStyle(element).width, '100px');

	59 animation.currentTime = -500;

	60 assert_equals(getComputedStyle(element).width, '50px');

	61 animation.currentTime = -1000;

	62 assert_equals(getComputedStyle(element).width, '50px');

	63 animation.cancel();

	64 }, appendParametersToDescription('startClip, backwards fill'));

	65

	66 test(function() {

	67 var animation = element.animate([{ width: '100px' }, { width: '200px' }] , { duration: 1000, fill: 'forwards' });

	68 applyTestParameters(animation);

	69 animation.startClip = 1500;

	70 animation.currentTime = 500;

	71 assert_equals(getComputedStyle(element).width, '50px');

	72 animation.currentTime = 1500;

	73 assert_equals(getComputedStyle(element).width, '50px');

	74 animation.currentTime = 2000;

	75 assert_equals(getComputedStyle(element).width, '200px');

	76 animation.cancel();

	77 }, appendParametersToDescription('startClip, forwards fill'));

	78

	79 test(function() {

	80 var animation = element.animate([{ width: '100px' }, { width: '200px' }] , { duration: 1000, fill: 'forwards' });

	81 applyTestParameters(animation);

	82 animation.endClip = 500;

	83 animation.currentTime = 500;

	84 assert_equals(getComputedStyle(element).width, '150px');

	85 animation.currentTime = 1000;

	86 assert_equals(getComputedStyle(element).width, '200px');

	87 animation.currentTime = 1200;

	88 assert_equals(getComputedStyle(element).width, '200px');

	89 animation.currentTime = 1500;

	90 assert_equals(getComputedStyle(element).width, '200px');

	91 animation.currentTime = 2000;

	92 assert_equals(getComputedStyle(element).width, '50px');

	93 animation.cancel();

	94 }, appendParametersToDescription('endClip, forwards fill'));

	95

	96 test(function() {

	97 var animation = element.animate([{ width: '100px' }, { width: '200px' }] , { duration: 1000, fill: 'backwards' });

	98 applyTestParameters(animation);

	99 animation.endClip = -1500;

	100 animation.currentTime = 500;

	101 assert_equals(getComputedStyle(element).width, '50px');

	102 animation.currentTime = -500;

	103 assert_equals(getComputedStyle(element).width, '100px');

	104 animation.currentTime = -1000;

	105 assert_equals(getComputedStyle(element).width, '100px');

	106 animation.cancel();

	107 }, appendParametersToDescription('endClip, backwards fill'));

	108 }

	109

	110 runTests(false, false);

	111 runTests(false, true);

	112 runTests(true, false);

	113 runTests(true, true);

	114

	115 </script>

OLD	NEW

« no previous file with comments | « no previous file | Source/core/animation/Animation.h » ('j') | no next file with comments »