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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/transitions/transition-end-event-multiple-03.html

Issue 2602163002: CSS Transitions: Reduce time taken by transition-end-event tests (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:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/transitions/transition-end-event-multiple-02-expected.txt ('k') | third_party/WebKit/LayoutTests/transitions/transition-end-event-multiple-03-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <style> 3 <style>
4 .box { 4 .box {
5 position: relative; 5 position: relative;
6 left: 0; 6 left: 0;
7 height: 100px; 7 height: 100px;
8 width: 100px; 8 width: 100px;
9 margin: 10px; 9 margin: 10px;
10 background-color: blue; 10 background-color: blue;
11 -webkit-transition-property: width, left, background-color, height, top; 11 -webkit-transition-property: width, left, background-color, height, top;
12 -webkit-transition-duration: 0.5s; 12 -webkit-transition-duration: 0.05s;
13 } 13 }
14 14
15 .box1 { 15 .box1 {
16 left: 50px; 16 left: 50px;
17 } 17 }
18 18
19 .box2 { 19 .box2 {
20 background-color: red; 20 background-color: red;
21 left: 50px; 21 left: 50px;
22 } 22 }
23 23
24 .box3 { 24 .box3 {
25 width: 150px; 25 width: 150px;
26 background-color: green; 26 background-color: green;
27 left: 50px; 27 left: 50px;
28 height: 120px; 28 height: 120px;
29 -webkit-transition-duration: 0.6s; 29 -webkit-transition-duration: 0.06s;
30 } 30 }
31 31
32 .box4 { 32 .box4 {
33 left: 100px; 33 left: 100px;
34 height: 140px; 34 height: 140px;
35 -webkit-transition-duration: 0.3s; 35 -webkit-transition-duration: 0.03s;
36 } 36 }
37 37
38 .box5 { 38 .box5 {
39 /* nothing */ 39 /* nothing */
40 } 40 }
41 41
42 </style> 42 </style>
43 <script src="transition-end-event-helpers.js"></script> 43 <script src="transition-end-event-helpers.js"></script>
44 <script type="text/javascript"> 44 <script type="text/javascript">
45 45
46 var expectedEndEvents = [ 46 var expectedEndEvents = [
47 // [property-name, element-id, elapsed-time, listen] 47 // [property-name, element-id, elapsed-time, listen]
48 ["background-color", "box2", 0.5, false], 48 ["background-color", "box2", 0.05, false],
49 ["background-color", "box3", 0.6, false], 49 ["background-color", "box3", 0.06, false],
50 ["height", "box3", 0.6, false], 50 ["height", "box3", 0.06, false],
51 ["height", "box4", 0.3, false], 51 ["height", "box4", 0.03, false],
52 ["left", "box1", 0.5, false], 52 ["left", "box1", 0.05, false],
53 ["left", "box2", 0.5, false], 53 ["left", "box2", 0.05, false],
54 ["left", "box3", 0.6, false], 54 ["left", "box3", 0.06, false],
55 ["left", "box4", 0.3, false], 55 ["left", "box4", 0.03, false],
56 ["width", "box3", 0.6, false] 56 ["width", "box3", 0.06, false]
57 ]; 57 ];
58 58
59 function transitionElement(index) 59 function transitionElement(index)
60 { 60 {
61 var boxes = document.body.getElementsByClassName('box'); 61 var boxes = document.body.getElementsByClassName('box');
62 boxes[index-1].className = "box box" + index; 62 boxes[index-1].className = "box box" + index;
63 } 63 }
64 64
65 function setupTest() 65 function setupTest()
66 { 66 {
67 var boxes = document.body.getElementsByClassName('box'); 67 var boxes = document.body.getElementsByClassName('box');
68 for (var i = 0; i < boxes.length; ++i) { 68 for (var i = 0; i < boxes.length; ++i) {
69 boxes[i].addEventListener("webkitTransitionEnd", recordTransitionEndEven t, false); 69 boxes[i].addEventListener("webkitTransitionEnd", recordTransitionEndEven t, false);
70 } 70 }
71 71
72 window.setTimeout(function() { transitionElement(1); }, 100); 72 window.setTimeout(function() { transitionElement(1); }, 40);
73 window.setTimeout(function() { transitionElement(2); }, 150); 73 window.setTimeout(function() { transitionElement(2); }, 60);
74 window.setTimeout(function() { transitionElement(3); }, 200); 74 window.setTimeout(function() { transitionElement(3); }, 80);
75 window.setTimeout(function() { transitionElement(4); }, 50); 75 window.setTimeout(function() { transitionElement(4); }, 20);
76 window.setTimeout(function() { transitionElement(5); }, 150); 76 window.setTimeout(function() { transitionElement(5); }, 60);
77 } 77 }
78 78
79 runTransitionTest(expectedEndEvents, setupTest); 79 runTransitionTest(expectedEndEvents, setupTest);
80 </script> 80 </script>
81 </head> 81 </head>
82 <body> 82 <body>
83 83
84 <p>Initiating transitions on various properties of all boxes, with different sta rt times on the transitions.</p> 84 <p>Initiating transitions on various properties of all boxes, with different sta rt times on the transitions.</p>
85 85
86 <div id="container"> 86 <div id="container">
87 <div id="box1" class="box"></div> 87 <div id="box1" class="box"></div>
88 <div id="box2" class="box"></div> 88 <div id="box2" class="box"></div>
89 <div id="box3" class="box"></div> 89 <div id="box3" class="box"></div>
90 <div id="box4" class="box"></div> 90 <div id="box4" class="box"></div>
91 <div id="box5" class="box"></div> 91 <div id="box5" class="box"></div>
92 </div> 92 </div>
93 93
94 <div id="result"></div> 94 <div id="result"></div>
95 95
96 </body> 96 </body>
97 </html> 97 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/transitions/transition-end-event-multiple-02-expected.txt ('k') | third_party/WebKit/LayoutTests/transitions/transition-end-event-multiple-03-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698