transition_test.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. // Copyright 2011 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. goog.provide('goog.fx.css3.TransitionTest');
  15. goog.setTestOnly('goog.fx.css3.TransitionTest');
  16. goog.require('goog.dispose');
  17. goog.require('goog.dom');
  18. goog.require('goog.dom.TagName');
  19. goog.require('goog.events');
  20. goog.require('goog.fx.Transition');
  21. goog.require('goog.fx.css3.Transition');
  22. goog.require('goog.style.transition');
  23. goog.require('goog.testing.MockClock');
  24. goog.require('goog.testing.jsunit');
  25. goog.require('goog.testing.recordFunction');
  26. var transition;
  27. var element;
  28. var mockClock;
  29. function createTransition(element, duration) {
  30. return new goog.fx.css3.Transition(
  31. element, duration, {'opacity': 0}, {'opacity': 1},
  32. {property: 'opacity', duration: duration, timing: 'ease-in', delay: 0});
  33. }
  34. function setUp() {
  35. mockClock = new goog.testing.MockClock(true);
  36. element = goog.dom.createElement(goog.dom.TagName.DIV);
  37. document.body.appendChild(element);
  38. }
  39. function tearDown() {
  40. goog.dispose(transition);
  41. goog.dispose(mockClock);
  42. goog.dom.removeNode(element);
  43. }
  44. function testPlayEventFiredOnPlay() {
  45. if (!goog.style.transition.isSupported()) return;
  46. transition = createTransition(element, 10);
  47. var handlerCalled = false;
  48. goog.events.listen(transition, goog.fx.Transition.EventType.PLAY, function() {
  49. handlerCalled = true;
  50. });
  51. transition.play();
  52. assertTrue(handlerCalled);
  53. }
  54. function testBeginEventFiredOnPlay() {
  55. if (!goog.style.transition.isSupported()) return;
  56. transition = createTransition(element, 10);
  57. var handlerCalled = false;
  58. goog.events.listen(
  59. transition, goog.fx.Transition.EventType.BEGIN,
  60. function() { handlerCalled = true; });
  61. transition.play();
  62. assertTrue(handlerCalled);
  63. }
  64. function testFinishEventsFiredAfterFinish() {
  65. if (!goog.style.transition.isSupported()) return;
  66. transition = createTransition(element, 10);
  67. var finishHandlerCalled = false;
  68. var endHandlerCalled = false;
  69. goog.events.listen(
  70. transition, goog.fx.Transition.EventType.FINISH,
  71. function() { finishHandlerCalled = true; });
  72. goog.events.listen(transition, goog.fx.Transition.EventType.END, function() {
  73. endHandlerCalled = true;
  74. });
  75. transition.play();
  76. mockClock.tick(10000);
  77. assertTrue(finishHandlerCalled);
  78. assertTrue(endHandlerCalled);
  79. }
  80. function testEventsWhenTransitionIsUnsupported() {
  81. if (goog.style.transition.isSupported()) return;
  82. transition = createTransition(element, 10);
  83. var stopHandlerCalled = false;
  84. var finishHandlerCalled = false, endHandlerCalled = false;
  85. var beginHandlerCalled = false, playHandlerCalled = false;
  86. goog.events.listen(
  87. transition, goog.fx.Transition.EventType.BEGIN,
  88. function() { beginHandlerCalled = true; });
  89. goog.events.listen(transition, goog.fx.Transition.EventType.PLAY, function() {
  90. playHandlerCalled = true;
  91. });
  92. goog.events.listen(
  93. transition, goog.fx.Transition.EventType.FINISH,
  94. function() { finishHandlerCalled = true; });
  95. goog.events.listen(transition, goog.fx.Transition.EventType.END, function() {
  96. endHandlerCalled = true;
  97. });
  98. goog.events.listen(transition, goog.fx.Transition.EventType.STOP, function() {
  99. stopHandlerCalled = true;
  100. });
  101. assertFalse(transition.play());
  102. assertTrue(beginHandlerCalled);
  103. assertTrue(playHandlerCalled);
  104. assertTrue(endHandlerCalled);
  105. assertTrue(finishHandlerCalled);
  106. transition.stop();
  107. assertFalse(stopHandlerCalled);
  108. }
  109. function testCallingStopDuringAnimationWorks() {
  110. if (!goog.style.transition.isSupported()) return;
  111. transition = createTransition(element, 10);
  112. var stopHandler = goog.testing.recordFunction();
  113. var endHandler = goog.testing.recordFunction();
  114. var finishHandler = goog.testing.recordFunction();
  115. goog.events.listen(
  116. transition, goog.fx.Transition.EventType.STOP, stopHandler);
  117. goog.events.listen(transition, goog.fx.Transition.EventType.END, endHandler);
  118. goog.events.listen(
  119. transition, goog.fx.Transition.EventType.FINISH, finishHandler);
  120. transition.play();
  121. mockClock.tick(1);
  122. transition.stop();
  123. assertEquals(1, stopHandler.getCallCount());
  124. assertEquals(1, endHandler.getCallCount());
  125. mockClock.tick(10000);
  126. assertEquals(0, finishHandler.getCallCount());
  127. }
  128. function testCallingStopImmediatelyWorks() {
  129. if (!goog.style.transition.isSupported()) return;
  130. transition = createTransition(element, 10);
  131. var stopHandler = goog.testing.recordFunction();
  132. var endHandler = goog.testing.recordFunction();
  133. var finishHandler = goog.testing.recordFunction();
  134. goog.events.listen(
  135. transition, goog.fx.Transition.EventType.STOP, stopHandler);
  136. goog.events.listen(transition, goog.fx.Transition.EventType.END, endHandler);
  137. goog.events.listen(
  138. transition, goog.fx.Transition.EventType.FINISH, finishHandler);
  139. transition.play();
  140. transition.stop();
  141. assertEquals(1, stopHandler.getCallCount());
  142. assertEquals(1, endHandler.getCallCount());
  143. mockClock.tick(10000);
  144. assertEquals(0, finishHandler.getCallCount());
  145. }
  146. function testCallingStopAfterAnimationDoesNothing() {
  147. if (!goog.style.transition.isSupported()) return;
  148. transition = createTransition(element, 10);
  149. var stopHandler = goog.testing.recordFunction();
  150. var endHandler = goog.testing.recordFunction();
  151. var finishHandler = goog.testing.recordFunction();
  152. goog.events.listen(
  153. transition, goog.fx.Transition.EventType.STOP, stopHandler);
  154. goog.events.listen(transition, goog.fx.Transition.EventType.END, endHandler);
  155. goog.events.listen(
  156. transition, goog.fx.Transition.EventType.FINISH, finishHandler);
  157. transition.play();
  158. mockClock.tick(10000);
  159. transition.stop();
  160. assertEquals(0, stopHandler.getCallCount());
  161. assertEquals(1, endHandler.getCallCount());
  162. assertEquals(1, finishHandler.getCallCount());
  163. }