Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(183)

Side by Side Diff: polymer_1.2.3/bower_components/paper-menu/test/paper-submenu.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!doctype html>
2 <!--
3 @license
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
8 Code distributed by Google as part of the polymer project is also
9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
10 -->
11 <html>
12 <head>
13
14 <title>paper-submenu tests</title>
15
16 <meta charset="utf-8">
17 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
18 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initia l-scale=1, user-scalable=yes">
19
20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21
22 <script src="../../web-component-tester/browser.js"></script>
23 <script src="../../iron-test-helpers/mock-interactions.js"></script>
24
25 <link rel="import" href="../../paper-item/paper-item.html">
26 <link rel="import" href="../paper-menu.html">
27 <link rel="import" href="../paper-submenu.html">
28
29 </head>
30 <style>
31 paper-item {
32 font-weight: normal;
33 }
34 </style>
35 <body>
36
37 <test-fixture id="basic">
38 <template>
39 <paper-menu>
40 <paper-submenu>
41 <paper-item class="menu-trigger">Topic 1</paper-item>
42 <paper-menu class="menu-content">
43 <paper-item>item 1.1</paper-item>
44 <paper-item>item 1.2</paper-item>
45 <paper-item>item 1.3</paper-item>
46 </paper-menu>
47 </paper-submenu>
48 <paper-submenu>
49 <paper-item class="menu-trigger">Topic 2</paper-item>
50 <paper-menu class="menu-content">
51 <paper-item>item 2.1</paper-item>
52 <paper-item>item 2.2</paper-item>
53 <paper-item>item 2.3</paper-item>
54 </paper-menu>
55 </paper-submenu>
56 <paper-submenu disabled>
57 <paper-item class="menu-trigger">Topic 3</paper-item>
58 <paper-menu class="menu-content">
59 <paper-item>item 3.1</paper-item>
60 <paper-item>item 3.2</paper-item>
61 <paper-item>item 3.3</paper-item>
62 </paper-menu>
63 </paper-submenu>
64 </paper-menu>
65 </template>
66 </test-fixture>
67
68 <script>
69
70 suite('<paper-submenu>', function() {
71 var menu,
72 sub1, sub2, sub3,
73 collapse1, collapse2, collapse3,
74 trigger1, trigger2, trigger3;
75
76 setup(function() {
77 menu = fixture('basic');
78
79 sub1 = menu.querySelectorAll('paper-submenu')[0];
80 sub2 = menu.querySelectorAll('paper-submenu')[1];
81 sub3 = menu.querySelectorAll('paper-submenu')[2];
82
83 collapse1 = Polymer.dom(sub1.root).querySelector('iron-collapse');
84 collapse2 = Polymer.dom(sub2.root).querySelector('iron-collapse');
85 collapse3 = Polymer.dom(sub3.root).querySelector('iron-collapse');
86
87 trigger1 = sub1.querySelector('.menu-trigger');
88 trigger2 = sub2.querySelector('.menu-trigger');
89 trigger3 = sub3.querySelector('.menu-trigger');
90 });
91
92 test('selecting an item expands the submenu', function() {
93 assert.isFalse(collapse1.opened);
94 assert.isFalse(collapse2.opened);
95 assert.isFalse(collapse3.opened);
96
97 MockInteractions.tap(trigger1);
98
99 assert.isTrue(collapse1.opened);
100 assert.isFalse(collapse2.opened);
101 assert.isFalse(collapse3.opened);
102 });
103
104 test('selecting a different item closes the previously opened submenu', function() {
105 assert.isFalse(collapse1.opened);
106 assert.isFalse(collapse2.opened);
107 assert.isFalse(collapse3.opened);
108
109 MockInteractions.tap(trigger1);
110
111 assert.isTrue(collapse1.opened);
112 assert.isFalse(collapse2.opened);
113 assert.isFalse(collapse3.opened);
114
115 MockInteractions.tap(trigger2);
116
117 assert.isFalse(collapse1.opened);
118 assert.isTrue(collapse2.opened);
119 assert.isFalse(collapse3.opened);
120 });
121
122 test('cannot open a disabled submenu', function() {
123 assert.isFalse(collapse1.opened);
124 assert.isFalse(collapse2.opened);
125 assert.isFalse(collapse3.opened);
126
127 MockInteractions.tap(trigger3);
128
129 assert.isFalse(collapse1.opened);
130 assert.isFalse(collapse2.opened);
131 assert.isFalse(collapse3.opened);
132 });
133
134 test('selecting an item styles it and the parent', function() {
135 var boldDiv = document.createElement('div');
136 boldDiv.style.fontWeight = 'bold';
137 document.body.appendChild(boldDiv);
138
139 var normalDiv = document.createElement('div');
140 normalDiv.style.fontWeight = 'normal';
141 document.body.appendChild(normalDiv);
142
143 assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(n ormalDiv).fontWeight);
144 assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(n ormalDiv).fontWeight);
145 assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(n ormalDiv).fontWeight);
146
147 var item1 = sub1.querySelector('.menu-content').querySelector('paper-i tem');
148
149 MockInteractions.tap(trigger1);
150 // Nothing is initially selected.
151 assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(norm alDiv).fontWeight);
152 MockInteractions.tap(item1);
153
154 assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(bold Div).fontWeight);
155 assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(b oldDiv).fontWeight);
156 assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(n ormalDiv).fontWeight);
157 assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(n ormalDiv).fontWeight);
158 });
159
160 test('selecting a new item de-styles the previous one', function() {
161 var boldDiv = document.createElement('div');
162 boldDiv.style.fontWeight = 'bold';
163 document.body.appendChild(boldDiv);
164
165 var normalDiv = document.createElement('div');
166 normalDiv.style.fontWeight = 'normal';
167 document.body.appendChild(normalDiv);
168
169 assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(n ormalDiv).fontWeight);
170 assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(n ormalDiv).fontWeight);
171 assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(n ormalDiv).fontWeight);
172
173 var item1 = sub1.querySelector('.menu-content').querySelector('paper-i tem');
174 var item2 = sub2.querySelector('.menu-content').querySelector('paper-i tem');
175
176 MockInteractions.tap(trigger1);
177 MockInteractions.tap(item1);
178 MockInteractions.tap(trigger2);
179 MockInteractions.tap(item2);
180
181 // Both children are still selected even though the first one is hidde n.
182 assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(bold Div).fontWeight);
183 assert.equal(getComputedStyle(item2).fontWeight, getComputedStyle(bold Div).fontWeight);
184
185 assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(n ormalDiv).fontWeight);
186 assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(b oldDiv).fontWeight);
187 assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(n ormalDiv).fontWeight);
188 });
189
190 test('focus a submenu should redirect focus to the trigger', function(do ne) {
191 MockInteractions.focus(sub1);
192 flush(function() {
193 assert.equal(sub1.shadowRoot ? sub1.shadowRoot.activeElement :
194 document.activeElement, sub1.__trigger);
195 done();
196 });
197 });
198 });
199
200 </script>
201
202 </body>
203 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698