3 <script src="../../lib/OpenLayers.js"></script>
4 <script type="text/javascript">
6 var geometry = null, node = null;
8 function test_SVG_constructor(t) {
9 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
15 var r = new OpenLayers.Renderer.SVG(document.body);
16 t.ok(r instanceof OpenLayers.Renderer.SVG, "new OpenLayers.Renderer.SVG returns SVG object" );
19 function test_SVG_destroy(t) {
20 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
27 var g_Destroy = false;
29 OpenLayers.Renderer.Elements.prototype._destroy =
30 OpenLayers.Renderer.Elements.prototype.destroy;
32 OpenLayers.Renderer.prototype.destroy = function() {
36 var r = new OpenLayers.Renderer.SVG(document.body);
39 t.eq(g_Destroy, true, "OpenLayers.Renderer.Elements.destroy() called");
41 OpenLayers.Renderer.prototype.destroy =
42 OpenLayers.Renderer.prototype._destroy;
45 function test_SVG_setextent(t) {
46 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
53 OpenLayers.Renderer.Elements.prototype._setExtent =
54 OpenLayers.Renderer.Elements.prototype.setExtent;
56 var g_SetExtent = false;
57 OpenLayers.Renderer.Elements.prototype.setExtent = function() {
61 var r = new OpenLayers.Renderer.SVG(document.body);
62 r.setSize(new OpenLayers.Size(4,4));
64 getResolution: function() {
69 var extent = new OpenLayers.Bounds(1,2,3,4);
72 t.eq(g_SetExtent, true, "Elements.setExtent() called");
74 t.eq(r.left, -2, "left is correct");
75 t.eq(r.top, 8, "top is correct");
77 t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "0 0 4 4", "rendererRoot viewBox is correct");
79 // test extent changes
80 var extent = new OpenLayers.Bounds(4,3,2,1);
82 t.eq(r.root.getAttributeNS(null, "transform").replace(/ /g, ""), "translate(-6,-6)", "rendererRoot viewBox is correct after a new setExtent");
84 OpenLayers.Renderer.Elements.prototype.setExtent =
85 OpenLayers.Renderer.Elements.prototype._setExtent;
88 function test_SVG_setsize(t) {
89 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
96 var r = new OpenLayers.Renderer.SVG(document.body);
98 var size = new OpenLayers.Size(1,2);
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");
104 function test_SVG_drawpoint(t) {
105 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
112 var r = new OpenLayers.Renderer.SVG(document.body);
114 var properDraw = false;
116 r.drawCircle = function(n, g, r) {
122 t.ok(properDraw && g_Radius == 1, "drawPoint called drawCircle with radius set to 1");
125 function test_SVG_drawcircle(t) {
126 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
133 var r = new OpenLayers.Renderer.SVG(document.body);
138 var node = document.createElement('div');
145 r.drawCircle(node, geometry, 3);
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");
151 // #1274: out of bound node fails when first added
155 CLASS_NAME: "OpenLayers.Geometry.Point",
158 node.id = geometry.id;
159 r.root.appendChild(node);
161 var drawCircleCalled = false;
162 r.drawCircle = function() {
163 drawCircleCalled = true;
164 return OpenLayers.Renderer.SVG.prototype.drawCircle.apply(r, arguments);
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");
172 function test_SVG_drawlinestring(t) {
173 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
180 var r = new OpenLayers.Renderer.SVG(document.body);
182 var node = document.createElement('div');
189 r.getComponentsString = function(c) {
192 return {path: "bar", complete: true};
195 r.drawLineString(node, geometry);
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");
201 function test_SVG_drawlinearring(t) {
202 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
209 var r = new OpenLayers.Renderer.SVG(document.body);
211 var node = document.createElement('div');
218 r.getComponentsString = function(c) {
221 return {path: "bar", complete: true};
224 r.drawLinearRing(node, geometry);
226 t.ok(g_GetString, "getComponentString is called with valid arguments");
227 t.eq(node.getAttributeNS(null, "points"), "bar", "points attribute is correct");
230 function test_SVG_drawpolygon(t) {
231 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
238 var r = new OpenLayers.Renderer.SVG(document.body);
240 var node = document.createElement('div');
249 components: linearRings
252 r.getShortString = function(c) {
257 r.drawPolygon(node, geometry);
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");
263 r.getShortString = function(c) {
266 t.eq(r.drawPolygon(node, geometry), false, "drawPolygon returns false if one linearRing cannot be drawn");
269 function test_SVG_drawrectangle(t) {
270 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
277 var r = new OpenLayers.Renderer.SVG(document.body);
282 var node = document.createElement('div');
291 r.drawRectangle(node, geometry);
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");
299 function test_SVG_drawsurface(t) {
300 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
307 var r = new OpenLayers.Renderer.SVG(document.body);
309 var node = document.createElement('div');
312 components: ['foo', 'bar', 'dude']
315 r.getShortString = function(c) {
320 r.drawSurface(node, geometry);
322 t.ok(g_GetString, "getShortString is called");
324 t.eq(node.getAttributeNS(null, "d"), "M foo C bar dude Z", "d attribute is correctly set");
326 r.getShortString = function(c) {
330 t.eq(r.drawSurface(node, geometry), false, "drawSurface returns false if one linearRing cannot be drawn");
333 function test_SVG_getcomponentsstring(t) {
334 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
341 var components = ['foo', 'bar'];
343 OpenLayers.Renderer.SVG.prototype._getShortString =
344 OpenLayers.Renderer.SVG.prototype.getShortString;
346 OpenLayers.Renderer.SVG.prototype.getShortString = function(p) {
350 var string = OpenLayers.Renderer.SVG.prototype.getComponentsString(components).path;
351 t.eq(string, "foo,bar", "returned string is correct");
353 OpenLayers.Renderer.SVG.prototype.getShortString =
354 OpenLayers.Renderer.SVG.prototype._getShortString;
359 function test_SVG_getshortstring(t) {
360 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
367 var r = new OpenLayers.Renderer.SVG(document.body);
377 var string = r.getShortString(point);
378 t.eq(string, "2,-4", "returned string is correct");
381 function test_svg_getnodetype(t) {
382 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
389 var r = new OpenLayers.Renderer.SVG(document.body);
391 var g = {CLASS_NAME: "OpenLayers.Geometry.Point"}
392 var s = {graphicName: "square"};
394 t.eq(r.getNodeType(g, s), "use", "Correct node type for well known symbols");
397 function test_svg_importsymbol(t) {
398 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
405 var r = new OpenLayers.Renderer.SVG(document.body);
407 r.importSymbol("square");
409 var polygon = document.getElementById(r.container.id + "_defs").firstChild.firstChild;
411 var points = polygon.getAttribute("points");
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.");
417 function test_svg_dashstyle(t) {
418 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
425 var r = new OpenLayers.Renderer.SVG(document.body);
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");
434 function test_svg_clipline(t) {
435 if (!OpenLayers.Renderer.SVG.prototype.supported()) {
442 var r = new OpenLayers.Renderer.SVG(document.body);
443 r.setSize(new OpenLayers.Size(0, 0));
445 getResolution: function() {
449 r.setExtent(new OpenLayers.Bounds(0, 0, 0, 0));
451 var node = document.createElement('div');
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)
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");
461 geometry = new OpenLayers.Geometry.LineString([
462 new OpenLayers.Geometry.Point(0, -5000),
463 new OpenLayers.Geometry.Point(10000, 0)
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");
468 var geometry = new OpenLayers.Geometry.LineString([
469 new OpenLayers.Geometry.Point(10000, 0),
470 new OpenLayers.Geometry.Point(0, 5000)
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");
479 <div id="map" style="width:500px;height:550px"></div>