Fix keyframe renaming when keyframe names are subsets of others

Fixes #148

src/style-properties.js

@@ -448,7 +448,10 @@ class StyleProperties {
  * @param {string} scopeId
  */
   _scopeKeyframes(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(

tests/scoping.html

@@ -385,6 +385,29 @@
   <unscoped-apply-user></unscoped-apply-user>
 </template>
 
+<template id="scoped-keyframes">
+  <style>
+    :host {
+      --time: 1s;
+    }
+
+    div {
+      animation-name: slide-back;
+      animation-duration: var(--time);
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes slide {}
+    @keyframes slide-back {
+      to {
+        transform: translateX(-100px);
+      }
+    }
+  </style>
+
+  <div id="target">Hello world</div>
+</template>
+
 <script>
 (function() {
   function assertComputed(element, value, property, pseudo) {
@@ -696,6 +719,18 @@
       assertComputed(xKeyframes, '0px', 'left');
     });
 
+    test('keyframe names are transformed correctly', function(done) {
+      makeElement('scoped-keyframes');
+      var e = document.createElement('scoped-keyframes');
+      document.body.appendChild(e);
+      flush();
+      setTimeout(function() {
+        var transform = getComputedStyle(e.shadowRoot.querySelector('#target')).getPropertyValue('transform');
+        assert.notEqual(transform, 'none');
+        done();
+      }, 1000);
+    });
+
     test('attribute inclusive selector and general sibling selectors', function() {
       var x = document.createElement('x-attr-selector');
       x.id = 'x';