openlayers/tests/Renderer/Elements.html

   1 <html>
   2 <head>
   3 <script src="../../lib/OpenLayers.js"></script>
   4   <script type="text/javascript">
   5
   6     function setUp() {
   7         // Stub out functions that are meant to be overridden by
   8         // subclasses.
   9         OpenLayers.Renderer.Elements.prototype._createRenderRoot =
  10             OpenLayers.Renderer.Elements.prototype.createRenderRoot;
  11
  12         var rendererRoot = document.createElement("div");
  13         OpenLayers.Renderer.Elements.prototype.createRenderRoot = function() {
  14             return rendererRoot;
  15         };
  16
  17         OpenLayers.Renderer.Elements.prototype._createRoot =
  18             OpenLayers.Renderer.Elements.prototype.createRoot;
  19
  20         OpenLayers.Renderer.Elements.prototype.createRoot = function() {
  21             return document.createElement("div");
  22         };
  23
  24         OpenLayers.Renderer.Elements.prototype._createNode =
  25             OpenLayers.Renderer.Elements.prototype.createNode;
  26
  27         OpenLayers.Renderer.Elements.prototype.createNode = function() {
  28             return document.createElement("div");
  29         };
  30     }
  31
  32     // Create a new Elements renderer based on an id and an ordering
  33     // type. For these tests, both of these parameters are optional.
  34     function create_renderer(id, options) {
  35
  36         rendererRoot = null;
  37
  38         if (id == null) {
  39             var el = document.createElement('div');
  40             document.body.appendChild(el);
  41             el.id = OpenLayers.Util.createUniqueID();
  42             id = el.id;
  43         }
  44
  45         return new OpenLayers.Renderer.Elements(id, options);
  46     }
  47
  48     // Cleanup stubs made in the function above.
  49     function tearDown() {
  50         OpenLayers.Renderer.Elements.prototype.createRenderRoot =
  51             OpenLayers.Renderer.Elements.prototype._createRenderRoot;
  52         OpenLayers.Renderer.Elements.prototype.createRoot =
  53             OpenLayers.Renderer.Elements.prototype._createRoot;
  54         OpenLayers.Renderer.Elements.prototype.createNode =
  55             OpenLayers.Renderer.Elements.prototype._createNode;
  56     }
  57
  58     function test_Elements_constructor(t) {
  59         t.plan(6);
  60
  61         setUp();
  62
  63         var r = create_renderer();
  64
  65         t.ok(r instanceof OpenLayers.Renderer.Elements, "new OpenLayers.Renderer.Elements returns Elements object" );
  66         t.ok(r.rendererRoot != null, "elements rendererRoot is not null");
  67         t.ok(r.root != null, "elements root is not null");
  68         t.ok(r.indexer == null, "indexer is null if unused.");
  69
  70         t.ok(r.root.parentNode == r.rendererRoot, "elements root is correctly appended to rendererRoot");
  71         t.ok(r.rendererRoot.parentNode == r.container, "elements rendererRoot is correctly appended to container");
  72
  73         tearDown();
  74     }
  75
  76     function test_Elements_destroy(t) {
  77         t.plan(5);
  78
  79         var elems = {
  80             'clear': function() {
  81                 t.ok(true, "clear called");
  82             },
  83             'rendererRoot': {},
  84             'root': {},
  85             'xmlns': {}
  86         };
  87
  88         OpenLayers.Renderer.prototype._destroy =
  89             OpenLayers.Renderer.prototype.destroy;
  90
  91         var args = [{}, {}, {}];
  92         OpenLayers.Renderer.prototype.destroy = function() {
  93             t.ok((arguments[0] == args[0]) &&
  94                  (arguments[1] == args[1]) &&
  95                  (arguments[2] == args[2]), "correct arguments passed to OpenLayers.Renderer.destroy()");
  96         };
  97
  98         OpenLayers.Renderer.Elements.prototype.destroy.apply(elems, args);
  99
 100         t.ok(elems.rendererRoot == null, "rendererRoot nullified");
 101         t.ok(elems.root == null, "root nullified");
 102         t.ok(elems.xmlns == null, "xmlns nullified");
 103
 104         OpenLayers.Renderer.prototype.destroy =
 105             OpenLayers.Renderer.prototype._destroy;
 106
 107     }
 108
 109     function test_Elements_clear(t) {
 110         t.plan(2);
 111
 112         setUp();
 113
 114         var r = create_renderer();
 115         var element = document.createElement("div");
 116         r.root = element;
 117
 118         var node = document.createElement("div");
 119         element.appendChild(node);
 120
 121         r.clear();
 122
 123         t.ok(r.vectorRoot.childNodes.length == 0, "vector root is correctly cleared");
 124         t.ok(r.textRoot.childNodes.length == 0, "text root is correctly cleared");
 125
 126         tearDown();
 127     }
 128
 129     function test_Elements_drawGeometry(t) {
 130         t.plan(7);
 131
 132         setUp();
 133
 134         var r = create_renderer();
 135
 136         var element = document.createElement("div");
 137         r.vectorRoot = element;
 138
 139         r.nodeFactory = function(id, type) {
 140             var element = document.createElement("div");
 141             return element;
 142         };
 143         var g_Node = null;
 144         var b_Node = null;
 145         r.drawGeometryNode = function(node, geometry, style) {
 146             g_Node = node;
 147             return {node: node, complete: true};
 148         };
 149         r.redrawBackgroundNode = function(id, geometry, style, featureId) {
 150             b_Node = r.nodeFactory();
 151             b_Node.id = "foo_background";
 152             element.appendChild(b_Node);
 153         };
 154
 155         r.getNodeType = function(geometry, style) {
 156             return "div";
 157         };
 158         geometry = {
 159             id: 'foo',
 160             CLASS_NAME: 'bar'
 161         };
 162         var style = {'backgroundGraphic': 'foo'};
 163         var featureId = 'dude';
 164         r.drawGeometry(geometry, style, featureId);
 165         t.ok(g_Node.parentNode == element, "node is correctly appended to root");
 166         t.ok(b_Node.parentNode == element, "redrawBackgroundNode appended background node");
 167         t.eq(g_Node._featureId, 'dude', "_featureId is correct");
 168         t.eq(g_Node._style.backgroundGraphic, "foo", "_style is correct");
 169         t.eq(g_Node._geometryClass, 'bar', "_geometryClass is correct");
 170
 171         var returnNode = function(id) {
 172                 return id == "foo_background" ? b_Node : g_Node;
 173         }
 174
 175         var _getElement = document.getElementById;
 176         document.getElementById = returnNode;
 177         OpenLayers.Util.getElement = returnNode;
 178
 179         style = {'display':'none'};
 180         r.drawGeometry(geometry, style, featureId);
 181         t.ok(g_Node.parentNode != element, "node is correctly removed");
 182         t.ok(b_Node.parentNode != element, "background node correctly removed")
 183
 184         document.getElementById = _getElement;
 185
 186         tearDown();
 187     }
 188
 189     function test_Elements_drawGeometry_2(t) {
 190         t.plan(9);
 191
 192         setUp();
 193
 194         var r = create_renderer();
 195
 196         var element = document.createElement("div");
 197         r.root = element;
 198
 199         r.nodeFactory = function(id, type) {
 200             var element = document.createElement("div");
 201             return element;
 202         };
 203         r.setStyle = function(node, style, options, geometry) {
 204             return node;
 205         };
 206
 207         // point
 208         var properDraw = false;
 209         r.drawPoint = function(node, geometry) {
 210             properDraw = true;
 211             return {};
 212         };
 213         geometry = {CLASS_NAME: 'OpenLayers.Geometry.Point'};
 214         style = true;
 215         r.drawGeometry(geometry, style);
 216         t.ok(properDraw, "drawGeometry called drawPoint when passed a point");
 217
 218         // line string
 219         var properDraw = false;
 220         r.drawLineString = function(g) {
 221             properDraw = true;
 222             return {};
 223         };
 224         geometry = {id: "foo", CLASS_NAME: 'OpenLayers.Geometry.LineString'};
 225         style = true;
 226         r.drawGeometry(geometry, style);
 227         t.ok(properDraw, "drawGeometry called drawLineString when passed a line string");
 228
 229         // linear ring
 230         var properDraw = false;
 231         r.drawLinearRing = function(g) {
 232             properDraw = true;
 233             return {};
 234         };
 235         geometry = {CLASS_NAME: 'OpenLayers.Geometry.LinearRing'};
 236         style = true;
 237         r.drawGeometry(geometry, style);
 238         t.ok(properDraw, "drawGeometry called drawLinearRing when passed a linear ring");
 239
 240         // polygon
 241         var properDraw = false;
 242         r.drawPolygon = function(g) {
 243             properDraw = true;
 244             return {};
 245         };
 246         geometry = {CLASS_NAME: 'OpenLayers.Geometry.Polygon'};
 247         style = true;
 248         r.drawGeometry(geometry, style);
 249         t.ok(properDraw, "drawGeometry called drawPolygon when passed a polygon");
 250
 251         // surface
 252         var properDraw = false;
 253         r.drawSurface = function(g) {
 254             properDraw = true;
 255             return {};
 256         }
 257         geometry = {CLASS_NAME: 'OpenLayers.Geometry.Surface'};
 258         style = true;
 259         r.drawGeometry(geometry, style);
 260         t.ok(properDraw, "drawGeometry called drawSurface when passed a surface");
 261
 262         // rectangle
 263         var properDraw = false;
 264         r.drawRectangle = function(g) {
 265             properDraw = true;
 266             return {};
 267         };
 268         geometry = {CLASS_NAME: 'OpenLayers.Geometry.Rectangle'};
 269         style = true;
 270         r.drawGeometry(geometry, style);
 271         t.ok(properDraw, "drawGeometry called drawRectangle when passed a rectangle");
 272
 273         // multi-point
 274         var properDraw = false;
 275         r.drawPoint = function(g) {
 276             properDraw = true;
 277             return {};
 278         };
 279         geometry = {
 280             CLASS_NAME: 'OpenLayers.Geometry.MultiPoint',
 281             components: [{CLASS_NAME: 'OpenLayers.Geometry.Point'}]
 282         };
 283         style = true;
 284         r.drawGeometry(geometry, style);
 285         t.ok(properDraw, "drawGeometry called drawPoint when passed a multi-point");
 286
 287         // multi-linestring
 288         var properDraw = false;
 289         r.drawLineString = function(g) {
 290             properDraw = true;
 291             return {};
 292         };
 293         geometry = {
 294             CLASS_NAME: 'OpenLayers.Geometry.MultiLineString',
 295             components: [{CLASS_NAME: 'OpenLayers.Geometry.LineString'}]
 296         };
 297         style = true;
 298         r.drawGeometry(geometry, style);
 299         t.ok(properDraw, "drawGeometry called drawLineString when passed a multi-linestring");
 300
 301         // multi-polygon
 302         var properDraw = false;
 303         r.drawPolygon = function(g) {
 304             properDraw = true;
 305             return {};
 306         };
 307         geometry = {
 308             CLASS_NAME: 'OpenLayers.Geometry.MultiPolygon',
 309             components: [{CLASS_NAME: 'OpenLayers.Geometry.Polygon'}]
 310         };
 311         style = true;
 312         r.drawGeometry(geometry, style);
 313         t.ok(properDraw, "drawGeometry called drawPolygon when passed a multi-polygon");
 314
 315         tearDown();
 316     }
 317
 318     function test_Elements_getfeatureidfromevent(t) {
 319         t.plan(2);
 320
 321         var node = {
 322             _featureId: 'foo'
 323         };
 324         var event = {
 325             target: node
 326         };
 327
 328         var id = OpenLayers.Renderer.Elements.prototype.getFeatureIdFromEvent(event);
 329         t.eq(id, 'foo', "returned id is correct when event with target is passed");
 330
 331         var event = {
 332             srcElement: node
 333         };
 334
 335         var id = OpenLayers.Renderer.Elements.prototype.getFeatureIdFromEvent(event);
 336         t.eq(id, 'foo', "returned id is correct when event with srcElement is passed");
 337     }
 338
 339     function test_Elements_erasegeometry(t) {
 340         t.plan(15);
 341
 342         var elements = {
 343             'eraseGeometry': function(geometry) {
 344                 gErased.push(geometry);
 345             }
 346         };
 347
 348         var geometry = {
 349             'components': [{}, {}, {}]
 350         };
 351
 352       //multipoint
 353         geometry.CLASS_NAME = "OpenLayers.Geometry.MultiPoint";
 354         gErased = [];
 355         OpenLayers.Renderer.Elements.prototype.eraseGeometry.apply(elements, [geometry]);
 356         t.ok( (gErased[0] == geometry.components[0]) &&
 357               (gErased[1] == geometry.components[1]) &&
 358               (gErased[2] == geometry.components[2]), "multipoint all components of geometry correctly erased.");
 359
 360       //multilinestring
 361         geometry.CLASS_NAME = "OpenLayers.Geometry.MultiLineString";
 362         gErased = [];
 363         OpenLayers.Renderer.Elements.prototype.eraseGeometry.apply(elements, [geometry]);
 364         t.ok( (gErased[0] == geometry.components[0]) &&
 365               (gErased[1] == geometry.components[1]) &&
 366               (gErased[2] == geometry.components[2]), "multilinestring all components of geometry correctly erased.");
 367
 368       //multipolygon
 369         geometry.CLASS_NAME = "OpenLayers.Geometry.MultiPolygon";
 370         gErased = [];
 371         OpenLayers.Renderer.Elements.prototype.eraseGeometry.apply(elements, [geometry]);
 372         t.ok( (gErased[0] == geometry.components[0]) &&
 373               (gErased[1] == geometry.components[1]) &&
 374               (gErased[2] == geometry.components[2]), "multipolygon all components of geometry correctly erased.");
 375
 376       //collection
 377         geometry.CLASS_NAME = "OpenLayers.Geometry.Collection";
 378         gErased = [];
 379         OpenLayers.Renderer.Elements.prototype.eraseGeometry.apply(elements, [geometry]);
 380         t.ok( (gErased[0] == geometry.components[0]) &&
 381               (gErased[1] == geometry.components[1]) &&
 382               (gErased[2] == geometry.components[2]), "collection all components of geometry correctly erased.");
 383
 384
 385     // OTHERS
 386     //
 387         geometry.CLASS_NAME = {};
 388
 389         gElement = null;
 390         gBackElement = null;
 391
 392         OpenLayers.Util._getElement = OpenLayers.Util.getElement;
 393         OpenLayers.Util.getElement = function(id) {
 394             var retVal = null;
 395             if (id != null) {
 396                 var hasBack = (id.indexOf(elements.BACKGROUND_ID_SUFFIX) != -1);
 397                 retVal = hasBack ? gBackElement : gElement;
 398             }
 399             return retVal;
 400         };
 401
 402       //element null
 403         geometry.id = null;
 404         OpenLayers.Renderer.Elements.prototype.eraseGeometry.apply(elements, [geometry]);
 405         // (no tests here, just make sure it doesn't bomb)
 406
 407       //element.parentNode null
 408         elements.BACKGROUND_ID_SUFFIX = 'BLAHBLAHBLAH';
 409         geometry.id = "foo";
 410         gElement = {};
 411         OpenLayers.Renderer.Elements.prototype.eraseGeometry.apply(elements, [geometry]);
 412         // (no tests here, just make sure it doesn't bomb)
 413
 414       //valid element.parentNode, element.geometry
 415         elements.indexer = {
 416             'remove': function(elem) {
 417                 gIndexerRemoved = elem;
 418             }
 419         };
 420
 421         gElement = {
 422             'geometry': {
 423                 'destroy': function() {
 424                     t.ok(true, "geometry destroyed");
 425                 }
 426             },
 427             'parentNode': {
 428                 'removeChild': function(elem) {
 429                     gElemRemoved = elem;
 430                 }
 431             },
 432             '_style' : {backgroundGraphic: "foo"}
 433         };
 434         gBackElement = {
 435             'parentNode': {
 436                 'removeChild': function(elem) {
 437                     gBackRemoved = elem;
 438                 }
 439             }
 440         };
 441
 442         gElemRemoved = gBackRemoved =  gIndexerRemoved = null;
 443         OpenLayers.Renderer.Elements.prototype.eraseGeometry.apply(elements, [geometry]);
 444         t.ok( (gElement.geometry == null), "all normal: element's 'geometry' property nullified");
 445         t.ok( (gElemRemoved == gElement), "all normal: main element properly removed from parent node");
 446         t.ok( (gBackRemoved == gBackElement), "all normal: back element properly removed from parent node");
 447         t.ok( (gIndexerRemoved == gElement), "all normal: main element properly removed from the indexer");
 448
 449       //valid element.parentNode, no element.geometry, no bElem
 450         gBackElement = null;
 451         gElement.geometry = null;
 452         gElemRemoved = gBackRemoved =  gIndexerRemoved = null;
 453         OpenLayers.Renderer.Elements.prototype.eraseGeometry.apply(elements, [geometry]);
 454         t.ok( (gElemRemoved == gElement), "no bElem: main element properly removed from parent node");
 455         t.ok( (gBackRemoved == null), "no bElem: back element not tried to remove from parent node when it doesn't exist");
 456         t.ok( (gIndexerRemoved == gElement), "no bElem: main element properly removed from the indexer");
 457
 458       //valid element.parentNode, no element.geometry, valid bElem, no bElem.parentNode
 459         gBackElement = {};
 460         gElemRemoved = gBackRemoved =  gIndexerRemoved = null;
 461         OpenLayers.Renderer.Elements.prototype.eraseGeometry.apply(elements, [geometry]);
 462         t.ok( (gElemRemoved == gElement), "no bElem.parentNode: main element properly removed from parent node");
 463         t.ok( (gBackRemoved == null), "no bElem.parentNode: back element not tried to remove from parent node when it has no parent node");
 464         t.ok( (gIndexerRemoved == gElement), "no bElem.parentNode: main element properly removed from the indexer");
 465
 466
 467         OpenLayers.Util.getElement = OpenLayers.Util._getElement;
 468     }
 469
 470     function test_Elements_drawAndErase(t) {
 471         t.plan(20);
 472
 473         setUp();
 474
 475         var r = create_renderer(null, {zIndexing: true});
 476         var element = document.createElement("div");
 477         r.vectorRoot = element;
 478         document.body.appendChild(element);
 479
 480         r.createNode = function(type, id) {
 481             var element = document.createElement("div");
 482             element.id = id;
 483             return element;
 484         };
 485         r.nodeTypeCompare = function() {return true};
 486         r.setStyle = function(node, style, options, geometry) {
 487             return node;
 488         };
 489
 490         var geometry = {
 491             id: 'foo',
 492             CLASS_NAME: 'bar'
 493         };
 494         var style = {
 495             graphicZIndex: 10
 496         };
 497         var featureId = 'foo';
 498         r.drawGeometry(geometry, style, featureId);
 499
 500         function count(obj) {
 501             var result = 0;
 502             for (var i in obj) {
 503                 result++;
 504             }
 505             return result;
 506         }
 507
 508         t.eq(element.childNodes.length, 1, "root is correctly filled");
 509         t.eq(r.indexer.maxZIndex, 10, "indexer.maxZIndex is correctly filled");
 510         t.eq(r.indexer.order.length, 1, "indexer.order is correctly filled");
 511         t.eq(count(r.indexer.indices), 1, "indexer.indices is correctly filled");
 512
 513         r.eraseGeometry(geometry);
 514
 515         t.eq(element.childNodes.length, 0, "root is correctly cleared");
 516         t.eq(r.indexer.maxZIndex, 0, "indexer.maxZIndex is correctly reset");
 517         t.eq(r.indexer.order.length, 0, "indexer.order is correctly reset");
 518         t.eq(count(r.indexer.indices), 0, "indexer.indices is correctly reset");
 519
 520         delete(style.graphicZIndex);
 521         r.drawGeometry(geometry, style, featureId);
 522
 523         t.eq(element.childNodes.length, 1, "root is correctly filled");
 524         t.eq(r.indexer.maxZIndex, 0, "indexer.maxZIndex is correctly filled");
 525         t.eq(r.indexer.order.length, 1, "indexer.order is correctly filled");
 526         t.eq(count(r.indexer.indices), 1, "indexer.indices is correctly filled");
 527
 528         r.clear();
 529
 530         t.eq(element.childNodes.length, 0, "root is correctly cleared");
 531         t.eq(r.indexer.maxZIndex, 0, "indexer.maxZIndex is correctly reset");
 532         t.eq(r.indexer.order.length, 0, "indexer.order is correctly reset");
 533         t.eq(count(r.indexer.indices), 0, "indexer.indices is correctly reset");
 534
 535         style.graphicZIndex = 12;
 536         r.drawGeometry(geometry, style, featureId);
 537
 538         t.eq(element.childNodes.length, 1, "root is correctly filled");
 539         t.eq(r.indexer.maxZIndex, 12, "indexer.maxZIndex is correctly filled");
 540         t.eq(r.indexer.order.length, 1, "indexer.order is correctly filled");
 541         t.eq(count(r.indexer.indices), 1, "indexer.indices is correctly filled");
 542
 543         tearDown();
 544     }
 545
 546     function test_Elements_moveRoot(t) {
 547         t.plan(2);
 548         setUp();
 549         var r1 = create_renderer();
 550         var r2 = create_renderer();
 551         r1.moveRoot(r2);
 552         t.xml_eq(r1.root.parentNode, r2.root.parentNode, "root moved successfully");
 553         r1.moveRoot(r1);
 554         t.xml_eq(r1.root.parentNode, r1.rendererRoot, "root moved back successfully");
 555         tearDown();
 556     }
 557
 558
 559
 560   </script>
 561 </head>
 562 <body>
 563 <div id="map" style="width:500px;height:550px"></div>
 564 </body>
 565 </html>