Add test for ensuring complicated mixin ordering is correct

Fixes #4410

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

@@ -446,6 +446,50 @@
   </script>
 </dom-module>
 
+<dom-module id="order-child">
+  <template>
+    <style>
+      div {
+        @apply --order-mixin;
+      }
+    </style>
+    <div id="target"></div>
+  </template>
+</dom-module>
+
+<dom-module id="order-parent">
+  <template>
+    <style>
+      order-child {
+        --order-mixin: {
+          border: 10px solid black;
+        };
+      }
+    </style>
+    <order-child id="child"></order-child>
+  </template>
+</dom-module>
+
+<dom-module id="order-gp">
+  <template>
+    <style>
+      order-child {
+        --order-mixin: {
+        };
+      }
+    </style>
+    <order-child id="child"></order-child>
+    <order-parent id="parent"></order-parent>
+  </template>
+</dom-module>
+
+<script>
+  HTMLImports.whenReady(function() {
+    Polymer({is: 'order-child'});
+    Polymer({is: 'order-parent'});
+    Polymer({is: 'order-gp'});
+  })
+</script>
 <script>
 suite('scoped-styling-apply', function() {
   function assertComputed(element, value, property) {
@@ -614,6 +658,16 @@
     assertComputed(div, '2px');
     assertComputed(div, '0px', 'height');
   });
+
+  test('mixin redefinition applies to complicated hierarchies', function() {
+    var e = document.createElement('order-gp');
+    document.body.appendChild(e);
+    Polymer.flush();
+    var childDiv = e.$.child.$.target;
+    var parentDiv = e.$.parent.$.child.$.target;
+    assertComputed(childDiv, '0px');
+    assertComputed(parentDiv, '10px');
+  })
 });
 
 </script>