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.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 10 --> 11 12 <html> 13 <head> 14 <title>iron-collapse-nested</title> 15 <meta charset="utf-8"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 18 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 19 <script src="../../web-component-tester/browser.js"></script> 20 <script src="../../test-fixture/test-fixture-mocha.js"></script> 21 22 <link rel="import" href="../../test-fixture/test-fixture.html"> 23 <link rel="import" href="../iron-collapse.html"> 24 </head> 25 <body> 26 27 <test-fixture id="test"> 28 <template> 29 <iron-collapse id="outer-collapse"> 30 <div style="height:100px;"> 31 Lorem ipsum 32 </div> 33 34 <iron-collapse id="inner-collapse-vertical"> 35 <div style="height:100px;"> 36 consectetur adipiscing elit 37 </div> 38 </iron-collapse> 39 40 <iron-collapse id="inner-collapse-horizontal" horizontal style="display: inline-block"> 41 <div style="width:100px;"> 42 consectetur adipiscing elit 43 </div> 44 </iron-collapse> 45 </iron-collapse> 46 </template> 47 </test-fixture> 48 49 <script> 50 51 suite('nested', function() { 52 53 var outerCollapse; 54 var innerCollapse; 55 56 setup(function () { 57 outerCollapse = fixture('test'); 58 }); 59 60 suite('vertical', function() { 61 62 setup(function () { 63 innerCollapse = outerCollapse.querySelector('#inner-collapse-vertical'); 64 }); 65 66 test('inner collapse default opened attribute', function() { 67 assert.equal(innerCollapse.opened, false); 68 }); 69 70 test('inner collapse default style height', function() { 71 assert.equal(innerCollapse.style.maxHeight, '0px'); 72 }); 73 74 test('open inner collapse updates size without animation', function() { 75 innerCollapse.opened = true; 76 77 // Animation disabled 78 assert.equal(innerCollapse.style.transitionDuration, '0s'); 79 }); 80 81 test('open inner collapse then open outer collapse reveals inner collapse with expanded height', function() { 82 innerCollapse.opened = true; 83 outerCollapse.opened = true; 84 85 assert.equal(innerCollapse.getBoundingClientRect().height, 100); 86 }); 87 88 }); 89 90 suite('horizontal', function() { 91 92 setup(function () { 93 innerCollapse = outerCollapse.querySelector('#inner-collapse-horizontal'); 94 }); 95 96 test('inner collapse default style width', function() { 97 assert.equal(innerCollapse.style.maxWidth, '0px'); 98 }); 99 100 test('open inner collapse updates size without animation', function() { 101 innerCollapse.opened = true; 102 103 // Animation disabled 104 assert.equal(innerCollapse.style.transitionDuration, '0s'); 105 }); 106 107 test('open inner collapse then open outer collapse reveals inner collapse with expanded width', function() { 108 innerCollapse.opened = true; 109 outerCollapse.opened = true; 110 111 assert.equal(innerCollapse.getBoundingClientRect().width, 100); 112 }); 113 114 }); 115 }); 116 </script> 117 118 </body> 119 </html> 120
