text: <!DOCTYPE html>
  <!--
  Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  -->
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>mdv syntax</title>
    <script src="../../../webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="../../polymer.html">
    <script src="../../../tools/test/htmltest.js"></script>
    <script src="../../../tools/test/chai/chai.js"></script>
  </head>
  <body>
    <!-- bind -->
    <polymer-element name="mdv-bind" attributes="test">
      <template>
        <template bind="{{test.bindAs.value as v}}">
        <span id="output">{{v}}</span>
        </template>
      </template>
      <script>
        Polymer('mdv-bind', {
          runTests: function() {
            var o = this.shadowRoot.querySelector('#output');
            assert.equal(o.textContent, this.test.bindAs.value);
          }
        });
      </script>
    </polymer-element>
  
    <!-- repeat -->
    <polymer-element name="mdv-repeat" attributes="test">
      <template>
        <template repeat="{{item in test.repeatIn}}">
          <div>{{item.value}}</div>
        </template>
      </template>
      <script>
        Polymer('mdv-repeat', {
          runTests: function() {
            var d = this.shadowRoot.querySelectorAll('div');
            for (var i = 0; i < d.length; i++) {
              assert.equal(d[i].textContent, this.test.repeatIn[i].value);
            }
          }
        });
      </script>
    </polymer-element>
  
    <!-- expressions -->
    <polymer-element name="mdv-expression" attributes="test">
      <template>
        <template bind="{{test.math as m}}">
          <template if="{{ m.a > 0 }}">
            <span id="conditional">I LIVE!</span>
          </template>
          <div>{{m.a + m.b}}</div>
          <div>{{m.a - m.b}}</div>
          <div>{{ 0 || m.b}}</div>
          <div>{{ (1 || 0) ? true : false }}</div>
          <div>{{ m.a != m.b }}</div>
          <div>{{ m.a === "2" }}</div>
          <pre class="{{ {bar: test.bindAs.value == 42 * m.a} | tokenList}}">Pre</pre>
          <div>{{ [m.a, m.b] }}</div>
          <div>{{ test.itself.PolymerBase }}</div>
          <span id="inception">{{ test.itself.offsetTop }}</span>
        </template>
      </template>
      <script>
        Polymer('mdv-expression', {
          runTests: function() {
            var d = this.querySelectorAll('div');
            for (var i = 0; i < d.length; i++) {
              assert.equal(d[i].textContent, this.test.math.expected[i]);
            }
            assert.ok(this.querySelector('#conditional'));
            assert.ok(this.querySelector('pre').classList.contains('bar'));
            assert.equal(this.querySelector('#inception').textContent, document.querySelector('mdv-holder').offsetTop);
          }
        });
      </script>
    </polymer-element>
  
    <!-- all -->
    <polymer-element name="mdv-holder" attributes="test">
      <template>
        <mdv-bind id="bind" test="{{test}}"></mdv-bind>
        <mdv-repeat id="repeat" test="{{test}}"></mdv-repeat>
        <mdv-expression id="math" test="{{test}}"></mdv-expression>
      </template>
      <script>
        Polymer('mdv-holder', {
          runTests: function() {
            this.$.bind.runTests();
            this.$.repeat.runTests();
            this.$.math.runTests();
          },
          ready: function() {
            this.onMutation(this.$.math, function() {
              this.runTests();
              done();
            });
          }
        });
      </script>
    </polymer-element>
  
    <mdv-holder></mdv-holder>
  
    <!-- boot -->
    <script>
      assert = chai.assert;
      window.addEventListener('polymer-ready', function() {
        var e = document.querySelector('mdv-holder');
        e.test = {
          bindAs: {value: 42},
          repeatIn: [{value: 1}, {value: 2}],
          math: {
            a: 1,
            b: 2,
            expected: [3, -1, 2, 'true', 'true', 'false', '1,2', 'true']
          },
          itself: e
        };
      });
    </script>
  
  </body>
  </html>
  