add test for 3326

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

@@ -474,13 +474,36 @@
   </script>
 </dom-module>
 
+<style>
+  .variable-override {
+    border-top-width: 10px;
+  }
+</style>
+
+<dom-module id="x-variable-override">
+  <template>
+    <style>
+      :host {
+        --b: 2px solid black;
+        display: block;
+        border: var(--b);
+      }
+    </style>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-variable-override'
+    });
+  </script>
+</dom-module>
+
 <script>
   suite('scoped-styling-var', function() {
 
   function assertComputed(element, value, pseudo) {
     var name = 'border-top-width';
-    var computed = element.getComputedStyleValue && !pseudo ? 
-      element.getComputedStyleValue(name) : 
+    var computed = element.getComputedStyleValue && !pseudo ?
+      element.getComputedStyleValue(name) :
       getComputedStyle(element, pseudo)[name];
     assert.equal(computed, value, 'computed style incorrect');
   }
@@ -675,6 +698,14 @@
     assertComputed(styled.$.endTerm, '19px');
   });
 
+  // skip for now, until #3326 is fixed
+  test.skip('custom style class overrides css variable', function() {
+    var d = document.createElement('x-variable-override');
+    d.classList.add('variable-override');
+    document.body.appendChild(d);
+    assertComputed(d, '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');