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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/components/iron-collapse/test/flex.html

Issue 2113853002: Run bower update (Closed) Base URL: https://github.com/catapult-project/catapult@polymer10-migration
Patch Set: Created 4 years, 5 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
« no previous file with comments | « third_party/polymer/components/iron-collapse/test/basic.html ('k') | third_party/polymer/components/iron-collapse/test/horizontal.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 @license 3 @license
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
10 --> 10 -->
11 11
12 <html> 12 <html>
13 <head> 13 <head>
14 14
15 <title>iron-collapse-basic</title> 15 <title>iron-collapse-flex</title>
16 <meta charset="utf-8"> 16 <meta charset="utf-8">
17 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <meta name="viewport" content="width=device-width, initial-scale=1.0">
18 18
19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20 <script src="../../web-component-tester/browser.js"></script> 20 <script src="../../web-component-tester/browser.js"></script>
21 <script src="../../test-fixture/test-fixture-mocha.js"></script> 21 <script src="../../test-fixture/test-fixture-mocha.js"></script>
22 22
23 <link rel="import" href="../../iron-flex-layout/iron-flex-layout-classes.htm l">
23 <link rel="import" href="../../test-fixture/test-fixture.html"> 24 <link rel="import" href="../../test-fixture/test-fixture.html">
24 <link rel="import" href="../iron-collapse.html"> 25 <link rel="import" href="../iron-collapse.html">
25 26
27 <style is="custom-style" include="iron-flex">
28 </style>
29
26 </head> 30 </head>
27 <body> 31 <body>
28 32
29 <test-fixture id="test"> 33 <test-fixture id="test">
30 <template> 34 <template>
31 <iron-collapse id="collapse" opened> 35 <div id="container" class="layout vertical" style="height: 200px">
32 <div style="height:100px;"> 36 <iron-collapse id="collapse" opened style="flex: 1 0 auto">
33 Lorem ipsum 37 <div style="height:100px;">
34 </div> 38 Lorem ipsum
35 </iron-collapse> 39 </div>
40 </iron-collapse>
41 </div>
36 </template> 42 </template>
37 </test-fixture> 43 </test-fixture>
38 44
39 <script> 45 <script>
40 46
41 suite('basic', function() { 47 suite('flex', function() {
42 48
49 var container;
43 var collapse; 50 var collapse;
44 var collapseHeight; 51 var collapseHeight;
45 52
46 setup(function() { 53 setup(function() {
47 collapse = fixture('test'); 54 container = fixture('test');
55 collapse = container.querySelector('iron-collapse');
48 collapseHeight = getComputedStyle(collapse).height; 56 collapseHeight = getComputedStyle(collapse).height;
49 }); 57 });
50 58
51 test('opened attribute', function() {
52 assert.equal(collapse.opened, true);
53 });
54
55 test('animated by default', function() {
56 assert.isTrue(!collapse.noAnimation, '`noAnimation` is falsy');
57 });
58
59 test('horizontal attribute', function() {
60 assert.equal(collapse.horizontal, false);
61 });
62
63 test('default opened height', function() { 59 test('default opened height', function() {
64 assert.equal(collapse.style.height, 'auto'); 60 assert.equal(collapse.style.height, '');
65 }); 61 });
66 62
67 test('set opened to false triggers animation', function(done) { 63 test('set opened to false triggers animation', function(done) {
68 collapse.opened = false; 64 collapse.opened = false;
69 // Animation got enabled. 65 // Animation got enabled.
70 assert.notEqual(collapse.style.transitionDuration, '0s'); 66 assert.notEqual(collapse.style.transitionDuration, '0s');
71 collapse.addEventListener('transitionend', function() { 67 collapse.addEventListener('transitionend', function() {
72 // Animation disabled. 68 // Animation disabled.
73 assert.equal(collapse.style.transitionDuration, '0s'); 69 assert.equal(collapse.style.transitionDuration, '0s');
74 done(); 70 done();
75 }); 71 });
76 }); 72 });
77 73
78 test('enableTransition(false) disables animations', function() { 74 test('enableTransition(false) disables animations', function() {
79 collapse.enableTransition(false); 75 collapse.enableTransition(false);
80 assert.isTrue(collapse.noAnimation, '`noAnimation` is true'); 76 assert.isTrue(collapse.noAnimation, '`noAnimation` is true');
81 // trying to animate the size update 77 // trying to animate the size update
82 collapse.updateSize('0px', true); 78 collapse.updateSize('0px', true);
83 // Animation immediately disabled. 79 // Animation immediately disabled.
84 assert.equal(collapse.style.height, '0px'); 80 assert.equal(collapse.style.maxHeight, '0px');
85 }); 81 });
86 82
87 test('set opened to false, then to true', function(done) { 83 test('set opened to false, then to true', function(done) {
88 // this listener will be triggered twice (every time `opened` changes) 84 // this listener will be triggered twice (every time `opened` changes)
89 collapse.addEventListener('transitionend', function() { 85 collapse.addEventListener('transitionend', function() {
90 if (collapse.opened) { 86 if (collapse.opened) {
91 // Check finalSize after animation is done. 87 // Check finalSize after animation is done.
92 assert.equal(collapse.style.height, 'auto'); 88 assert.equal(collapse.style.maxHeight, '');
93 done(); 89 done();
94 } else { 90 } else {
95 // Check if size is still 0px. 91 // Check if size is still 0px.
96 assert.equal(collapse.style.height, '0px'); 92 assert.equal(collapse.style.maxHeight, '0px');
97 // Trigger 2nd toggle. 93 // Trigger 2nd toggle.
98 collapse.opened = true; 94 collapse.opened = true;
99 // Size should be immediately set. 95 // Size should be immediately set.
100 assert.equal(collapse.style.height, collapseHeight); 96 assert.equal(collapse.style.maxHeight, collapseHeight);
101 } 97 }
102 }); 98 });
103 // Trigger 1st toggle. 99 // Trigger 1st toggle.
104 collapse.opened = false; 100 collapse.opened = false;
105 // Size should be immediately set. 101 // Size should be immediately set.
106 assert.equal(collapse.style.height, '0px'); 102 assert.equal(collapse.style.maxHeight, '0px');
107 }); 103 });
108 104
109 test('opened changes trigger iron-resize', function() { 105 test('opened changes trigger iron-resize', function() {
110 var spy = sinon.stub(); 106 var spy = sinon.stub();
111 collapse.addEventListener('iron-resize', spy); 107 collapse.addEventListener('iron-resize', spy);
112 // No animations for faster test. 108 // No animations for faster test.
113 collapse.noAnimation = true; 109 collapse.noAnimation = true;
114 collapse.opened = false; 110 collapse.opened = false;
115 assert.isTrue(spy.calledOnce, 'iron-resize was fired'); 111 assert.isTrue(spy.calledOnce, 'iron-resize was fired');
116 }); 112 });
117 113
118 test('overflow is hidden while animating', function(done) { 114 test('overflow is hidden while animating', function(done) {
119 collapse.addEventListener('transitionend', function() { 115 collapse.addEventListener('transitionend', function() {
120 // Should still be hidden. 116 // Should still be hidden.
121 assert.equal(getComputedStyle(collapse).overflow, 'hidden'); 117 assert.equal(getComputedStyle(collapse).overflow, 'hidden');
122 done(); 118 done();
123 }); 119 });
124 assert.equal(getComputedStyle(collapse).overflow, 'visible'); 120 assert.equal(getComputedStyle(collapse).overflow, 'visible');
125 collapse.opened = false; 121 collapse.opened = false;
126 // Immediately updated style. 122 // Immediately updated style.
127 assert.equal(getComputedStyle(collapse).overflow, 'hidden'); 123 assert.equal(getComputedStyle(collapse).overflow, 'hidden');
128 }); 124 });
129 125
130 test('toggle horizontal updates size', function() { 126 test('toggle horizontal updates size', function() {
131 collapse.horizontal = false; 127 collapse.horizontal = false;
132 assert.equal(collapse.style.width, ''); 128 assert.equal(collapse.style.width, '');
133 assert.equal(collapse.style.height, 'auto'); 129 assert.equal(collapse.style.maxHeight, '');
134 assert.equal(collapse.style.transitionProperty, 'height'); 130 assert.equal(collapse.style.transitionProperty, 'max-height');
135 131
136 collapse.horizontal = true; 132 collapse.horizontal = true;
137 assert.equal(collapse.style.width, 'auto'); 133 assert.equal(collapse.style.maxWidth, '');
138 assert.equal(collapse.style.height, ''); 134 assert.equal(collapse.style.height, '');
139 assert.equal(collapse.style.transitionProperty, 'width'); 135 assert.equal(collapse.style.transitionProperty, 'max-width');
140 }); 136 });
141 137
142 }); 138 });
143 139
144 </script> 140 </script>
145 141
146 </body> 142 </body>
147 </html> 143 </html>
OLDNEW
« no previous file with comments | « third_party/polymer/components/iron-collapse/test/basic.html ('k') | third_party/polymer/components/iron-collapse/test/horizontal.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698