aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/ui/popup_test.html
blob: 83c2d83bae304f3e6746239a5b64d901812ede42 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<!--
Copyright 2008 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Closure Unit Tests - goog.ui.Popup</title>
<script src="../base.js"></script>
<script>
  goog.require('goog.dom');
  goog.require('goog.math.Box');
  goog.require('goog.math.Coordinate');
  goog.require('goog.positioning');
  goog.require('goog.positioning.Corner');
  goog.require('goog.positioning.AnchoredPosition');
  goog.require('goog.testing.jsunit');
  goog.require('goog.ui.Popup');
</script>
<style>
#popup {
  position: absolute;
}
#anchor {
  margin-left: 100px;
}
</style>
</head>
<body>
  <span id="anchor">anchor</span>
  <div id="popup">
    Popup.
  </div>
<script>

/**
 * This is used to round pixel values on FF3 Mac.
 */
function assertRoundedEquals(a, b, c) {
  function round(x) {
    return goog.userAgent.GECKO && (goog.userAgent.MAC || goog.userAgent.X11) &&
        goog.userAgent.isVersion('1.9') ? Math.round(x) : x;
  }
  if (arguments.length == 3) {
    assertEquals(a, round(b), round(c));
  } else {
    assertEquals(round(a), round(b));
  }
}

function testCreateAndReposition() {
  var anchorEl = document.getElementById('anchor');
  var popupEl = document.getElementById('popup');
  var corner = goog.positioning.Corner;

  var pos = new goog.positioning.AnchoredPosition(anchorEl,
                                                  corner.BOTTOM_START);
  var popup = new goog.ui.Popup(popupEl, pos);
  popup.setVisible(true);

  var anchorRect = goog.style.getBounds(anchorEl);
  var popupRect = goog.style.getBounds(popupEl);
  assertRoundedEquals('Left edge of popup should line up with left edge ' +
                      'of anchor.',
                      anchorRect.left,
                      popupRect.left);
  assertRoundedEquals('Popup should be positioned just below the anchor.',
                      anchorRect.top + anchorRect.height,
                      popupRect.top);

  // Reposition.
  anchorEl.style.marginTop = '7px';
  popup.reposition();

  anchorRect = goog.style.getBounds(anchorEl);
  popupRect = goog.style.getBounds(popupEl);
  assertRoundedEquals('Popup should be positioned just below the anchor.',
                      anchorRect.top + anchorRect.height,
                      popupRect.top);
}


function testSetPinnedCorner() {
  var anchorEl = document.getElementById('anchor');
  var popupEl = document.getElementById('popup');
  var corner = goog.positioning.Corner;

  var pos = new goog.positioning.AnchoredPosition(anchorEl,
                                                  corner.BOTTOM_START);
  var popup = new goog.ui.Popup(popupEl, pos);
  popup.setVisible(true);

  var anchorRect = goog.style.getBounds(anchorEl);
  var popupRect = goog.style.getBounds(popupEl);
  assertRoundedEquals('Left edge of popup should line up with left edge ' +
                      'of anchor.',
                      anchorRect.left,
                      popupRect.left);
  assertRoundedEquals('Popup should be positioned just below the anchor.',
                      anchorRect.top + anchorRect.height,
                      popupRect.top);

  // Change pinned corner.
  popup.setPinnedCorner(corner.BOTTOM_END);

  anchorRect = goog.style.getBounds(anchorEl);
  popupRect = goog.style.getBounds(popupEl);
  assertRoundedEquals('Right edge of popup should line up with left edge ' +
                      'of anchor.',
                      anchorRect.left,
                      popupRect.left + popupRect.width);
  assertRoundedEquals('Bottom edge of popup should line up with bottom ' +
                      'of anchor.',
                      anchorRect.top + anchorRect.height,
                      popupRect.top + popupRect.height);

  // Position outside the viewport.
  anchorEl.style.marginLeft = '0';
  popup.reposition();

  anchorRect = goog.style.getBounds(anchorEl);
  popupRect = goog.style.getBounds(popupEl);

  assertRoundedEquals('Right edge of popup should line up with left edge ' +
                      'of anchor.',
                      anchorRect.left,
                      popupRect.left + popupRect.width);

  anchorEl.style.marginLeft = '';
}

</script>
</body>
</html>