Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(178)

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2108093002: Animations: Reduce flakiness of transitions/cancel-and-start-new.html (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: checks transitions start and stop Created 4 years, 5 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:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2
3 <html> 2 <html>
4 <head> 3 <head>
5 <style> 4 <style>
6 #target { 5 #target {
7 position: relative; 6 position: relative;
8 background-color: #933; 7 background-color: #933;
9 width: 50px; 8 width: 50px;
10 height: 50px; 9 height: 50px;
11 top: 0px; 10 top: 0px;
12 left: 0px; 11 left: 0px;
13 } 12 }
14 #target.transition-top { 13 #target.transition-top {
15 top: 400px; 14 top: 400px;
16 -webkit-transition: top 100ms linear; 15 transition: top 2000ms linear;
17 transition: top 100ms linear;
18 } 16 }
19 #target.transition-left { 17 #target.transition-left {
20 left: 400px; 18 left: 400px;
21 -webkit-transition: left 100ms linear; 19 transition: left 2000ms linear;
22 transition: left 100ms linear;
23 } 20 }
24 </style> 21 </style>
25 <script> 22 <script>
26 if (window.testRunner) { 23 if (window.testRunner) {
27 testRunner.dumpAsText(); 24 testRunner.dumpAsText();
28 testRunner.waitUntilDone(); 25 testRunner.waitUntilDone();
29 } 26 }
30 27
28 function fail(message) {
29 var result = "<span style='color:red'>" + message + "</span>";
30 document.getElementById('result').innerHTML = result;
31 if (window.testRunner)
32 testRunner.notifyDone();
33 }
34
35 function success() {
36 var result = "<span style='color:green'>PASS</span>";
37 document.getElementById('result').innerHTML = result;
38 if (window.testRunner)
39 testRunner.notifyDone();
40 }
41
31 function isEqual(actual, desired, tolerance) 42 function isEqual(actual, desired, tolerance)
32 { 43 {
33 var diff = Math.abs(actual - desired); 44 var diff = Math.abs(actual - desired);
34 return diff < tolerance; 45 return diff < tolerance;
35 } 46 }
36 47
48 function start()
49 {
50 document.getElementById("target").classList.add('transition-top');
51 internals.pauseAnimations(1);
52 cancelTransition();
53 }
54
37 function cancelTransition() 55 function cancelTransition()
38 { 56 {
39 document.getElementById("target").classList.remove('transition-top') ; 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 }
40 } 65 }
41 66
42 function startNewTransition() 67 function startNewTransition()
43 { 68 {
44 document.getElementById("target").classList.add('transition-left'); 69 var top = parseFloat(window.getComputedStyle(document.getElementById ('target')).top);
45 setTimeout(check, 50); 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 }
46 } 77 }
47 78
48 function check() 79 function check()
49 { 80 {
50 var left = parseFloat(window.getComputedStyle(document.getElementByI d('target')).left); 81 var left = parseFloat(window.getComputedStyle(document.getElementByI d('target')).left);
51 if (isEqual(left, 200, 50)) 82 if (isEqual(left, 200, 1)) {
52 var result = "<span style='color:green'>PASS</span>"; 83 success();
53 else 84 } else {
54 var result = "<span style='color:red'>FAIL(was: " + left + ", ex pected: 200)</span>"; 85 fail('left was: ' + left + ', expected: 200');
55 document.getElementById('result').innerHTML = result; 86 }
56 if (window.testRunner)
57 testRunner.notifyDone();
58 } 87 }
59 88
60 function start() 89 window.onload = start;
61 {
62 document.getElementById("target").classList.add('transition-top');
63 setTimeout("cancelTransition()", 50);
64 setTimeout("startNewTransition()", 100);
65 }
66 </script> 90 </script>
67 </head> 91 </head>
68 <body onload="start()"> 92 <body>
69 <p> 93 <p>
70 Tests that having stopped a transition before it completes, a subsequent 94 Tests that having stopped a transition before it completes, a subsequent
71 transition starts correctly. 95 transition starts correctly.
72 </p> 96 </p>
73 <div id="target"></div> 97 <div id="target"></div>
74 <div id="result"></div> 98 <div id="result"></div>
75 </body> 99 </body>
76 </html> 100 </html>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698