• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11
12<html>
13  <head>
14
15    <title>iron-pages-attr-for-selected</title>
16    <meta charset="utf-8">
17    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
18
19    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20    <script src="../../web-component-tester/browser.js"></script>
21    <link rel="import" href="../iron-pages.html">
22
23  </head>
24  <body>
25
26    <test-fixture id="basic">
27      <template>
28        <iron-pages attr-for-selected="name" selected="page0">
29          <div name="page0">Page 0</div>
30          <div name="page1">Page 1</div>
31          <div name="page2">Page 2</div>
32          <div name="page3">Page 3</div>
33        </iron-pages>
34      </template>
35    </test-fixture>
36
37    <script>
38
39      suite('basic', function() {
40        var pages;
41
42        suite('honor the selected attribute', function() {
43          setup(function () {
44            pages = fixture('basic');
45          });
46
47          test('selected value', function() {
48            assert.equal(pages.selected, 'page0');
49          });
50
51          test('selected item', function(done) {
52            // iron-selector uses observeNodes, which is async.
53            Polymer.Base.async(function() {
54              assert.equal(pages.selectedItem, pages.items[0])
55              done();
56            }, 1);
57          });
58
59          test('selected item is display:block and all others are display:none', function() {
60            pages.items.forEach(function(p) {
61              assert.equal(getComputedStyle(p).display, p == pages.selectedItem ? 'block' : 'none');
62            });
63          });
64        });
65
66        suite('set selected attribute', function() {
67          setup(function () {
68            pages = fixture('basic');
69            pages.selected = 'page2';
70          });
71
72          test('selected value', function() {
73            assert.equal(pages.selected, 'page2');
74          });
75
76          test('selected item', function() {
77            assert.equal(pages.selectedItem, pages.items[2]);
78          });
79
80          test('selected item is display:block and all others are display:none', function() {
81            pages.items.forEach(function(p) {
82              assert.equal(getComputedStyle(p).display, p == pages.selectedItem ? 'block' : 'none');
83            });
84          });
85        });
86
87      });
88
89    </script>
90
91  </body>
92</html>
93