Web Animations: Always use svg prefix when animating SVG attributes

LayoutTests/animations/svg-attribute-interpolation/resources/interpolation-test.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 (function() {
   var testCount = 0;
   var animationEventCount = 0;
 
   var durationSeconds = 0.001;
@@ skipping 451 matching lines @@
       var setElement = document.createElementNS(svgNamespace, 'set');
       setElement.setAttribute('attributeName', namespacedAttributeName(attributeName));
       setElement.setAttribute('attributeType', 'XML');
       setElement.setAttribute('to', expectation);
       element.appendChild(setElement);
     } else {
       element.setAttribute(attributeName, expectation);
     }
   }
 
-  // The following collide with CSS properties or the Web Animations API (offset).
-  var svgPrefixedAttributes = [
-    'cx',
-    'cy',
-    'height',
-    'offset',
-    'offset',
-    'order',
-    'r',
-    'rx',
-    'ry',
-    'transform',
-    'width',
-    'x',
-    'y',
-  ];
-
   function makeKeyframes(target, attributeName, params) {
-    if (svgPrefixedAttributes.indexOf(attributeName) !== -1)
-      attributeName = 'svg' + attributeName[0].toUpperCase() + attributeName.slice(1);
+    // Replace 'transform' with 'svgTransform', etc. This avoids collisions with CSS properties or the Web Animations API (offset).
+    attributeName = 'svg' + attributeName[0].toUpperCase() + attributeName.slice(1);

[alancutter (OOO until 2018), 2015/06/09 06:25:05]

Nit: Store this in a different variable called prefixedAttributeName (and maybe
drop the Name part from both).

 
     var keyframes = [{}, {}];
-    if (attributeName === 'class') {
+    if (attributeName === 'svgClass') {
       // Preserve the existing classes as we use them to select elements.
       keyframes[0][attributeName] = target['className'].baseVal + ' ' + params.from;
       keyframes[1][attributeName] = target['className'].baseVal + ' ' + params.to;
     } else {
       keyframes[0][attributeName] = params.from;
       keyframes[1][attributeName] = params.to;
     }
     return keyframes;
   }
 
@@ skipping 167 matching lines @@
     setTimeout(function() {
       if (finished) {
         return;
       }
       finishTest();
     }, 5000);
   }
 
   window.assertAttributeInterpolation = assertAttributeInterpolation;
 })();