Web Animations: Use of hyphens is no longer supported

Hyphenated names in Web Animations keyframes were deprecated in M50.

camelCase is now required.

BUG=588025

Review URL: https://codereview.chromium.org/1771733002

Cr-Commit-Position: refs/heads/master@{#381541}

third_party/WebKit/LayoutTests/animations/big-number-clamping.html

@@ -25,9 +25,18 @@ var numberProperties = [
 
 var bigNumber = 1e20;
 
+function toCamelCase(property) {
+  for (var i = property.length - 2; i > 0; --i) {
+    if (property[i] === '-') {
+      property = property.substring(0, i) + property[i + 1].toUpperCase() + property.substring(i + 2);
+    }
+  }
+  return property;
+}
+
 for (var property of numberProperties) {
   test(() => {
-    animated.animate({[property]: bigNumber}, {fill: 'forwards'});
+    animated.animate({[toCamelCase(property)]: bigNumber}, {fill: 'forwards'});
     reference.style[property] = bigNumber;
     assert_equals(getComputedStyle(animated)[property], getComputedStyle(reference)[property]);
   }, `Animations on ${property} should clamp identically to setting inline style`);

third_party/WebKit/LayoutTests/animations/css-animation-overrides-svg-presentation-attribute-animation-expected.txt

-CONSOLE WARNING: Hyphenated naming in Web Animations keyframes is deprecated and will be removed in M51, around May 2016. Please use camelCase instead. See https://www.chromestatus.com/features/5650817352728576 for more details.
  This is a testharness.js-based test.
 FAIL CSS animations always override SVG presentation attribute animations assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
 Harness: the test ran to completion.

third_party/WebKit/LayoutTests/animations/interpolation/resources/interpolation-test.js

@@ -184,6 +184,14 @@
     });
   }
 
