Fix DFL-3365: Update initial and suggested CSS properties with new unprefixed properties.

Author: hzr

src/style/css_shorthand_resolver.js

@@ -279,6 +279,84 @@ CssShorthandResolver.shorthands = (function() {
   var get_initial_value = cls.Stylesheets.get_initial_value;
 
   return {
+    "animation": {
+      properties: [
+        // Note that animation-play-state is not part of the shorthand
+        "animation-name",
+        "animation-duration",
+        "animation-timing-function",
+        "animation-delay",
+        "animation-iteration-count",
+        "animation-direction",
+        "animation-fill-mode"
+      ],
+      format: function(decls) {
+        // Workaround for CORE-45497: -o-animation-duration computed style
+        // missing comma when having multiple values
+        // Fixed in ci-322
+        var duration = decls["animation-duration"];
+        if (duration.value.indexOf(" ") !== -1 && duration.value.indexOf(",") === -1)
+          duration.value = duration.value.replace(/\s+/g, ", ");
+
+        var declarations = split_values(decls);
+        var template = [];
+        var len = declarations["animation-name"].length;
+        resolve_multiple_values(declarations, len);
+        for (var i = 0; i < len; i++)
+        {
+          var sub_template = [];
+          var is_final_layer = (i == len-1);
+          // The spec says that the first value that can be parsed as time is
+          // assigned to the animation-duration. There are two time values in
+          // the shorthand, 'duration' and 'delay'. If delay has a non-default
+          // value, we must therefore include duration.
+          var is_default_delay = declarations["animation-delay"][i].value ==
+                                 get_initial_value("animation-delay");
+
+          if (declarations["animation-name"][i].value !=
+              get_initial_value("animation-name"))
+            sub_template.push(" ", declarations["animation-name"][i]);
+
+          if (!is_default_delay || declarations["animation-duration"][i].value !=
+                                   get_initial_value("animation-duration"))
+            sub_template.push(" ", declarations["animation-duration"][i]);
+
+          if (declarations["animation-timing-function"][i].value !=
+              get_initial_value("animation-timing-function"))
+            sub_template.push(" ", declarations["animation-timing-function"][i]);
+
+          if (!is_default_delay)
+            sub_template.push(" ", declarations["animation-delay"][i]);
+
+          if (declarations["animation-iteration-count"][i].value !=
+              get_initial_value("animation-iteration-count"))
+            sub_template.push(" ", declarations["animation-iteration-count"][i]);
+
+          if (declarations["animation-direction"][i].value !=
+              get_initial_value("animation-direction"))
+            sub_template.push(" ", declarations["animation-direction"][i]);
+
+          if (declarations["animation-fill-mode"][i].value !=
+              get_initial_value("animation-fill-mode"))
+            sub_template.push(" ", declarations["animation-fill-mode"][i]);
+
+          // There's always an extra space at the beginning, remove it here
+          sub_template.splice(0, 1);
+
+          // If all properties have default values, at least append the default name
+          if (!sub_template.length)
+            template.push("none");
+
+          if (!is_final_layer)
+            sub_template.push(", ");
+
+          template.push.apply(template, sub_template);
+        }
+
+        return template;
+      }
+    },
+
     "-o-animation": {
       properties: [
         // Note that -o-animation-play-state is not part of the shorthand
@@ -769,6 +847,33 @@ CssShorthandResolver.shorthands = (function() {
       }
     },
 
+    "transition": {
+      properties: [
+        "transition-property",
+        "transition-duration",
+        "transition-timing-function",
+        "transition-delay",
+      ],
+      format: function(decls) {
+        var declarations = split_values(decls);
+        var template = [];
+        var len = declarations["transition-property"].length;
+        resolve_multiple_values(declarations, len);
+        for (var i = 0; i < len; i++)
+        {
+          template.push(
+            get_tokens(declarations["transition-property"][i]), " ",
+            get_tokens(declarations["transition-duration"][i]), " ",
+            get_tokens(declarations["transition-timing-function"][i]), " ",
+            get_tokens(declarations["transition-delay"][i]), ", "
+          );
+        }
+        template.splice(-1, 1); // Remove the last ','
+
+        return template;
+      }
+    },
+
     "-o-transition": {
       properties: [
         "-o-transition-property",
@@ -799,7 +904,15 @@ CssShorthandResolver.shorthands = (function() {
 })();
 
 CssShorthandResolver.property_to_shorthand = {
-  // Note that -o-animation-play-state is not part of the shorthand
+  // Note that animation-play-state is not part of the shorthand
+  "animation-delay": "animation",
+  "animation-direction": "animation",
+  "animation-duration": "animation",
+  "animation-fill-mode": "animation",
+  "animation-iteration-count": "animation",
+  "animation-name": "animation",
+  "animation-timing-function": "animation",
+
   "-o-animation-delay": "-o-animation",
   "-o-animation-direction": "-o-animation",
   "-o-animation-duration": "-o-animation",
@@ -878,6 +991,11 @@ CssShorthandResolver.property_to_shorthand = {
 
   // pause not supported
 
+  "transition-property": "transition",
+  "transition-duration": "transition",
+  "transition-timing-function": "transition",
+  "transition-delay": "transition",
+
   "-o-transition-property": "-o-transition",
   "-o-transition-duration": "-o-transition",
   "-o-transition-timing-function": "-o-transition",

src/style/css_suggest_values.js

@@ -204,27 +204,32 @@ suggest_values['-o-border-image'] =
 [
 ];
 
+suggest_values['animation'] =
 suggest_values['-o-animation'] =
 [
 ];
 
+suggest_values['animation-delay'] =
 suggest_values['-o-animation-delay'] =
 [
   // <time>
   '0'
 ];
 
+suggest_values['animation-direction'] =
 suggest_values['-o-animation-direction'] =
 [
   'normal',
   'alternate'
 ];
 
+suggest_values['animation-duration'] =
 suggest_values['-o-animation-duration'] =
 [
   '0'
 ];
 
+suggest_values['animation-fill-mode'] =
 suggest_values['-o-animation-fill-mode'] =
 [
   'none',
@@ -233,23 +238,27 @@ suggest_values['-o-animation-fill-mode'] =
   'both'
 ];
 
+suggest_values['animation-iteration-count'] =
 suggest_values['-o-animation-iteration-count'] =
 [
   // <number>
   'infinite'
 ];
 
+suggest_values['animation-name'] =
 suggest_values['-o-animation-name'] =
 [
   'none'
 ];
 
+suggest_values['animation-play-state'] =
 suggest_values['-o-animation-play-state'] =
 [
   'running',
   'paused'
 ];
 
+suggest_values['animation-timing-function'] =
 suggest_values['-o-animation-timing-function'] =
 [
   'ease',
@@ -283,11 +292,13 @@ suggest_values['-o-text-overflow'] =
   'ellipsis'
 ];
 
+suggest_values['transform'] =
 suggest_values['-o-transform'] =
 [
   'none'
 ];
 
+suggest_values['transform-origin'] =
 suggest_values['-o-transform-origin'] =
 [
   'left',
@@ -297,24 +308,29 @@ suggest_values['-o-transform-origin'] =
   'bottom'
 ];
 
+suggest_values['transition'] =
 suggest_values['-o-transition'] =
 [
 ];
 
+suggest_values['transition-delay'] =
 suggest_values['-o-transition-delay'] =
 [
 ];
 
+suggest_values['transition-duration'] =
 suggest_values['-o-transition-duration'] =
 [
 ];
 
+suggest_values['transition-property'] =
 suggest_values['-o-transition-property'] =
 [
   'none',
   'all'
 ];
 
+suggest_values['transition-timing-function'] =
 suggest_values['-o-transition-timing-function'] =
 [
   'ease',

src/style/stylesheets.js

@@ -355,30 +355,39 @@ cls.Stylesheets.get_initial_value = function(prop, data, index_map)
   case "-apple-dashboard-region":
     return "";
 
+  case "animation":
   case "-o-animation":
       return "none 0s 0s cubic-bezier(0.25, 0.1, 0.25, 1) normal none 1";
 
+  case "animation-delay":
   case "-o-animation-delay":
       return "0s";
 
+  case "animation-direction":
   case "-o-animation-direction":
       return "normal";
 
+  case "animation-duration":
   case "-o-animation-duration":
       return "0s";
 
+  case "animation-fill-mode":
   case "-o-animation-fill-mode":
       return "none";
 
+  case "animation-iteration-count":
   case "-o-animation-iteration-count":
       return "1";
 
+  case "animation-name":
   case "-o-animation-name":
       return "none";
 
+  case "animation-play-state":
   case "-o-animation-play-state":
       return "running";
 
+  case "animation-timing-function":
   case "-o-animation-timing-function":
       return "cubic-bezier(0.25, 0.1, 0.25, 1)";
 
@@ -412,10 +421,12 @@ cls.Stylesheets.get_initial_value = function(prop, data, index_map)
   case "-o-text-overflow":
     return "";
 
+  case "transform":
   case "-o-transform":
   case "-webkit-transform":
     return "none";
 
+  case "transform-origin":
   case "-o-transform-origin":
   case "-webkit-transform-origin":
     var w = parseInt(data[index_map.indexOf("width")]) || 0;
@@ -429,22 +440,27 @@ cls.Stylesheets.get_initial_value = function(prop, data, index_map)
     }
     return (w / 2) + "px " + (h / 2) + "px";
 
+  case "transition":
   case "-o-transition":
   case "-webkit-transition":
     return "all 0s 0s cubic-bezier(0.25, 0.1, 0.25, 1)";
 
+  case "transition-delay":
   case "-o-transition-delay":
   case "-webkit-transition-delay":
     return "0s";
 
+  case "transition-duration":
   case "-o-transition-duration":
   case "-webkit-transition-duration":
     return "0s";
 
+  case "transition-property":
   case "-o-transition-property":
   case "-webkit-transition-property":
     return "all";
 
+  case "transition-timing-function":
   case "-o-transition-timing-function":
   case "-webkit-transition-timing-function":
     return "cubic-bezier(0.25, 0.1, 0.25, 1)";
@@ -528,6 +544,7 @@ cls.Stylesheets.get_initial_value = function(prop, data, index_map)
     return "repeat";
 
   case "background-size":
+  case "-webkit-background-size":
     return "auto";
 
   case "baseline-shift":
@@ -600,7 +617,8 @@ cls.Stylesheets.get_initial_value = function(prop, data, index_map)
     return "0px";
 
   case "border-radius":
-    return "";
+  case "-webkit-border-radius":
+    return "0px";
 
   case "border-bottom-left-radius":
   case "-webkit-border-bottom-left-radius":