transform_test.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. // Copyright 2014 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.transformTest');
  15. goog.setTestOnly('goog.style.transformTest');
  16. goog.require('goog.dom');
  17. goog.require('goog.dom.TagName');
  18. goog.require('goog.style');
  19. goog.require('goog.style.transform');
  20. goog.require('goog.testing.jsunit');
  21. goog.require('goog.userAgent');
  22. goog.require('goog.userAgent.product.isVersion');
  23. /**
  24. * Floating point equality tolerance.
  25. * @const {number}
  26. */
  27. var EPSILON = .0001;
  28. /**
  29. * Element being transformed.
  30. * @type {!Element}
  31. */
  32. var element;
  33. /**
  34. * Sets a transform translation and asserts the translation was applied.
  35. * @param {number} x The horizontal translation
  36. * @param {number} y The vertical translation
  37. */
  38. var setAndAssertTranslation = function(x, y) {
  39. if (goog.userAgent.GECKO ||
  40. goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(10)) {
  41. // Mozilla and <IE10 do not support CSSMatrix.
  42. return;
  43. }
  44. var success = goog.style.transform.setTranslation(element, x, y);
  45. if (!goog.style.transform.isSupported()) {
  46. assertFalse(success);
  47. } else {
  48. assertTrue(success);
  49. var translation = goog.style.transform.getTranslation(element);
  50. assertEquals(x, translation.x);
  51. assertEquals(y, translation.y);
  52. }
  53. };
  54. /**
  55. * Sets a transform translation and asserts the translation was applied.
  56. * @param {number} x The horizontal scale
  57. * @param {number} y The vertical scale
  58. * @param {number} z The depth scale
  59. */
  60. var setAndAssertScale = function(x, y, z) {
  61. if (goog.userAgent.GECKO ||
  62. goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(10)) {
  63. // Mozilla and <IE10 do not support CSSMatrix.
  64. return;
  65. }
  66. var success = goog.style.transform.setScale(element, x, y, z);
  67. if (!goog.style.transform.isSupported()) {
  68. assertFalse(success);
  69. } else {
  70. assertTrue(success);
  71. var scale = goog.style.transform.getScale(element);
  72. assertEquals(x, scale.x);
  73. assertEquals(y, scale.y);
  74. if (goog.style.transform.is3dSupported()) {
  75. assertEquals(z, scale.z);
  76. }
  77. }
  78. };
  79. /**
  80. * Sets a transform rotation and asserts the translation was applied.
  81. * @param {number|function(number):boolean} expectedDegrees
  82. * The expected resulting rotation in degrees, or a function to evaluate
  83. * the resulting rotation.
  84. * @param {string=} opt_transform The plaintext CSS transform value.
  85. */
  86. var setAndAssertRotation = function(expectedDegrees, opt_transform) {
  87. if (goog.userAgent.GECKO ||
  88. goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(10)) {
  89. // Mozilla and <IE10 do not support CSSMatrix.
  90. return;
  91. }
  92. if (opt_transform) {
  93. goog.style.setStyle(
  94. element, goog.style.transform.getTransformProperty_(), opt_transform);
  95. } else {
  96. var success =
  97. goog.style.transform.setRotation(element, Number(expectedDegrees));
  98. if (!goog.style.transform.isSupported()) {
  99. assertFalse(success);
  100. return;
  101. } else {
  102. assertTrue(success);
  103. }
  104. }
  105. var rotation = goog.style.transform.getRotation(element);
  106. if (expectedDegrees instanceof Function) {
  107. assertTrue('Incorrect rotation: ' + rotation, expectedDegrees(rotation));
  108. } else {
  109. assertRoughlyEquals(expectedDegrees, rotation, EPSILON);
  110. }
  111. };
  112. function setUp() {
  113. element = goog.dom.createElement(goog.dom.TagName.DIV);
  114. goog.dom.appendChild(goog.dom.getDocument().body, element);
  115. }
  116. function tearDown() {
  117. goog.dom.removeNode(element);
  118. }
  119. function testIsSupported() {
  120. if (goog.userAgent.IE && !goog.userAgent.product.isVersion(9)) {
  121. assertFalse(goog.style.transform.isSupported());
  122. } else {
  123. assertTrue(goog.style.transform.isSupported());
  124. }
  125. }
  126. function testIs3dSupported() {
  127. if (goog.userAgent.GECKO && !goog.userAgent.product.isVersion(10) ||
  128. (goog.userAgent.IE && !goog.userAgent.product.isVersion(10))) {
  129. assertFalse(goog.style.transform.is3dSupported());
  130. } else {
  131. assertTrue(goog.style.transform.is3dSupported());
  132. }
  133. }
  134. function testTranslateX() {
  135. setAndAssertTranslation(10, 0);
  136. }
  137. function testTranslateY() {
  138. setAndAssertTranslation(0, 10);
  139. }
  140. function testTranslateXY() {
  141. setAndAssertTranslation(10, 20);
  142. }
  143. function testScaleX() {
  144. setAndAssertScale(5, 1, 1);
  145. }
  146. function testScaleY() {
  147. setAndAssertScale(1, 3, 1);
  148. }
  149. function testScaleZ() {
  150. setAndAssertScale(1, 1, 8);
  151. }
  152. function testScale() {
  153. setAndAssertScale(2, 2, 2);
  154. }
  155. function testRotatePositive() {
  156. setAndAssertRotation(90);
  157. }
  158. function testRotateNegative() {
  159. setAndAssertRotation(-90);
  160. }
  161. function testGetRotationWhenScaledUp() {
  162. setAndAssertRotation(90, 'scale(5) rotate3d(0,0,1,90deg)');
  163. }
  164. function testGetRotationWhenScaledDown() {
  165. setAndAssertRotation(90, 'scale(.5) rotate3d(0,0,1,90deg)');
  166. }
  167. function testGetRotationWithSkew() {
  168. setAndAssertRotation(0, 'skew(30deg, 30deg)');
  169. // NOTE: Non-zero rotations are not well-defined with a skew, but the lower
  170. // and upper bounds are. So check that the rotation is within these bounds.
  171. setAndAssertRotation(function(x) {
  172. return (x > 0 && x < 30);
  173. }, 'skew(0, 30deg)');
  174. setAndAssertRotation(function(x) {
  175. return (x < 0 && x > -30);
  176. }, 'skew(30deg, 0)');
  177. }