• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html>
3<head>
4<!-- TODO(arv): Check in Closue unit tests and make this run as part of the
5     tests -->
6<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
7<script src="../../cr.js"></script>
8<script src="position_util.js"></script>
9<script>
10
11goog.require('goog.testing.PropertyReplacer');
12goog.require('goog.testing.jsunit');
13
14</script>
15<style>
16
17html, body {
18  margin: 0;
19  width: 100%;
20  height: 100%;
21}
22
23#anchor {
24  position: absolute;
25  width: 10px;
26  height: 10px;
27  background: green;
28}
29
30#popup {
31  position: absolute;
32  top: 0;
33  left: 0;
34  width: 100px;
35  height: 100px;
36  background: red;
37}
38
39</style>
40</head>
41<body>
42
43<div id=anchor></div>
44<div id=popup></div>
45
46<script>
47
48var anchor = document.getElementById('anchor');
49var popup = document.getElementById('popup');
50var anchorParent = anchor.offsetParent;
51var pr = new goog.testing.PropertyReplacer;
52var availRect;
53
54function MockRect(w, h) {
55  this.width = w;
56  this.height = h;
57  this.right = this.left + w;
58  this.bottom = this.top + h;
59}
60MockRect.prototype = {
61  left: 0,
62  top: 0
63};
64
65function setUp() {
66  anchor.style.top = '100px';
67  anchor.style.left = '100px';
68  availRect = new MockRect(200, 200);
69  pr.set(anchorParent, 'getBoundingClientRect', function() {
70    return availRect;
71  });
72}
73
74function tearDown() {
75  document.documentElement.dir = 'ltr';
76  pr.reset();
77}
78
79function testAbovePrimary() {
80  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
81
82  assertEquals('auto', popup.style.top);
83  assertEquals('100px', popup.style.bottom);
84
85  anchor.style.top = '90px';
86  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
87  assertEquals('100px', popup.style.top);
88  assertEquals('auto', popup.style.bottom);
89}
90
91function testBelowPrimary() {
92  // ensure enough below
93  anchor.style.top = '90px';
94
95  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
96
97  assertEquals('100px', popup.style.top);
98  assertEquals('auto', popup.style.bottom);
99
100  // ensure not enough below
101  anchor.style.top = '100px';
102
103  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
104  assertEquals('auto', popup.style.top);
105  assertEquals('100px', popup.style.bottom);
106}
107
108function testBeforePrimary() {
109  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BEFORE);
110
111  assertEquals('auto', popup.style.left);
112  assertEquals('100px', popup.style.right);
113
114  anchor.style.left = '90px';
115  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BEFORE);
116  assertEquals('100px', popup.style.left);
117  assertEquals('auto', popup.style.right);
118}
119
120function testBeforePrimaryRtl() {
121  document.documentElement.dir = 'rtl';
122
123  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
124
125  assertEquals('auto', popup.style.left);
126  assertEquals('100px', popup.style.right);
127
128  anchor.style.left = '90px';
129
130  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
131  assertEquals('100px', popup.style.left);
132  assertEquals('auto', popup.style.right);
133}
134
135function testAfterPrimary() {
136  // ensure enough to the right
137  anchor.style.left = '90px';
138
139  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
140
141  assertEquals('100px', popup.style.left);
142  assertEquals('auto', popup.style.right);
143
144  // ensure not enough below
145  anchor.style.left = '100px';
146
147  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
148  assertEquals('auto', popup.style.left);
149  assertEquals('100px', popup.style.right);
150}
151
152function testAfterPrimaryRtl() {
153  document.documentElement.dir = 'rtl';
154
155  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
156
157  assertEquals('auto', popup.style.left);
158  assertEquals('100px', popup.style.right);
159
160  // ensure not enough below
161  anchor.style.left = '90px';
162
163  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
164  assertEquals('100px', popup.style.left);
165  assertEquals('auto', popup.style.right);
166}
167
168function testAboveSecondary() {
169  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
170
171  assertEquals('100px', popup.style.left);
172  assertEquals('auto', popup.style.right);
173
174  anchor.style.left = '110px';
175
176  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
177
178  assertEquals('auto', popup.style.left);
179  assertEquals('80px', popup.style.right);
180}
181
182function testAboveSecondaryRtl() {
183  document.documentElement.dir = 'rtl';
184
185  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
186
187  assertEquals('auto', popup.style.left);
188  assertEquals('90px', popup.style.right);
189
190  anchor.style.left = '80px';
191
192  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
193
194  assertEquals('80px', popup.style.left);
195  assertEquals('auto', popup.style.right);
196}
197
198function testAboveSecondarySwappedAlign() {
199  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE, true);
200
201  assertEquals('auto', popup.style.left);
202  assertEquals('90px', popup.style.right);
203
204  anchor.style.left = '80px';
205
206  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE, true);
207
208  assertEquals('80px', popup.style.left);
209  assertEquals('auto', popup.style.right);
210}
211
212function testBelowSecondary() {
213  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
214
215  assertEquals('100px', popup.style.left);
216  assertEquals('auto', popup.style.right);
217
218  anchor.style.left = '110px';
219
220  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
221
222  assertEquals('auto', popup.style.left);
223  assertEquals('80px', popup.style.right);
224}
225
226function testBelowSecondaryRtl() {
227  document.documentElement.dir = 'rtl';
228
229  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
230
231  assertEquals('auto', popup.style.left);
232  assertEquals('90px', popup.style.right);
233
234  anchor.style.left = '80px';
235
236  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
237
238  assertEquals('80px', popup.style.left);
239  assertEquals('auto', popup.style.right);
240}
241
242function testBelowSecondarySwappedAlign() {
243  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW, true);
244
245  assertEquals('auto', popup.style.left);
246  assertEquals('90px', popup.style.right);
247
248  anchor.style.left = '80px';
249
250  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW, true);
251
252  assertEquals('80px', popup.style.left);
253  assertEquals('auto', popup.style.right);
254}
255
256function testBeforeSecondary() {
257  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BEFORE);
258
259  assertEquals('100px', popup.style.top);
260  assertEquals('auto', popup.style.bottom);
261
262  anchor.style.top = '110px';
263
264  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BEFORE);
265
266  assertEquals('auto', popup.style.top);
267  assertEquals('80px', popup.style.bottom);
268}
269
270function testAfterSecondary() {
271  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
272
273  assertEquals('100px', popup.style.top);
274  assertEquals('auto', popup.style.bottom);
275
276  anchor.style.top = '110px';
277
278  cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
279
280  assertEquals('auto', popup.style.top);
281  assertEquals('80px', popup.style.bottom);
282}
283
284function testPositionAtPoint() {
285  cr.ui.positionPopupAtPoint(100, 100, popup);
286
287  assertEquals('100px', popup.style.left);
288  assertEquals('100px', popup.style.top);
289  assertEquals('auto', popup.style.right);
290  assertEquals('auto', popup.style.bottom);
291
292  cr.ui.positionPopupAtPoint(100, 150, popup);
293
294  assertEquals('100px', popup.style.left);
295  assertEquals('auto', popup.style.top);
296  assertEquals('auto', popup.style.right);
297  assertEquals('50px', popup.style.bottom);
298
299  cr.ui.positionPopupAtPoint(150, 150, popup);
300
301  assertEquals('auto', popup.style.left);
302  assertEquals('auto', popup.style.top);
303  assertEquals('50px', popup.style.right);
304  assertEquals('50px', popup.style.bottom);
305}
306
307</script>
308
309</body>
310</html>
311