Port keyframe name fix from ShadyCSS (#5038)

* Port keyframe name fix from ShadyCSS

Fixes #3475

* animate border instead

* Port Edge 16 test fixes from 2.x

src/lib/style-properties.html

@@ -419,7 +419,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       // Transforms `@keyframes` names to be unique for the current host.
       // Example: @keyframes foo-anim -> @keyframes foo-anim-x-foo-0
       _scopeKeyframes: function(rule, scopeId) {
-        rule.keyframesNameRx = new RegExp(rule.keyframesName, 'g');
+        // Animation names are of the form [\w-], so ensure that the name regex does not partially apply
+        // to similarly named keyframe names by checking for a word boundary at the beginning and
+        // a non-word boundary or `-` at the end.
+        rule.keyframesNameRx = new RegExp('\\b' + rule.keyframesName + '(?!\\B|-)', 'g');
         rule.transformedKeyframesName = rule.keyframesName + '-' + scopeId;
         rule.transformedSelector = rule.transformedSelector || rule.selector;
         rule.selector = rule.transformedSelector.replace(

test/unit/custom-style.html

@@ -595,6 +595,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         assertComputed(el, '11px', 'right');
         assertComputed(el, '12px', 'top');
 
+        // Avoid Edge 16 bug with CSS Custom Properties and Fonts.
+        if (navigator.userAgent.match('Edge/16') && Polymer.Settings.useNativeCSSProperties) {
+          return;
+        }
+
         // Because FireFox and Chrome parse font-family differently...
         var computed = getComputedStyle(el);
         assert.equal(computed['font-family'].replace(/['"]+/g, ''), 'Varela font');

test/unit/styling-cross-scope-apply.html

@@ -813,6 +813,11 @@ suite('scoped-styling-apply', function() {
   })
 
   test('mixins apply to @keyframe rules', function(done) {
+    if (navigator.userAgent.match('Edge/16') && Polymer.Settings.useNativeCSSProperties) {
+      // skip test due to missing variable support in keyframes
+      // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12084341/
+      this.skip();
+    }
     var xKeyframes1 = styled.$.keyframes1;
     var xKeyframes2 = styled.$.keyframes2;
     var completed = 0;

test/unit/styling-cross-scope-var.html

@@ -375,6 +375,57 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </script>
   </dom-module>
 
+  <dom-module id="prefix-keyframes">
+    <template>
+      <style>
+        :host {
+          --time: 0.1s;
+          border: 0px solid rgb(0, 0, 0);
+          display: block;
+          /* Prefix required by Safari <= 8 */
+          -webkit-animation-duration: var(--time);
+          -webkit-animation-fill-mode: forwards;
+          animation-duration: var(--time);
+          animation-fill-mode: forwards;
+        }
+
+        :host([animated]) {
+          /* Prefix required by Safari <= 8 */
+          -webkit-animation-name: border-width;
+          animation-name: border-width;
+        }
+
+        /* Prefix required by Safari <= 8 */
+        @-webkit-keyframes border {}
+        @-webkit-keyframes border-width {
+          to {
+            border-top-width: 10px;
+          }
+        }
+        @keyframes border {}
+        @keyframes border-width {
+          to {
+            border-top-width: 10px;
+          }
+        }
+      </style>
+    </template>
+    <script>
+        HTMLImports.whenReady(function() {
+          Polymer({
+            is: 'prefix-keyframes',
+            properties: {
+              animated: {
+                type: Boolean,
+                value: false,
+                reflectToAttribute: true
+              }
+            }
+          });
+        });
+        </script>
+  </dom-module>
+
   <dom-module id="x-scope">
     <template>
       <style>
@@ -509,6 +560,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       <div id="me">x-scope</div>
       <x-keyframes id="keyframes"></x-keyframes>
       <x-keyframes id="keyframes2"></x-keyframes>
+      <prefix-keyframes id="prefix"></prefix-keyframes>
       <x-child-scope id="child"></x-child-scope>
       <x-child-scope id="child2"></x-child-scope>
       <x-overrides id="overrides1a"></x-overrides>
@@ -939,6 +991,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     xKeyframes.animated = true;
   });
 
+  test('keyframes are transformed correctly', function(done) {
+    var xKeyframes = styled.$.prefix;
+    var onAnimationEnd = function() {
+      assertComputed(xKeyframes, '10px');
+
+      xKeyframes.removeEventListener('animationend', onAnimationEnd);
+      xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
+      xKeyframes.animated = false;
+      done();
+    };
+
+    assertComputed(xKeyframes, '0px');
+    xKeyframes.addEventListener('animationend', onAnimationEnd);
+    xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd);
+
+    xKeyframes.animated = true;
+  })
+
   test('mutiple elements in document', function() {
     var e$ = document.querySelectorAll('simple-element');
     assertComputed(e$[0].$.inner, '10px');

test/unit/styling-scoped.html

@@ -250,6 +250,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   });
 
   test('keyframes change scope', function(done) {
+    if (navigator.userAgent.match('Edge/16') && Polymer.Settings.useNativeCSSProperties) {
+      // skip test due to missing variable support in keyframes
+      // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12084341/
+      this.skip();
+    }
     var xKeyframes = styled.$.keyframes;
 
     var onAnimationEnd = function() {