third_party/WebKit/LayoutTests/transitions/extra-transition.html - Issue 2613663002: CSS Transitions: Fix flaky test extra-transition.html

Side by Side Diff: third_party/WebKit/LayoutTests/transitions/extra-transition.html

Issue 2613663002: CSS Transitions: Fix flaky test extra-transition.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/transitions/extra-transition-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 <html>

3 <head>	3 <head>

	4 <meta charset="utf-8">

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

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

4 <style>	7 <style>

5 body {	8 #features > li > #picture {

6 background: url('resources/Aurora.jpg');	9 transition-property: transform;

7 -webkit-background-size: 100% 100%;	10 transition-duration: 50ms;

8 font-family: "Lucida Grande";	11 transition-timing-function: ease-in;

9 height: 800px;	12 transform: scale(2);

10 }	13 }

11	14

12 #features {	15 #features > li.enabled > #picture {

13 position: relative;	16 transition-timing-function: ease-out;

14 width: 400px;	17 transform: scale(3);

15 list-style: none;

16 }	18 }

17	19

18 #features > li > .picture {	20 #features > li > #description {

19 -webkit-transition-property: transform;	21 transition-property: transform;

20 -webkit-transition-duration: 500ms;	22 transition-duration: 90ms;

21 -webkit-transition-timing-function: ease-in;	23 transition-timing-function: ease-in;

22 transform: rotate(-5deg);

23 opacity: 0.2;

24 border: 5px solid white;

25 background-color: gray;

26 position: absolute;

27 left: 20%;

28 width: 380px;

29 height: 180px;

30 top: 30px;

31 }	24 }

32	25

33 #features > li.enabled > .picture {	26 #features > li.enabled > #description {

34 -webkit-transition-timing-function: ease-out;	27 transform: translate3d(100px,0,0);

35 transform:rotate(10deg);

36 }

37

38 #features > li > .description {

39 -webkit-transition-property: transform;

40 -webkit-transition-duration: 560ms;

41 -webkit-transition-timing-function: ease-in;

42 line-height: 1.4em;

43 position: absolute;

44 background-color: black;

45 color: white;

46 margin: 10px;

47 padding: 10px;

48 border: 3px solid white;

49 -webkit-border-radius: 9px;

50 font-size: 16px;

51 left: 20%;

52 top: 330px;

53 width: 350px;

54 }

55

56 #features > li.enabled > .description {

57 transform:translate3d(100px,0,0);

58 }	28 }

59 </style>	29 </style>

60 <script>

61 if (window.testRunner) {

62 testRunner.waitUntilDone();

63 testRunner.dumpAsText();

64 }

65

66 function init()

67 {

68 document.getElementById("item").className = "enabled";

69 setTimeout(check, 1000);

70 }

71

72 function log(s)

73 {

74 var results = document.getElementById('results');

75 results.innerHTML += s + '<br>';

76 }

77

78 function check()

79 {

80 var transform = window.getComputedStyle(document.getElementById('descripti on')).transform;

81 if (transform == "matrix(1, 0, 0, 1, 100, 0)")

82 log('transform="'+transform+'" as expected: PASS');

83 else

84 log('transform="'+transform+'", expected "matrix(1, 0, 0, 1, 100, 0)": F AIL');

85

86 if (window.testRunner)

87 testRunner.notifyDone();

88 }

89 </script>

90 </head>	30 </head>

91 <body onload="init()">	31 <body>

92	32

93 <ul id="features">	33 <ul id="features">
	alancutter (OOO until 2018) 2017/01/04 05:33:04 features element unnecessary. features element unnecessary. Eric Willigers 2017/01/04 06:13:12 Done. Show quoted text On 2017/01/04 05:33:04, alancutter wrote: > features element unnecessary. Done.
94 <li id="item">	34 <li id="item">
	alancutter (OOO until 2018) 2017/01/04 05:33:04 No need for this to be a <li>. No need for this to be a <li>. Eric Willigers 2017/01/04 06:13:12 Acknowledged. Show quoted text On 2017/01/04 05:33:04, alancutter wrote: > No need for this to be a <li>. Acknowledged.
95 <div class="picture"></div>	35 <div id="picture"></div>

96 <div id="description" class="description">	36 <div id="description"></div>

97 <b>Spaces</b> lets you group your application windows and banish	37 </li>

98 clutter completely. Leopard gives you a space for everything and

99 makes it easy to switch between your spaces. Start by simply

100 clicking the Spaces icon in the Dock.

101 </div>

102 </li>

103 </ul>	38 </ul>

104 <div id="results"></div>	39 <script>

	40 'use strict';

	41 async_test(t => {

	42 description.addEventListener('transitionend', t.step_func_done(() => {

	43 assert_equals(getComputedStyle(picture).transform, 'matrix(3, 0, 0, 3, 0, 0)');

	44 assert_equals(getComputedStyle(description).transform, 'matrix(1, 0, 0, 1, 100, 0)');

	45 }));

	46

	47 document.body.offsetHeight;
	alancutter (OOO until 2018) 2017/01/04 05:33:04 Add comment explaining this line. Add comment explaining this line. Eric Willigers 2017/01/04 06:13:12 Done. Show quoted text On 2017/01/04 05:33:04, alancutter wrote: > Add comment explaining this line. Done.
	48 item.className = 'enabled';

	49 });

	50 </script>

105 </body>	51 </body>

106 </html>	52 </html>

OLD	NEW