diff --git a/packages/mdc-animation/README.md b/packages/mdc-animation/README.md index 23ce0ec33b7..69f91baa89f 100644 --- a/packages/mdc-animation/README.md +++ b/packages/mdc-animation/README.md @@ -95,12 +95,54 @@ Function | Description These functions handle prefixing across various browsers ```js -import {getCorrectEventName} from '@material/animation'; +import {getCorrectEventName, StandardJsEventType} from '@material/animation'; -const eventToListenFor = getCorrectEventName(window, 'animationstart'); +const eventToListenFor = getCorrectEventName(window, StandardJsEventType.ANIMATION_START); ``` Method Signature | Description --- | --- -`getCorrectEventName(windowObj, eventType)` | Returns a JavaScript event name, prefixed if necessary -`getCorrectPropertyName(windowObj, eventType)` | Returns a CSS property name, prefixed if necessary +`getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType \| PrefixedJsEventType` | Returns a JavaScript event name, prefixed if necessary +`getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) => StandardCssPropertyName \| PrefixedCssPropertyName` | Returns a CSS property name, prefixed if necessary + +#### `StandardCssPropertyName` + +Enum passed to and returned by `getCorrectPropertyName()`. + +Key | Value +--- | --- +`ANIMATION` | `animation` +`TRANSFORM` | `transform` +`TRANSITION` | `transition` + +#### `PrefixedCssPropertyName` + +Enum returned by `getCorrectPropertyName()`. + +Key | Value +--- | --- +`WEBKIT_ANIMATION` | `-webkit-animation` +`WEBKIT_TRANSFORM` | `-webkit-transform` +`WEBKIT_TRANSITION` | `-webkit-transition` + +#### `StandardJsEventType` + +Enum passed to and returned by `getCorrectEventName()`. + +Key | Value +--- | --- +`ANIMATION_END` | `animationend` +`ANIMATION_ITERATION` | `animationiteration` +`ANIMATION_START` | `animationstart` +`TRANSITION_END` | `transitionend` + +#### `PrefixedJsEventType` + +Enum returned by `getCorrectEventName()`. + +Key | Value +--- | --- +`WEBKIT_ANIMATION_END` | `webkitAnimationEnd` +`WEBKIT_ANIMATION_ITERATION` | `webkitAnimationIteration` +`WEBKIT_ANIMATION_START` | `webkitAnimationStart` +`WEBKIT_TRANSITION_END` | `webkitTransitionEnd` diff --git a/packages/mdc-animation/index.js b/packages/mdc-animation/index.js deleted file mode 100644 index eed63bb1854..00000000000 --- a/packages/mdc-animation/index.js +++ /dev/null @@ -1,149 +0,0 @@ -/** - * @license - * Copyright 2016 Google Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - */ - -/** - * @typedef {{ - * noPrefix: string, - * webkitPrefix: string, - * styleProperty: string - * }} - */ -let VendorPropertyMapType; - -/** @const {Object} */ -const eventTypeMap = { - 'animationstart': { - noPrefix: 'animationstart', - webkitPrefix: 'webkitAnimationStart', - styleProperty: 'animation', - }, - 'animationend': { - noPrefix: 'animationend', - webkitPrefix: 'webkitAnimationEnd', - styleProperty: 'animation', - }, - 'animationiteration': { - noPrefix: 'animationiteration', - webkitPrefix: 'webkitAnimationIteration', - styleProperty: 'animation', - }, - 'transitionend': { - noPrefix: 'transitionend', - webkitPrefix: 'webkitTransitionEnd', - styleProperty: 'transition', - }, -}; - -/** @const {Object} */ -const cssPropertyMap = { - 'animation': { - noPrefix: 'animation', - webkitPrefix: '-webkit-animation', - }, - 'transform': { - noPrefix: 'transform', - webkitPrefix: '-webkit-transform', - }, - 'transition': { - noPrefix: 'transition', - webkitPrefix: '-webkit-transition', - }, -}; - -/** - * @param {!Object} windowObj - * @return {boolean} - */ -function hasProperShape(windowObj) { - return (windowObj['document'] !== undefined && typeof windowObj['document']['createElement'] === 'function'); -} - -/** - * @param {string} eventType - * @return {boolean} - */ -function eventFoundInMaps(eventType) { - return (eventType in eventTypeMap || eventType in cssPropertyMap); -} - -/** - * @param {string} eventType - * @param {!Object} map - * @param {!Element} el - * @return {string} - */ -function getJavaScriptEventName(eventType, map, el) { - return map[eventType].styleProperty in el.style ? map[eventType].noPrefix : map[eventType].webkitPrefix; -} - -/** - * Helper function to determine browser prefix for CSS3 animation events - * and property names. - * @param {!Object} windowObj - * @param {string} eventType - * @return {string} - */ -function getAnimationName(windowObj, eventType) { - if (!hasProperShape(windowObj) || !eventFoundInMaps(eventType)) { - return eventType; - } - - const map = /** @type {!Object} */ ( - eventType in eventTypeMap ? eventTypeMap : cssPropertyMap - ); - const el = windowObj['document']['createElement']('div'); - let eventName = ''; - - if (map === eventTypeMap) { - eventName = getJavaScriptEventName(eventType, map, el); - } else { - eventName = map[eventType].noPrefix in el.style ? map[eventType].noPrefix : map[eventType].webkitPrefix; - } - - return eventName; -} - -// Public functions to access getAnimationName() for JavaScript events or CSS -// property names. - -const transformStyleProperties = ['transform', 'WebkitTransform', 'MozTransform', 'OTransform', 'MSTransform']; - -/** - * @param {!Object} windowObj - * @param {string} eventType - * @return {string} - */ -function getCorrectEventName(windowObj, eventType) { - return getAnimationName(windowObj, eventType); -} - -/** - * @param {!Object} windowObj - * @param {string} eventType - * @return {string} - */ -function getCorrectPropertyName(windowObj, eventType) { - return getAnimationName(windowObj, eventType); -} - -export {transformStyleProperties, getCorrectEventName, getCorrectPropertyName}; diff --git a/packages/mdc-animation/index.ts b/packages/mdc-animation/index.ts new file mode 100644 index 00000000000..9974272868f --- /dev/null +++ b/packages/mdc-animation/index.ts @@ -0,0 +1,154 @@ +/** + * @license + * Copyright 2016 Google Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +enum StandardCssPropertyName { + ANIMATION = 'animation', + TRANSFORM = 'transform', + TRANSITION = 'transition', +} + +enum PrefixedCssPropertyName { + WEBKIT_ANIMATION = '-webkit-animation', + WEBKIT_TRANSFORM = '-webkit-transform', + WEBKIT_TRANSITION = '-webkit-transition', +} + +enum StandardJsEventType { + ANIMATION_END = 'animationend', + ANIMATION_ITERATION = 'animationiteration', + ANIMATION_START = 'animationstart', + TRANSITION_END = 'transitionend', +} + +enum PrefixedJsEventType { + WEBKIT_ANIMATION_END = 'webkitAnimationEnd', + WEBKIT_ANIMATION_ITERATION = 'webkitAnimationIteration', + WEBKIT_ANIMATION_START = 'webkitAnimationStart', + WEBKIT_TRANSITION_END = 'webkitTransitionEnd', +} + +interface CssVendorPropertyMap { + [key: string]: CssVendorProperty; +} + +interface JsVendorPropertyMap { + [key: string]: JsVendorProperty; +} + +interface CssVendorProperty { + prefixed: PrefixedCssPropertyName; + standard: StandardCssPropertyName; +} + +interface JsVendorProperty { + cssProperty: StandardCssPropertyName; + prefixed: PrefixedJsEventType; + standard: StandardJsEventType; +} + +const transformStyleProperties = ['transform', 'WebkitTransform', 'MozTransform', 'OTransform', 'MSTransform']; + +// Destructure enum members to make their usages more readable. +const {WEBKIT_ANIMATION, WEBKIT_TRANSFORM, WEBKIT_TRANSITION} = PrefixedCssPropertyName; +const {ANIMATION, TRANSFORM, TRANSITION} = StandardCssPropertyName; +const { + WEBKIT_ANIMATION_END, + WEBKIT_ANIMATION_ITERATION, + WEBKIT_ANIMATION_START, + WEBKIT_TRANSITION_END, +} = PrefixedJsEventType; +const {ANIMATION_END, ANIMATION_ITERATION, ANIMATION_START, TRANSITION_END} = StandardJsEventType; + +const cssPropertyNameMap: CssVendorPropertyMap = { + [ANIMATION]: { + prefixed: WEBKIT_ANIMATION, + standard: ANIMATION, + }, + [TRANSFORM]: { + prefixed: WEBKIT_TRANSFORM, + standard: TRANSFORM, + }, + [TRANSITION]: { + prefixed: WEBKIT_TRANSITION, + standard: TRANSITION, + }, +}; + +const jsEventTypeMap: JsVendorPropertyMap = { + [ANIMATION_END]: { + cssProperty: ANIMATION, + prefixed: WEBKIT_ANIMATION_END, + standard: ANIMATION_END, + }, + [ANIMATION_ITERATION]: { + cssProperty: ANIMATION, + prefixed: WEBKIT_ANIMATION_ITERATION, + standard: ANIMATION_ITERATION, + }, + [ANIMATION_START]: { + cssProperty: ANIMATION, + prefixed: WEBKIT_ANIMATION_START, + standard: ANIMATION_START, + }, + [TRANSITION_END]: { + cssProperty: TRANSITION, + prefixed: WEBKIT_TRANSITION_END, + standard: TRANSITION_END, + }, +}; + +function isWindow(windowObj: Window): boolean { + return Boolean(windowObj.document) && typeof windowObj.document.createElement === 'function'; +} + +function getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName): + StandardCssPropertyName | PrefixedCssPropertyName { + if (isWindow(windowObj) && cssProperty in cssPropertyNameMap) { + const el = windowObj.document.createElement('div'); + const {standard, prefixed} = cssPropertyNameMap[cssProperty]; + const isStandard = standard in el.style; + return isStandard ? standard : prefixed; + } + return cssProperty; +} + +function getCorrectEventName(windowObj: Window, eventType: StandardJsEventType): + StandardJsEventType | PrefixedJsEventType { + if (isWindow(windowObj) && eventType in jsEventTypeMap) { + const el = windowObj.document.createElement('div'); + const {standard, prefixed, cssProperty} = jsEventTypeMap[eventType]; + const isStandard = cssProperty in el.style; + return isStandard ? standard : prefixed; + } + return eventType; +} + +export { + PrefixedCssPropertyName, + StandardCssPropertyName, + PrefixedJsEventType, + StandardJsEventType, + getCorrectEventName, + getCorrectPropertyName, + transformStyleProperties, +}; diff --git a/packages/mdc-checkbox/index.js b/packages/mdc-checkbox/index.js index c01a59fdf2c..211960d1914 100644 --- a/packages/mdc-checkbox/index.js +++ b/packages/mdc-checkbox/index.js @@ -21,7 +21,7 @@ * THE SOFTWARE. */ -import {getCorrectEventName} from '@material/animation/index'; +import {StandardJsEventType, getCorrectEventName} from '@material/animation/index.ts'; import MDCComponent from '@material/base/component'; /* eslint-disable no-unused-vars */ import {MDCSelectionControlState, MDCSelectionControl} from '@material/selection-control/index'; @@ -33,6 +33,8 @@ import {getMatchesProperty} from '@material/ripple/util'; /** @const {!Array} */ const CB_PROTO_PROPS = ['checked', 'indeterminate']; +const {ANIMATION_END} = StandardJsEventType; + /** * @extends MDCComponent * @implements {MDCSelectionControl} @@ -69,7 +71,7 @@ class MDCCheckbox extends MDCComponent { this.handleChange_ = () => this.foundation_.handleChange(); this.handleAnimationEnd_= () => this.foundation_.handleAnimationEnd(); this.nativeCb_.addEventListener('change', this.handleChange_); - this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_); + this.listen(getCorrectEventName(window, ANIMATION_END), this.handleAnimationEnd_); this.installPropertyChangeHooks_(); } @@ -191,7 +193,7 @@ class MDCCheckbox extends MDCComponent { destroy() { this.ripple_.destroy(); this.nativeCb_.removeEventListener('change', this.handleChange_); - this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_); + this.unlisten(getCorrectEventName(window, ANIMATION_END), this.handleAnimationEnd_); this.uninstallPropertyChangeHooks_(); super.destroy(); } diff --git a/packages/mdc-linear-progress/foundation.js b/packages/mdc-linear-progress/foundation.js index 6ea6815819f..bb502ac4afb 100644 --- a/packages/mdc-linear-progress/foundation.js +++ b/packages/mdc-linear-progress/foundation.js @@ -22,7 +22,7 @@ */ import MDCFoundation from '@material/base/foundation'; -import {transformStyleProperties} from '@material/animation/index'; +import {transformStyleProperties} from '@material/animation/index.ts'; import {cssClasses, strings} from './constants'; diff --git a/packages/mdc-slider/foundation.js b/packages/mdc-slider/foundation.js index f32b86e17c0..8e781236149 100644 --- a/packages/mdc-slider/foundation.js +++ b/packages/mdc-slider/foundation.js @@ -24,9 +24,13 @@ import {cssClasses, strings, numbers} from './constants'; import MDCSliderAdapter from './adapter'; -import {getCorrectEventName, getCorrectPropertyName} from '@material/animation/index'; +import {getCorrectEventName, getCorrectPropertyName} from '@material/animation/index.ts'; +import {StandardCssPropertyName, StandardJsEventType} from '@material/animation/index.ts'; import MDCFoundation from '@material/base/foundation'; +const {TRANSFORM} = StandardCssPropertyName; +const {TRANSITION_END} = StandardJsEventType; + /** @enum {string} */ const KEY_IDS = { ARROW_LEFT: 'ArrowLeft', @@ -185,8 +189,7 @@ class MDCSliderFoundation extends MDCFoundation { if (indivisible) { const lastStepRatio = (max - numMarkers * step) / step + 1; - const flex = getCorrectPropertyName(window, 'flex'); - this.adapter_.setLastTrackMarkersStyleProperty(flex, String(lastStepRatio)); + this.adapter_.setLastTrackMarkersStyleProperty('flex-grow', String(lastStepRatio)); } } } @@ -521,8 +524,8 @@ class MDCSliderFoundation extends MDCFoundation { translatePx = this.rect_.width - translatePx; } - const transformProp = getCorrectPropertyName(window, 'transform'); - const transitionendEvtName = getCorrectEventName(window, 'transitionend'); + const transformProp = getCorrectPropertyName(window, TRANSFORM); + const transitionendEvtName = getCorrectEventName(window, TRANSITION_END); if (this.inTransit_) { const onTransitionEnd = () => { diff --git a/packages/mdc-tabs/tab-bar-scroller/index.js b/packages/mdc-tabs/tab-bar-scroller/index.js index f4bf7885f95..edf6ab16447 100644 --- a/packages/mdc-tabs/tab-bar-scroller/index.js +++ b/packages/mdc-tabs/tab-bar-scroller/index.js @@ -21,7 +21,7 @@ * THE SOFTWARE. */ -import {getCorrectPropertyName} from '@material/animation/index'; +import {StandardCssPropertyName, getCorrectPropertyName} from '@material/animation/index.ts'; import MDCComponent from '@material/base/component'; import {MDCTabBar} from '../tab-bar/index'; @@ -29,6 +29,8 @@ import MDCTabBarScrollerFoundation from './foundation'; export {MDCTabBarScrollerFoundation}; +const {TRANSFORM} = StandardCssPropertyName; + export class MDCTabBarScroller extends MDCComponent { static attachTo(root) { return new MDCTabBarScroller(root); @@ -81,7 +83,7 @@ export class MDCTabBarScroller extends MDCComponent { setScrollLeftForScrollFrame: (scrollLeftAmount) => this.scrollFrame_.scrollLeft = scrollLeftAmount, getOffsetWidthForTabBar: () => this.tabBarEl_.offsetWidth, setTransformStyleForTabBar: (value) => { - this.tabBarEl_.style.setProperty(getCorrectPropertyName(window, 'transform'), value); + this.tabBarEl_.style.setProperty(getCorrectPropertyName(window, TRANSFORM), value); }, getOffsetLeftForEventTarget: (target) => target.offsetLeft, getOffsetWidthForEventTarget: (target) => target.offsetWidth, diff --git a/packages/mdc-tabs/tab-bar/foundation.js b/packages/mdc-tabs/tab-bar/foundation.js index 3e47fe5cdb2..d620a94cfd1 100644 --- a/packages/mdc-tabs/tab-bar/foundation.js +++ b/packages/mdc-tabs/tab-bar/foundation.js @@ -22,10 +22,12 @@ */ import MDCFoundation from '@material/base/foundation'; -import {getCorrectPropertyName} from '@material/animation/index'; +import {StandardCssPropertyName, getCorrectPropertyName} from '@material/animation/index.ts'; import {cssClasses, strings} from './constants'; +const {TRANSFORM} = StandardCssPropertyName; + export default class MDCTabBarFoundation extends MDCFoundation { static get cssClasses() { return cssClasses; @@ -105,7 +107,7 @@ export default class MDCTabBarFoundation extends MDCFoundation { this.adapter_.getComputedWidthForTabAtIndex(this.activeTabIndex_) / this.adapter_.getOffsetWidth(); const transformValue = `translateX(${translateAmtForActiveTabLeft}px) scale(${scaleAmtForActiveTabWidth}, 1)`; - this.adapter_.setStyleForIndicator(getCorrectPropertyName(window, 'transform'), transformValue); + this.adapter_.setStyleForIndicator(getCorrectPropertyName(window, TRANSFORM), transformValue); if (isIndicatorFirstRender) { // Force layout so that transform styles to take effect. diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js index 34101d3fcb7..a430efec045 100644 --- a/scripts/webpack/js-bundle-factory.js +++ b/scripts/webpack/js-bundle-factory.js @@ -152,7 +152,7 @@ class JsBundleFactory { return this.createCustomJs({ bundleName: 'main-js-a-la-carte', chunks: { - animation: getAbsolutePath('/packages/mdc-animation/index.js'), + animation: getAbsolutePath('/packages/mdc-animation/index.ts'), autoInit: getAbsolutePath('/packages/mdc-auto-init/index.js'), base: getAbsolutePath('/packages/mdc-base/index.ts'), checkbox: getAbsolutePath('/packages/mdc-checkbox/index.js'), diff --git a/test/unit/mdc-animation/mdc-animation.test.js b/test/unit/mdc-animation/mdc-animation.test.js index 2d9a84d59b1..c3ddc36728a 100644 --- a/test/unit/mdc-animation/mdc-animation.test.js +++ b/test/unit/mdc-animation/mdc-animation.test.js @@ -24,7 +24,25 @@ import {assert} from 'chai'; import td from 'testdouble'; -import {getCorrectPropertyName, getCorrectEventName} from '../../../packages/mdc-animation/index'; +import { + PrefixedCssPropertyName, + StandardCssPropertyName, + PrefixedJsEventType, + StandardJsEventType, + getCorrectPropertyName, + getCorrectEventName, +} from '../../../packages/mdc-animation/index.ts'; + +// Destructure enum members to make their usages more readable. +const {WEBKIT_ANIMATION, WEBKIT_TRANSFORM, WEBKIT_TRANSITION} = PrefixedCssPropertyName; +const {ANIMATION, TRANSFORM, TRANSITION} = StandardCssPropertyName; +const { + WEBKIT_ANIMATION_END, + WEBKIT_ANIMATION_ITERATION, + WEBKIT_ANIMATION_START, + WEBKIT_TRANSITION_END, +} = PrefixedJsEventType; +const {ANIMATION_END, ANIMATION_ITERATION, ANIMATION_START, TRANSITION_END} = StandardJsEventType; // Has no properties without a prefix const legacyWindowObj = td.object({ @@ -49,8 +67,8 @@ test('#getCorrectEventName does not prefix events when not necessary', () => { }); assert.equal( - getCorrectEventName(windowObj, 'animationstart'), - 'animationstart', + getCorrectEventName(windowObj, ANIMATION_START), + ANIMATION_START, 'no prefix' ); }); @@ -66,8 +84,8 @@ test('#getCorrectPropertyName does not prefix events when not necessary', () => }); assert.equal( - getCorrectPropertyName(windowObj, 'animation'), - 'animation', + getCorrectPropertyName(windowObj, ANIMATION), + ANIMATION, 'no prefix' ); }); @@ -76,8 +94,8 @@ test('#getCorrectEventName does not prefix events if window does not contain a D const windowObj = td.object({}); assert.equal( - getCorrectEventName(windowObj, 'animationstart'), - 'animationstart', + getCorrectEventName(windowObj, ANIMATION_START), + ANIMATION_START, 'no prefix' ); }); @@ -86,54 +104,54 @@ test('#getCorrectPropertyName does not prefix events if window does not contain const windowObj = td.object({}); assert.equal( - getCorrectPropertyName(windowObj, 'transition'), - 'transition', + getCorrectPropertyName(windowObj, TRANSITION), + TRANSITION, 'no prefix' ); }); test('#getCorrectPropertyName prefixes css properties when required', () => { assert.equal( - getCorrectPropertyName(legacyWindowObj, 'animation'), - '-webkit-animation', + getCorrectPropertyName(legacyWindowObj, ANIMATION), + WEBKIT_ANIMATION, 'added prefix' ); assert.equal( - getCorrectPropertyName(legacyWindowObj, 'transform'), - '-webkit-transform', + getCorrectPropertyName(legacyWindowObj, TRANSFORM), + WEBKIT_TRANSFORM, 'added prefix' ); assert.equal( - getCorrectPropertyName(legacyWindowObj, 'transition'), - '-webkit-transition', + getCorrectPropertyName(legacyWindowObj, TRANSITION), + WEBKIT_TRANSITION, 'added prefix' ); }); test('#getCorrectEventName prefixes javascript events when required', () => { assert.equal( - getCorrectEventName(legacyWindowObj, 'animationstart'), - 'webkitAnimationStart', + getCorrectEventName(legacyWindowObj, ANIMATION_START), + WEBKIT_ANIMATION_START, 'added prefix' ); assert.equal( - getCorrectEventName(legacyWindowObj, 'animationend'), - 'webkitAnimationEnd', + getCorrectEventName(legacyWindowObj, ANIMATION_END), + WEBKIT_ANIMATION_END, 'added prefix' ); assert.equal( - getCorrectEventName(legacyWindowObj, 'animationiteration'), - 'webkitAnimationIteration', + getCorrectEventName(legacyWindowObj, ANIMATION_ITERATION), + WEBKIT_ANIMATION_ITERATION, 'added prefix' ); assert.equal( - getCorrectEventName(legacyWindowObj, 'transitionend'), - 'webkitTransitionEnd', + getCorrectEventName(legacyWindowObj, TRANSITION_END), + WEBKIT_TRANSITION_END, 'added prefix' ); }); diff --git a/test/unit/mdc-slider/foundation-pointer-events.test.js b/test/unit/mdc-slider/foundation-pointer-events.test.js index 1a636c1a6f7..4247d747daa 100644 --- a/test/unit/mdc-slider/foundation-pointer-events.test.js +++ b/test/unit/mdc-slider/foundation-pointer-events.test.js @@ -24,14 +24,14 @@ import {assert} from 'chai'; import td from 'testdouble'; -import {getCorrectEventName} from '../../../packages/mdc-animation/index'; +import {StandardJsEventType, getCorrectEventName} from '../../../packages/mdc-animation/index.ts'; import {cssClasses} from '../../../packages/mdc-slider/constants'; import {TRANSFORM_PROP, setupEventTest as setupTest} from './helpers'; suite('MDCSliderFoundation - pointer events'); -const TRANSITION_END_EVT = getCorrectEventName(window, 'transitionend'); +const TRANSITION_END_EVT = getCorrectEventName(window, StandardJsEventType.TRANSITION_END); createTestSuiteForPointerEvents('mousedown', 'mousemove', 'mouseup'); createTestSuiteForPointerEvents('pointerdown', 'pointermove', 'pointerup'); diff --git a/test/unit/mdc-slider/foundation.test.js b/test/unit/mdc-slider/foundation.test.js index 7b7c40884cc..e14b014931a 100644 --- a/test/unit/mdc-slider/foundation.test.js +++ b/test/unit/mdc-slider/foundation.test.js @@ -24,7 +24,7 @@ import {assert} from 'chai'; import td from 'testdouble'; -import {getCorrectPropertyName} from '../../../packages/mdc-animation/index'; +import {StandardCssPropertyName, getCorrectPropertyName} from '../../../packages/mdc-animation/index.ts'; import {verifyDefaultAdapter} from '../helpers/foundation'; import {install as installClock} from '../helpers/clock'; import {setupFoundationTest} from '../helpers/setup'; @@ -34,7 +34,7 @@ import MDCSliderFoundation from '../../../packages/mdc-slider/foundation'; suite('MDCSliderFoundation'); -const TRANSFORM_PROP = getCorrectPropertyName(window, 'transform'); +const TRANSFORM_PROP = getCorrectPropertyName(window, StandardCssPropertyName.TRANSFORM); test('exports cssClasses', () => { assert.property(MDCSliderFoundation, 'cssClasses'); diff --git a/test/unit/mdc-slider/helpers.js b/test/unit/mdc-slider/helpers.js index 9155b60f33d..89288818f7d 100644 --- a/test/unit/mdc-slider/helpers.js +++ b/test/unit/mdc-slider/helpers.js @@ -21,14 +21,14 @@ * THE SOFTWARE. */ -import {getCorrectPropertyName} from '../../../packages/mdc-animation/index'; +import {StandardCssPropertyName, getCorrectPropertyName} from '../../../packages/mdc-animation/index.ts'; import {captureHandlers} from '../helpers/foundation'; import {install as installClock} from '../helpers/clock'; import {setupFoundationTest} from '../helpers/setup'; import MDCSliderFoundation from '../../../packages/mdc-slider/foundation'; -export const TRANSFORM_PROP = getCorrectPropertyName(window, 'transform'); +export const TRANSFORM_PROP = getCorrectPropertyName(window, StandardCssPropertyName.TRANSFORM); export function setupEventTest() { const {foundation, mockAdapter} = setupFoundationTest(MDCSliderFoundation);