third_party/polymer/components/core-dropdown/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 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" valign="bottom">Hello World!</core-dropdown>
  39   </div>
  40
  41   <div relative id="trigger3">
  42     tap
  43     <core-dropdown id="dropdown3" halign="right">Hello World!</core-dropdown>
  44   </div>
  45
  46   <div relative id="trigger4">
  47     tap
  48     <core-dropdown id="dropdown4" layered>Hello World!</core-dropdown>
  49   </div>
  50
  51   <div relative id="trigger5">
  52     tap
  53     <core-dropdown id="dropdown5" layered valign="bottom">Hello World!</core-dropdown>
  54   </div>
  55
  56   <div relative id="trigger6">
  57     tap
  58     <core-dropdown id="dropdown6" layered halign="right">Hello World!</core-dropdown>
  59   </div>
  60
  61   <script>
  62
  63     function approxEqual(a, b) {
  64       return assert.equal(Math.round(a), Math.round(b));
  65     }
  66
  67     function assertPosition(dropdown, trigger) {
  68       var dr = dropdown.getBoundingClientRect();
  69       var tr = trigger.getBoundingClientRect();
  70
  71       if (dropdown.halign === 'left') {
  72         approxEqual(dr.left, tr.left);
  73       } else {
  74         approxEqual(dr.right, tr.right);
  75       }
  76
  77       if (dropdown.valign === 'top') {
  78         approxEqual(dr.top, tr.top);
  79       } else {
  80         approxEqual(dr.bottom, tr.bottom);
  81       }
  82     };
  83
  84     function flushLayoutAndRender(callback) {
  85       flush(function() {
  86         document.body.offsetTop;
  87         requestAnimationFrame(function() {
  88           callback();
  89         });
  90       });
  91     }
  92
  93     var d1 = document.getElementById('dropdown1');
  94     var t1 = document.getElementById('trigger1');
  95
  96     var d2 = document.getElementById('dropdown2');
  97     var t2 = document.getElementById('trigger2');
  98
  99     var d3 = document.getElementById('dropdown3');
 100     var t3 = document.getElementById('trigger3');
 101
 102     var d4 = document.getElementById('dropdown4');
 103     var t4 = document.getElementById('trigger4');
 104
 105     var d5 = document.getElementById('dropdown5');
 106     var t5 = document.getElementById('trigger5');
 107
 108     var d6 = document.getElementById('dropdown6');
 109     var t6 = document.getElementById('trigger6');
 110
 111     test('default', function(done) {
 112       d1.opened = true;
 113       flushLayoutAndRender(function() {
 114         assertPosition(d1, t1);
 115         done();
 116       });
 117     });
 118
 119     test('bottom alignment', function(done) {
 120       d2.opened = true;
 121       flushLayoutAndRender(function() {
 122         assertPosition(d2, t2);
 123         done();
 124       });
 125     });
 126
 127     test('right alignment', function(done) {
 128       d3.opened = true;
 129       flushLayoutAndRender(function() {
 130         assertPosition(d3, t3);
 131         done();
 132       });
 133     });
 134
 135     test('layered', function(done) {
 136       d4.opened = true;
 137       flushLayoutAndRender(function() {
 138         assertPosition(d4, t4);
 139         done();
 140       });
 141     });
 142
 143     test('layered, bottom alignment', function(done) {
 144       d5.opened = true;
 145       flushLayoutAndRender(function() {
 146         assertPosition(d5, t5);
 147         done();
 148       });
 149     });
 150
 151     test('layered, right alignment', function(done) {
 152       d6.opened = true;
 153       flushLayoutAndRender(function() {
 154         assertPosition(d6, t6);
 155         done();
 156       });
 157     });
 158
 159   </script>
 160
 161 </body>
 162 </html>