third_party/WebKit/LayoutTests/animations/transition-and-animation-2.html - Issue 2618293002: CSS Animations: fix flaky transition-and-animation-2.html

Side by Side Diff: third_party/WebKit/LayoutTests/animations/transition-and-animation-2.html

Issue 2618293002: CSS Animations: fix flaky transition-and-animation-2.html (Closed)

Patch Set: Created 3 years, 11 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/animations/transition-and-animation-2-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"	1 <!DOCTYPE html>

2 "http://www.w3.org/TR/html4/loose.dtd">	2 <html>

3

4 <html lang="en">

5 <head>	3 <head>

6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	4 <meta charset="utf-8">

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

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

7 <title>Transition/Animation Test #2</title>	7 <title>Transition/Animation Test #2</title>

8 <style type="text/css" media="screen">	8 <style>

9 #box {	9 #box {

10 position: absolute;	10 position: absolute;

11 left: 0;	11 left: 0;

12 top: 100px;	12 top: 100px;

13 height: 100px;	13 height: 100px;

14 width: 100px;	14 width: 100px;

15 background-color: blue;	15 background-color: blue;

16 animation-duration: 0.3s;

17 animation-timing-function: linear;

18 animation-name: anim;

19 transition-property: transform;	16 transition-property: transform;

20 transition-duration: 10s;	17 transition-duration: 10s;

21 transition-timing-function: linear;	18 transition-timing-function: linear;

22 }	19 }

	20 #box.running {

	21 animation-duration: 0.3s;

	22 animation-timing-function: linear;

	23 animation-name: anim;

	24 }

23 @keyframes anim {	25 @keyframes anim {

24 from { transform: translate(0,100px) }	26 from { transform: translate(0, 100px); }

25 to { transform: translate(400px, 100px) }	27 to { transform: translate(400px, 100px); }

26 }	28 }

27 </style>	29 </style>

28 <script src="resources/animation-test-helpers.js" type="text/javascript" cha rset="utf-8"></script>

29 <script type="text/javascript" charset="utf-8">

30

31 const expectedValues = [

32 // [time, element-id, property, expected-value, tolerance]

33 [0.4, "box", "transform", "none", 0],

34 ];

35

36 // FIXME: This doesn't get called so we don't trigger a transition...

37 function setup()

38 {

39 document.getElementById("box").style.transform = "translateX(400px)";

40 }

41

42 runAnimationTest(expectedValues, undefined, undefined, 'do-not-use-pause-api ');

43

44 </script>

45 </head>	30 </head>

46 <body>	31 <body>

47 This test has a transition and animation on the same property (transform).	32 <div id="box"></div>

48 The animation starts and then the transition is triggered. The transition should start	33 <script>

49 at the position before the animation started (the unanimated position), which is (0,0). If it	34 'use strict';

50 starts from the start point of the animation (0,100) then there is an error	35 async_test(t => {

51 <div id="box">	36

52 </div>	37 box.addEventListener('animationend', t.step_func_done(() => {

53 <div id="result">	38 assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 400, 0)');
	alancutter (OOO until 2018) 2017/01/11 05:11:36 This expectation needs some explanation. We expect This expectation needs some explanation. We expect no transition here right? Eric Willigers 2017/01/11 06:28:16 Correct. Comment added. Show quoted text On 2017/01/11 05:11:36, alancutter wrote: > This expectation needs some explanation. We expect no transition here right? Correct. Comment added.
54 </div>	39 }));

	40

	41 t.step(() => {

	42 box.offsetTop; // force style recalc

	43

	44 // Start animation

	45 box.classList.add('running');

	46 assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 0, 10 0)');

	47

	48 // Trigger transition

	49 box.style.transform = 'translate(400px, 0)';
	alancutter (OOO until 2018) 2017/01/11 04:00:50 What is the point of starting the transition? The What is the point of starting the transition? The point of this test is very unclear. Eric Willigers 2017/01/11 05:06:52 We show what happens when the animation completes: Show quoted text On 2017/01/11 04:00:50, alancutter wrote: > What is the point of starting the transition? The point of this test is very > unclear. We show what happens when the animation completes: we jump to 400,0 instead of transitioning from translate(400px, 100px) to 400,0. alancutter (OOO until 2018) 2017/01/11 05:11:36 Sorry, the ordering of the code confused me. I thi Show quoted text On 2017/01/11 at 05:06:52, Eric Willigers wrote: > On 2017/01/11 04:00:50, alancutter wrote: > > What is the point of starting the transition? The point of this test is very > > unclear. > > We show what happens when the animation completes: we jump to 400,0 instead of transitioning from translate(400px, 100px) to 400,0. Sorry, the ordering of the code confused me. I think it's safe to put the event handler below this function given that it occurs in the same script execution task. Eric Willigers 2017/01/11 06:28:16 Reordered. Show quoted text On 2017/01/11 05:11:36, alancutter wrote: > On 2017/01/11 at 05:06:52, Eric Willigers wrote: > > On 2017/01/11 04:00:50, alancutter wrote: > > > What is the point of starting the transition? The point of this test is very > > > unclear. > > > > We show what happens when the animation completes: we jump to 400,0 instead of > transitioning from translate(400px, 100px) to 400,0. > > Sorry, the ordering of the code confused me. I think it's safe to put the event > handler below this function given that it occurs in the same script execution > task. Reordered.
	50 });

	51 }, 'Inline style applies when animation completes');

	52 </script>

55 </body>	53 </body>

56 </html>	54 </html>

OLD	NEW