+  function toCamelCase(property) {
+    var i = property.length;
+    while ((i = property.lastIndexOf('-', i - 1)) !== -1) {
+      property = property.substring(0, i) + property[i + 1].toUpperCase() + property.substring(i + 2);
+    }
+    return property;
+  }
+
   function createTargetContainer(parent, className) {
     var targetContainer = createElement(parent);
     targetContainer.classList.add('container');
@@ -339,11 +347,11 @@ assertComposition({
         webAnimationsInterpolation.interpolateKeyframes([{
           offset: 0,
           composite: fromComposite,
-          [property]: from,
+          [toCamelCase(property)]: from,
         }, {
           offset: 1,
           composite: toComposite,
-          [property]: to,
+          [toCamelCase(property)]: to,
         }], expectation.at, target);
       };
       target.measure = function() {

third_party/WebKit/LayoutTests/animations/responsive/resources/responsive-test.js

@@ -51,7 +51,7 @@ function assertCSSResponsive(options) {
     options,
     bindings: {
       prefixProperty(property) {
-        return property;
+        return toCamelCase(property);
       },
       createTargetContainer(container) {
         if (options.targetTag) {
@@ -163,6 +163,15 @@ function keyframeText(keyframe) {
   return isNeutralKeyframe(keyframe) ? 'neutral' : `[${keyframe}]`;
 }
 
+function toCamelCase(property) {
+  for (var i = property.length - 2; i > 0; --i) {
+    if (property[i] === '-') {
+      property = property.substring(0, i) + property[i + 1].toUpperCase() + property.substring(i + 2);
+    }
+  }
+  return property;
+}
+
 function createKeyframes(prefixedProperty, from, to) {
   var keyframes = [];
   if (!isNeutralKeyframe(from)) {

third_party/WebKit/LayoutTests/animations/svg-attribute-composition/svg-d-composition-expected.txt

 CONSOLE WARNING: SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
-CONSOLE WARNING: Hyphenated naming in Web Animations keyframes is deprecated and will be removed in M51, around May 2016. Please use camelCase instead. See https://www.chromestatus.com/features/5650817352728576 for more details.
 CONSOLE ERROR: line 208: Unknown attribute, cannot get d
 CONSOLE ERROR: line 208: Unknown attribute, cannot get d
 CONSOLE ERROR: line 208: Unknown attribute, cannot get d

third_party/WebKit/LayoutTests/animations/svg-attribute-composition/svg-orient-composition-expected.txt

 CONSOLE WARNING: SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
-CONSOLE WARNING: Hyphenated naming in Web Animations keyframes is deprecated and will be removed in M51, around May 2016. Please use camelCase instead. See https://www.chromestatus.com/features/5650817352728576 for more details.
 This is a testharness.js-based test.
 PASS This test uses interpolation-test.js. 
 PASS SMIL: Interpolate attribute <orient> with underlying [50] from add [130] to add [200grad] at (0) is [180] 

third_party/WebKit/LayoutTests/animations/svg-attribute-composition/svg-points-composition-expected.txt

 CONSOLE WARNING: SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
-CONSOLE WARNING: Hyphenated naming in Web Animations keyframes is deprecated and will be removed in M51, around May 2016. Please use camelCase instead. See https://www.chromestatus.com/features/5650817352728576 for more details.
 This is a testharness.js-based test.
 PASS This test uses interpolation-test.js. 
 PASS SMIL: Interpolate attribute <points> with underlying [10 10, 20 20] from add [40 40, 30 30] to add [90 90, -10 -10] at (0) is [50 50, 50 50] 

third_party/WebKit/LayoutTests/animations/svg-attribute-composition/svg-transform-matrix-expected.txt

 CONSOLE WARNING: SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
-CONSOLE WARNING: Hyphenated naming in Web Animations keyframes is deprecated and will be removed in M51, around May 2016. Please use camelCase instead. See https://www.chromestatus.com/features/5650817352728576 for more details.
 This is a testharness.js-based test.
 PASS This test uses interpolation-test.js. 
 PASS SMIL: Interpolate attribute <transform> with underlying [matrix(1 2 3 4 5 6)] from add [rotate(10 20 30)] to add [rotate(30 70 150)] at (0) is [matrix(1 2 3 4 5 6) rotate(10 20 30)] 

third_party/WebKit/LayoutTests/animations/svg-attribute-interpolation/svg-d-interpolation-expected.txt

 CONSOLE WARNING: SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
-CONSOLE WARNING: Hyphenated naming in Web Animations keyframes is deprecated and will be removed in M51, around May 2016. Please use camelCase instead. See https://www.chromestatus.com/features/5650817352728576 for more details.
 This is a testharness.js-based test.
 PASS This test uses interpolation-test.js. 
 PASS SMIL: Interpolate attribute <d> from replace [m 0 0 h 1 h 2] to replace [m 0 0 h 3] at (0) is [m 0 0 h 1 h 2] 

third_party/WebKit/LayoutTests/animations/svg-attribute-interpolation/svg-startOffset-interpolation-expected.txt

 CONSOLE WARNING: SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
-CONSOLE WARNING: Hyphenated naming in Web Animations keyframes is deprecated and will be removed in M51, around May 2016. Please use camelCase instead. See https://www.chromestatus.com/features/5650817352728576 for more details.
  This is a testharness.js-based test.
 PASS This test uses interpolation-test.js. 
 PASS SMIL: Interpolate attribute <startOffset> from replace [1] to replace [6] at (0) is [1] 

third_party/WebKit/LayoutTests/web-animations-api/deprecated-hyphen-expected.txt

+CONSOLE WARNING: Hyphenated property names in Web Animations keyframes are invalid and therefore ignored. Please use camelCase instead.
+This is a testharness.js-based test.
+PASS Calling element.animate() with hyphenated property is use counted. 
+Harness: the test ran to completion.
+

third_party/WebKit/LayoutTests/web-animations-api/reject-hyphen-expected.txt

+CONSOLE WARNING: Hyphenated property names in Web Animations keyframes are invalid and therefore ignored. Please use camelCase instead.
+This is a testharness.js-based test.
+PASS Hyphenated propery names are ignored. 
+Harness: the test ran to completion.
+

third_party/WebKit/LayoutTests/web-animations-api/reject-hyphen.html

+<!DOCTYPE html>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<style>
+
+div { font-size: 10px; }
+
+</style>
+<div id='element'></div>
+<script>
+
+var element = document.getElementById('element');
+
+test(function() {
+    element.animate({'font-size': '20px'}, {fill: 'forwards'});
+    assert_equals(getComputedStyle(element).fontSize, '10px');
+
+    element.animate({'fontSize': '30px'}, {fill: 'forwards'});
+    assert_equals(getComputedStyle(element).fontSize, '30px');
+}, 'Hyphenated propery names are ignored.');
+
+</script>

third_party/WebKit/Source/core/animation/AnimationInputHelpers.cpp

@@ -36,10 +36,15 @@ CSSPropertyID AnimationInputHelpers::keyframeAttributeToCSSProperty(const String
         return CSSPropertyInvalid;
     if (property == "cssFloat")
         return CSSPropertyFloat;
+
     StringBuilder builder;
     for (size_t i = 0; i < property.length(); ++i) {
-        if (property[i] == '-')
-            Deprecation::countDeprecation(document, UseCounter::WebAnimationHyphenatedProperty);
+        // Disallow hyphenated properties.
+        if (property[i] == '-') {
+            if (cssPropertyID(property) != CSSPropertyInvalid)
+                Deprecation::countDeprecation(document, UseCounter::WebAnimationHyphenatedProperty);
+            return CSSPropertyInvalid;
+        }
         if (isASCIIUpper(property[i]))
             builder.append('-');
         builder.append(property[i]);

third_party/WebKit/Source/core/animation/AnimationInputHelpersTest.cpp

@@ -39,14 +39,14 @@ protected:
 
 TEST_F(AnimationAnimationInputHelpersTest, ParseKeyframePropertyAttributes)
 {
-    EXPECT_EQ(CSSPropertyLineHeight, keyframeAttributeToCSSProperty("line-height"));
     EXPECT_EQ(CSSPropertyLineHeight, keyframeAttributeToCSSProperty("lineHeight"));
     EXPECT_EQ(CSSPropertyBorderTopWidth, keyframeAttributeToCSSProperty("borderTopWidth"));
-    EXPECT_EQ(CSSPropertyBorderTopWidth, keyframeAttributeToCSSProperty("border-topWidth"));
     EXPECT_EQ(CSSPropertyWidth, keyframeAttributeToCSSProperty("width"));
     EXPECT_EQ(CSSPropertyFloat, keyframeAttributeToCSSProperty("float"));
     EXPECT_EQ(CSSPropertyFloat, keyframeAttributeToCSSProperty("cssFloat"));
 
+    EXPECT_EQ(CSSPropertyInvalid, keyframeAttributeToCSSProperty("line-height"));
+    EXPECT_EQ(CSSPropertyInvalid, keyframeAttributeToCSSProperty("border-topWidth"));
     EXPECT_EQ(CSSPropertyInvalid, keyframeAttributeToCSSProperty("Width"));
     EXPECT_EQ(CSSPropertyInvalid, keyframeAttributeToCSSProperty("-epub-text-transform"));
     EXPECT_EQ(CSSPropertyInvalid, keyframeAttributeToCSSProperty("EpubTextTransform"));

third_party/WebKit/Source/core/frame/Deprecation.cpp

@@ -351,7 +351,7 @@ String Deprecation::deprecationMessage(UseCounter::Feature feature)
         return "Elements using the 'border-image' CSS property with no 'border-style' set should have no border, but currently do. Setting 'border-style' will be required in M51, around May 2016. See https://www.chromestatus.com/features/5542503914668032 for more details.";
 
     case UseCounter::WebAnimationHyphenatedProperty:
-        return replacedWillBeRemoved("Hyphenated naming in Web Animations keyframes", "camelCase", 51, "5650817352728576");
+        return "Hyphenated property names in Web Animations keyframes are invalid and therefore ignored. Please use camelCase instead.";
 
     case UseCounter::PresentationConnectionStateChangeEventListener:
         return replacedWillBeRemoved("'PresentationConnection.onstateachange'", "'PresentationConnection.on{connect,close,terminate}'", 51, "5662456714100736");