third_party/WebKit/LayoutTests/animations/change-keyframes-name.html - Issue 2614683002: CSS Animations: Fix flaky change-keyframes-name.html

Side by Side Diff: third_party/WebKit/LayoutTests/animations/change-keyframes-name.html

Issue 2614683002: CSS Animations: Fix flaky change-keyframes-name.html (Closed)

Patch Set: assert keyframes 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/change-keyframes-name-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">

7 <title>Test Changing Name of A Keyframes Rule Using CSSOM</title>	5 <title>Test Changing Name of A Keyframes Rule Using CSSOM</title>

8 <style type="text/css" media="screen">	6 <script src="../resources/testharness.js"></script>

9 #box {	7 <script src="../resources/testharnessreport.js"></script>

10 position: relative;	8 <style>

11 left: 0;	9 #target {

12 top: 0;	10 position: absolute;

13 height: 100px;	11 left: 0;

14 width: 100px;	12 top: 0;

15 background-color: blue;	13 height: 100px;

16 -webkit-animation-duration: 0.5s;	14 width: 100px;

17 -webkit-animation-timing-function: linear;	15 background-color: blue;

18 -webkit-animation-name: bar;	16 animation-duration: 0.05s;

	17 animation-fill-mode: forwards;

	18 animation-timing-function: linear;

	19 animation-name: bar;

19 }	20 }

20 @-webkit-keyframes foo {	21 @keyframes foo {

21 from { left: 100px; }	22 from { left: 100px; }

22 40% { left: 200px; }	23 to { left: 200px; }

23 60% { left: 200px; }

24 to { left: 300px; }

25 }	24 }

26 </style>	25 </style>

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

28 <script type="text/javascript" charset="utf-8">	27 <body>

29	28 <div id="target"></div>

30 const expectedValues = [	29 <script>

31 // [time, element-id, property, expected-value, tolerance]	30 'use strict';

32 [0.25, "box", "left", 200, 20],

33 ];

34	31

35 function findKeyframesRule(rule)	32 function findKeyframesRule(rule)

36 {	33 {

37 var ss = document.styleSheets;	34 var ss = document.styleSheets;

38 for (var i = 0; i < ss.length; ++i) {	35 for (var i = 0; i < ss.length; ++i) {

39 for (var j = 0; j < ss[i].cssRules.length; ++j) {	36 for (var j = 0; j < ss[i].cssRules.length; ++j) {

40 if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RU LE && ss[i].cssRules[j].name == rule)	37 if (ss[i].cssRules[j].type == window.CSSRule.KEYFRAMES_RULE && ss[i].c ssRules[j].name == rule)

41 return ss[i].cssRules[j];	38 return ss[i].cssRules[j];

42 }

43 }	39 }

44	40 }

45 return null;	41

	42 return null;

46 }	43 }

47	44

48 function change()	45 async_test(t => {

49 {	46 target.offsetTop; // Force style recalc

	47

	48 document.addEventListener('animationend', t.step_func_done(() => {

	49 assert_equals(getComputedStyle(target).left, '200px');

	50 }));

	51

	52 t.step(() => {

	53

50 // change keyframes name	54 // change keyframes name

51 var keyframes = findKeyframesRule("foo");	55 var keyframes = findKeyframesRule('foo');

52 keyframes.name = "anim";	56 assert_not_equals(keyframes, null);

53 document.getElementById('box').style.webkitAnimationName = "anim";	57 keyframes.name = 'anim';

	58 target.style.animationName = 'anim';

54	59

55 runAnimationTest(expectedValues, null, null, 'do-not-use-pause-api');	60 assert_equals(getComputedStyle(target).left, '100px', 'animation not sta rted');

56 }	61 });

57	62 }, 'Changing Name of A Keyframes Rule Using CSSOM starts animation');

58 function setup()

59 {

60 if (window.testRunner) {

61 testRunner.dumpAsText();

62 testRunner.waitUntilDone();

63 }

64 requestAnimationFrame(() => {

65 requestAnimationFrame(change);

66 });

67 }

68

69 </script>	63 </script>

70 </head>

71 <body onload="setup()">

72 This test changes the name of the @keyframes rule so that it matches

73 and makes sure the animation starts running.

74 <div id="box">

75 </div>

76 <div id="pre-result">

77 </div>

78 <div id="result">

79 </div>

80 </body>	64 </body>

81 </html>	65 </html>

OLD	NEW