openlayers/tests/BaseTypes/Element.html

   1 <html>
   2   <head>
   3
   4     <script src="../../lib/OpenLayers.js"></script>
   5
   6     <script type="text/javascript">
   7
   8     function test_Element_visible(t) {
   9         t.plan(3);
  10
  11         var elem = {
  12             style: {
  13                 'display': ""
  14             }
  15         };
  16
  17         elem.style.display = "";
  18         t.ok(OpenLayers.Element.visible(elem), "element with style.display == '' is visible");
  19
  20         elem.style.display = "block";
  21         t.ok(OpenLayers.Element.visible(elem), "element with style.display == block is visible");
  22
  23         elem.style.display = "none";
  24         t.ok(!OpenLayers.Element.visible(elem), "element with style.display == none is not visible");
  25     }
  26
  27     function test_Element_toggle(t) {
  28         t.plan(2);
  29
  30         var elem1 = {
  31             style: {
  32                 'display': "none"
  33             }
  34         };
  35
  36         var elem2 = {
  37             style: {
  38                 'display': ""
  39             }
  40         };
  41
  42         OpenLayers.Element.toggle(elem1, elem2);
  43
  44         t.eq(elem1.style.display, "", "hidden element toggled to display");
  45         t.eq(elem2.style.display, "none", "shown element toggled to hidden");
  46     }
  47
  48     function test_Element_hide(t) {
  49         t.plan(2);
  50
  51         var elem1 = {
  52             style: {
  53                 'display': "none"
  54             }
  55         };
  56
  57         var elem2 = {
  58             style: {
  59                 'display': ""
  60             }
  61         };
  62
  63         OpenLayers.Element.hide(elem1, elem2);
  64
  65         t.eq(elem1.style.display, "none", "hidden element stays hidden");
  66         t.eq(elem2.style.display, "none", "shown element hidden");
  67     }
  68
  69     function test_Element_show(t) {
  70         t.plan(2);
  71
  72         var elem1 = {
  73             style: {
  74                 'display': "none"
  75             }
  76         };
  77
  78         var elem2 = {
  79             style: {
  80                 'display': ""
  81             }
  82         };
  83
  84         OpenLayers.Element.show(elem1, elem2);
  85
  86         t.eq(elem1.style.display, "", "hidden element shown");
  87         t.eq(elem2.style.display, "", "shown element stays shown");
  88     }
  89
  90     function test_Element_remove(t) {
  91         t.plan(1);
  92
  93         var elem = {
  94             parentNode: {
  95                 'removeChild': function(elem) {
  96                     t.ok(true, "removeChild called");
  97                 }
  98             }
  99         };
 100         OpenLayers.Element.remove(elem);
 101     }
 102
 103     function test_Element_getHeight(t) {
 104         t.plan(1);
 105
 106         var elem = {
 107             'offsetHeight': {}
 108         };
 109
 110         t.ok(OpenLayers.Element.getHeight(elem) == elem.offsetHeight, "offsetHeight returned");
 111     }
 112
 113     function test_Element_getDimensions(t) {
 114         if (!t.open_window) {
 115             t.plan(0);
 116             return;
 117         } else {
 118             t.plan(4);
 119         }
 120
 121       //shown
 122         t.open_window( "BaseTypes/Element.html", function( wnd ) {
 123             t.delay_call(1, function() {
 124                 var elem = wnd.document.getElementById("elemID");
 125
 126                 var dims = OpenLayers.Element.getDimensions(elem);
 127                 t.eq(dims.width, 50, "width correct when displayed");
 128                 t.eq(dims.height, 100, "height correct when displayed")
 129
 130                 elem.style.display = "none";
 131                 dims = OpenLayers.Element.getDimensions(elem);
 132                 t.eq(dims.width, 50, "width correct when hidden");
 133                 t.eq(dims.height, 100, "height correct when hidden")
 134
 135
 136             });
 137         });
 138
 139       //hidden
 140
 141
 142     }
 143
 144     function test_hasClass(t) {
 145         t.plan(14);
 146         var has = OpenLayers.Element.hasClass;
 147
 148         var element = document.createElement("div");
 149         element.className = "fe fi fo fum one.part two-part three:part four";
 150
 151         t.ok(has(element, "fe"), "has fe");
 152         t.ok(has(element, "fi"), "has fi");
 153         t.ok(has(element, "fo"), "has fo");
 154         t.ok(!has(element, "f"), "hasn't f");
 155         t.ok(!has(element, "o"), "hasn't o");
 156         t.ok(!has(element, "fumb"), "hasn't fumb");
 157         t.ok(!has(element, "one"), "hasn't one");
 158         t.ok(has(element, "one.part"), "has one.part");
 159         t.ok(!has(element, "two"), "hasn't two");
 160         t.ok(has(element, "two-part"), "has two-part");
 161         t.ok(!has(element, "three"), "hasn't three");
 162         t.ok(has(element, "three:part"), "has three:part");
 163         t.ok(has(element, "four"), "has four");
 164
 165         element.className = "";
 166         t.ok(!has(element, "nada"), "hasn't nada");
 167     }
 168
 169     function test_addClass(t) {
 170         t.plan(6);
 171         var add = OpenLayers.Element.addClass;
 172
 173         var element = document.createElement("div");
 174         element.id = "foo";
 175         t.eq(element.className, "", "starts with no class name");
 176
 177         var mod = add(element, "first");
 178         t.eq(mod.id, element.id, "returns the same element");
 179         t.eq(element.className, "first", "properly adds first class name");
 180         t.eq(add(element, "second").className, "first second",
 181              "properly adds second class name");
 182         t.eq(add(element, "second").className, "first second",
 183              "doesn't do anything for duplicated names");
 184         t.eq(add(element, "third").className, "first second third",
 185              "properly adds third class name");
 186     }
 187
 188     function test_removeClass(t) {
 189         t.plan(5);
 190         var remove = OpenLayers.Element.removeClass;
 191
 192         var element = document.createElement("div");
 193         element.id = "foo";
 194         element.className = "first second middle fourth last";
 195
 196         var mod = remove(element, "last");
 197         t.eq(mod.id, element.id, "returns the same element");
 198         t.eq(element.className, "first second middle fourth",
 199              "properly removes last class name");
 200         t.eq(remove(element, "first").className, "second middle fourth",
 201              "properly removes first class name");
 202         t.eq(remove(element, "middle").className, "second fourth",
 203              "properly removes middle class name");
 204         t.eq(remove(element, "nada").className, "second fourth",
 205              "doesn't do anything for bogus class name");
 206     }
 207
 208     function test_toggleClass(t) {
 209         t.plan(5);
 210         var toggle = OpenLayers.Element.toggleClass;
 211
 212         var element = document.createElement("div");
 213         element.id = "foo";
 214
 215         var mod = toggle(element, "first");
 216         t.eq(mod.id, element.id, "returns the same element");
 217         t.eq(element.className, "first", "adds first new class name");
 218         t.eq(toggle(element, "second").className, "first second",
 219              "adds second new class name");
 220         t.eq(toggle(element, "first").className, "second",
 221              "removes first existing class name");
 222         t.eq(toggle(element, "second").className, "",
 223              "removes second existing class name");
 224     }
 225
 226     function test_Element_getStyle(t) {
 227         t.plan(5);
 228
 229     //tests for this function are not 100% complete... there is some funky
 230     // business going on in there with
 231     //  * document.defaultView (moz/ff I believe)
 232     // but I cant seem to find a good way to test them.
 233     //
 234                 t.ok(OpenLayers.Element.getStyle(null, null) == null, "passing null values in to getStyle() doesnt bomb, returns null");
 235
 236         var elem = document.getElementById("elemID");
 237         elem.style.chickenHead = {}
 238
 239         var style = "chickenHead";
 240         t.ok(OpenLayers.Element.getStyle(elem, style) == elem.style.chickenHead, "get style on basic stylename returns correctly");
 241
 242         elem.style.chickenHead = "auto";
 243         style = "chickenHead";
 244         t.ok(OpenLayers.Element.getStyle(elem, style) == null, "get style on 'auto' style returns null");
 245
 246         if (OpenLayers.Util.getBrowserName() == "opera") {
 247             elem.style.top = "15px";
 248             style = "top";
 249
 250             elem.style.position = "static";
 251             t.ok(OpenLayers.Element.getStyle(elem, style) == null, "in opera: get (top/left/right/bottom) style when position == 'static' returns null");
 252
 253             elem.style.position = "";
 254             t.ok(OpenLayers.Element.getStyle(elem, style) == null, "in opera: get (top/left/right/bottom) style when position != 'static', gets computedStyle as static and returns null");
 255
 256         } else {
 257             t.ok(true, "browser is not opera.");
 258             t.ok(true, "trust me. browser is not opera.");
 259         }
 260
 261     }
 262
 263     </script>
 264   </head>
 265   <body>
 266     <div id="elemID" style="width:50px; height:100px; background-color:red">test</div>
 267   </body>
 268 </html>