third_party/polymer/components-chromium/core-dropdown-menu/test/basic.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <html>
  11 <head>
  12   <meta charset="UTF-8">
  13   <title>core-dropdown-menu basic tests</title>
  14   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  15
  16   <script src="../../webcomponentsjs/webcomponents.js"></script>
  17   <script src="../../web-component-tester/browser.js"></script>
  18
  19   <link href="../../core-dropdown/core-dropdown.html" rel="import">
  20   <link href="../../core-item/core-item.html" rel="import">
  21   <link href="../../core-menu/core-menu.html" rel="import">
  22
  23   <link href="../core-dropdown-menu.html" rel="import">
  24
  25   <style>
  26     core-collapse {
  27       border: 1px solid black;
  28     }
  29   </style>
  30
  31 </head>
  32 <body>
  33
  34   <core-dropdown-menu id="dropdown1" label="Your favorite dessert">
  35     <core-dropdown class="dropdown">
  36       <core-menu id="menu1">
  37         <core-item foo="c">Cupcake</core-item>
  38         <core-item foo="d">Donut</core-item>
  39         <core-item foo="e">Eclair</core-item>
  40         <core-item foo="f">Froyo</core-item>
  41         <core-item foo="g">Gingerbread</core-item>
  42         <core-item foo="h">Honeycomb</core-item>
  43         <core-item foo="i">Ice cream sandwich</core-item>
  44         <core-item foo="j">Jellybean</core-item>
  45         <core-item foo="k">Kit Kat</core-item>
  46         <core-item foo="l">Lollipop</core-item>
  47       </core-menu>
  48     </core-dropdown>
  49   </core-dropdown-menu>
  50
  51   <script>
  52
  53     function flushLayoutAndRender(callback) {
  54       flush(function() {
  55         document.body.offsetTop;
  56         requestAnimationFrame(function() {
  57           callback();
  58         });
  59       });
  60     }
  61
  62     var d1 = document.getElementById('dropdown1');
  63     var m1 = document.getElementById('menu1');
  64
  65     test('shows the label when nothing selected', function(done) {
  66       m1.selected = null;
  67       flushLayoutAndRender(function() {
  68         assert.strictEqual(d1.$.label.textContent, d1.label);
  69         done();
  70       });
  71     });
  72
  73     test('shows the selected item', function(done) {
  74       m1.selected = 2;
  75       flushLayoutAndRender(function() {
  76         assert.strictEqual(d1.$.label.textContent, m1.selectedItem.textContent);
  77         done();
  78       });
  79     });
  80
  81     test('can clear the selected item', function(done) {
  82       m1.selected = 2;
  83       flushLayoutAndRender(function() {
  84         assert.strictEqual(d1.$.label.textContent, m1.selectedItem.textContent);
  85
  86         m1.selected = null;
  87         flushLayoutAndRender(function() {
  88           assert.strictEqual(d1.$.label.textContent, d1.label);
  89           done();
  90         });
  91       });
  92     });
  93
  94     test('use the valueattr attribute', function(done) {
  95       m1.valueattr = "foo";
  96       m1.selected = "l";
  97       flushLayoutAndRender(function() {
  98         assert.strictEqual(d1.$.label.textContent, m1.selectedItem.textContent);
  99         done();
 100       });
 101     });
 102
 103   </script>
 104
 105 </body>
 106 </html>