add reduced test case

Polymer · Jun 21, 2016 · 26fe9b9 · 26fe9b9
1 parent 4ebec15
commit 26fe9b9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/test/smoke/css-gradient-var.html b/test/smoke/css-gradient-var.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>CSS Gradient in variable</title>
-    <script>Polymer={useNativeCSSProperties: true, lazyRegister: true}</script>
+    <!-- <script>Polymer={useNativeCSSProperties: true, lazyRegister: true}</script> -->
     <link rel="import" href="../../polymer.html">
   </head>
   <body>
@@ -18,10 +18,13 @@
       <template>
         <style>
         :host {
+          --color1: 123;
+          --color2: 321;
+          --color3: 231;
           display: block;
           height: 100px;
           width: 100px;
-          color: var(--undefined, rgb(123, 321, 231));
+          color: var(--undefined, rgb(var(--color1), var(--color2), var(--color3)));
           background: var(--fx-webkit-background, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,.65)), color-stop(100%,rgba(0,0,255,.65))));
           border-width: calc(var(--a) + var(--b));
           border-color: brown;

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -714,6 +714,28 @@
   </script>
 </dom-module>
 
+<dom-module id="x-super-complex">
+  <template>
+    <style>
+    :host {
+      --color1: 102;
+      --color2: 205;
+      --color3: 170;
+      display: block;
+      color: var(--undefined, rgb(var(--color1), var(--color2), var(--color3)));
+    }
+    </style>
+    <div>Should be mediumaquamarine</div>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-super-complex'
+    });
+  });
+  </script>
+</dom-module>
+
 <script>
   suite('scoped-styling-var', function() {
 
@@ -1060,6 +1082,11 @@
     assertComputed(e, '0px');
   });
 
+  test('complex fallback for variables work as expected', function() {
+    var e = document.createElement('x-super-complex');
+    document.body.appendChild(e);
+    assertComputed(e, 'rgb(102, 205, 170)', null, 'color');
+  });
 });
 
 </script>