openlayers/tests/Renderer/VML.html

   1 <html>
   2 <head>
   3 <script src="../../lib/OpenLayers.js"></script>
   4   <script type="text/javascript">
   5
   6     var geometry = null, node = null;
   7
   8     function test_VML_constructor(t) {
   9         if (!OpenLayers.Renderer.VML.prototype.supported()) {
  10             t.plan(0);
  11             return;
  12         }
  13
  14         t.plan(1);
  15         var r = new OpenLayers.Renderer.VML(document.body);
  16         t.ok(r instanceof OpenLayers.Renderer.VML, "new OpenLayers.Renderer.VML returns VML object" );
  17     }
  18
  19     function test_VML_destroy(t) {
  20         if (!OpenLayers.Renderer.VML.prototype.supported()) {
  21             t.plan(0);
  22             return;
  23         }
  24
  25         t.plan(1);
  26
  27         var g_Destroy = false;
  28
  29         OpenLayers.Renderer.Elements.prototype._destroy =
  30             OpenLayers.Renderer.Elements.prototype.destroy;
  31
  32         OpenLayers.Renderer.prototype.destroy = function() {
  33             g_Destroy = true;
  34         }
  35
  36         var r = new OpenLayers.Renderer.VML(document.body);
  37         r.destroy();
  38
  39         t.eq(g_Destroy, true, "OpenLayers.Renderer.Elements.destroy() called");
  40
  41         OpenLayers.Renderer.prototype.destroy =
  42             OpenLayers.Renderer.prototype._destroy;
  43     }
  44
  45     function test_VML_setextent(t) {
  46         if (!OpenLayers.Renderer.VML.prototype.supported()) {
  47             t.plan(0);
  48             return;
  49         }
  50
  51         t.plan(3);
  52
  53         OpenLayers.Renderer.Elements.prototype._setExtent =
  54             OpenLayers.Renderer.Elements.prototype.setExtent;
  55
  56         var g_SetExtent = false;
  57         OpenLayers.Renderer.Elements.prototype.setExtent = function() {
  58             g_SetExtent = true;
  59         }
  60
  61         var r = new OpenLayers.Renderer.VML(document.body);
  62         r.setSize(new OpenLayers.Size(4,4));
  63         r.map = {
  64             getResolution: function() {
  65                 return 0.5;
  66             }
  67         }
  68
  69         var extent = new OpenLayers.Bounds(1,2,3,4);
  70         r.setExtent(extent);
  71
  72         t.eq(g_SetExtent, true, "Elements.setExtent() called");
  73
  74         t.ok(r.root.coordorigin == "2,4", "coordorigin is correct");
  75         t.ok(r.root.coordsize == "4,4", "coordsize is correct");
  76
  77         OpenLayers.Renderer.Elements.prototype.setExtent =
  78             OpenLayers.Renderer.Elements.prototype._setExtent;
  79     }
  80
  81     function test_VML_setsize(t) {
  82         if (!OpenLayers.Renderer.VML.prototype.supported()) {
  83             t.plan(0);
  84             return;
  85         }
  86
  87         t.plan(4);
  88
  89         var r = new OpenLayers.Renderer.VML(document.body);
  90
  91         var size = new OpenLayers.Size(1,2);
  92         r.setSize(size);
  93         t.eq(r.rendererRoot.style.width, "1px", "rendererRoot width is correct");
  94         t.eq(r.rendererRoot.style.height, "2px", "rendererRoot height is correct");
  95
  96         t.eq(r.root.style.width, "1px", "root width is correct");
  97         t.eq(r.root.style.height, "2px", "root height is correct");
  98     }
  99
 100     function test_VML_drawpoint(t) {
 101         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 102             t.plan(0);
 103             return;
 104         }
 105
 106         t.plan(1);
 107
 108         var r = new OpenLayers.Renderer.VML(document.body);
 109
 110         var properDraw = false;
 111         var g_Radius = null;
 112         r.drawCircle = function(n, g, r) {
 113             properDraw = true;
 114             g_Radius = 1;
 115         }
 116         r.drawPoint();
 117
 118         t.ok(properDraw && g_Radius == 1, "drawPoint called drawCircle with radius set to 1");
 119     }
 120
 121     function test_VML_drawcircle(t) {
 122         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 123             t.plan(0);
 124             return;
 125         }
 126
 127         t.plan(4);
 128
 129         var r = new OpenLayers.Renderer.VML(document.body);
 130         r.resolution = 0.5;
 131
 132         var node = document.createElement('div');
 133
 134         var geometry = {
 135             x: 1,
 136             y: 2
 137         }
 138
 139         var radius = 3;
 140         r.drawCircle(node, geometry, radius);
 141
 142         t.eq(node.style.left, '-1px', "left is correct");
 143         t.eq(node.style.top, '1px', "top is correct");
 144         t.eq(node.style.width, (2 * radius) + "px", "width is correct");
 145         t.eq(node.style.height, (2 * radius) + "px", "height is correct");
 146     }
 147
 148     function test_VML_drawGraphic(t) {
 149         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 150             t.plan(0);
 151             return;
 152         }
 153
 154         t.plan(6);
 155
 156         var r = new OpenLayers.Renderer.VML(document.body);
 157         r.resolution = 1;
 158
 159         var node = document.createElement('div');
 160         node.id = "test"
 161         node._geometryClass = "OpenLayers.Geometry.Point";
 162
 163         var geometry = {
 164             x: 1,
 165             y: 2
 166         }
 167
 168         var style = {
 169             externalGraphic: "foo.png",
 170             graphicWidth: 7,
 171             graphicHeight: 10
 172         }
 173
 174         r.drawGeometryNode(node, geometry, style);
 175
 176         t.eq(node.childNodes[0].id, "test_fill", "fill child node correctly created");
 177         t.eq(node.style.left, "-3px", "x of insertion point with calculated xOffset correct");
 178         t.eq(node.style.top, "-3px", "y of insertion point with calculated yOffset correct");
 179
 180         style.rotation = 90;
 181
 182         r.drawGeometryNode(node, geometry, style);
 183
 184         t.eq(node.childNodes[1].id, "test_image", "image child node correctly created");
 185         t.eq(node.style.left, "-4px", "x of insertion point of rotated image correct");
 186         t.eq(node.style.top, "-4px", "y of insertion point of rotated image correct");
 187     }
 188
 189     function test_VML_drawlinestring(t) {
 190         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 191             t.plan(0);
 192             return;
 193         }
 194
 195         t.plan(1);
 196
 197         var r = new OpenLayers.Renderer.VML(document.body);
 198
 199         g_DrawLine = false;
 200         r.drawLine = function(c) {
 201             g_DrawLine = true;
 202         }
 203
 204         r.drawLineString(node, geometry);
 205
 206         t.ok(g_DrawLine, "drawLine is called");
 207     }
 208
 209     function test_VML_drawlinearring(t) {
 210         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 211             t.plan(0);
 212             return;
 213         }
 214
 215         t.plan(1);
 216
 217         var r = new OpenLayers.Renderer.VML(document.body);
 218
 219         g_DrawLine = false;
 220         r.drawLine = function(c) {
 221             g_DrawLine = true;
 222         }
 223
 224         r.drawLinearRing(node, geometry);
 225
 226         t.ok(g_DrawLine, "drawLine is called");
 227     }
 228
 229     function test_VML_drawline(t) {
 230         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 231             t.plan(0);
 232             return;
 233         }
 234
 235         t.plan(8);
 236
 237         var r = new OpenLayers.Renderer.VML(document.body);
 238         r.resolution = 0.5;
 239
 240         var node = document.createElement('div');
 241
 242         var geometry = {
 243             components: [{
 244                 x: 1,
 245                 y: 2
 246             },{
 247                 x: 3,
 248                 y: 4
 249             }],
 250             getBounds: function() {
 251                 return new OpenLayers.Bounds(5,6,7,8);
 252             }
 253         };
 254
 255         r.drawLine(node, geometry, true);
 256         t.ok(node.path.indexOf("x") != -1, "path attribute is correct when passed closeLine = true");
 257
 258
 259         r.drawLine(node, geometry, false);
 260         t.eq(node.path, "m 2,4 l  6,8 l  e", "path attribute is correct");
 261         t.eq(node.style.left, "10px", "node.style.left is correct");
 262         t.eq(node.style.top, "16px", "node.style.top is correct");
 263         t.eq(node.style.width, "4px", "node.style.width is correct");
 264         t.eq(node.style.height, "4px", "node.style.height is correct");
 265         t.eq(node.coordorigin, "10 16", "node.coordorigin is correct");
 266         t.eq(node.coordsize, "4 4", "node.coordsize is correct");
 267     }
 268
 269     function test_VML_drawpolygon(t) {
 270         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 271             t.plan(0);
 272             return;
 273         }
 274
 275         t.plan(2);
 276
 277         var r = new OpenLayers.Renderer.VML(document.body);
 278         r.resolution = 0.5;
 279
 280         g_SetNodeDimension = false;
 281         r.setNodeDimension = function(){
 282             g_SetNodeDimension = true;
 283         };
 284
 285         var node = document.createElement('div');
 286
 287         var linearRing = {
 288             components: [{
 289                 x: 1,
 290                 y: 2
 291             },{
 292                 x: 3,
 293                 y: 4
 294             }]
 295         };
 296         var linearRing2 = {
 297             components: [{
 298                 x: 5,
 299                 y: 6
 300             },{
 301                 x: 7,
 302                 y: 8
 303             }]
 304         };
 305         var geometry = {
 306             components: [linearRing, linearRing2]
 307         };
 308         r.drawPolygon(node, geometry, true);
 309         t.ok(g_SetNodeDimension, "setNodeDimension is called");
 310         t.eq(node.path, "m 2,4 l 6,8 x m 10,12 l 14,16 x e", "path attribute is correct");
 311     }
 312
 313     function test_VML_drawrectangle(t) {
 314         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 315             t.plan(0);
 316             return;
 317         }
 318
 319         t.plan(4);
 320
 321         var r = new OpenLayers.Renderer.VML(document.body);
 322         r.resolution = 0.5;
 323
 324         var node = document.createElement('div');
 325
 326         var geometry = {
 327             x: 1,
 328             y: 2,
 329             width: 3,
 330             height: 4
 331         }
 332
 333         r.drawRectangle(node, geometry);
 334
 335         t.eq(node.style.left, "2px", "node.style.left is correct");
 336         t.eq(node.style.top, "4px", "node.style.top is correct");
 337         t.eq(node.style.width, "6px", "node.style.width is correct");
 338         t.eq(node.style.height, "8px", "node.style.height is correct");
 339     }
 340
 341     function test_vml_getnodetype(t) {
 342         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 343             t.plan(0);
 344             return;
 345         }
 346
 347         t.plan(1);
 348
 349         var r = new OpenLayers.Renderer.VML(document.body);
 350
 351         var g = {CLASS_NAME: "OpenLayers.Geometry.Point"}
 352         var s = {graphicName: "square"};
 353
 354         t.eq(r.getNodeType(g, s), "olv:shape", "Correct node type for well known symbols");
 355     }
 356
 357     function test_vml_importsymbol(t) {
 358         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 359             t.plan(0);
 360             return;
 361         }
 362
 363         t.plan(2);
 364
 365         var r = new OpenLayers.Renderer.VML(document.body);
 366
 367         var cache = r.importSymbol("square");
 368
 369         t.eq(cache.path, "m 0 0 l 0 1 1 1 1 0 0 0 x e", "Square symbol rendered correctly");
 370         t.ok(r.symbolCache["-square"], "Symbol has been cached correctly.");
 371
 372     }
 373
 374     function test_vml_dashstyle(t) {
 375         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 376             t.plan(0);
 377             return;
 378         }
 379
 380         t.plan(5);
 381
 382         var r = new OpenLayers.Renderer.VML(document.body);
 383
 384         t.eq(r.dashStyle({strokeDashstyle: "1 4"}), "dot", "dot pattern recognized correctly.");
 385         t.eq(r.dashStyle({strokeDashstyle: "4 4"}), "dash", "dash pattern recognized correctly.");
 386         t.eq(r.dashStyle({strokeDashstyle: "8 4"}), "longdash", "longdash pattern recognized correctly.");
 387         t.eq(r.dashStyle({strokeDashstyle: "4 4 1 4"}), "dashdot", "dashdot pattern recognized correctly.");
 388         t.eq(r.dashStyle({strokeDashstyle: "8 4 1 4"}), "longdashdot", "longdashdot pattern recognized correctly.");
 389     }
 390
 391     function test_vml_moveRoot(t) {
 392         if (!OpenLayers.Renderer.VML.prototype.supported()) {
 393             t.plan(0);
 394             return;
 395         }
 396         t.plan(2);
 397
 398         var map = new OpenLayers.Map("map");
 399         var l1 = new OpenLayers.Layer.Vector("vector");
 400         map.addLayer(l1);
 401         var l2 = new OpenLayers.Layer.Vector.RootContainer("rootcontainer", {layers: [l1]});
 402
 403         var clear = l1.renderer.clear;
 404         l1.renderer.clear = function() {
 405             // this should be called twice, once when l2 is added to the map,
 406             // and once when removed from the map.
 407             t.ok(true, "Clearing original layer");
 408         };
 409         map.addLayer(l2);
 410         map.removeLayer(l2);
 411         l1.renderer.clear = clear;
 412
 413         map.removeLayer(l1);
 414     }
 415
 416   </script>
 417 </head>
 418 <body>
 419 <div id="map" style="width:500px;height:550px"></div>
 420 </body>
 421 </html>