Skip to content

Commit 4d04f4f

Browse files
gkalpakgkalpak
committed
test($animateCss): fix failing animation tests on MS Edge
Although the detected `vendorPrefix` for MS Edge is "ms", it doesn't seem to recognize some vendor-prefixed CSS rules (e.g. `-ms-animation-*`). Other browsers (currently) recognize either vendor-prefixed rules only or both. This commit fixes this issue by adding and retrieving styles using both prefixed and un-prefixed names.
1 parent 2b87d0e commit 4d04f4f

File tree

1 file changed

+64
-47
lines changed

1 file changed

+64
-47
lines changed

‎test/ngAnimate/animateCssSpec.js

+64-47
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ describe("ngAnimate $animateCss", function() {
1212
: expect(className).not.toMatch(regex);
1313
}
1414

15+
function getPossiblyPrefixedStyleValue(element, styleProp) {
16+
var value = element.css(prefix + styleProp);
17+
if (isUndefined(value)) value = element.css(styleProp);
18+
19+
return value;
20+
}
21+
1522
function keyframeProgress(element, duration, delay) {
1623
browserTrigger(element, 'animationend',
1724
{ timeStamp: Date.now() + ((delay || 1) * 1000), elapsedTime: duration });
@@ -31,6 +38,16 @@ describe("ngAnimate $animateCss", function() {
3138
return function($document, $sniffer, $$rAF, $animate) {
3239
prefix = '-' + $sniffer.vendorPrefix.toLowerCase() + '-';
3340
ss = createMockStyleSheet($document);
41+
ss.addPossiblyPrefixedRule = function(selector, styles) {
42+
var prefixedStyles = styles.split(/\s*;\s*/g).map(function(style) {
43+
return !style ? '' : prefix + style;
44+
}).join('; ');
45+
46+
ss.addRule(selector, styles);
47+
ss.addRule(selector, prefixedStyles);
48+
};
49+
50+
3451
$animate.enabled(true);
3552
triggerAnimationStartFrame = function() {
3653
$$rAF.flush();
@@ -325,7 +342,7 @@ describe("ngAnimate $animateCss", function() {
325342
triggerAnimationStartFrame();
326343

327344
runner.pause();
328-
expect(element.css(prefix + 'animation-play-state')).toEqual('paused');
345+
expect(getPossiblyPrefixedStyleValue(element, 'animation-play-state')).toEqual('paused');
329346
runner.resume();
330347
expect(element.attr('style')).toBeFalsy();
331348
}));
@@ -346,7 +363,7 @@ describe("ngAnimate $animateCss", function() {
346363
triggerAnimationStartFrame();
347364

348365
runner.pause();
349-
expect(element.css(prefix + 'animation-play-state')).toEqual('paused');
366+
expect(getPossiblyPrefixedStyleValue(element, 'animation-play-state')).toEqual('paused');
350367
runner.end();
351368
expect(element.attr('style')).toBeFalsy();
352369
}));
@@ -784,8 +801,8 @@ describe("ngAnimate $animateCss", function() {
784801

785802
jqLite($document[0].body).append($rootElement);
786803

787-
ss.addRule('.ng-enter-stagger', prefix + 'animation-delay:0.2s');
788-
ss.addRule('.ng-enter', prefix + 'animation:my_animation 2s;');
804+
ss.addPossiblyPrefixedRule('.ng-enter-stagger', 'animation-delay:0.2s');
805+
ss.addPossiblyPrefixedRule('.ng-enter', 'animation:my_animation 2s;');
789806

790807
var i, element, elements = [];
791808
for (i = 0; i < 5; i++) {
@@ -803,7 +820,7 @@ describe("ngAnimate $animateCss", function() {
803820
if (i === 0) { // the first element is always run right away
804821
expect(element.attr('style')).toBeFalsy();
805822
} else {
806-
expect(element.css(prefix + 'animation-play-state')).toBe('paused');
823+
expect(getPossiblyPrefixedStyleValue(element, 'animation-play-state')).toBe('paused');
807824
}
808825
}
809826
}));
@@ -879,7 +896,7 @@ describe("ngAnimate $animateCss", function() {
879896
jqLite($document[0].body).append($rootElement);
880897

881898
ss.addRule('.ng-enter-stagger', 'transition-delay:0.2s');
882-
ss.addRule('.transition-animation', prefix + 'animation:2s 5s my_animation;');
899+
ss.addPossiblyPrefixedRule('.transition-animation', 'animation: 2s 5s my_animation;');
883900

884901
for (var i = 0; i < 5; i++) {
885902
var elm = jqLite('<div class="transition-animation"></div>');
@@ -898,11 +915,11 @@ describe("ngAnimate $animateCss", function() {
898915

899916
jqLite($document[0].body).append($rootElement);
900917

901-
ss.addRule('.ng-enter-stagger', 'transition-delay:0.5s;' +
902-
prefix + 'animation-delay:1s');
918+
ss.addPossiblyPrefixedRule('.ng-enter-stagger', 'transition-delay: 0.5s; ' +
919+
'animation-delay: 1s');
903920

904-
ss.addRule('.ng-enter', 'transition:10s linear all;' +
905-
prefix + 'animation:my_animation 20s');
921+
ss.addPossiblyPrefixedRule('.ng-enter', 'transition: 10s linear all; ' +
922+
'animation: 20s my_animation');
906923

907924
var i, elm, elements = [];
908925
for (i = 0; i < 5; i++) {
@@ -1258,14 +1275,14 @@ describe("ngAnimate $animateCss", function() {
12581275
// At this point, the animation should still be running (closing timeout is 7500ms ... duration * 1.5 + delay => 7.5)
12591276
$timeout.flush(7000);
12601277

1261-
expect(element.css(prefix + 'transition-delay')).toBe('3s');
1262-
expect(element.css(prefix + 'transition-duration')).toBe('3s');
1278+
expect(getPossiblyPrefixedStyleValue(element, 'transition-delay')).toBe('3s');
1279+
expect(getPossiblyPrefixedStyleValue(element, 'transition-duration')).toBe('3s');
12631280

12641281
// Let's flush the remaining amount of time for the timeout timer to kick in
12651282
$timeout.flush(500);
12661283

1267-
expect(element.css(prefix + 'transition-duration')).toBeOneOf('', '0s');
1268-
expect(element.css(prefix + 'transition-delay')).toBeOneOf('', '0s');
1284+
expect(getPossiblyPrefixedStyleValue(element, 'transition-duration')).toBeOneOf('', '0s');
1285+
expect(getPossiblyPrefixedStyleValue(element, 'transition-delay')).toBeOneOf('', '0s');
12691286
}));
12701287

12711288
it("should ignore a boolean options.delay value for the closing timeout",
@@ -1291,14 +1308,14 @@ describe("ngAnimate $animateCss", function() {
12911308
// At this point, the animation should still be running (closing timeout is 4500ms ... duration * 1.5 => 4.5)
12921309
$timeout.flush(4000);
12931310

1294-
expect(element.css(prefix + 'transition-delay')).toBeOneOf('initial', '0s');
1295-
expect(element.css(prefix + 'transition-duration')).toBe('3s');
1311+
expect(getPossiblyPrefixedStyleValue(element, 'transition-delay')).toBeOneOf('initial', '0s');
1312+
expect(getPossiblyPrefixedStyleValue(element, 'transition-duration')).toBe('3s');
12961313

12971314
// Let's flush the remaining amount of time for the timeout timer to kick in
12981315
$timeout.flush(500);
12991316

1300-
expect(element.css(prefix + 'transition-duration')).toBeOneOf('', '0s');
1301-
expect(element.css(prefix + 'transition-delay')).toBeOneOf('', '0s');
1317+
expect(getPossiblyPrefixedStyleValue(element, 'transition-duration')).toBeOneOf('', '0s');
1318+
expect(getPossiblyPrefixedStyleValue(element, 'transition-delay')).toBeOneOf('', '0s');
13021319
}));
13031320

13041321
});
@@ -2104,7 +2121,7 @@ describe("ngAnimate $animateCss", function() {
21042121
triggerAnimationStartFrame();
21052122

21062123

2107-
expect(element.css(prefix + 'animation-duration')).toEqual('5s');
2124+
expect(getPossiblyPrefixedStyleValue(element, 'animation-duration')).toEqual('5s');
21082125
}));
21092126

21102127
it("should remove all inline keyframe styling when an animation completes if a custom duration was applied",
@@ -2145,7 +2162,7 @@ describe("ngAnimate $animateCss", function() {
21452162
triggerAnimationStartFrame();
21462163

21472164

2148-
expect(element.css(prefix + 'animation-delay')).toEqual('5s');
2165+
expect(getPossiblyPrefixedStyleValue(element, 'animation-delay')).toEqual('5s');
21492166

21502167
browserTrigger(element, 'animationend',
21512168
{ timeStamp: Date.now() + 5000, elapsedTime: 1.5 });
@@ -2299,7 +2316,7 @@ describe("ngAnimate $animateCss", function() {
22992316
triggerAnimationStartFrame();
23002317

23012318

2302-
expect(element.css(prefix + 'animation-delay')).toEqual('400s');
2319+
expect(getPossiblyPrefixedStyleValue(element, 'animation-delay')).toEqual('400s');
23032320
expect(element.attr('style')).not.toContain('transition-delay');
23042321
}));
23052322

@@ -2323,7 +2340,7 @@ describe("ngAnimate $animateCss", function() {
23232340
triggerAnimationStartFrame();
23242341

23252342

2326-
expect(element.css(prefix + 'animation-delay')).toEqual('10s');
2343+
expect(getPossiblyPrefixedStyleValue(element, 'animation-delay')).toEqual('10s');
23272344
expect(element.css('transition-delay')).toEqual('10s');
23282345
}));
23292346

@@ -2363,7 +2380,7 @@ describe("ngAnimate $animateCss", function() {
23632380
var assertionsRun = false;
23642381
classSpy = function() {
23652382
assertionsRun = true;
2366-
expect(element.css(prefix + 'animation-delay')).toEqual('2s');
2383+
expect(getPossiblyPrefixedStyleValue(element, 'animation-delay')).toEqual('2s');
23672384
expect(element.css('transition-delay')).toEqual('2s');
23682385
expect(element).not.toHaveClass('superman');
23692386
};
@@ -2397,8 +2414,8 @@ describe("ngAnimate $animateCss", function() {
23972414
it("should consider a negative value when delay:true is used with a keyframe animation",
23982415
inject(function($animateCss, $rootElement) {
23992416

2400-
ss.addRule('.ng-enter', prefix + 'animation:2s keyframe_animation; ' +
2401-
prefix + 'animation-delay: -1s;');
2417+
ss.addPossiblyPrefixedRule('.ng-enter', 'animation: 2s keyframe_animation; ' +
2418+
'animation-delay: -1s;');
24022419

24032420
var options = {
24042421
delay: true,
@@ -2411,7 +2428,7 @@ describe("ngAnimate $animateCss", function() {
24112428
animator.start();
24122429
triggerAnimationStartFrame();
24132430

2414-
expect(element.css(prefix + 'animation-delay')).toContain('-1s');
2431+
expect(getPossiblyPrefixedStyleValue(element, 'animation-delay')).toContain('-1s');
24152432
}));
24162433

24172434
they("should consider a negative value when a negative option delay is provided for a $prop animation", {
@@ -2421,17 +2438,17 @@ describe("ngAnimate $animateCss", function() {
24212438
css: 'transition:2s linear all'
24222439
};
24232440
},
2424-
'keyframe': function(prefix) {
2441+
'keyframe': function() {
24252442
return {
2426-
prop: prefix + 'animation-delay',
2427-
css: prefix + 'animation:2s keyframe_animation'
2443+
prop: 'animation-delay',
2444+
css: 'animation: 2s keyframe_animation'
24282445
};
24292446
}
24302447
}, function(testDetailsFactory) {
24312448
inject(function($animateCss, $rootElement) {
24322449
var testDetails = testDetailsFactory(prefix);
24332450

2434-
ss.addRule('.ng-enter', testDetails.css);
2451+
ss.addPossiblyPrefixedRule('.ng-enter', testDetails.css);
24352452
var options = {
24362453
delay: -2,
24372454
event: 'enter',
@@ -2443,7 +2460,7 @@ describe("ngAnimate $animateCss", function() {
24432460
animator.start();
24442461
triggerAnimationStartFrame();
24452462

2446-
expect(element.css(testDetails.prop)).toContain('-2s');
2463+
expect(getPossiblyPrefixedStyleValue(element, testDetails.prop)).toContain('-2s');
24472464
});
24482465
});
24492466

@@ -2454,18 +2471,18 @@ describe("ngAnimate $animateCss", function() {
24542471
css: 'transition:5s linear all; transition-delay: -2s'
24552472
};
24562473
},
2457-
'animation': function(prefix) {
2474+
'animation': function() {
24582475
return {
24592476
event: 'animationend',
2460-
css: prefix + 'animation:5s keyframe_animation; ' + prefix + 'animation-delay: -2s;'
2477+
css: 'animation: 5s keyframe_animation; animation-delay: -2s;'
24612478
};
24622479
}
24632480
}, function(testDetailsFactory) {
24642481
inject(function($animateCss, $rootElement) {
2465-
var testDetails = testDetailsFactory(prefix);
2482+
var testDetails = testDetailsFactory();
24662483
var event = testDetails.event;
24672484

2468-
ss.addRule('.ng-enter', testDetails.css);
2485+
ss.addPossiblyPrefixedRule('.ng-enter', testDetails.css);
24692486
var options = { event: 'enter', structural: true };
24702487

24712488
var animator = $animateCss(element, options);
@@ -2571,15 +2588,15 @@ describe("ngAnimate $animateCss", function() {
25712588
$animateCss(element, options).start();
25722589
triggerAnimationStartFrame();
25732590

2574-
expect(element.css(prefix + 'transition-delay')).not.toEqual('4s');
2575-
expect(element.css(prefix + 'transition-duration')).not.toEqual('6s');
2591+
expect(getPossiblyPrefixedStyleValue(element, 'transition-delay')).not.toEqual('4s');
2592+
expect(getPossiblyPrefixedStyleValue(element, 'transition-duration')).not.toEqual('6s');
25762593

25772594
options.to = { color: 'brown' };
25782595
$animateCss(element, options).start();
25792596
triggerAnimationStartFrame();
25802597

2581-
expect(element.css(prefix + 'transition-delay')).toEqual('4s');
2582-
expect(element.css(prefix + 'transition-duration')).toEqual('6s');
2598+
expect(getPossiblyPrefixedStyleValue(element, 'transition-delay')).toEqual('4s');
2599+
expect(getPossiblyPrefixedStyleValue(element, 'transition-duration')).toEqual('6s');
25832600
}));
25842601
});
25852602

@@ -2652,9 +2669,9 @@ describe("ngAnimate $animateCss", function() {
26522669
triggerAnimationStartFrame();
26532670

26542671

2655-
expect(element.css(prefix + 'animation-delay')).toEqual('50s');
2656-
expect(element.css(prefix + 'animation-duration')).toEqual('5.5s');
2657-
expect(element.css(prefix + 'animation-name')).toEqual('my_animation');
2672+
expect(getPossiblyPrefixedStyleValue(element, 'animation-delay')).toEqual('50s');
2673+
expect(getPossiblyPrefixedStyleValue(element, 'animation-duration')).toEqual('5.5s');
2674+
expect(getPossiblyPrefixedStyleValue(element, 'animation-name')).toEqual('my_animation');
26582675
}));
26592676

26602677
it("should be able to execute the animation if it is the only provided value",
@@ -2669,9 +2686,9 @@ describe("ngAnimate $animateCss", function() {
26692686
animator.start();
26702687
triggerAnimationStartFrame();
26712688

2672-
expect(element.css(prefix + 'animation-delay')).toEqual('10s');
2673-
expect(element.css(prefix + 'animation-duration')).toEqual('5.5s');
2674-
expect(element.css(prefix + 'animation-name')).toEqual('my_animation');
2689+
expect(getPossiblyPrefixedStyleValue(element, 'animation-delay')).toEqual('10s');
2690+
expect(getPossiblyPrefixedStyleValue(element, 'animation-duration')).toEqual('5.5s');
2691+
expect(getPossiblyPrefixedStyleValue(element, 'animation-name')).toEqual('my_animation');
26752692
}));
26762693
});
26772694

@@ -2964,7 +2981,7 @@ describe("ngAnimate $animateCss", function() {
29642981

29652982

29662983
expect(element.css('transition-duration')).toMatch('10s');
2967-
expect(element.css(prefix + 'animation-duration')).toEqual('10s');
2984+
expect(getPossiblyPrefixedStyleValue(element, 'animation-duration')).toEqual('10s');
29682985
}));
29692986
});
29702987

@@ -3004,7 +3021,7 @@ describe("ngAnimate $animateCss", function() {
30043021
inject(function($animateCss) {
30053022

30063023
ss.addRule('.red', 'transition: 1s linear all;');
3007-
ss.addRule('.blue', prefix + 'animation:my_keyframe 1s;');
3024+
ss.addPossiblyPrefixedRule('.blue', 'animation: 1s my_keyframe;');
30083025
var easing = 'ease-out';
30093026
var animator = $animateCss(element, { addClass: 'red blue', easing: easing });
30103027
animator.start();

0 commit comments

Comments
 (0)