Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
[fix bug 1122519] Remove UA detection and use feature detect for CSS …
…line animations
- Loading branch information
1 parent
347331c
commit ccbe4d6
Showing
5 changed files
with
127 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
// This Source Code Form is subject to the terms of the Mozilla Public | ||
// License, v. 2.0. If a copy of the MPL was not distributed with this | ||
// file, You can obtain one at http://mozilla.org/MPL/2.0/. | ||
|
||
#svg-test { | ||
visibility: hidden; | ||
height: 0; | ||
width: 0; | ||
overflow: hidden; | ||
} | ||
|
||
#svg-test-circle { | ||
stroke-dasharray: 117; | ||
stroke-dashoffset: 117; | ||
-webkit-animation: svg-dash-test 0.1s linear forwards; | ||
animation: svg-dash-test 0.1s linear forwards; | ||
} | ||
|
||
@-webkit-keyframes svg-dash-test { | ||
0% { | ||
stroke-dashoffset: 0; | ||
} | ||
100% { | ||
stroke-dashoffset: 0; | ||
} | ||
} | ||
|
||
@keyframes svg-dash-test { | ||
0% { | ||
stroke-dashoffset: 0; | ||
} | ||
100% { | ||
stroke-dashoffset: 0; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
/* This Source Code Form is subject to the terms of the Mozilla Public | ||
* License, v. 2.0. If a copy of the MPL was not distributed with this | ||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
||
// create namespace | ||
if (typeof Mozilla == 'undefined') { | ||
var Mozilla = {}; | ||
} | ||
|
||
/** | ||
* Feature detect for animating SVG line paths using CSS | ||
* Detection: | ||
* 1.) browser supports inline SVG | ||
* 2.) browser supports CSS animations | ||
* 3.) browser can animate stroke-dashoffset via a CSS keyframe animation | ||
* | ||
* Required less file: 'css/base/svg-animation-check.less' | ||
*/ | ||
Mozilla.SVGAnimCheck = function() { | ||
if (!Mozilla.SVGAnimCheck.supportsInlineSVG() || !Mozilla.SVGAnimCheck.supportsCSSAnimations()) { | ||
return false; | ||
} else { | ||
return Mozilla.SVGAnimCheck.supportsCSSAnimatedPaths(); | ||
} | ||
}; | ||
|
||
/** | ||
* Detect CSS animation support (only checks for webkit and unprefixed) | ||
*/ | ||
Mozilla.SVGAnimCheck.supportsCSSAnimations = function() { | ||
var div = document.createElement('div'); | ||
|
||
// note we're only checking for Webkit vendor prefix as all other browsers | ||
// now support unprefixed CSS animations | ||
if (div.style.animationName !== undefined || div.style.WebkitAnimationName !== undefined) { | ||
return true; | ||
} | ||
|
||
return false; | ||
}; | ||
|
||
/** | ||
* Detect support for inline SVG elements. | ||
*/ | ||
Mozilla.SVGAnimCheck.supportsInlineSVG = function() { | ||
var div = document.createElement('div'); | ||
div.innerHTML = '<svg/>'; | ||
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg'; | ||
}; | ||
|
||
/** | ||
* Try to animate stroke-dashoffset using CSS and then get the computed value to see if it has changed. | ||
*/ | ||
Mozilla.SVGAnimCheck.supportsCSSAnimatedPaths = function() { | ||
var div = document.createElement('div'); | ||
var circle; | ||
var offset; | ||
|
||
div.id = 'svg-test'; | ||
div.innerHTML = '<svg role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1"><path id="svg-test-circle" fill-opacity="0" d="M33.665530413296274,58.589001490321166C43.94406883919239,58.59306994020939,52.274,66.92651000976564,52.274,77.205C52.274,87.486,43.939,95.821,33.658,95.821C23.377000000000002,95.821,15.042000000000002,87.48599999999999,15.042000000000002,77.205C15.041,66.923,23.376,58.589,33.658,58.589" stroke="#5d7489"></path></svg>'; | ||
document.documentElement.appendChild(div); | ||
|
||
// try/catch is maybe a little over cautious | ||
// but better to show the fallback than throw an exception | ||
try { | ||
circle = document.getElementById('svg-test-circle'); | ||
offset = window.getComputedStyle(circle).getPropertyValue('stroke-dashoffset'); | ||
|
||
div.parentNode.removeChild(div); | ||
|
||
// webkit & blink return a string with px value | ||
if (offset.replace(/\D/g, '') === '0') { | ||
return true; | ||
} | ||
return false; | ||
} catch(e) { | ||
div.parentNode.removeChild(div); | ||
return false; | ||
} | ||
}; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters