third_party/WebKit/LayoutTests/transitions/cancel-and-start-new.html - Issue 2588313002: CSS Transitions: Fix flaky cancel-and-start-new.html

Side by Side Diff: third_party/WebKit/LayoutTests/transitions/cancel-and-start-new.html

Issue 2588313002: CSS Transitions: Fix flaky cancel-and-start-new.html (Closed)

Patch Set: Created 4 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/transitions/cancel-and-start-new-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>	1 <!DOCTYPE html>

2 <html>	2 <meta charset="utf-8">

3 <head>	3 <script src="../resources/testharness.js"></script>

4 <style>	4 <script src="../resources/testharnessreport.js"></script>

5 #target {	5 <style>

6 position: relative;	6 #target {

7 background-color: #933;	7 left: 0px;

8 width: 50px;	8 top: 0px;

9 height: 50px;	9 }

10 top: 0px;	10 #target.transition-top {

11 left: 0px;	11 top: 100px;

12 }	12 transition: top 1s linear;

13 #target.transition-top {	13 }

14 top: 400px;	14 #target.transition-left {

15 transition: top 2000ms linear;	15 left: 100px;

16 }	16 transition: left 50ms linear;

17 #target.transition-left {	17 }

18 left: 400px;	18 </style>

19 transition: left 2000ms linear;	19 <div id="target"></div>

20 }	20 <script>

21 </style>	21 'use strict';

22 <script>	22 function waitTwoFrames() {

23 if (window.testRunner) {	23 return new Promise(function(resolve, reject) {

24 testRunner.dumpAsText();	24 requestAnimationFrame(() => {

25 testRunner.waitUntilDone();	25 requestAnimationFrame(() => {

26 }	26 resolve();

	27 });

	28 });

	29 });

	30 }

27	31

28 function fail(message) {	32 async_test(t => {

29 var result = "<span style='color:red'>" + message + "</span>";	33 waitTwoFrames().then(() => {

30 document.getElementById('result').innerHTML = result;	34 target.classList.add('transition-top');

31 if (window.testRunner)	35 }).then(waitTwoFrames).then(() => {

32 testRunner.notifyDone();	36 target.classList.remove('transition-top');
	suzyh_UTC10 (ex-contributor) 2016/12/21 00:26:59 Do we care about the correctness of the transition Do we care about the correctness of the transition-top behaviour? That is, do we care about the value of top at any point? Eric Willigers 2016/12/21 01:01:12 I've now added an assert that the value returns to Show quoted text On 2016/12/21 00:26:59, suzyh wrote: > Do we care about the correctness of the transition-top behaviour? That is, do we > care about the value of top at any point? I've now added an assert that the value returns to 0 after the transition is cancelled. If we check the value during the transition, the test will become more complex or flaky.
33 }	37 }).then(waitTwoFrames).then(t.step_func(() => {

34	38 target.classList.add('transition-left');

35 function success() {	39 assert_equals(getComputedStyle(target).left, '0px');

36 var result = "<span style='color:green'>PASS</span>";	40 target.addEventListener('transitionend', t.step_func_done(() => {

37 document.getElementById('result').innerHTML = result;	41 assert_equals(getComputedStyle(target).left, '100px');

38 if (window.testRunner)	42 }));

39 testRunner.notifyDone();	43 }));

40 }	44 }, 'Having stopped a transition before it completes, a subsequent transition s tarts correctly');

41	45 </script>

42 function isEqual(actual, desired, tolerance)

43 {

44 var diff = Math.abs(actual - desired);

45 return diff < tolerance;

46 }

47

48 function start()

49 {

50 document.getElementById("target").classList.add('transition-top');

51 internals.pauseAnimations(1);

52 cancelTransition();

53 }

54

55 function cancelTransition()

56 {

57 var top = parseFloat(window.getComputedStyle(document.getElementById ('target')).top);

58 if (isEqual(top, 200, 1)) {

59 document.getElementById("target").classList.remove('transition-t op');

60 internals.pauseAnimations(1);

61 startNewTransition();

62 } else {

63 fail('top was: ' + top + ', expected: 200');

64 }

65 }

66

67 function startNewTransition()

68 {

69 var top = parseFloat(window.getComputedStyle(document.getElementById ('target')).top);

70 if (isEqual(top, 0, 1)) {

71 document.getElementById("target").classList.add('transition-left ');

72 internals.pauseAnimations(1);

73 check();

74 } else {

75 fail('top was: ' + top + ', expected: 0');

76 }

77 }

78

79 function check()

80 {

81 var left = parseFloat(window.getComputedStyle(document.getElementByI d('target')).left);

82 if (isEqual(left, 200, 1)) {

83 success();

84 } else {

85 fail('left was: ' + left + ', expected: 200');

86 }

87 }

88

89 window.onload = start;

90 </script>

91 </head>

92 <body>

93 <p>

94 Tests that having stopped a transition before it completes, a subsequent

95 transition starts correctly.

96 </p>

97 <div id="target"></div>

98 <div id="result"></div>

99 </body>

100 </html>

OLD	NEW