LayoutTests/animations/api/element-animate-list-of-keyframes.html - Issue 96283002: Web Animations API: Start implementation of Element.animate().

Side by Side Diff: LayoutTests/animations/api/element-animate-list-of-keyframes.html

Issue 96283002: Web Animations API: Start implementation of Element.animate(). (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Add layout test for animate() Created 7 years 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

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

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

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

	4

	5 <style>

	6 .anim {

	7 position: absolute;

	8 left: 10px;

	9 height: 90px;

	10 width: 100px;

	11 background-color: black;

	12 }

	13 </style>

	14

	15 <div id='e1' class='anim'></div>
	Steve Block 2013/12/09 23:48:04 You should write a valid html page, with html and You should write a valid html page, with html and body tags. rjwright 2013/12/10 03:05:40 Done. Show quoted text On 2013/12/09 23:48:04, Steve Block wrote: > You should write a valid html page, with html and body tags. Done.
	16 <div id='e2' class='anim'></div>

	17 <div id='e3' class='anim'></div>

	18 <div id='e4' class='anim'></div>

	19 <div id='e5' class='anim'></div>

	20

	21 <script>

	22 var e1 = document.getElementById('e1');

	23 var e2 = document.getElementById('e2');

	24 var e3 = document.getElementById('e3');

	25 var e4 = document.getElementById('e4');

	26 var e5 = document.getElementById('e5');

	27

	28 var e1Style = window.getComputedStyle(e1);
	Steve Block 2013/12/09 23:48:04 No need to explicitly use 'window'. No need to explicitly use 'window'. rjwright 2013/12/10 03:05:40 Done. Show quoted text On 2013/12/09 23:48:04, Steve Block wrote: > No need to explicitly use 'window'. Done.
	29 var e2Style = window.getComputedStyle(e2);

	30 var e3Style = window.getComputedStyle(e3);

	31 var e4Style = window.getComputedStyle(e4);

	32 var e5Style = window.getComputedStyle(e5);

	33

	34

	35 test(function() {

	36 e1.animate([

	37 {left: '10px', opacity: '1', offset: 0},

	38 {left: '100px', opacity: '0', offset: 1}

	39 ]);

	40 window.setTimeout( function () {

	41 assert_equals(e1Style.left, '100px');

	42 assert_equals(e1Style.opacity, '0');

	43 }, 1010);
	Steve Block 2013/12/09 23:48:04 Using setTimeout() like this will be flaky. You sh Using setTimeout() like this will be flaky. You should be able to use the DRT pause API, right? Also, testing after the animation has completed isn't really testing the animation. You should test at at least one time while things are changing. Finally, 1010 looks like a magic constant. You should probably add a comment that for now, duration is hardcoded to 1s. For this reason, I'd be happy adding this test at a later date. The only test I think we need now is one that checks that this isn't exposed in the wild, if that's possible. rjwright 2013/12/10 03:05:40 Done. Show quoted text On 2013/12/09 23:48:04, Steve Block wrote: > Using setTimeout() like this will be flaky. You should be able to use the DRT > pause API, right? > > Also, testing after the animation has completed isn't really testing the > animation. You should test at at least one time while things are changing. > > Finally, 1010 looks like a magic constant. You should probably add a comment > that for now, duration is hardcoded to 1s. For this reason, I'd be happy adding > this test at a later date. The only test I think we need now is one that checks > that this isn't exposed in the wild, if that's possible. Done.
	44 }, 'Calling animate() should start an animation.');

	45

	46 test(function() {

	47 e2.animate([

	48 {backgroundColor: 'green', offset: 0},

	49 {backgroundColor: 'purple', offset: 1}

	50 ]);

	51 window.setTimeout( function () {

	52 assert_equals(e2Style.backgroundColor, 'purple');

	53 }, 1010);

	54 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.');

	55

	56 test(function() {

	57 e3.animate([

	58 {'background-color': 'green', offset: 0},

	59 {'background-color': 'purple', offset: 1}

	60 ]);

	61 window.setTimeout( function () {

	62 assert_equals(e3Style.backgroundColor, 'purple');

	63 }, 1010);

	64 }, 'Calling animate() should start an animation. Dashed property names should be parsed.');

	65

	66

	67 var keyframes = [

	68 {width: '0px', offset: 0.2},

	69 {width: '100px', offset: 0.8},

	70 {width: '1000px', offset: 1}

	71 ];

	72

	73 test(function() {

	74 e4.animate(keyframes);

	75 window.setTimeout( function () {

	76 assert_equals(e4Style.width, '1000px');

	77 }, 1010);

	78 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation.');
	Steve Block 2013/12/09 23:48:04 I don't think this test adds anything. You're effe I don't think this test adds anything. You're effectively testing use of a variable, which is a JS language feature and is not specific to Element.animate(). rjwright 2013/12/10 03:05:40 Done. Yeah, I mostly added it for my own curiosity Show quoted text On 2013/12/09 23:48:04, Steve Block wrote: > I don't think this test adds anything. You're effectively testing use of a > variable, which is a JS language feature and is not specific to > Element.animate(). Done. Yeah, I mostly added it for my own curiosity and didn't think to remove it. Done :)
	79

	80

	81 var keyframesWithInvalid = [

	82 {offset: 0.1},

	83 {width: '0px', backgroundColor: 'octarine', offset: 0.2},

	84 {width: '1000px', foo: 'bar', offset: 1}

	85 ];

	86

	87 test(function() {

	88 e5.animate(keyframesWithInvalid);

	89 window.setTimeout( function () {

	90 assert_equals(e5Style.width, '1000px');

	91 assert_equals(e5Style.backgroundColor, 'black');
	Steve Block 2013/12/09 23:48:04 You should also check that e5style.foo is undefine You should also check that e5style.foo is undefined. rjwright 2013/12/10 03:05:40 Done. Show quoted text On 2013/12/09 23:48:04, Steve Block wrote: > You should also check that e5style.foo is undefined. Done.
	92 }, 1010);

	93 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation. Invalid style declarations should be ignored.');

	94 </script>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/animations/api/element-animate-list-of-keyframes-expected.txt » ('j') | Source/core/animation/ElementAnimation.cpp » ('J')