Add test for overriding property based :host selector from outside.

Polymer · Feb 11, 2016 · 71c41ed · 71c41ed
1 parent b0e16f0
commit 71c41ed
Showing 1 changed file with 54 additions and 6 deletions.
diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -14,6 +14,11 @@
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../../web-component-tester/browser.js"></script>
   <link rel="import" href="../../polymer.html">
+  <style>
+  .variable-override {
+    border-top-width: 10px;
+  }
+</style>
 </head>
 <body>
 
@@ -528,12 +533,6 @@
   </dom-module>
 
 
-<style>
-  .variable-override {
-    border-top-width: 10px;
-  }
-</style>
-
 <dom-module id="x-variable-override">
   <template>
     <style>
@@ -553,6 +552,48 @@
   </script>
 </dom-module>
 
+<dom-module id="x-variable-consumer">
+  <template>
+    <style>
+      :host(.foo) {
+        border: var(--consumer);
+      }
+    </style>
+    test
+  </template>
+  <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-variable-consumer'
+      });
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-host-variable-consumer">
+  <template>
+    <style>
+      :host {
+        --consumer: 2px solid orange;
+      }
+
+      .foo {
+        display: block;
+        /* should override */
+        border: 10px solid black;
+      }
+    </style>
+    <x-variable-consumer id="consumer" class="foo"></x-variable-consumer>
+  </template>
+  <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-host-variable-consumer'
+      });
+    });
+  </script>
+</dom-module>
+
 <script>
   suite('scoped-styling-var', function() {
 
@@ -803,6 +844,13 @@
     assertComputed(d, '10px');
   });
 
+  test('class selector overrides :host(class) property on element with only dynamic styles', function() {
+    var d = document.createElement('x-host-variable-consumer');
+    document.body.appendChild(d);
+    CustomElements.takeRecords();
+    assertComputed(d.$.consumer, '10px');
+  });
+
   // TODO(sorvell): fix for #1761 was reverted; include test once this issue is addressed
   // test('var values can be overridden by subsequent concrete properties', function() {
   //   assertComputed(styled.$.overridesConcrete, '4px');