transition_test.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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.style.transitionTest');
  15. goog.setTestOnly('goog.style.transitionTest');
  16. goog.require('goog.style');
  17. goog.require('goog.style.transition');
  18. goog.require('goog.testing.jsunit');
  19. goog.require('goog.userAgent');
  20. /** Fake element. */
  21. var element;
  22. function setUp() {
  23. element = {'style': {}};
  24. }
  25. function getTransitionStyle(element) {
  26. return element.style['transition'] ||
  27. goog.style.getStyle(element, 'transition');
  28. }
  29. function testSetWithNoProperty() {
  30. try {
  31. goog.style.transition.set(element, []);
  32. } catch (e) {
  33. return;
  34. }
  35. fail('Should fail when no property is given.');
  36. }
  37. function testSetWithString() {
  38. goog.style.transition.set(element, 'opacity 1s ease-in 0.125s');
  39. assertEquals('opacity 1s ease-in 0.125s', getTransitionStyle(element));
  40. }
  41. function testSetWithSingleProperty() {
  42. goog.style.transition.set(
  43. element,
  44. {property: 'opacity', duration: 1, timing: 'ease-in', delay: 0.125});
  45. assertEquals('opacity 1s ease-in 0.125s', getTransitionStyle(element));
  46. }
  47. function testSetWithMultipleStrings() {
  48. goog.style.transition.set(
  49. element, ['width 1s ease-in', 'height 0.5s linear 1s']);
  50. assertEquals(
  51. 'width 1s ease-in,height 0.5s linear 1s', getTransitionStyle(element));
  52. }
  53. function testSetWithMultipleProperty() {
  54. goog.style.transition.set(element, [
  55. {property: 'width', duration: 1, timing: 'ease-in', delay: 0},
  56. {property: 'height', duration: 0.5, timing: 'linear', delay: 1}
  57. ]);
  58. assertEquals(
  59. 'width 1s ease-in 0s,height 0.5s linear 1s', getTransitionStyle(element));
  60. }
  61. function testRemoveAll() {
  62. goog.style.setStyle(element, 'transition', 'opacity 1s ease-in');
  63. goog.style.transition.removeAll(element);
  64. assertEquals('', getTransitionStyle(element));
  65. }
  66. function testAddAndRemoveOnRealElement() {
  67. if (!goog.style.transition.isSupported()) {
  68. return;
  69. }
  70. var div = document.getElementById('test');
  71. goog.style.transition.set(div, 'opacity 1s ease-in 125ms');
  72. assertEquals('opacity 1s ease-in 125ms', getTransitionStyle(div));
  73. goog.style.transition.removeAll(div);
  74. assertEquals('', getTransitionStyle(div));
  75. }
  76. function testSanityDetectionOfCss3Transition() {
  77. var support = goog.style.transition.isSupported();
  78. // IE support starts at IE10.
  79. if (goog.userAgent.IE) {
  80. assertEquals(goog.userAgent.isVersionOrHigher('10.0'), support);
  81. }
  82. // FF support start at FF4 (Gecko 2.0)
  83. if (goog.userAgent.GECKO) {
  84. assertEquals(goog.userAgent.isVersionOrHigher('2.0'), support);
  85. }
  86. // Webkit support has existed for a long time, we assume support on
  87. // most webkit version in used today.
  88. if (goog.userAgent.WEBKIT) {
  89. assertTrue(support);
  90. }
  91. }