Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(151)

Side by Side Diff: third_party/polymer/components-chromium/paper-dropdown-menu/test/basic.html

Issue 864173009: Add paper-dropdown and paper-dropdown-menu and run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 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.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 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/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 <html> 10 <html>
11 <head> 11 <head>
12 <meta charset="UTF-8"> 12 <meta charset="UTF-8">
13 <title>core-dropdown basic tests</title> 13 <title>paper-dropdown-menu basic tests</title>
14 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0"> 14 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0">
15 15
16 <script src="../../webcomponentsjs/webcomponents.js"></script> 16 <script src="../../webcomponentsjs/webcomponents.js"></script>
17 <script src="../../web-component-tester/browser.js"></script> 17 <script src="../../web-component-tester/browser.js"></script>
18 18
19 <link href="../core-dropdown.html" rel="import"> 19 <link href="../core-dropdown.html" rel="import">
20 20
21 <style> 21 <style>
22 body { 22 body {
23 text-align: center; 23 text-align: center;
24 margin-top: 200px; 24 margin-top: 200px;
25 } 25 }
26 </style> 26 </style>
27 27
28 </head> 28 </head>
29 <body> 29 <body>
30 30
31 <div relative id="trigger1"> 31 <div relative id="trigger1">
32 tap 32 tap
33 <core-dropdown id="dropdown1">Hello World!</core-dropdown> 33 <core-dropdown id="dropdown1">Hello World!</core-dropdown>
34 </div> 34 </div>
35 35
36 <div relative id="trigger2"> 36 <div relative id="trigger2">
37 tap 37 tap
38 <core-dropdown id="dropdown2" valign="bottom">Hello World!</core-dropdown> 38 <core-dropdown id="dropdown2">Hello World!</core-dropdown>
39 </div> 39 </div>
40 40
41 <div relative id="trigger3"> 41 <div relative id="trigger3">
42 tap 42 tap
43 <core-dropdown id="dropdown3" halign="right">Hello World!</core-dropdown> 43 <core-dropdown id="dropdown3">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-dro pdown>
54 </div>
55
56 <div relative id="trigger6">
57 tap
58 <core-dropdown id="dropdown6" layered halign="right">Hello World!</core-drop down>
59 </div> 44 </div>
60 45
61 <script> 46 <script>
62 47
63 function approxEqual(a, b) {
64 return assert.equal(Math.round(a), Math.round(b));
65 }
66
67 function assertPosition(dropdown, trigger) { 48 function assertPosition(dropdown, trigger) {
68 var dr = dropdown.getBoundingClientRect(); 49 var dr = dropdown.getBoundingClientRect();
69 var tr = trigger.getBoundingClientRect(); 50 var tr = trigger.getBoundingClientRect();
70 51
71 if (dropdown.halign === 'left') { 52 if (dropdown.halign === 'left') {
72 approxEqual(dr.left, tr.left); 53 assert.equal(dr.left, tr.left);
73 } else { 54 } else {
74 approxEqual(dr.right, tr.right); 55 assert.equal(dr.right, tr.right);
75 } 56 }
76 57
77 if (dropdown.valign === 'top') { 58 if (dropdown.valign === 'top') {
78 approxEqual(dr.top, tr.top); 59 assert.equal(dr.top, tr.top);
79 } else { 60 } else {
80 approxEqual(dr.bottom, tr.bottom); 61 assert.equal(dr.bottom, tr.bottom);
81 } 62 }
82 }; 63 };
83 64
84 function flushLayoutAndRender(callback) { 65 function flushLayoutAndRender(callback) {
85 flush(function() { 66 flush(function() {
86 document.body.offsetTop; 67 document.body.offsetTop;
87 requestAnimationFrame(function() { 68 requestAnimationFrame(function() {
88 callback(); 69 callback();
89 }); 70 });
90 }); 71 });
91 } 72 }
92 73
93 var d1 = document.getElementById('dropdown1'); 74 var d1 = document.getElementById('dropdown1');
94 var t1 = document.getElementById('trigger1'); 75 var t1 = document.getElementById('trigger1');
76 d1.relatedTarget = t1;
95 77
96 var d2 = document.getElementById('dropdown2'); 78 var d2 = document.getElementById('dropdown2');
97 var t2 = document.getElementById('trigger2'); 79 var t2 = document.getElementById('trigger2');
80 d2.relatedTarget = t2;
98 81
99 var d3 = document.getElementById('dropdown3'); 82 var d3 = document.getElementById('dropdown3');
100 var t3 = document.getElementById('trigger3'); 83 var t3 = document.getElementById('trigger3');
101 84 d3.relatedTarget = t3;
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 85
111 test('default', function(done) { 86 test('default', function(done) {
112 d1.opened = true; 87 d1.opened = true;
113 flushLayoutAndRender(function() { 88 flushLayoutAndRender(function() {
114 assertPosition(d1, t1); 89 assertPosition(d1, t1);
115 done(); 90 done();
116 }); 91 });
117 }); 92 });
118 93
119 test('bottom alignment', function(done) { 94 test('bottom alignment', function(done) {
95 d2.valign = 'bottom';
120 d2.opened = true; 96 d2.opened = true;
121 flushLayoutAndRender(function() { 97 flushLayoutAndRender(function() {
122 assertPosition(d2, t2); 98 assertPosition(d2, t2);
123 done(); 99 done();
124 }); 100 });
125 }); 101 });
126 102
127 test('right alignment', function(done) { 103 test('right alignment', function(done) {
104 d3.halign = 'right';
128 d3.opened = true; 105 d3.opened = true;
129 flushLayoutAndRender(function() { 106 flushLayoutAndRender(function() {
130 assertPosition(d3, t3); 107 assertPosition(d3, t3);
131 done(); 108 done();
132 }); 109 });
133 }); 110 });
134 111
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> 112 </script>
160 113
161 </body> 114 </body>
162 </html> 115 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698