<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE The complete set of authors may be found at polymer.github.io/AUTHORS The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS –> <html> <head>

<meta charset="UTF-8">
<title>test for app-toolbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../web-component-tester/browser.js"></script>
<script src="../../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../../test-fixture/test-fixture.html">
<link rel="import" href="../app-toolbar.html">

<style>
  body {
    margin: 0;
    padding: 0;
  }

  app-toolbar {
    height: 50px;
    background-color: gray;
  }

  [top-item] {
    height: 10px;
    background-color: green;
  }

  [bottom-item] {
    height: 10px;
    background-color: green;
  }

  [main-title] {
    background-color: red;
  }
</style>

</head> <body>

<test-fixture id="trivialToolbar">
  <template>
    <app-toolbar>
      <div top-item></div>
      <div main-title>Title</div>
      <div bottom-item></div>
    </app-toolbar>
  </template>
</test-fixture>

<script>

  suite('basic features', function() {
    var toolbar;

    setup(function() {
      toolbar = fixture('trivialToolbar');
    });

    test('Items', function() {
      var barHeight = toolbar.offsetHeight;
      var topItem = document.elementFromPoint(0, 0);
      var title = Polymer.dom(toolbar).querySelector('[main-title]');
      var titleRect = title.getBoundingClientRect();
      var barRect = toolbar.getBoundingClientRect();
      var bottomItem = document.elementFromPoint(0, barHeight-1);

      assert.isTrue(topItem.hasAttribute('top-item'));
      assert.isTrue(bottomItem.hasAttribute('bottom-item'));
      assert.isTrue(titleRect.top > 0 && barRect.bottom - titleRect.bottom > 0);
    });

  });

</script>

</body> </html>