From 99d0a606de4daf94d23cb8a46e79ee0292152f29 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 11 Jan 2018 10:05:53 -0800
Subject: [PATCH 1/3] Port keyframe name fix from ShadyCSS

Fixes #3475
---
 src/lib/style-properties.html          |  5 +-
 test/unit/styling-cross-scope-var.html | 70 ++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
index 8db904f641..da40707b43 100644
--- a/src/lib/style-properties.html
+++ b/src/lib/style-properties.html
@@ -419,7 +419,10 @@
       // 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(
diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
index 324ab3530a..8fc19b34cc 100644
--- a/test/unit/styling-cross-scope-var.html
+++ b/test/unit/styling-cross-scope-var.html
@@ -375,6 +375,56 @@
     </script>
   </dom-module>
 
+  <dom-module id="prefix-keyframes">
+    <template>
+      <style>
+        :host {
+          --time: 0.1s;
+          border: 10px solid rgb(0, 0, 0);
+          display: block;
+        }
+
+        :host([animated]) {
+          animation-name: border-color;
+          animation-duration: var(--time);
+          animation-fill-mode: forwards;
+          /* Prefix required by Safari <= 8 */
+          -webkit-animation-name: border-color;
+          -webkit-animation-duration: var(--time);
+          -webkit-animation-fill-mode: forwards;
+        }
+
+        /* Prefix required by Safari <= 8 */
+        @keyframes border {}
+        @keyframes border-color {
+          to {
+            border: 10px solid rgb(123, 123, 123);
+          }
+        }
+        @-webkit-keyframes border {}
+        @-webkit-keyframes border-color {
+          to {
+            border: 10px solid rgb(123, 123, 123);
+          }
+        }
+      </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 +559,7 @@
       <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 +990,25 @@
     xKeyframes.animated = true;
   });
 
+  test('keyframes are transformed correctly', function(done) {
+    var xKeyframes = styled.$.prefix;
+    var onAnimationEnd = function() {
+      assertStylePropertyValue(xKeyframes, 'border-color', 'rgb(123, 123, 123)');
+
+      xKeyframes.removeEventListener('animationend', onAnimationEnd);
+      xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
+      xKeyframes.animated = false;
+      done();
+    };
+
+    assertStylePropertyValue(xKeyframes, 'border-color', 'rgb(0, 0, 0)');
+
+    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');

From ec1968349f32a8c3cc318eb890f4b97c20f297a7 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 11 Jan 2018 12:01:44 -0800
Subject: [PATCH 2/3] animate border instead

---
 test/unit/styling-cross-scope-var.html | 32 +++++++++++++-------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
index 8fc19b34cc..0eacbb6fe9 100644
--- a/test/unit/styling-cross-scope-var.html
+++ b/test/unit/styling-cross-scope-var.html
@@ -380,31 +380,32 @@
       <style>
         :host {
           --time: 0.1s;
-          border: 10px solid rgb(0, 0, 0);
+          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]) {
-          animation-name: border-color;
-          animation-duration: var(--time);
-          animation-fill-mode: forwards;
           /* Prefix required by Safari <= 8 */
-          -webkit-animation-name: border-color;
-          -webkit-animation-duration: var(--time);
-          -webkit-animation-fill-mode: forwards;
+          -webkit-animation-name: border-width;
+          animation-name: border-width;
         }
 
         /* Prefix required by Safari <= 8 */
-        @keyframes border {}
-        @keyframes border-color {
+        @-webkit-keyframes border {}
+        @-webkit-keyframes border-width {
           to {
-            border: 10px solid rgb(123, 123, 123);
+            border-top-width: 10px;
           }
         }
-        @-webkit-keyframes border {}
-        @-webkit-keyframes border-color {
+        @keyframes border {}
+        @keyframes border-width {
           to {
-            border: 10px solid rgb(123, 123, 123);
+            border-top-width: 10px;
           }
         }
       </style>
@@ -993,7 +994,7 @@
   test('keyframes are transformed correctly', function(done) {
     var xKeyframes = styled.$.prefix;
     var onAnimationEnd = function() {
-      assertStylePropertyValue(xKeyframes, 'border-color', 'rgb(123, 123, 123)');
+      assertComputed(xKeyframes, '10px');
 
       xKeyframes.removeEventListener('animationend', onAnimationEnd);
       xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
@@ -1001,8 +1002,7 @@
       done();
     };
 
-    assertStylePropertyValue(xKeyframes, 'border-color', 'rgb(0, 0, 0)');
-
+    assertComputed(xKeyframes, '0px');
     xKeyframes.addEventListener('animationend', onAnimationEnd);
     xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd);
 

From ad98b68ea2dcb22bcf0fafe7a0123209e81887f1 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Wed, 24 Jan 2018 13:58:42 -0800
Subject: [PATCH 3/3] Port Edge 16 test fixes from 2.x

---
 test/unit/custom-style.html              | 5 +++++
 test/unit/styling-cross-scope-apply.html | 5 +++++
 test/unit/styling-scoped.html            | 5 +++++
 3 files changed, 15 insertions(+)

diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
index 7b34a2f39a..7b3024da5f 100644
--- a/test/unit/custom-style.html
+++ b/test/unit/custom-style.html
@@ -595,6 +595,11 @@
         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');
diff --git a/test/unit/styling-cross-scope-apply.html b/test/unit/styling-cross-scope-apply.html
index 58070d8b86..09733a44f1 100644
--- a/test/unit/styling-cross-scope-apply.html
+++ b/test/unit/styling-cross-scope-apply.html
@@ -813,6 +813,11 @@
   })
 
   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;
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
index 1b61e10768..4a85527eb3 100644
--- a/test/unit/styling-scoped.html
+++ b/test/unit/styling-scoped.html
@@ -250,6 +250,11 @@
   });
 
   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() {