<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>mdv syntax</title>
  <script src="../../polymer.js"></script>
  <script src="../../tools/test/htmltest.js"></script>
  <script src="../../node_modules/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 }}">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.shadowRoot.querySelectorAll('div');
          for (var i = 0; i < d.length; i++) {
            assert.equal(d[i].textContent, this.test.math.expected[i]);
          }
          assert.ok(this.shadowRoot.querySelector('#conditional'));
          assert.ok(this.shadowRoot.querySelector('pre').classList.contains('bar'));
          assert.equal(this.shadowRoot.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();
        }
      });
    </script>
  </polymer-element>

  <!-- boot -->
  <script>
    assert = chai.assert;
    document.addEventListener('WebComponentsReady', function() {
      var e = document.createElement('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
      };
      document.body.appendChild(e);
      setTimeout(function() {
        e.runTests();
        done();
      }, 0);
    });
  </script>

</body>
</html>
