Home | History | Annotate | Download | only in test 
      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-horizontal</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="collapse" opened horizontal>
     30           <div style="width:100px;">
     31             Lorem ipsum
     32           </div>
     33         </iron-collapse>
     34       </template>
     35     </test-fixture>
     36 
     37     <script>
     38 
     39       suite('horizontal', function() {
     40 
     41         var collapse;
     42         var collapseWidth;
     43 
     44         setup(function () {
     45           collapse = fixture('test');
     46           collapseWidth = getComputedStyle(collapse).width;
     47         });
     48 
     49         test('opened attribute', function() {
     50           assert.equal(collapse.opened, true);
     51         });
     52 
     53         test('horizontal attribute', function() {
     54           assert.equal(collapse.horizontal, true);
     55         });
     56 
     57         test('default opened width', function() {
     58           assert.equal(collapse.style.width, '');
     59         });
     60 
     61         test('set opened to false, then to true', function(done) {
     62           // This listener will be triggered twice (every time `opened` changes).
     63           collapse.addEventListener('transitionend', function() {
     64             if (collapse.opened) {
     65               // Check finalSize after animation is done.
     66               assert.equal(collapse.style.width, '');
     67               done();
     68             } else {
     69               // Check if size is still 0px.
     70               assert.equal(collapse.style.maxWidth, '0px');
     71               // Trigger 2nd toggle.
     72               collapse.opened = true;
     73               // Size should be immediately set.
     74               assert.equal(collapse.style.maxWidth, collapseWidth);
     75             }
     76           });
     77           // Trigger 1st toggle.
     78           collapse.opened = false;
     79           // Size should be immediately set.
     80           assert.equal(collapse.style.maxWidth, '0px');
     81         });
     82       });
     83 
     84     </script>
     85 
     86   </body>
     87 </html>
     88