chromium/third_party/google-closure-library/closure/goog/style/transform_test.js

/**
 * @license
 * Copyright The Closure Library Authors.
 * SPDX-License-Identifier: Apache-2.0
 */

goog.module('goog.style.transformTest');
goog.setTestOnly();

const TagName = goog.require('goog.dom.TagName');
const dom = goog.require('goog.dom');
const isVersion = goog.require('goog.userAgent.product.isVersion');
const style = goog.require('goog.style');
const testSuite = goog.require('goog.testing.testSuite');
const transform = goog.require('goog.style.transform');
const userAgent = goog.require('goog.userAgent');

/**
 * Floating point equality tolerance.
 * @const {number}
 */
const EPSILON = .0001;

/**
 * Element being transformed.
 * @type {!Element}
 */
let element;

/**
 * Sets a transform translation and asserts the translation was applied.
 * @param {number} x The horizontal translation
 * @param {number} y The vertical translation
 */
const setAndAssertTranslation = (x, y) => {
  if (userAgent.GECKO ||
      userAgent.IE && !userAgent.isDocumentModeOrHigher(10)) {
    // Mozilla and <IE10 do not support CSSMatrix.
    return;
  }
  const success = transform.setTranslation(element, x, y);
  if (!transform.isSupported()) {
    assertFalse(success);
  } else {
    assertTrue(success);
    const translation = transform.getTranslation(element);
    assertEquals(x, translation.x);
    assertEquals(y, translation.y);
  }
};

/**
 * Sets a transform translation and asserts the translation was applied.
 * @param {number} x The horizontal scale
 * @param {number} y The vertical scale
 * @param {number} z The depth scale
 */
const setAndAssertScale = (x, y, z) => {
  if (userAgent.GECKO ||
      userAgent.IE && !userAgent.isDocumentModeOrHigher(10)) {
    // Mozilla and <IE10 do not support CSSMatrix.
    return;
  }
  const success = transform.setScale(element, x, y, z);
  if (!transform.isSupported()) {
    assertFalse(success);
  } else {
    assertTrue(success);
    const scale = transform.getScale(element);
    assertEquals(x, scale.x);
    assertEquals(y, scale.y);
    if (transform.is3dSupported()) {
      assertEquals(z, scale.z);
    }
  }
};

/**
 * Sets a transform rotation and asserts the translation was applied.
 * @param {number|function(number):boolean} expectedDegrees The expected
 *     resulting rotation in degrees, or a function to evaluate the resulting
 *     rotation.
 * @param {string=} opt_transform The plaintext CSS transform value.
 * @suppress {visibility} suppression added to enable type checking
 */
const setAndAssertRotation = (expectedDegrees, opt_transform) => {
  if (userAgent.GECKO ||
      userAgent.IE && !userAgent.isDocumentModeOrHigher(10)) {
    // Mozilla and <IE10 do not support CSSMatrix.
    return;
  }
  if (opt_transform) {
    style.setStyle(element, transform.getTransformProperty_(), opt_transform);
  } else {
    const success = transform.setRotation(element, Number(expectedDegrees));
    if (!transform.isSupported()) {
      assertFalse(success);
      return;
    } else {
      assertTrue(success);
    }
  }
  const rotation = transform.getRotation(element);
  if (expectedDegrees instanceof Function) {
    assertTrue(`Incorrect rotation: ${rotation}`, expectedDegrees(rotation));
  } else {
    assertRoughlyEquals(expectedDegrees, rotation, EPSILON);
  }
};

testSuite({
  setUp() {
    element = dom.createElement(TagName.DIV);
    dom.appendChild(dom.getDocument().body, element);
  },

  tearDown() {
    dom.removeNode(element);
  },

  testIsSupported() {
    if (userAgent.IE && !isVersion(9)) {
      assertFalse(transform.isSupported());
    } else {
      assertTrue(transform.isSupported());
    }
  },

  testIs3dSupported() {
    if (userAgent.GECKO && !isVersion(10) || (userAgent.IE && !isVersion(10))) {
      assertFalse(transform.is3dSupported());
    } else {
      assertTrue(transform.is3dSupported());
    }
  },

  testTranslateX() {
    setAndAssertTranslation(10, 0);
  },

  testTranslateY() {
    setAndAssertTranslation(0, 10);
  },

  testTranslateXY() {
    setAndAssertTranslation(10, 20);
  },

  testScaleX() {
    setAndAssertScale(5, 1, 1);
  },

  testScaleY() {
    setAndAssertScale(1, 3, 1);
  },

  testScaleZ() {
    setAndAssertScale(1, 1, 8);
  },

  testScale() {
    setAndAssertScale(2, 2, 2);
  },

  testRotatePositive() {
    setAndAssertRotation(90);
  },

  testRotateNegative() {
    setAndAssertRotation(-90);
  },

  testGetRotationWhenScaledUp() {
    setAndAssertRotation(90, 'scale(5) rotate3d(0,0,1,90deg)');
  },

  testGetRotationWhenScaledDown() {
    setAndAssertRotation(90, 'scale(.5) rotate3d(0,0,1,90deg)');
  },

  testGetRotationWithSkew() {
    setAndAssertRotation(0, 'skew(30deg, 30deg)');
    // NOTE: Non-zero rotations are not well-defined with a skew, but the lower
    // and upper bounds are. So check that the rotation is within these bounds.
    setAndAssertRotation((x) => x > 0 && x < 30, 'skew(0, 30deg)');
    setAndAssertRotation((x) => x < 0 && x > -30, 'skew(30deg, 0)');
  },
});