@ionic/core 8.0.0-dev.11709245047.1565a499 → 8.0.0-dev.11711035263.183d2423

package/dist/collection/components/toggle/toggle.js

@@ -157,7 +157,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '3c0acc5498682a610e7a6f095590ad79391e1ba4', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '9ea705862e0a6c8c3250d19d6487ba5a312557f4', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -167,10 +167,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '68133afe76d290ebcb8f05883a27875529f0bfff', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'abd6aad2a3e62fbffb80d5c3dbdc57182bc97fab', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '8e70ddd2b4daada4bf16e85e56df9078116933f9', class: {
+            }) }, h("label", { key: '6347141bd48c42c10f358bdf95ee5c3e9719f7e7', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'a81935c322ccdec55723986bc69556833e057b7b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '0ab294895807335c63c9a31685d861a9f75f0129', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: 'eae25cdeefe1e6589f06b3a2568522e74cf44d66' })), h("div", { key: 'df9adddd1d8d73c8a23e1e91261d84c876ac5935', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '918de14911b5c1453ac1b817a92614d80fe81082' })), h("div", { key: 'f7f8b23c1de4eacdf912034286d51d88dde09699', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -349,7 +349,7 @@ export class Toggle {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "How to control the alignment of the toggle and label on the cross axis.\n``\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL."
+                    "text": "How to control the alignment of the toggle and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL."
                 },
                 "attribute": "alignment",
                 "reflect": false,

package/dist/collection/components/toolbar/toolbar.js

@@ -62,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'f72d6a7ed20c88ba15d64050acfc20f320569862', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'f11da98ce3398f95930cd6f5b95783a5b658e206', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: 'ccf18eea9756ca56ca828b05bd3f86cf8a32e24c', class: "toolbar-background" }), h("div", { key: '1fa699d8e17f57b42a52d47a1bdb793f2cbbfe5d', class: "toolbar-container" }, h("slot", { key: 'ef4d877bad0918eefdc67fa7aa258024a58d26ef', name: "start" }), h("slot", { key: '41858db7a8d58c9165952c9336731d621ec3c2b8', name: "secondary" }), h("div", { key: '577770b9346b48a0fa1412cbdbd9393d553d2286', class: "toolbar-content" }, h("slot", { key: 'ae47b29e1f7d2c3dde7a170c9737b48f075139c2' })), h("slot", { key: 'cfbf7879daf1a38fee434335abff936d8f3690e0', name: "primary" }), h("slot", { key: 'ed3a66248f43e0749f6aef9fb78ea4f5034c0774', name: "end" }))));
+            })) }, h("div", { key: '2e473c8bebf448f411ec1a579f0c81eb05310c56', class: "toolbar-background" }), h("div", { key: 'cf2d7c69bc028410338942aaea37527c570ccec5', class: "toolbar-container" }, h("slot", { key: '445cbd5299188eef4761c605b4a8d20a61079590', name: "start" }), h("slot", { key: '77675b5c0c0afffe5251ba271f5db23f87339859', name: "secondary" }), h("div", { key: '7d5967c4ad6c0fca7573aa48da707c8b0dfcd052', class: "toolbar-content" }, h("slot", { key: 'ad5530d63df9ca101760fb9f71e3641c66e95b6c' })), h("slot", { key: '35837ac1b7a4a59f000149d480900bc19015b258', name: "primary" }), h("slot", { key: '504904cf46e2190dd0a3aa5b7855b5fc54f73726', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/css/test/a11y/typography.e2e.js

@@ -31,7 +31,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
         });
     });
 });
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
     test.describe(title('typography: a11y'), () => {
         test('should not have accessibility violations for anchor tags', async ({ page }) => {
             /**

package/dist/collection/themes/test/colors/theme.e2e.js

@@ -50,7 +50,7 @@ const styleTestHelpers = `
  * 6) The base color as the text color against the base color at 0.12 opacity as the background color
  * 7) The base color as the text color against the base color at 0.16 opacity as the background color
  */
-configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ modes: ['md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
     const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
     test.describe(title('theme'), () => {
         test.beforeEach(({ skip }) => {
@@ -117,7 +117,7 @@ configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEa
         }
     });
 });
-configs({ modes: ['md'], directions: ['ltr'], themes: ['high-contrast', 'high-contrast-dark'] }).forEach(({ config, title }) => {
+configs({ modes: ['md'], directions: ['ltr'], palettes: ['high-contrast', 'high-contrast-dark'] }).forEach(({ config, title }) => {
     const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
     test.describe(title('theme'), () => {
         test.beforeEach(({ skip }) => {

package/dist/collection/utils/animation/animation-utils.js

@@ -2,36 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 let animationPrefix;
-/**
- * Web Animations requires hyphenated CSS properties
- * to be written in camelCase when animating
- */
-export const processKeyframes = (keyframes) => {
-    keyframes.forEach((keyframe) => {
-        for (const key in keyframe) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (keyframe.hasOwnProperty(key)) {
-                const value = keyframe[key];
-                if (key === 'easing') {
-                    const newKey = 'animation-timing-function';
-                    keyframe[newKey] = value;
-                    delete keyframe[key];
-                }
-                else {
-                    const newKey = convertCamelCaseToHypen(key);
-                    if (newKey !== key) {
-                        keyframe[newKey] = value;
-                        delete keyframe[key];
-                    }
-                }
-            }
-        }
-    });
-    return keyframes;
-};
-const convertCamelCaseToHypen = (str) => {
-    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-};
 export const getAnimationPrefix = (el) => {
     if (animationPrefix === undefined) {
         const supportsUnprefixed = el.style.animationName !== undefined;
@@ -44,78 +14,6 @@ export const setStyleProperty = (element, propertyName, value) => {
     const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
     element.style.setProperty(prefix + propertyName, value);
 };
-export const removeStyleProperty = (element, propertyName) => {
-    const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
-    element.style.removeProperty(prefix + propertyName);
-};
-export const animationEnd = (el, callback) => {
-    let unRegTrans;
-    const opts = { passive: true };
-    const unregister = () => {
-        if (unRegTrans) {
-            unRegTrans();
-        }
-    };
-    const onTransitionEnd = (ev) => {
-        if (el === ev.target) {
-            unregister();
-            callback(ev);
-        }
-    };
-    if (el) {
-        el.addEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-        el.addEventListener('animationend', onTransitionEnd, opts);
-        unRegTrans = () => {
-            el.removeEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-            el.removeEventListener('animationend', onTransitionEnd, opts);
-        };
-    }
-    return unregister;
-};
-// TODO(FW-2832): type
-export const generateKeyframeRules = (keyframes = []) => {
-    return keyframes
-        .map((keyframe) => {
-        const offset = keyframe.offset;
-        const frameString = [];
-        for (const property in keyframe) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (keyframe.hasOwnProperty(property) && property !== 'offset') {
-                frameString.push(`${property}: ${keyframe[property]};`);
-            }
-        }
-        return `${offset * 100}% { ${frameString.join(' ')} }`;
-    })
-        .join(' ');
-};
-const keyframeIds = [];
-export const generateKeyframeName = (keyframeRules) => {
-    let index = keyframeIds.indexOf(keyframeRules);
-    if (index < 0) {
-        index = keyframeIds.push(keyframeRules) - 1;
-    }
-    return `ion-animation-${index}`;
-};
-export const getStyleContainer = (element) => {
-    // getRootNode is not always available in SSR environments.
-    // TODO(FW-2832): types
-    const rootNode = element.getRootNode !== undefined ? element.getRootNode() : element;
-    return rootNode.head || rootNode;
-};
-export const createKeyframeStylesheet = (keyframeName, keyframeRules, element) => {
-    var _a;
-    const styleContainer = getStyleContainer(element);
-    const keyframePrefix = getAnimationPrefix(element);
-    const existingStylesheet = styleContainer.querySelector('#' + keyframeName);
-    if (existingStylesheet) {
-        return existingStylesheet;
-    }
-    const stylesheet = ((_a = element.ownerDocument) !== null && _a !== void 0 ? _a : document).createElement('style');
-    stylesheet.id = keyframeName;
-    stylesheet.textContent = `@${keyframePrefix}keyframes ${keyframeName} { ${keyframeRules} } @${keyframePrefix}keyframes ${keyframeName}-alt { ${keyframeRules} }`;
-    styleContainer.appendChild(stylesheet);
-    return stylesheet;
-};
 export const addClassToArray = (classes = [], className) => {
     if (className !== undefined) {
         const classNameToAppend = Array.isArray(className) ? className : [className];

package/dist/collection/utils/animation/animation.js

@@ -2,8 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { win } from "../browser";
-import { raf } from "../helpers";
-import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyframeName, generateKeyframeRules, processKeyframes, removeStyleProperty, setStyleProperty, } from "./animation-utils";
+import { addClassToArray, setStyleProperty } from "./animation-utils";
 export const createAnimation = (animationId) => {
     let _delay;
     let _duration;
@@ -30,7 +29,6 @@ export const createAnimation = (animationId) => {
     let willComplete = true;
     let finished = false;
     let shouldCalculateNumAnimations = true;
-    let keyframeName;
     let ani;
     let paused = false;
     const id = animationId;
@@ -47,10 +45,16 @@ export const createAnimation = (animationId) => {
     const webAnimations = [];
     const supportsAnimationEffect = typeof AnimationEffect === 'function' ||
         (win !== undefined && typeof win.AnimationEffect === 'function');
+    /**
+     * This is a feature detection for Web Animations.
+     *
+     * Certain environments such as emulated browser environments for testing,
+     * do not support Web Animations. As a result, we need to check for support
+     * and provide a fallback to test certain functionality related to Web Animations.
+     */
     const supportsWebAnimations = typeof Element === 'function' &&
         typeof Element.prototype.animate === 'function' &&
         supportsAnimationEffect;
-    const ANIMATION_END_FALLBACK_PADDING_MS = 100;
     const getWebAnimations = () => {
         return webAnimations;
     };
@@ -138,21 +142,6 @@ export const createAnimation = (animationId) => {
             });
             webAnimations.length = 0;
         }
-        else {
-            const elementsArray = elements.slice();
-            raf(() => {
-                elementsArray.forEach((element) => {
-                    removeStyleProperty(element, 'animation-name');
-                    removeStyleProperty(element, 'animation-duration');
-                    removeStyleProperty(element, 'animation-timing-function');
-                    removeStyleProperty(element, 'animation-iteration-count');
-                    removeStyleProperty(element, 'animation-delay');
-                    removeStyleProperty(element, 'animation-play-state');
-                    removeStyleProperty(element, 'animation-fill-mode');
-                    removeStyleProperty(element, 'animation-direction');
-                });
-            });
-        }
     };
     /**
      * Removes the animation's stylesheets
@@ -410,9 +399,6 @@ export const createAnimation = (animationId) => {
                 }
             });
         }
-        else {
-            initializeCSSAnimation();
-        }
     };
     /**
      * Run all "before" animation hooks.
@@ -498,32 +484,6 @@ export const createAnimation = (animationId) => {
             }
         }
     };
-    const initializeCSSAnimation = (toggleAnimationName = true) => {
-        cleanUpStyleSheets();
-        const processedKeyframes = processKeyframes(_keyframes);
-        elements.forEach((element) => {
-            if (processedKeyframes.length > 0) {
-                const keyframeRules = generateKeyframeRules(processedKeyframes);
-                keyframeName = animationId !== undefined ? animationId : generateKeyframeName(keyframeRules);
-                const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
-                stylesheets.push(stylesheet);
-                setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
-                setStyleProperty(element, 'animation-timing-function', getEasing());
-                setStyleProperty(element, 'animation-delay', `${getDelay()}ms`);
-                setStyleProperty(element, 'animation-fill-mode', getFill());
-                setStyleProperty(element, 'animation-direction', getDirection());
-                const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
-                setStyleProperty(element, 'animation-iteration-count', iterationsCount);
-                setStyleProperty(element, 'animation-play-state', 'paused');
-                if (toggleAnimationName) {
-                    setStyleProperty(element, 'animation-name', `${stylesheet.id}-alt`);
-                }
-                raf(() => {
-                    setStyleProperty(element, 'animation-name', stylesheet.id || null);
-                });
-            }
-        });
-    };
     const initializeWebAnimation = () => {
         elements.forEach((element) => {
             const animation = element.animate(_keyframes, {
@@ -544,15 +504,12 @@ export const createAnimation = (animationId) => {
             };
         }
     };
-    const initializeAnimation = (toggleAnimationName = true) => {
+    const initializeAnimation = () => {
         beforeAnimation();
         if (_keyframes.length > 0) {
             if (supportsWebAnimations) {
                 initializeWebAnimation();
             }
-            else {
-                initializeCSSAnimation(toggleAnimationName);
-            }
         }
         initialized = true;
     };
@@ -565,15 +522,6 @@ export const createAnimation = (animationId) => {
                 animation.pause();
             });
         }
-        else {
-            const animationDuration = `-${getDuration() * step}ms`;
-            elements.forEach((element) => {
-                if (_keyframes.length > 0) {
-                    setStyleProperty(element, 'animation-delay', animationDuration);
-                    setStyleProperty(element, 'animation-play-state', 'paused');
-                }
-            });
-        }
     };
     const updateWebAnimation = (step) => {
         webAnimations.forEach((animation) => {
@@ -590,26 +538,6 @@ export const createAnimation = (animationId) => {
             setAnimationStep(step);
         }
     };
-    const updateCSSAnimation = (toggleAnimationName = true, step) => {
-        raf(() => {
-            elements.forEach((element) => {
-                setStyleProperty(element, 'animation-name', keyframeName || null);
-                setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
-                setStyleProperty(element, 'animation-timing-function', getEasing());
-                setStyleProperty(element, 'animation-delay', step !== undefined ? `-${step * getDuration()}ms` : `${getDelay()}ms`);
-                setStyleProperty(element, 'animation-fill-mode', getFill() || null);
-                setStyleProperty(element, 'animation-direction', getDirection() || null);
-                const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
-                setStyleProperty(element, 'animation-iteration-count', iterationsCount);
-                if (toggleAnimationName) {
-                    setStyleProperty(element, 'animation-name', `${keyframeName}-alt`);
-                }
-                raf(() => {
-                    setStyleProperty(element, 'animation-name', keyframeName || null);
-                });
-            });
-        });
-    };
     const update = (deep = false, toggleAnimationName = true, step) => {
         if (deep) {
             childAnimations.forEach((animation) => {
@@ -619,9 +547,6 @@ export const createAnimation = (animationId) => {
         if (supportsWebAnimations) {
             updateWebAnimation(step);
         }
-        else {
-            updateCSSAnimation(toggleAnimationName, step);
-        }
         return ani;
     };
     const progressStart = (forceLinearEasing = false, step) => {
@@ -704,10 +629,6 @@ export const createAnimation = (animationId) => {
         pauseAnimation();
         return ani;
     };
-    const onAnimationEndFallback = () => {
-        cssAnimationsTimerFallback = undefined;
-        animationFinish();
-    };
     const clearCSSAnimationsTimeout = () => {
         if (cssAnimationsTimerFallback) {
             clearTimeout(cssAnimationsTimerFallback);
@@ -715,56 +636,7 @@ export const createAnimation = (animationId) => {
     };
     const playCSSAnimations = () => {
         clearCSSAnimationsTimeout();
-        raf(() => {
-            elements.forEach((element) => {
-                if (_keyframes.length > 0) {
-                    setStyleProperty(element, 'animation-play-state', 'running');
-                }
-            });
-        });
-        if (_keyframes.length === 0 || elements.length === 0) {
-            animationFinish();
-        }
-        else {
-            /**
-             * This is a catchall in the event that a CSS Animation did not finish.
-             * The Web Animations API has mechanisms in place for preventing this.
-             * CSS Animations will not fire an `animationend` event
-             * for elements with `display: none`. The Web Animations API
-             * accounts for this, but using raw CSS Animations requires
-             * this workaround.
-             */
-            const animationDelay = getDelay() || 0;
-            const animationDuration = getDuration() || 0;
-            const animationIterations = getIterations() || 1;
-            // No need to set a timeout when animation has infinite iterations
-            if (isFinite(animationIterations)) {
-                cssAnimationsTimerFallback = setTimeout(onAnimationEndFallback, animationDelay + animationDuration * animationIterations + ANIMATION_END_FALLBACK_PADDING_MS);
-            }
-            animationEnd(elements[0], () => {
-                clearCSSAnimationsTimeout();
-                /**
-                 * Ensure that clean up
-                 * is always done a frame
-                 * before the onFinish handlers
-                 * are fired. Otherwise, there
-                 * may be flickering if a new
-                 * animation is started on the same
-                 * element too quickly
-                 */
-                raf(() => {
-                    clearCSSAnimationPlayState();
-                    raf(animationFinish);
-                });
-            });
-        }
-    };
-    const clearCSSAnimationPlayState = () => {
-        elements.forEach((element) => {
-            removeStyleProperty(element, 'animation-duration');
-            removeStyleProperty(element, 'animation-delay');
-            removeStyleProperty(element, 'animation-play-state');
-        });
+        animationFinish();
     };
     const playWebAnimations = () => {
         webAnimations.forEach((animation) => {
@@ -779,9 +651,6 @@ export const createAnimation = (animationId) => {
             setAnimationStep(0);
             updateWebAnimation();
         }
-        else {
-            updateCSSAnimation();
-        }
     };
     const play = (opts) => {
         return new Promise((resolve) => {

package/dist/collection/utils/animation/test/animation.spec.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { createAnimation } from "../animation";
-import { processKeyframes } from "../animation-utils";
 import { getTimeGivenProgression } from "../cubic-bezier";
 describe('Animation Class', () => {
     describe('progressEnd callbacks', () => {
@@ -48,84 +47,6 @@ describe('Animation Class', () => {
             animation.play();
             expect(animation.isRunning()).toEqual(false);
         });
-        it('should be running', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            expect(animation.isRunning()).toEqual(true);
-        });
-        it('should not be running after finishing the animation', async () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            await animation.play();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should not be running after calling pause', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            expect(animation.isRunning()).toEqual(true);
-            animation.pause();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should not be running when doing progress steps', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            animation.progressStart();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should be running after calling progressEnd', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            animation.progressStart();
-            animation.progressEnd(1, 0);
-            expect(animation.isRunning()).toEqual(true);
-        });
-        it('should not be running after playing to beginning', async () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            await animation.play();
-            animation.progressStart();
-            animation.progressEnd(0, 0);
-            await new Promise((resolve) => {
-                animation.onFinish(() => {
-                    expect(animation.isRunning()).toEqual(false);
-                    resolve();
-                });
-            });
-        });
     });
     describe('addElement()', () => {
         let animation;
@@ -183,16 +104,6 @@ describe('Animation Class', () => {
             ]);
             expect(animation.getKeyframes().length).toEqual(3);
         });
-        it('should convert properties for CSS Animations', () => {
-            const processedKeyframes = processKeyframes([
-                { borderRadius: '0px', easing: 'ease-in', offset: 0 },
-                { borderRadius: '4px', easing: 'ease-out', offset: 1 },
-            ]);
-            expect(processedKeyframes).toEqual([
-                { 'border-radius': '0px', 'animation-timing-function': 'ease-in', offset: 0 },
-                { 'border-radius': '4px', 'animation-timing-function': 'ease-out', offset: 1 },
-            ]);
-        });
         it('should set the from keyframe properly', () => {
             animation.from('opacity', 0).from('background', 'red').from('color', 'purple');
             const keyframes = animation.getKeyframes();

package/dist/collection/utils/animation/test/animationbuilder/animation.e2e.js

@@ -12,10 +12,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.goto('/src/utils/animation/test/animationbuilder', config);
             await testNavigation(page);
         });
-        test('ios-transition css', async ({ page }) => {
-            await page.goto('/src/utils/animation/test/animationbuilder?ionic:_forceCSSAnimations=true', config);
-            await testNavigation(page);
-        });
     });
 });
 const testNavigation = async (page) => {

package/dist/collection/utils/animation/test/basic/animation.e2e.js

@@ -8,10 +8,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/basic', config);
             await testPage(page);
         });
-        test(`should resolve using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/basic?ionic:_forceCSSAnimations=true', config);
-            await testPage(page);
-        });
     });
 });
 const testPage = async (page) => {

package/dist/collection/utils/animation/test/display/animation.e2e.js

@@ -9,10 +9,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/display', config);
             await testDisplay(page);
         });
-        test(`should resolve using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/display?ionic:_forceCSSAnimations=true', config);
-            await testDisplay(page);
-        });
     });
 });
 const testDisplay = async (page) => {

package/dist/collection/utils/animation/test/hooks/animation.e2e.js

@@ -9,10 +9,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/hooks', config);
             await testHooks(page);
         });
-        test(`should fire hooks using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/hooks?ionic:_forceCSSAnimations=true', config);
-            await testHooks(page);
-        });
     });
 });
 const testHooks = async (page) => {

package/dist/collection/utils/animation/test/multiple/animation.e2e.js

@@ -9,13 +9,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/multiple', config);
             await testMultiple(page);
         });
-        /**
-         * CSS animations will occasionally resolve out of order, so we skip for now
-         */
-        test.skip(`should resolve grouped animations using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/multiple?ionic:_forceCSSAnimations=true', config);
-            await testMultiple(page);
-        });
     });
 });
 const testMultiple = async (page) => {