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.github.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/CONTRIBUTORS.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/PATENTS.txt
15
<title>iron-collapse-basic</title>
16
<meta charset="utf-8">
17
<meta name="viewport" content="width=device-width, initial-scale=1.0">
19
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20
<script src="../../web-component-tester/browser.js"></script>
21
<script src="../../test-fixture/test-fixture-mocha.js"></script>
23
<link rel="import" href="../../test-fixture/test-fixture.html">
24
<link rel="import" href="../iron-collapse.html">
29
<test-fixture id="test">
31
<iron-collapse id="collapse" opened>
32
<div style="height:100px;">
41
suite('basic', function() {
47
collapse = fixture('test');
48
collapseHeight = getComputedStyle(collapse).height;
51
test('opened attribute', function() {
52
assert.equal(collapse.opened, true);
55
test('animated by default', function() {
56
assert.isTrue(!collapse.noAnimation, '`noAnimation` is falsy');
59
test('horizontal attribute', function() {
60
assert.equal(collapse.horizontal, false);
63
test('default opened height', function() {
64
assert.equal(collapse.style.height, 'auto');
67
test('set opened to false triggers animation', function(done) {
68
collapse.opened = false;
69
// Animation got enabled.
70
assert.notEqual(collapse.style.transitionDuration, '0s');
71
collapse.addEventListener('transitionend', function() {
72
// Animation disabled.
73
assert.equal(collapse.style.transitionDuration, '0s');
78
test('enableTransition(false) disables animations', function() {
79
collapse.enableTransition(false);
80
assert.isTrue(collapse.noAnimation, '`noAnimation` is true');
81
// trying to animate the size update
82
collapse.updateSize('0px', true);
83
// Animation immediately disabled.
84
assert.equal(collapse.style.height, '0px');
87
test('set opened to false, then to true', function(done) {
88
// this listener will be triggered twice (every time `opened` changes)
89
collapse.addEventListener('transitionend', function() {
90
if (collapse.opened) {
91
// Check finalSize after animation is done.
92
assert.equal(collapse.style.height, 'auto');
95
// Check if size is still 0px.
96
assert.equal(collapse.style.height, '0px');
97
// Trigger 2nd toggle.
98
collapse.opened = true;
99
// Size should be immediately set.
100
assert.equal(collapse.style.height, collapseHeight);
103
// Trigger 1st toggle.
104
collapse.opened = false;
105
// Size should be immediately set.
106
assert.equal(collapse.style.height, '0px');
109
test('opened changes trigger iron-resize', function() {
110
var spy = sinon.stub();
111
collapse.addEventListener('iron-resize', spy);
112
// No animations for faster test.
113
collapse.noAnimation = true;
114
collapse.opened = false;
115
assert.isTrue(spy.calledOnce, 'iron-resize was fired');
118
test('overflow is hidden while animating', function(done) {
119
collapse.addEventListener('transitionend', function() {
120
// Should still be hidden.
121
assert.equal(getComputedStyle(collapse).overflow, 'hidden');
124
assert.equal(getComputedStyle(collapse).overflow, 'visible');
125
collapse.opened = false;
126
// Immediately updated style.
127
assert.equal(getComputedStyle(collapse).overflow, 'hidden');
130
test('toggle horizontal updates size', function() {
131
collapse.horizontal = false;
132
assert.equal(collapse.style.width, '');
133
assert.equal(collapse.style.height, 'auto');
134
assert.equal(collapse.style.transitionProperty, 'height');
136
collapse.horizontal = true;
137
assert.equal(collapse.style.width, 'auto');
138
assert.equal(collapse.style.height, '');
139
assert.equal(collapse.style.transitionProperty, 'width');