<!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>
