third_party/polymer/components-chromium/paper-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>paper-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.html" rel="import">
  20
  21   <style>
  22     body {
  23       text-align: center;
  24       margin-top: 200px;
  25     }
  26   </style>
  27
  28 </head>
  29 <body>
  30
  31   <div relative id="trigger1">
  32     tap
  33     <core-dropdown id="dropdown1">Hello World!</core-dropdown>
  34   </div>
  35
  36   <div relative id="trigger2">
  37     tap
  38     <core-dropdown id="dropdown2">Hello World!</core-dropdown>
  39   </div>
  40
  41   <div relative id="trigger3">
  42     tap
  43     <core-dropdown id="dropdown3">Hello World!</core-dropdown>
  44   </div>
  45
  46   <script>
  47
  48     function assertPosition(dropdown, trigger) {
  49       var dr = dropdown.getBoundingClientRect();
  50       var tr = trigger.getBoundingClientRect();
  51
  52       if (dropdown.halign === 'left') {
  53         assert.equal(dr.left, tr.left);
  54       } else {
  55         assert.equal(dr.right, tr.right);
  56       }
  57
  58       if (dropdown.valign === 'top') {
  59         assert.equal(dr.top, tr.top);
  60       } else {
  61         assert.equal(dr.bottom, tr.bottom);
  62       }
  63     };
  64
  65     function flushLayoutAndRender(callback) {
  66       flush(function() {
  67         document.body.offsetTop;
  68         requestAnimationFrame(function() {
  69           callback();
  70         });
  71       });
  72     }
  73
  74     var d1 = document.getElementById('dropdown1');
  75     var t1 = document.getElementById('trigger1');
  76     d1.relatedTarget = t1;
  77
  78     var d2 = document.getElementById('dropdown2');
  79     var t2 = document.getElementById('trigger2');
  80     d2.relatedTarget = t2;
  81
  82     var d3 = document.getElementById('dropdown3');
  83     var t3 = document.getElementById('trigger3');
  84     d3.relatedTarget = t3;
  85
  86     test('default', function(done) {
  87       d1.opened = true;
  88       flushLayoutAndRender(function() {
  89         assertPosition(d1, t1);
  90         done();
  91       });
  92     });
  93
  94     test('bottom alignment', function(done) {
  95       d2.valign = 'bottom';
  96       d2.opened = true;
  97       flushLayoutAndRender(function() {
  98         assertPosition(d2, t2);
  99         done();
 100       });
 101     });
 102
 103     test('right alignment', function(done) {
 104       d3.halign = 'right';
 105       d3.opened = true;
 106       flushLayoutAndRender(function() {
 107         assertPosition(d3, t3);
 108         done();
 109       });
 110     });
 111
 112   </script>
 113
 114 </body>
 115 </html>