Web Animations: Support animation of SVG number 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 170 matching lines @@
         var url = /url\(([^\)]*)\)/g.exec(matches[i])[1];
         var anchor = document.createElement('a');
         anchor.href = url;
         anchor.pathname = '...' + anchor.pathname.substring(anchor.pathname.lastIndexOf('/'));
         value = value.replace(matches[i], 'url(' + anchor.href + ')');
       }
     }
     return value;
   }
 
+  function serializeSVGNumberList(numberList) {
+    var elements = [];
+    for (var index = 0; index < numberList.numberOfItems; ++index)
+      elements.push(numberList.getItem(index).value);
+    return String(elements);
+  }
+
   function serializeSVGPointList(pointList) {
     var elements = [];
     for (var index = 0; index < pointList.numberOfItems; ++index) {
       var point = pointList.getItem(index);
       elements.push(point.x);
       elements.push(point.y);
     }
     return String(elements);
   }
 
@@ skipping 28 matching lines @@
 
     var result;
     if (attributeName === 'points')
       result = element['animatedPoints'];
     else
       result = element[attributeName].animVal;
 
     if (!result) {
       if (attributeName === 'filterResX' || attributeName === 'filterResY')
         return null;
+      if (attributeName === 'pathLength')
+        return '0';
 
       console.log('Unknown attribute, cannot get ' + element.className.baseVal + ' ' + attributeName);
       return null;
     }
 
     if (result instanceof SVGAngle)
       result = result.value;
+    else if (result instanceof SVGNumberList)
+      result = serializeSVGNumberList(result);
     else if (result instanceof SVGPointList)
       result = serializeSVGPointList(result);
 
     if (typeof result !== 'string' && typeof result !== 'number' && typeof result !== 'boolean') {
       console.log('Attribute value has unexpected type: ' + result);
     }
 
     return String(result);
   }
 
@@ skipping 15 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.
+  // The following collide with CSS properties or the Web Animations API (offset).
   var svgPrefixedAttributes = [
+    'offset',
     'order',
   ];
 
   function makeKeyframes(target, attributeName, params) {
     if (svgPrefixedAttributes.indexOf(attributeName) !== -1)
       attributeName = 'svg' + attributeName[0].toUpperCase() + attributeName.slice(1);
 
     var keyframes = [{}, {}];
     if (attributeName === 'class') {
       // Preserve the existing classes as we use them to select elements.
@@ skipping 117 matching lines @@
     setTimeout(function() {
       if (finished) {
         return;
       }
       finishTest();
     }, 5000);
   }
 
   window.assertAttributeInterpolation = assertAttributeInterpolation;
 })();