openlayers/tests/Popup.html

   1 <html>
   2 <head>
   3   <script src="../lib/OpenLayers.js"></script>
   4   <script type="text/javascript">
   5
   6     var popup;
   7
   8     function test_Popup_default_constructor(t) {
   9         t.plan( 8 );
  10
  11         var size = new OpenLayers.Size(OpenLayers.Popup.WIDTH,
  12                                        OpenLayers.Popup.HEIGHT);
  13         popup = new OpenLayers.Popup();
  14
  15         t.ok( popup instanceof OpenLayers.Popup, "new OpenLayers.Popup returns Popup object" );
  16         t.ok(OpenLayers.String.startsWith(popup.id, "OpenLayers.Popup"),
  17              "valid default popupid");
  18         var firstID = popup.id;
  19         t.ok(popup.contentSize.equals(size), "good default popup.size");
  20         t.eq(popup.contentHTML, null, "good default popup.contentHTML");
  21         t.eq(popup.backgroundColor, OpenLayers.Popup.COLOR, "good default popup.backgroundColor");
  22         t.eq(popup.opacity, OpenLayers.Popup.OPACITY, "good default popup.opacity");
  23         t.eq(popup.border, OpenLayers.Popup.BORDER, "good default popup.border");
  24
  25
  26         popup = new OpenLayers.Popup();
  27         var newID = popup.id;
  28         t.ok(newID != firstID, "default id generator creating unique ids");
  29     }
  30
  31     function test_Popup_constructor (t) {
  32         t.plan( 8 );
  33
  34         var id = "chicken";
  35         var w = 500;
  36         var h = 400;
  37         var sz = new OpenLayers.Size(w,h);
  38         var lon = 5;
  39         var lat = 40;
  40         var ll = new OpenLayers.LonLat(lon, lat);
  41         var content = "foo";
  42         var closePopupCallback = function(e) {
  43             //this should get triggered by the "observer.observer();" call below
  44             t.ok(true, "closePopupCallback called")
  45         };
  46
  47         popup = new OpenLayers.Popup(id,
  48                                      ll,
  49                                      sz,
  50                                      content,
  51                                      true,
  52                                      closePopupCallback);
  53
  54         t.ok( popup instanceof OpenLayers.Popup, "new OpenLayers.Popup returns Popup object" );
  55         t.eq(popup.id, id, "popup.id set correctly");
  56         t.ok(popup.lonlat.equals(ll), "popup.lonlat set correctly");
  57         t.ok(popup.contentSize.equals(sz), "popup.size set correctly");
  58         t.eq(popup.contentHTML, content, "contentHTML porpoerty of set correctly");
  59
  60         // test that a browser event is registered on click on popup closebox
  61         var closeImgDiv = popup.groupDiv.childNodes[1];
  62         var cacheID = closeImgDiv._eventCacheID;
  63         for (var i = 0; i < OpenLayers.Event.observers[cacheID].length; i++) {
  64             var observer = OpenLayers.Event.observers[cacheID][i];
  65             if (observer.element == closeImgDiv) {
  66                 t.ok(true, "An event was registered for the close box element");
  67                 t.eq(observer.name, "click", "A click event was registered for the close box element");
  68                 //call the registered observer to make sure it's the right one
  69                 observer.observer();
  70                 break;
  71             }
  72         }
  73     }
  74
  75     function test_Popup_updatePosition(t) {
  76         t.plan(1)
  77         var map = new OpenLayers.Map('map');
  78         map.addLayer(new OpenLayers.Layer('name', {'isBaseLayer':true}));
  79         map.zoomToMaxExtent();
  80         var popup = new OpenLayers.Popup('id');
  81         map.addPopup(popup);
  82         map.getLayerPxFromLonLat = function () { return null; }
  83         popup.moveTo=function() { t.fail("Shouldnt' call moveTo if layerpx is null"); }
  84         popup.lonlat = true;
  85         popup.updatePosition();
  86         t.ok(true, "update position doesn't fail when getLayerPxFromLonLat fails.");
  87         map.destroy();
  88     }
  89     function test_Popup_keepInMap(t) {
  90
  91         var gb = OpenLayers.Util.getBrowserName;
  92         OpenLayers.Util.getBrowserName = function() { return "mock"; }
  93         t.plan(3);
  94         var map = new OpenLayers.Map("map");
  95         map.addLayer(new OpenLayers.Layer("", {isBaseLayer: true}));
  96         map.zoomToMaxExtent();
  97         var longString = "<div style='width: 200px; height: 200px'>Abc def</div>";
  98         popup = new OpenLayers.Popup("chicken",
  99                                  new OpenLayers.LonLat(90, 60),
 100                                  new OpenLayers.Size(100,100),
 101                                  longString,
 102                                  null, true);
 103         popup.panMapIfOutOfView = false;
 104         popup.keepInMap = true;
 105         map.addPopup(popup);
 106         var safeSize = popup.getSafeContentSize(new OpenLayers.Size(1000,1000));
 107         popup = new OpenLayers.Popup("chicken",
 108                                  new OpenLayers.LonLat(90, 60),
 109                                  new OpenLayers.Size(100,100),
 110                                  longString,
 111                                  null, true);
 112         popup.panMapIfOutOfView = true;
 113         popup.keepInMap = true;
 114         map.addPopup(popup);
 115         var safeSizePanKeep = popup.getSafeContentSize(new OpenLayers.Size(1000,1000));
 116         popup.keepInMap = false;
 117         map.addPopup(popup);
 118         map.setCenter(-180, -90);
 119         var safeSizePan = popup.getSafeContentSize(new OpenLayers.Size(1000,1000));
 120         t.ok(safeSizePan.equals(safeSizePanKeep), "Panning means that all sizes are equal");
 121         t.ok(safeSize.w < safeSizePan.w, "Width of non-panning is less");
 122         t.ok(safeSize.h < safeSizePan.h, "Height of non-panning is less");
 123         OpenLayers.Util.getBrowserName = gb;
 124     }
 125     function test_Popup_draw(t) {
 126         t.plan( 15 );
 127
 128         var id = "chicken";
 129         var x = 50;
 130         var y = 100;
 131         var w = 500;
 132         var h = 400;
 133         var content = "charlie";
 134         var color = "red";
 135         var hexColor = "#ff0000";
 136         var opacity = 0.5;
 137         var border = "1px solid";
 138         map1 = new OpenLayers.Map("map");
 139         popup = new OpenLayers.Popup(id);
 140         popup.setSize(new OpenLayers.Size(w, h));
 141         popup.setContentHTML(content);
 142         popup.setBackgroundColor(color);
 143         popup.setOpacity(opacity);
 144         popup.setBorder(border);
 145         map1.addPopup(popup);
 146         popup.moveTo(new OpenLayers.Pixel(x, y));
 147
 148         t.eq(popup.div.id, id, "popup.div.id set correctly");
 149         t.eq(popup.div.style.left, x + "px", "left position of popup.div set correctly");
 150         t.eq(popup.div.style.top, y + "px", "top position of popup.div set correctly");
 151
 152         var contentDiv = popup.div.childNodes[0].childNodes[0];
 153
 154         t.eq(contentDiv.className, "olPopupContent", "correct content div className");
 155         t.eq(contentDiv.id, "chicken_contentDiv", "correct content div id");
 156         t.eq(contentDiv.style.position, "relative", "correct content div position");
 157         //Safari 3 separates style overflow into overflow-x and overflow-y
 158         var prop = (OpenLayers.Util.getBrowserName() == 'safari') ? 'overflowX' : 'overflow';
 159         t.eq(contentDiv.style[prop], "", "correct content div overflow");
 160         t.eq(contentDiv.innerHTML, content, "correct content div content");
 161
 162         var bColor = popup.div.style.backgroundColor;
 163         var goodColor = ( (bColor == color) || (bColor == hexColor));
 164         t.ok(goodColor, "good default popup.backgroundColor");
 165
 166         if (navigator.appName.indexOf("Microsoft") == -1) {
 167             t.eq(parseFloat(popup.div.style.opacity), opacity, "good default popup.opacity");
 168         } else {
 169             t.eq(popup.div.style.filter, "alpha(opacity=" + opacity*100 + ")", "good default popup.opacity");
 170         }
 171         //Safari 3 separates the border style into separate entities when reading it
 172         if (OpenLayers.Util.getBrowserName() == 'safari') {
 173           var s = border.split(' ');
 174           t.ok(popup.div.style.borderTopWidth == s[0] && popup.div.style.borderTopStyle == s[1], "good default popup.border")
 175         } else {
 176           t.ok(popup.div.style.border.indexOf(border) != -1, "good default popup.border");
 177         }
 178
 179         x += 50;
 180         popup.moveTo(new OpenLayers.Pixel(x, y));
 181         t.eq(popup.div.style.left, x + "px", "moveTo updates left position of popup.div correctly");
 182         t.eq(popup.div.style.top, y + "px", "moveTo updates top position of popup.div correctly");
 183
 184
 185     //closeOnMove
 186         var checkMapEvent = function(map, popup) {
 187             var startListeners = map.events.listeners['movestart'];
 188             for(var i=0; i < startListeners.length; i++) {
 189                 var listener = startListeners[i];
 190
 191                 if ((listener.obj == popup) && (listener.func == popup.hide)) {
 192                     return true;
 193                 }
 194             }
 195             return false;
 196         };
 197         var registered = checkMapEvent(map1, popup);
 198         t.ok(!registered, "when not 'closeOnMove', correctly not registered hide() on map's movestart.")
 199
 200         var popup2 = new OpenLayers.Popup('test');
 201         popup2.closeOnMove = true;
 202         map1.addPopup(popup2);
 203
 204         registered = checkMapEvent(map1, popup2);
 205         t.ok(registered, "when 'closeOnMove', correctly registered hide() on map's movestart.")
 206     }
 207
 208   </script>
 209 </head>
 210 <body>
 211 <div id="map" style="width:512px; height:256px"> </div>
 212 </body>
 213 </html>