Skip to content

Commit eda3251

Browse files
dvoytenkodvoytenko
committed
review fixes
1 parent cd71463 commit eda3251

File tree

3 files changed

+53
-46
lines changed

3 files changed

+53
-46
lines changed

‎src/apply-preserving-inline-style.js

+12-10
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414

1515
(function(scope, testing) {
1616

17+
var SVG_TRANSFORM_PROP = '_webAnimationsUpdateSvgTransformAttr';
18+
1719
/**
1820
* IE/Edge do not support `transform` styles for SVG elements. Instead,
1921
* `transform` attribute can be animated with some restrictions.
@@ -23,12 +25,15 @@
2325
* The same problem is exhibited by pre-Chrome Android browsers (ICS).
2426
* Unfortunately, there's no easy way to feature-detect it.
2527
*/
26-
function updateSvgTransformAttr(window) {
27-
if (window._webAnimationsUpdateSvgTransformAttr == null) {
28-
window._webAnimationsUpdateSvgTransformAttr =
28+
function updateSvgTransformAttr(window, element) {
29+
if (!element.namespaceURI || element.namespaceURI.indexOf('/svg') == -1) {
30+
return false;
31+
}
32+
if (!(SVG_TRANSFORM_PROP in window)) {
33+
window[SVG_TRANSFORM_PROP] =
2934
/Trident|MSIE|IEMobile|Edge|Android 4/i.test(window.navigator.userAgent);
3035
}
31-
return window._webAnimationsUpdateSvgTransformAttr;
36+
return window[SVG_TRANSFORM_PROP];
3237
}
3338

3439
var styleAttributes = {
@@ -69,10 +74,7 @@
6974
this._style = element.style;
7075
this._length = 0;
7176
this._isAnimatedProperty = {};
72-
this._updateSvgTransformAttr =
73-
element.namespaceURI &&
74-
element.namespaceURI.indexOf('/svg') != -1 &&
75-
updateSvgTransformAttr(window);
77+
this._updateSvgTransformAttr = updateSvgTransformAttr(window, element);
7678
this._savedTransformAttr = null;
7779

7880
// Copy the inline style contents over to the surrogate.
@@ -134,7 +136,7 @@
134136
this._style[property] = value;
135137
this._isAnimatedProperty[property] = true;
136138
if (this._updateSvgTransformAttr &&
137-
scope.canonicalPropertyName(property) == 'transform') {
139+
scope.unprefixedPropertyName(property) == 'transform') {
138140
// On IE/Edge, also set SVG element's `transform` attribute to 2d
139141
// matrix of the transform. The `transform` style does not work, but
140142
// `transform` attribute can be used instead.
@@ -149,7 +151,7 @@
149151
_clear: function(property) {
150152
this._style[property] = this._surrogateStyle[property];
151153
if (this._updateSvgTransformAttr &&
152-
scope.canonicalPropertyName(property) == 'transform') {
154+
scope.unprefixedPropertyName(property) == 'transform') {
153155
if (this._savedTransformAttr) {
154156
this._element.setAttribute('transform', this._savedTransformAttr);
155157
} else {

‎src/property-names.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@
1414

1515
(function(scope, testing) {
1616

17-
var aliased = {};
18-
var canonical = {};
17+
var prefixed = {};
18+
var unprefixed = {};
1919

2020
function alias(name, aliases) {
2121
aliases.concat([name]).forEach(function(candidate) {
2222
if (candidate in document.documentElement.style) {
23-
aliased[name] = candidate;
23+
prefixed[name] = candidate;
2424
}
25-
canonical[candidate] = name;
25+
unprefixed[candidate] = name;
2626
});
2727
}
2828
alias('transform', ['webkitTransform', 'msTransform']);
@@ -31,10 +31,10 @@
3131
alias('perspectiveOrigin', ['webkitPerspectiveOrigin']);
3232

3333
scope.propertyName = function(property) {
34-
return aliased[property] || property;
34+
return prefixed[property] || property;
3535
};
36-
scope.canonicalPropertyName = function(property) {
37-
return canonical[property] || property;
36+
scope.unprefixedPropertyName = function(property) {
37+
return unprefixed[property] || property;
3838
};
3939

4040
})(webAnimations1, webAnimationsTesting);

‎test/js/apply-preserving-inline-style.js

+34-29
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ suite('apply-preserving-inline-style', function() {
77
this.svgContainer = document.createElementNS(
88
'http://www.w3.org/2000/svg', 'svg');
99
document.documentElement.appendChild(this.svgContainer);
10-
window._webAnimationsUpdateSvgTransformAttr = null;
10+
delete window._webAnimationsUpdateSvgTransformAttr;
1111
});
1212
teardown(function() {
1313
document.documentElement.removeChild(this.element);
1414
document.documentElement.removeChild(this.svgContainer);
15-
window._webAnimationsUpdateSvgTransformAttr = null;
15+
delete window._webAnimationsUpdateSvgTransformAttr;
1616
});
1717

1818
test('Style is patched', function() {
@@ -76,40 +76,45 @@ suite('apply-preserving-inline-style', function() {
7676
assert.equal(this.style.length, 1);
7777
});
7878
test('Detect SVG transform compatibility', function() {
79-
var win = {navigator: {userAgent: ''}};
80-
function agent(str) {
81-
win._webAnimationsUpdateSvgTransformAttr = null;
82-
win.navigator.userAgent = str;
79+
var element = document.createElement('div');
80+
var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
81+
function check(userAgent, shouldUpdateSvgTransformAttr) {
82+
var win = {navigator: {userAgent: userAgent}};
83+
// Non-SVG element is never updated.
84+
assert.equal(updateSvgTransformAttr(win, element), false);
85+
// SVG element may be updated as tested.
86+
assert.equal(updateSvgTransformAttr(win, svgElement),
87+
shouldUpdateSvgTransformAttr);
8388
}
8489
// Unknown data: assume that transforms supported.
85-
assert.equal(updateSvgTransformAttr(win), false);
90+
check('', false);
8691
// Chrome: transforms supported.
87-
agent('Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E)' +
92+
check('Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E)' +
8893
' AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.20' +
89-
' Mobile Safari/537.36');
90-
assert.equal(updateSvgTransformAttr(win), false);
91-
// Safary: transforms supported.
92-
agent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) ' +
94+
' Mobile Safari/537.36',
95+
false);
96+
// Safari: transforms supported.
97+
check('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) ' +
9398
'AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 ' +
94-
'Safari/7046A194A');
95-
assert.equal(updateSvgTransformAttr(win), false);
99+
'Safari/7046A194A',
100+
false);
96101
// Firefox: transforms supported.
97-
agent('Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) ' +
98-
'Gecko/20100101 Firefox/40.1');
99-
assert.equal(updateSvgTransformAttr(win), false);
102+
check('Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) ' +
103+
'Gecko/20100101 Firefox/40.1',
104+
false);
100105
// IE: transforms are NOT supported.
101-
agent('Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 7.0;' +
102-
' InfoPath.3; .NET CLR 3.1.40767; Trident/6.0; en-IN)');
103-
assert.equal(updateSvgTransformAttr(win), true);
106+
check('Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 7.0;' +
107+
' InfoPath.3; .NET CLR 3.1.40767; Trident/6.0; en-IN)',
108+
true);
104109
// Edge: transforms are NOT supported.
105-
agent('Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36' +
110+
check('Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36' +
106111
' (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36' +
107-
' Edge/12.10136');
108-
assert.equal(updateSvgTransformAttr(win), true);
112+
' Edge/12.10136',
113+
true);
109114
// ICS Android: transforms are NOT supported.
110-
agent('Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; MZ604 Build/I.7.1-45)' +
111-
' AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30');
112-
assert.equal(updateSvgTransformAttr(win), true);
115+
check('Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; MZ604 Build/I.7.1-45)' +
116+
' AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30',
117+
true);
113118
});
114119
test('Set and clear transform', function() {
115120
// This is not an SVG element, so CSS transform support is not consulted.
@@ -139,7 +144,7 @@ suite('apply-preserving-inline-style', function() {
139144
assert.equal(getComputedStyle(svgElement).transform, 'none');
140145
assert.equal(svgElement.hasAttribute('transform'), false);
141146
});
142-
test('Set and clear NOT supported transform on SVG element', function() {
147+
test('Set and clear transform CSS property not supported on SVG element', function() {
143148
window._webAnimationsUpdateSvgTransformAttr = true;
144149
var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
145150
ensureStyleIsPatched(svgElement);
@@ -155,7 +160,7 @@ suite('apply-preserving-inline-style', function() {
155160
assert.equal(getComputedStyle(svgElement).transform, 'none');
156161
assert.equal(svgElement.getAttribute('transform'), null);
157162
});
158-
test('Set and clear NOT supported prefixed transform on SVG element', function() {
163+
test('Set and clear prefixed transform CSS property not supported on SVG element', function() {
159164
window._webAnimationsUpdateSvgTransformAttr = true;
160165
var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
161166
ensureStyleIsPatched(svgElement);
@@ -168,7 +173,7 @@ suite('apply-preserving-inline-style', function() {
168173
svgElement.style._clear('msTransform');
169174
assert.equal(svgElement.getAttribute('transform'), null);
170175
});
171-
test('Restore NOT supported transform on SVG element', function() {
176+
test('Restore transform CSS property not supported on SVG element', function() {
172177
window._webAnimationsUpdateSvgTransformAttr = true;
173178
var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
174179
svgElement.setAttribute('transform', 'matrix(2 0 0 2 0 0)');

0 commit comments

Comments
 (0)