diff --git a/gradients.js b/gradients.js index f553434..764e90a 100755 --- a/gradients.js +++ b/gradients.js @@ -30,10 +30,18 @@ cssLinear = "background-image: -moz-linear-gradient(red, blue);background-image: -webkit-linear-gradient(red, blue);background-image: -o-linear-gradient(red, blue);background-image: linear-gradient(red, blue);", cssRadial = "background-image: -moz-radial-gradient(circle, orange, red);background-image: -webkit-radial-gradient(circle, orange, red);background-image: -o-radial-gradient(circle,red, blue);background-image: radial-gradient(circle, orange, red);", cssPropsArray = cssProps.split( rWhitespace ); + linearDirections = ["to bottom", "to top", "to right", "to left"]; + browserLinearDirections = ["top", "bottom", "left", "right"]; divStyle.cssText = cssLinear, linearSettings = function ( value ) { var parts = rLinearSettings.exec( value ); value = value.replace( new RegExp(parts[2], 'g') , $.support.linearGradient ); + // Default linear directions are different than browser extension directions so replace if necessary + for(var i = 0; i < linearDirections.length; i++) { + if(value.indexOf(linearDirections[i]) > -1) { + value = value.replace(linearDirections[i], browserLinearDirections[i]); + } + } return value; }, radialSettings = function ( value ) { @@ -65,7 +73,6 @@ $.cssHooks[ prop ] = { set: function( elem, value ) { - if( rLinear.test( value ) ){ elem.style[ prop ] = linearSettings( value ); } else if ( rRadial.test( value ) ) { diff --git a/transform.js b/transform.js index db58781..6081d93 100644 --- a/transform.js +++ b/transform.js @@ -26,24 +26,35 @@ var div = document.createElement('div'), propertyName = 'transform', suffix = 'Transform', testProperties = [ - 'O' + suffix, - 'ms' + suffix, - 'Webkit' + suffix, - 'Moz' + suffix, + ['O' + suffix, '-o-' + propertyName], + ['ms' + suffix, '-ms-' + propertyName], + ['Webkit' + suffix, '-webkit-' + propertyName], + ['Moz' + suffix, '-moz-' + propertyName], // prefix-less property - propertyName + [propertyName, propertyName] ], i = testProperties.length, supportProperty, supportMatrixFilter, + support3dTransform = false, propertyHook, propertyGet, rMatrix = /Matrix([^)]*)/; // test different vendor prefixes of this property while ( i-- ) { - if ( testProperties[i] in divStyle ) { - $.support[propertyName] = supportProperty = testProperties[i]; + if ( testProperties[i][0] in divStyle ) { + $.support[propertyName] = supportProperty = testProperties[i][0]; + // test for 3d Transforms support - http://tiffanybbrown.com/2012/09/04/testing-for-css-3d-transforms-support/ + if( ! support3dTransform) { + // have to insert div to test + document.body.appendChild(div); + divStyle[testProperties[i][0]] = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'; + support3dTransform = window.getComputedStyle(div).getPropertyValue(testProperties[i][1]); + support3dTransform = support3dTransform !== undefined && support3dTransform !== 'none'; + // remove test div + document.body.removeChild(div); + } continue; } } @@ -95,6 +106,37 @@ if ( supportProperty && supportProperty != propertyName ) { } } } + + // If 3d Transforms are not supported, replace them with 2d counterparts + if ( ! support3dTransform) { + propertyHook = { + set: function( elem, value ) { + if(value.indexOf('3d') > 0) { + // This method gets the params including format (px, em, pt, etc) + var matches = value.match(/\((.+?)\)/); + var params = matches[1].replace(/ /g, '').split(','); + var type = value.split('('); + value = type[0].replace('3d', ''); + switch(type[0]) { + // Convert matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) to matrix(n,n,n,n,n,n) + case 'matrix3d': + // TODO: run calculation to convert matrix3d to matrix + break; + // Convert rotate3d(x,y,z,deg) to rotate(deg) + case 'rotate3d': + value = value + '(' + params[3] + ')'; + break; + // Convert scale3d(x,y,z) to scale(x,y) and translate3d(x,y,z) to translate(x,y) + case 'scale3d': + case 'translate3d': + value = value + '(' + params[0] + ', ' + params[1] + ')'; + break; + } + } + elem.style[supportProperty] = value; + } + } + } /* TODO: leverage hardware acceleration of 3d transform in Webkit only else if ( supportProperty == 'Webkit' + suffix && support3dTransform ) { propertyHook = {