From 6d66335487c99a721bb5142e20f17f8c7417ff3d Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Wed, 5 Apr 2017 16:26:20 -0700
Subject: [PATCH] Add test for ensuring complicated mixin ordering is correct

Fixes #4410
---
 test/unit/styling-cross-scope-apply.html | 54 ++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/test/unit/styling-cross-scope-apply.html b/test/unit/styling-cross-scope-apply.html
index a91bc5b5c2..f0ffa27445 100644
--- a/test/unit/styling-cross-scope-apply.html
+++ b/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>