Skip to content

Commit 2a5481e

Browse files
markdalgleishmarkdalgleish
committed
Make transform tests pass cross-browser
1 parent c02712a commit 2a5481e

File tree

1 file changed

+31
-23
lines changed

1 file changed

+31
-23
lines changed

‎test/jquery.stellar_test.js

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,24 @@
2424

2525
var helpers = {
2626
vendorPrefix: (function() {
27-
var ua = navigator.userAgent,
28-
prefix = '';
27+
var prefixes = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/,
28+
style = document.getElementsByTagName('script')[0].style,
29+
prefix = '',
30+
prop;
2931

30-
if (/WebKit/.test(ua)) {
31-
prefix = '-webkit-';
32-
} else if (/Firefox/.test(ua)) {
33-
prefix = '-moz-';
34-
} else if (window.opera) {
35-
prefix = '-o-';
36-
} else if (/MSIE/.test(ua)) {
37-
prefix = '-ms-';
32+
for (prop in style) {
33+
if (prefixes.test(prop)) {
34+
prefix = prop.match(prefixes)[0];
35+
break;
36+
}
3837
}
3938

40-
return prefix;
39+
if ('WebkitOpacity' in style) { prefix = 'Webkit'; }
40+
if ('KhtmlOpacity' in style) { prefix = 'Khtml'; }
41+
42+
return function(property) {
43+
return prefix + (prefix.length > 0 ? property.charAt(0).toUpperCase() + property.slice(1) : property);
44+
};
4145
}())
4246
};
4347

@@ -437,15 +441,17 @@
437441
var $elem = $('#scroll-property-transform-scroller').stellar('destroy').stellar({
438442
hideDistantElements: false,
439443
scrollProperty: 'transform'
440-
}).css(helpers.vendorPrefix + 'transform', 'translateY(-20px)');
444+
});
445+
446+
$elem[0].style[helpers.vendorPrefix('transform')] = 'translateY(-20px)';
441447

442448
setTimeout(function() {
443449
strictEqual($('#scroll-property-transform .ratio--1').css('top'), '40px', 'should support negative ratios');
444450
strictEqual($('#scroll-property-transform .ratio-0-5').css('top'), '10px', 'should support ratios between 0 and 1');
445451
strictEqual($('#scroll-property-transform .ratio-1').css('top'), '0px', 'should support ratios of 1');
446452
strictEqual($('#scroll-property-transform .ratio-2').css('top'), '-20px', 'should support ratios greater than 1');
447453

448-
$elem.stellar('destroy').css(helpers.vendorPrefix + 'transform', '');
454+
$elem.stellar('destroy')[0].style[helpers.vendorPrefix('transform')] = 'none';
449455
start();
450456
}, 20);
451457
});
@@ -454,15 +460,17 @@
454460
var $elem = $('#scroll-property-transform-scroller').stellar('destroy').stellar({
455461
hideDistantElements: false,
456462
scrollProperty: 'transform'
457-
}).css(helpers.vendorPrefix + 'transform', 'translateX(-20px)');
463+
});
464+
465+
$elem[0].style[helpers.vendorPrefix('transform')] = 'translateX(-20px)';
458466

459467
setTimeout(function() {
460468
strictEqual($('#scroll-property-transform .ratio--1').css('left'), '40px', 'should support negative ratios');
461469
strictEqual($('#scroll-property-transform .ratio-0-5').css('left'), '10px', 'should support ratios between 0 and 1');
462470
strictEqual($('#scroll-property-transform .ratio-1').css('left'), '0px', 'should support ratios of 1');
463471
strictEqual($('#scroll-property-transform .ratio-2').css('left'), '-20px', 'should support ratios greater than 1');
464472

465-
$elem.stellar('destroy').css(helpers.vendorPrefix + 'transform', '');
473+
$elem.stellar('destroy')[0].style[helpers.vendorPrefix('transform')] = 'none';
466474
start();
467475
}, 20);
468476
});
@@ -476,10 +484,10 @@
476484
}).scrollTop(20).scrollLeft(0);
477485

478486
setTimeout(function() {
479-
strictEqual($('#position-absolute .ratio--1').css(helpers.vendorPrefix + 'transform').substr(22,2), '40', 'should support negative ratios');
480-
strictEqual($('#position-absolute .ratio-0-5').css(helpers.vendorPrefix + 'transform').substr(22,2), '10', 'should support ratios between 0 and 1');
481-
strictEqual($('#position-absolute .ratio-1').css(helpers.vendorPrefix + 'transform').substr(22,1), '0', 'should support ratios of 1');
482-
strictEqual($('#position-absolute .ratio-2').css(helpers.vendorPrefix + 'transform').substr(22,3), '-20', 'should support ratios greater than 1');
487+
strictEqual(getComputedStyle($('#position-absolute .ratio--1')[0])[helpers.vendorPrefix('transform')].match(/(-?[0-9]+)/g)[5], '40', 'should support negative ratios');
488+
strictEqual(getComputedStyle($('#position-absolute .ratio-0-5')[0])[helpers.vendorPrefix('transform')].match(/(-?[0-9]+)/g)[5], '10', 'should support ratios between 0 and 1');
489+
strictEqual(getComputedStyle($('#position-absolute .ratio-1')[0])[helpers.vendorPrefix('transform')].match(/(-?[0-9]+)/g)[5], '0', 'should support ratios of 1');
490+
strictEqual(getComputedStyle($('#position-absolute .ratio-2')[0])[helpers.vendorPrefix('transform')].match(/(-?[0-9]+)/g)[5], '-20', 'should support ratios greater than 1');
483491

484492
$(window).stellar('destroy').scrollTop(0).scrollLeft(0);
485493
start();
@@ -493,10 +501,10 @@
493501
}).scrollTop(0).scrollLeft(20);
494502

495503
setTimeout(function() {
496-
strictEqual($('#position-absolute .ratio--1').css(helpers.vendorPrefix + 'transform').substr(19,2), '40', 'should support negative ratios');
497-
strictEqual($('#position-absolute .ratio-0-5').css(helpers.vendorPrefix + 'transform').substr(19,2), '10', 'should support ratios between 0 and 1');
498-
strictEqual($('#position-absolute .ratio-1').css(helpers.vendorPrefix + 'transform').substr(19,1), '0', 'should support ratios of 1');
499-
strictEqual($('#position-absolute .ratio-2').css(helpers.vendorPrefix + 'transform').substr(19,3), '-20', 'should support ratios greater than 1');
504+
strictEqual($('#position-absolute .ratio--1')[0].style[helpers.vendorPrefix('transform')].match(/(-?[0-9]+)/g)[4], '40', 'should support negative ratios');
505+
strictEqual($('#position-absolute .ratio-0-5')[0].style[helpers.vendorPrefix('transform')].match(/(-?[0-9]+)/g)[4], '10', 'should support ratios between 0 and 1');
506+
strictEqual($('#position-absolute .ratio-1')[0].style[helpers.vendorPrefix('transform')].match(/(-?[0-9]+)/g)[4], '0', 'should support ratios of 1');
507+
strictEqual($('#position-absolute .ratio-2')[0].style[helpers.vendorPrefix('transform')].match(/(-?[0-9]+)/g)[4], '-20', 'should support ratios greater than 1');
500508

501509
$(window).stellar('destroy').scrollTop(0).scrollLeft(0);
502510
start();

0 commit comments

Comments
 (0)