openlayers/tests/Renderer/SVG.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_SVG_constructor(t) {
   9         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
  10             t.plan(0);
  11             return;
  12         }
  13
  14         t.plan(1);
  15         var r = new OpenLayers.Renderer.SVG(document.body);
  16         t.ok(r instanceof OpenLayers.Renderer.SVG, "new OpenLayers.Renderer.SVG returns SVG object" );
  17     }
  18
  19     function test_SVG_destroy(t) {
  20         if (!OpenLayers.Renderer.SVG.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.SVG(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_SVG_setextent(t) {
  46         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
  47             t.plan(0);
  48             return;
  49         }
  50
  51         t.plan(5);
  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.SVG(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.eq(r.left, -2, "left is correct");
  75         t.eq(r.top, 8, "top is correct");
  76
  77         t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "0 0 4 4", "rendererRoot viewBox is correct");
  78
  79         // test extent changes
  80         var extent = new OpenLayers.Bounds(4,3,2,1);
  81         r.setExtent(extent);
  82         t.eq(r.root.getAttributeNS(null, "transform").replace(/ /g, ""), "translate(-6,-6)", "rendererRoot viewBox is correct after a new setExtent");
  83
  84         OpenLayers.Renderer.Elements.prototype.setExtent =
  85             OpenLayers.Renderer.Elements.prototype._setExtent;
  86     }
  87
  88     function test_SVG_setsize(t) {
  89         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
  90             t.plan(0);
  91             return;
  92         }
  93
  94         t.plan(2);
  95
  96         var r = new OpenLayers.Renderer.SVG(document.body);
  97
  98         var size = new OpenLayers.Size(1,2);
  99         r.setSize(size);
 100         t.eq(r.rendererRoot.getAttributeNS(null, "width"), size.w.toString(), "width is correct");
 101         t.eq(r.rendererRoot.getAttributeNS(null, "height"), size.h.toString(), "height is correct");
 102     }
 103
 104     function test_SVG_drawpoint(t) {
 105         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 106             t.plan(0);
 107             return;
 108         }
 109
 110         t.plan(1);
 111
 112         var r = new OpenLayers.Renderer.SVG(document.body);
 113
 114         var properDraw = false;
 115         var g_Radius = null;
 116         r.drawCircle = function(n, g, r) {
 117             properDraw = true;
 118             g_Radius = 1;
 119         }
 120         r.drawPoint();
 121
 122         t.ok(properDraw && g_Radius == 1, "drawPoint called drawCircle with radius set to 1");
 123     }
 124
 125     function test_SVG_drawcircle(t) {
 126         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 127             t.plan(0);
 128             return;
 129         }
 130
 131         t.plan(5);
 132
 133         var r = new OpenLayers.Renderer.SVG(document.body);
 134         r.resolution = 0.5;
 135         r.left = 0;
 136         r.top = 0;
 137
 138         var node = document.createElement('div');
 139
 140         var geometry = {
 141             x: 1,
 142             y: 2
 143         }
 144
 145         r.drawCircle(node, geometry, 3);
 146
 147         t.eq(node.getAttributeNS(null, 'cx'), '2', "cx is correct");
 148         t.eq(node.getAttributeNS(null, 'cy'), '-4', "cy is correct");
 149         t.eq(node.getAttributeNS(null, 'r'), '3', "r is correct");
 150
 151         // #1274: out of bound node fails when first added
 152         var geometry = {
 153             x: 10000000,
 154             y: 200000000,
 155             CLASS_NAME: "OpenLayers.Geometry.Point",
 156             id: "foo"
 157         }
 158         node.id = geometry.id;
 159         r.root.appendChild(node);
 160
 161         var drawCircleCalled = false;
 162         r.drawCircle = function() {
 163             drawCircleCalled = true;
 164             return OpenLayers.Renderer.SVG.prototype.drawCircle.apply(r, arguments);
 165         }
 166
 167         r.drawGeometry(geometry, {pointRadius: 3}, "blah_4000");
 168         t.eq(drawCircleCalled, true, "drawCircle called on drawGeometry for a point geometry.")
 169         t.ok(node.parentNode != r.root, "circle will not be drawn when coordinates are outside the valid range");
 170     }
 171
 172     function test_SVG_drawlinestring(t) {
 173         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 174             t.plan(0);
 175             return;
 176         }
 177
 178         t.plan(2);
 179
 180         var r = new OpenLayers.Renderer.SVG(document.body);
 181
 182         var node = document.createElement('div');
 183
 184         var geometry = {
 185             components: "foo"
 186         }
 187         g_GetString = false;
 188         g_Components = null;
 189         r.getComponentsString = function(c) {
 190             g_GetString = true;
 191             g_Components = c;
 192             return {path: "bar", complete: true};
 193         }
 194
 195         r.drawLineString(node, geometry);
 196
 197         t.ok(g_GetString && g_Components == "foo", "getComponentString is called with valid arguments");
 198         t.eq(node.getAttributeNS(null, "points"), "bar", "points attribute is correct");
 199     }
 200
 201     function test_SVG_drawlinearring(t) {
 202         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 203             t.plan(0);
 204             return;
 205         }
 206
 207         t.plan(2);
 208
 209         var r = new OpenLayers.Renderer.SVG(document.body);
 210
 211         var node = document.createElement('div');
 212
 213         var geometry = {
 214             components: "foo"
 215         }
 216         g_GetString = false;
 217         g_Components = null;
 218         r.getComponentsString = function(c) {
 219             g_GetString = true;
 220             g_Components = c;
 221             return {path: "bar", complete: true};
 222         }
 223
 224         r.drawLinearRing(node, geometry);
 225
 226         t.ok(g_GetString, "getComponentString is called with valid arguments");
 227         t.eq(node.getAttributeNS(null, "points"), "bar", "points attribute is correct");
 228     }
 229
 230     function test_SVG_drawpolygon(t) {
 231         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 232             t.plan(0);
 233             return;
 234         }
 235
 236         t.plan(4);
 237
 238         var r = new OpenLayers.Renderer.SVG(document.body);
 239
 240         var node = document.createElement('div');
 241
 242         var linearRings = [{
 243             components: ["foo"]
 244         },{
 245             components: ["bar"]
 246         }]
 247
 248         var geometry = {
 249             components: linearRings
 250         }
 251         g_GetString = false;
 252         r.getShortString = function(c) {
 253             g_GetString = true;
 254             return c;
 255         }
 256
 257         r.drawPolygon(node, geometry);
 258
 259         t.ok(g_GetString, "getShortString is called");
 260         t.eq(node.getAttributeNS(null, "d"), " M foo M bar z", "d attribute is correctly set");
 261         t.eq(node.getAttributeNS(null, "fill-rule"), "evenodd", "fill-rule attribute is correctly set");
 262
 263         r.getShortString = function(c) {
 264             return false;
 265         }
 266         t.eq(r.drawPolygon(node, geometry), false, "drawPolygon returns false if one linearRing cannot be drawn");
 267     }
 268
 269     function test_SVG_drawrectangle(t) {
 270         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 271             t.plan(0);
 272             return;
 273         }
 274
 275         t.plan(4);
 276
 277         var r = new OpenLayers.Renderer.SVG(document.body);
 278         r.resolution = 0.5;
 279         r.left = 0;
 280         r.top = 0;
 281
 282         var node = document.createElement('div');
 283
 284         var geometry = {
 285             x: 1,
 286             y: 2,
 287             width: 3,
 288             height: 4
 289         }
 290
 291         r.drawRectangle(node, geometry);
 292
 293         t.eq(node.getAttributeNS(null, "x"), "2", "x attribute is correctly set");
 294         t.eq(node.getAttributeNS(null, "y"), "-4", "y attribute is correctly set");
 295         t.eq(node.getAttributeNS(null, "width"), "6", "width attribute is correctly set");
 296         t.eq(node.getAttributeNS(null, "height"), "8", "height attribute is correctly set");
 297     }
 298
 299     function test_SVG_drawsurface(t) {
 300         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 301             t.plan(0);
 302             return;
 303         }
 304
 305         t.plan(3);
 306
 307         var r = new OpenLayers.Renderer.SVG(document.body);
 308
 309         var node = document.createElement('div');
 310
 311         var geometry = {
 312             components: ['foo', 'bar', 'dude']
 313         }
 314         g_GetString = false;
 315         r.getShortString = function(c) {
 316             g_GetString = true;
 317             return c;
 318         }
 319
 320         r.drawSurface(node, geometry);
 321
 322         t.ok(g_GetString, "getShortString is called");
 323
 324         t.eq(node.getAttributeNS(null, "d"), "M foo C bar dude Z", "d attribute is correctly set");
 325
 326         r.getShortString = function(c) {
 327             return false;
 328         }
 329
 330         t.eq(r.drawSurface(node, geometry), false, "drawSurface returns false if one linearRing cannot be drawn");
 331     }
 332
 333     function test_SVG_getcomponentsstring(t) {
 334         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 335             t.plan(0);
 336             return;
 337         }
 338
 339         t.plan(1);
 340
 341         var components = ['foo', 'bar'];
 342
 343         OpenLayers.Renderer.SVG.prototype._getShortString =
 344             OpenLayers.Renderer.SVG.prototype.getShortString;
 345
 346         OpenLayers.Renderer.SVG.prototype.getShortString = function(p) {
 347             return p;
 348         };
 349
 350         var string = OpenLayers.Renderer.SVG.prototype.getComponentsString(components).path;
 351         t.eq(string, "foo,bar", "returned string is correct");
 352
 353         OpenLayers.Renderer.SVG.prototype.getShortString =
 354             OpenLayers.Renderer.SVG.prototype._getShortString;
 355     }
 356
 357
 358
 359     function test_SVG_getshortstring(t) {
 360         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 361             t.plan(0);
 362             return;
 363         }
 364
 365         t.plan(1);
 366
 367         var r = new OpenLayers.Renderer.SVG(document.body);
 368         r.resolution = 0.5;
 369         r.left = 0;
 370         r.top = 0;
 371
 372         var point = {
 373             x: 1,
 374             y: 2
 375         };
 376
 377         var string = r.getShortString(point);
 378         t.eq(string, "2,-4", "returned string is correct");
 379     }
 380
 381     function test_svg_getnodetype(t) {
 382         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 383             t.plan(0);
 384             return;
 385         }
 386
 387         t.plan(1);
 388
 389         var r = new OpenLayers.Renderer.SVG(document.body);
 390
 391         var g = {CLASS_NAME: "OpenLayers.Geometry.Point"}
 392         var s = {graphicName: "square"};
 393
 394         t.eq(r.getNodeType(g, s), "use", "Correct node type for well known symbols");
 395     }
 396
 397     function test_svg_importsymbol(t) {
 398         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 399             t.plan(0);
 400             return;
 401         }
 402
 403         t.plan(2);
 404
 405         var r = new OpenLayers.Renderer.SVG(document.body);
 406
 407         r.importSymbol("square");
 408
 409         var polygon = document.getElementById(r.container.id + "_defs").firstChild.firstChild;
 410
 411         var points = polygon.getAttribute("points");
 412
 413         t.eq(points.replace(/ /g,''), "0,00,11,11,00,0", "Square symbol rendered correctly");
 414         t.ok(r.symbolSize["-square"], "Symbol size cached correctly.");
 415     }
 416
 417     function test_svg_dashstyle(t) {
 418         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 419             t.plan(0);
 420             return;
 421         }
 422
 423         t.plan(5);
 424
 425         var r = new OpenLayers.Renderer.SVG(document.body);
 426
 427         t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dot"}, 1), "1,4", "dot dasharray created correctly");
 428         t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dash"}, 1), "4,4", "dash dasharray created correctly");
 429         t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdash"}, 1), "8,4", "longdash dasharray created correctly");
 430         t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dashdot"}, 1), "4,4,1,4", "dashdot dasharray created correctly");
 431         t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdashdot"}, 1), "8,4,1,4", "dashdot dasharray created correctly");
 432     }
 433
 434     function test_svg_clipline(t) {
 435         if (!OpenLayers.Renderer.SVG.prototype.supported()) {
 436             t.plan(0);
 437             return;
 438         }
 439
 440         t.plan(3);
 441
 442         var r = new OpenLayers.Renderer.SVG(document.body);
 443         r.setSize(new OpenLayers.Size(0, 0));
 444         r.map = {
 445             getResolution: function() {
 446                 return 0.5;
 447             }
 448         }
 449         r.setExtent(new OpenLayers.Bounds(0, 0, 0, 0));
 450
 451         var node = document.createElement('div');
 452
 453         var geometry = new OpenLayers.Geometry.LineString([
 454             new OpenLayers.Geometry.Point(0, -5000),
 455             new OpenLayers.Geometry.Point(10000, 0),
 456             new OpenLayers.Geometry.Point(0, 5000)
 457         ]);
 458         r.drawLineString(node, geometry);
 459         t.eq(node.getAttribute("points"), "0,10000,15000,2500,15000,-2500,0,-10000", "Line with 3 points correctly clipped at inValidRange bounds");
 460
 461         geometry = new OpenLayers.Geometry.LineString([
 462             new OpenLayers.Geometry.Point(0, -5000),
 463             new OpenLayers.Geometry.Point(10000, 0)
 464         ]);
 465         r.drawLineString(node, geometry);
 466         t.eq(node.getAttribute("points"), "0,10000,15000,2500", "2-point line with 2nd point outside range correctly clipped at inValidRange bounds");
 467
 468         var geometry = new OpenLayers.Geometry.LineString([
 469             new OpenLayers.Geometry.Point(10000, 0),
 470             new OpenLayers.Geometry.Point(0, 5000)
 471         ]);
 472         r.drawLineString(node, geometry);
 473         t.eq(node.getAttribute("points"), "15000,-2500,0,-10000", "2-point line with 1st point outside range correctly clipped at inValidRange bounds");
 474     }
 475
 476   </script>
 477 </head>
 478 <body>
 479 <div id="map" style="width:500px;height:550px"></div>
 480 </body>
 481 </html>