test/smoke/css-gradient-var.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Gradient in variable</title>
    <!-- <script>Polymer={useNativeCSSProperties: true, lazyRegister: true}</script> -->
    <link rel="import" href="../../polymer.html">
    <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  </head>
  <body>
    <style is="custom-style">
    :root {
      --a: 10px;
      --b: 20px;
      --default1: 10px;
    }
    </style>
    <dom-module id="var-el">
      <template>
        <style>
        :host {
          --color1: 123;
          --color2: 321;
          --color3: 231;
          display: block;
          height: 100px;
          width: 100px;
          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;
          border-style: solid;
          padding-bottom: var(--undefined, --default1);
        }
        </style>
        <div>Hi!</div>
      </template>
      <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'var-el'
        })
      });
      </script>
    </dom-module>
    <var-el></var-el>
  </body>
</html>