[OpenLayers-Commits] r12393 - in sandbox/ossipoff/openlayers:
examples lib/OpenLayers/Format/SLD lib/OpenLayers/Renderer
tests/Format/SLD tests/Renderer
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Sat Sep 17 16:20:36 EDT 2011
Author: ossipoff
Date: 2011-09-17 13:20:35 -0700 (Sat, 17 Sep 2011)
New Revision: 12393
Added:
sandbox/ossipoff/openlayers/examples/graphicfill.html
sandbox/ossipoff/openlayers/examples/graphicfill.png
sandbox/ossipoff/openlayers/tests/Renderer/graphicfill-20x20.png
sandbox/ossipoff/openlayers/tests/Renderer/graphicfill-20x40.png
sandbox/ossipoff/openlayers/tests/Renderer/graphicfill-40x20.png
Modified:
sandbox/ossipoff/openlayers/lib/OpenLayers/Format/SLD/v1.js
sandbox/ossipoff/openlayers/lib/OpenLayers/Renderer/SVG.js
sandbox/ossipoff/openlayers/lib/OpenLayers/Renderer/VML.js
sandbox/ossipoff/openlayers/tests/Format/SLD/v1_0_0.html
sandbox/ossipoff/openlayers/tests/Renderer/SVG.html
sandbox/ossipoff/openlayers/tests/Renderer/VML.html
Log:
externalGraphic fill for polygons
Added: sandbox/ossipoff/openlayers/examples/graphicfill.html
===================================================================
--- sandbox/ossipoff/openlayers/examples/graphicfill.html (rev 0)
+++ sandbox/ossipoff/openlayers/examples/graphicfill.html 2011-09-17 20:20:35 UTC (rev 12393)
@@ -0,0 +1,155 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>GraphicFill Example</title>
+
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+ <link rel="stylesheet" href="style.css" type="text/css" />
+ <style type="text/css">
+ #controlToggle li {
+ list-style: none;
+ }
+ p {
+ width: 512px;
+ }
+
+ /* avoid pink tiles */
+ .olImageLoadError {
+ background-color: transparent !important;
+ }
+ </style>
+ <script src="../lib/OpenLayers.js"></script>
+ <script type="text/javascript">
+ var map, drawControls, polygonLayer;
+ var button, input, format;
+
+ function init(){
+ map = new OpenLayers.Map('map');
+
+ var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
+
+ // allow testing of specific renderers via "?renderer=Canvas", etc
+ var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+ renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
+ polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer", { renderers: renderer });
+
+ map.addLayers([wmsLayer, polygonLayer]);
+ map.addControl(new OpenLayers.Control.LayerSwitcher());
+ map.addControl(new OpenLayers.Control.MousePosition());
+
+ drawControls = {
+ polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
+ OpenLayers.Handler.Polygon)
+ };
+
+ for(var key in drawControls) {
+ map.addControl(drawControls[key]);
+ }
+
+ map.setCenter(new OpenLayers.LonLat(0, 0), 3);
+
+ button = document.getElementById("button");
+ input = document.getElementById("input");
+ button.onclick = function() {
+ var str = input.value;
+ format = new OpenLayers.Format.SLD();
+ obj = format.read(str);
+ if (obj && obj.namedLayers) {
+ for (var p in obj.namedLayers) {
+ polygonLayer.styleMap.styles["default"] = obj.namedLayers[p].userStyles[0];
+ polygonLayer.redraw();
+ break;
+ }
+ }
+ }
+
+ button.onclick();
+
+ var polygonToggle = document.getElementById('polygonToggle');
+ polygonToggle.checked = true;
+ toggleControl(polygonToggle);
+ }
+
+ function toggleControl(element) {
+ for(key in drawControls) {
+ var control = drawControls[key];
+ if(element.value == key && element.checked) {
+ control.activate();
+ } else {
+ control.deactivate();
+ }
+ }
+ }
+ </script>
+ </head>
+ <body onload="init()">
+ <h1 id="title">OpenLayers GraphicFill Example</h1>
+
+ <div id="tags"></div>
+
+ <p id="shortdesc">
+ Demonstrate GraphicFill for polygons.
+ </p>
+
+ <div id="map" class="smallmap"></div>
+
+ <ul id="controlToggle">
+ <li>
+ <input type="radio" name="type" value="none" id="noneToggle"
+ onclick="toggleControl(this);" checked="checked" />
+ <label for="noneToggle">navigate</label>
+ </li>
+ <li>
+ <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
+ <label for="polygonToggle">draw polygon</label>
+ </li>
+ </ul>
+
+ <textarea id="input" style="width:512px; height: 300px;" wrap="off">
+<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
+<sld:StyledLayerDescriptor version="1.0.0" xmlns:sld="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/sld ./Sld/StyledLayerDescriptor.xsd">
+ <sld:NamedLayer>
+ <sld:Name>Polygon</sld:Name>
+ <sld:UserStyle>
+ <sld:Name>Polygon</sld:Name>
+ <sld:FeatureTypeStyle>
+ <sld:FeatureTypeName>Polygon</sld:FeatureTypeName>
+ <sld:Rule>
+ <sld:Name>Polygon</sld:Name>
+ <sld:Title>Polygon</sld:Title>
+ <sld:PolygonSymbolizer>
+ <sld:Fill>
+ <sld:GraphicFill>
+ <sld:Graphic>
+ <sld:ExternalGraphic>
+ <sld:OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="graphicfill.png"/>
+ <sld:Format>image/png</sld:Format>
+ </sld:ExternalGraphic>
+ <sld:Size>20</sld:Size>
+ </sld:Graphic>
+ </sld:GraphicFill>
+ </sld:Fill>
+ <sld:Stroke>
+ <sld:CssParameter name="stroke">#006666</sld:CssParameter>
+ <sld:CssParameter name="stroke-width">2</sld:CssParameter>
+ <sld:CssParameter name="stroke-opacity">1</sld:CssParameter>
+ <sld:CssParameter name="stroke-dasharray">4 4</sld:CssParameter>
+ </sld:Stroke>
+ </sld:PolygonSymbolizer>
+ </sld:Rule>
+ </sld:FeatureTypeStyle>
+ </sld:UserStyle>
+ </sld:NamedLayer>
+</sld:StyledLayerDescriptor>
+ </textarea><br>
+
+ <input type="button" id="button" value="Apply SLD">
+
+ <div id="docs">
+ <p>
+ Example of using GraphicFill as fill in a polygon. An example SLD is already applied, but you can paste your own and apply it by pressing "Apply SLD"
+ </p>
+ </div>
+ </body>
+</html>
Added: sandbox/ossipoff/openlayers/examples/graphicfill.png
===================================================================
(Binary files differ)
Property changes on: sandbox/ossipoff/openlayers/examples/graphicfill.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Modified: sandbox/ossipoff/openlayers/lib/OpenLayers/Format/SLD/v1.js
===================================================================
--- sandbox/ossipoff/openlayers/lib/OpenLayers/Format/SLD/v1.js 2011-09-17 20:18:55 UTC (rev 12392)
+++ sandbox/ossipoff/openlayers/lib/OpenLayers/Format/SLD/v1.js 2011-09-17 20:20:35 UTC (rev 12393)
@@ -352,6 +352,10 @@
}
}
},
+ "GraphicFill": function(node, symbolizer) {
+ symbolizer.pointRadius = null;
+ this.readChildNodes(node, symbolizer);
+ },
"Graphic": function(node, symbolizer) {
symbolizer.graphic = true;
var graphic = {};
@@ -993,23 +997,26 @@
"Fill": function(symbolizer) {
var node = this.createElementNSPlus("sld:Fill");
- // GraphicFill here
-
- // add in CssParameters
- if(symbolizer.fillColor) {
- this.writeNode(
- "CssParameter",
- {symbolizer: symbolizer, key: "fillColor"},
- node
- );
- }
- if(symbolizer.fillOpacity != null) {
- this.writeNode(
- "CssParameter",
- {symbolizer: symbolizer, key: "fillOpacity"},
- node
- );
- }
+ // if externalGraphic write a GraphicFill node to the Fill node
+ if (symbolizer.externalGraphic) {
+ this.writeNode("GraphicFill", symbolizer, node);
+ } else {
+ // add in CssParameters
+ if(symbolizer.fillColor) {
+ this.writeNode(
+ "CssParameter",
+ {symbolizer: symbolizer, key: "fillColor"},
+ node
+ );
+ }
+ if(symbolizer.fillOpacity != null) {
+ this.writeNode(
+ "CssParameter",
+ {symbolizer: symbolizer, key: "fillOpacity"},
+ node
+ );
+ }
+ }
return node;
},
"PointSymbolizer": function(symbolizer) {
@@ -1017,6 +1024,11 @@
this.writeNode("Graphic", symbolizer, node);
return node;
},
+ "GraphicFill": function(symbolizer) {
+ var node = this.createElementNSPlus("sld:GraphicFill");
+ this.writeNode("Graphic", symbolizer, node);
+ return node;
+ },
"Graphic": function(symbolizer) {
var node = this.createElementNSPlus("sld:Graphic");
if(symbolizer.externalGraphic != undefined) {
Modified: sandbox/ossipoff/openlayers/lib/OpenLayers/Renderer/SVG.js
===================================================================
--- sandbox/ossipoff/openlayers/lib/OpenLayers/Renderer/SVG.js 2011-09-17 20:18:55 UTC (rev 12392)
+++ sandbox/ossipoff/openlayers/lib/OpenLayers/Renderer/SVG.js 2011-09-17 20:20:35 UTC (rev 12393)
@@ -5,6 +5,7 @@
/**
* @requires OpenLayers/Renderer/Elements.js
+ * @requires OpenLayers/Console.js
*/
/**
@@ -239,7 +240,7 @@
* 'isStroked' {Boolean}
*/
setStyle: function(node, style, options) {
- style = style || node._style;
+ style = style || node._style;
options = options || node._options;
var r = parseFloat(node.getAttributeNS(null, "r"));
var widthFactor = 1;
@@ -341,8 +342,20 @@
}
if (options.isFilled) {
- node.setAttributeNS(null, "fill", style.fillColor);
- node.setAttributeNS(null, "fill-opacity", style.fillOpacity);
+ if (style.externalGraphic) {
+ var pid = this.createImagePattern(style);
+ node.setAttributeNS(null, "fill", "url(#" + pid + ")");
+ node.setAttributeNS(null, "fill-opacity", 1);
+ } else if (style.graphicName && node._geometryClass !== "OpenLayers.Geometry.Point") {
+ //this can also happen if a rule based style applies to both points and other types of geometries. TODO: better handling of rule based styles!
+ OpenLayers.Console.error('WellKnownName is not yet supported as GraphicFill by the SVG renderer!');
+ //var pid = this.createMarkPattern(style);
+ //node.setAttributeNS(null, "fill", "url(#" + pid + ")");
+ //node.setAttributeNS(null, "fill-opacity", 1);
+ } else {
+ node.setAttributeNS(null, "fill", style.fillColor);
+ node.setAttributeNS(null, "fill-opacity", style.fillOpacity);
+ }
} else {
node.setAttributeNS(null, "fill", "none");
}
@@ -469,7 +482,69 @@
this.rendererRoot.appendChild(defs);
return defs;
},
+
+ /**
+ * Method: createImagePattern
+ *
+ * Returns:
+ * {String} The id of the created pattern
+ */
+ createImagePattern: function(style) {
+ // reuse the pattern if the same externalGraphic with the same size has already been used
+ var id = this.container.id + "-" + style.externalGraphic + ((style.pointRadius) ? "-" + style.pointRadius : "");
+ var patternNode = OpenLayers.Util.getElement(id);
+ if (!patternNode) {
+ // to follow SLD spec we need to know image size
+ // to get the image size we must load the image
+ var img = new Image();
+
+ img.onload = OpenLayers.Function.bind(function() {
+ if (!this.defs) {
+ // create svg defs tag
+ this.defs = this.createDefs();
+ }
+
+ // according to SLD specification image should be scaled by its inherent dimensions if no Size is given
+ var height = img.height * 72 / 96;
+ var width = img.width * 72 / 96;
+
+ // if Size is given, it is used as height and width is scaled to original aspect
+ if (style.pointRadius) {
+ var aspect = width / height;
+ height = (style.pointRadius * 2) * 72 / 96;
+ width = height * aspect;
+ }
+
+ height = height + "pt";
+ width = width + "pt";
+
+ patternNode = this.nodeFactory(id, "pattern");
+ patternNode.setAttributeNS(null, "x", "0");
+ patternNode.setAttributeNS(null, "y", "0");
+ patternNode.setAttributeNS(null, "height", height);
+ patternNode.setAttributeNS(null, "width", width);
+ patternNode.setAttributeNS(null, "patternUnits", "userSpaceOnUse");
+
+ var imageNode = this.nodeFactory(null, "image");
+ patternNode.appendChild(imageNode);
+ imageNode.setAttributeNS(this.xlinkns, "href", style.externalGraphic);
+ imageNode.setAttributeNS(null, "height", height);
+ imageNode.setAttributeNS(null, "width", width);
+ imageNode.setAttributeNS(null, "style", "opacity: " + (style.graphicOpacity || style.fillOpacity || 1));
+ if (typeof style.rotation != "undefined") {
+ var rotation = OpenLayers.String.format("rotate(${0})", [style.rotation]);
+ imageNode.setAttributeNS(null, "transform", rotation);
+ }
+ this.defs.appendChild(patternNode);
+ }, this);
+
+ img.src = style.externalGraphic;
+ }
+
+ return id;
+ },
+
/**************************************
* *
* GEOMETRY DRAWING FUNCTIONS *
Modified: sandbox/ossipoff/openlayers/lib/OpenLayers/Renderer/VML.js
===================================================================
--- sandbox/ossipoff/openlayers/lib/OpenLayers/Renderer/VML.js 2011-09-17 20:18:55 UTC (rev 12392)
+++ sandbox/ossipoff/openlayers/lib/OpenLayers/Renderer/VML.js 2011-09-17 20:20:35 UTC (rev 12393)
@@ -5,6 +5,7 @@
/**
* @requires OpenLayers/Renderer/Elements.js
+ * @requires OpenLayers/Console.js
*/
/**
@@ -250,7 +251,11 @@
// fill
if (options.isFilled) {
- node.fillcolor = fillColor;
+ if (!style.externalGraphic) {
+ node.fillcolor = fillColor;
+ } else {
+ node.fillcolor = "none";
+ }
} else {
node.filled = "false";
}
@@ -266,21 +271,44 @@
}
fill.opacity = style.fillOpacity;
- if (node._geometryClass === "OpenLayers.Geometry.Point" &&
- style.externalGraphic) {
-
- // override fillOpacity
- if (style.graphicOpacity) {
- fill.opacity = style.graphicOpacity;
- }
-
- fill.src = style.externalGraphic;
- fill.type = "frame";
-
- if (!(style.graphicWidth && style.graphicHeight)) {
- fill.aspect = "atmost";
- }
- }
+ if (style.externalGraphic) {
+ // reuse the fill node if the same externalGraphic with the same size has already been used
+ if (fill.src != style.externalGraphic ||
+ ((fill.size) ? parseFloat(fill.size.value.split(",")[1]): 0) != (style.pointRadius * 2) * 72 / 96) {
+ // override fillOpacity
+ if (style.graphicOpacity) {
+ fill.opacity = style.graphicOpacity;
+ }
+
+ fill.src = style.externalGraphic;
+ fill.type = (node._geometryClass === "OpenLayers.Geometry.Point") ? "frame" : "tile";
+
+ // to follow SLD spec we need to know image size
+ // to get the image size we must load the image
+ var img = new Image();
+
+ img.onload = OpenLayers.Function.bind(function() {
+ var height = img.height * 72 / 96;
+ var width = img.width * 72 / 96;
+ if (style.pointRadius) {
+ var aspect = width / height;
+ height = (style.pointRadius * 2) * 72 / 96;
+ width = height * aspect;
+ }
+ fill.size = width + "pt," + height + "pt";
+ });
+
+ // load the image
+ img.src = style.externalGraphic;
+
+ if (!(style.graphicWidth && style.graphicHeight)) {
+ fill.aspect = "atmost";
+ }
+ }
+ } else if (style.graphicName && node._geometryClass !== "OpenLayers.Geometry.Point") {
+ //this can also happen if a rule based style applies to both points and other types of geometries. TODO: better handling of rule based styles!
+ OpenLayers.Console.error('WellKnownName is not yet supported as GraphicFill by the VML renderer!');
+ }
if (fill.parentNode != node) {
node.appendChild(fill);
}
Modified: sandbox/ossipoff/openlayers/tests/Format/SLD/v1_0_0.html
===================================================================
--- sandbox/ossipoff/openlayers/tests/Format/SLD/v1_0_0.html 2011-09-17 20:18:55 UTC (rev 12392)
+++ sandbox/ossipoff/openlayers/tests/Format/SLD/v1_0_0.html 2011-09-17 20:20:35 UTC (rev 12393)
@@ -127,10 +127,39 @@
'</FeatureTypeStyle>' +
'</UserStyle>' +
'</NamedLayer>' +
+ '<NamedLayer>' +
+ '<Name>GraphicFill Layer</Name>' +
+ '<UserStyle>' +
+ '<FeatureTypeStyle>' +
+ '<Rule>' +
+ '<Name>GraphicFill Layer rule</Name>' +
+ '<PolygonSymbolizer>' +
+ '<Fill>' +
+ '<GraphicFill>' +
+ '<Graphic>' +
+ '<ExternalGraphic>' +
+ '<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="graphicfill.png"/>' +
+ '<Format>image/png</Format>' +
+ '</ExternalGraphic>' +
+ '<Size>16</Size>' +
+ '</Graphic>' +
+ '</GraphicFill>' +
+ '</Fill>' +
+ '<Stroke>' +
+ '<CssParameter name="stroke">#006666</CssParameter>' +
+ '<CssParameter name="stroke-opacity">1</CssParameter>' +
+ '<CssParameter name="stroke-width">2</CssParameter>' +
+ '<CssParameter name="stroke-dasharray">4 4</CssParameter>' +
+ '</Stroke>' +
+ '</PolygonSymbolizer>' +
+ '</Rule>' +
+ '</FeatureTypeStyle>' +
+ '</UserStyle>' +
+ '</NamedLayer>' +
'</StyledLayerDescriptor>';
function test_read(t) {
- t.plan(22);
+ t.plan(24);
var xml = new OpenLayers.Format.XML();
var sldxml = xml.read(sld);
@@ -202,7 +231,16 @@
};
t.ok(typeof rule.maxScaleDenominator == "number", "MaxScaleDenominator is a number");
t.eq(rule.evaluate(feature), true, "numeric filter comparison evaluates correctly");
-
+
+ // check graphic fill named layer
+ layer = obj.namedLayers["GraphicFill Layer"];
+ style = layer.userStyles[0];
+ rule = style.rules[0];
+ symbolizer = rule.symbolizer;
+ poly = symbolizer["Polygon"];
+ t.eq(poly.externalGraphic, "graphicfill.png", "(GraphicFill Layer,0) first rule has correct external graphic");
+ t.eq(poly.pointRadius * 2, 16, "(GraphicFill Layer,0) first rule has correct size");
+
// etc. I'm convinced read works, really wanted to test write (since examples don't test that)
// I'll add more tests here later.
Modified: sandbox/ossipoff/openlayers/tests/Renderer/SVG.html
===================================================================
--- sandbox/ossipoff/openlayers/tests/Renderer/SVG.html 2011-09-17 20:18:55 UTC (rev 12392)
+++ sandbox/ossipoff/openlayers/tests/Renderer/SVG.html 2011-09-17 20:20:35 UTC (rev 12393)
@@ -100,6 +100,32 @@
t.eq(r.rendererRoot.getAttributeNS(null, "width"), size.w.toString(), "width is correct");
t.eq(r.rendererRoot.getAttributeNS(null, "height"), size.h.toString(), "height is correct");
}
+
+ function test_SVG_setstyle(t) {
+ if (!OpenLayers.Renderer.SVG.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(2);
+
+ var r = new OpenLayers.Renderer.SVG(document.body);
+
+ // test graphic fill
+ var node = document.createElement('div');
+ var style = {
+ externalGraphic: "graphicfill-20x20.png",
+ pointRadius: 10,
+ fillOpacity: 1
+ };
+ var options = { isFilled: true };
+ r.setStyle(node, style, options);
+
+ t.eq(node.getAttributeNS(null, 'fill'),
+ 'url(#' + r.container.id + '-' + style.externalGraphic + '-' + style.pointRadius + ')',
+ "GraphicFill: fill is correct");
+ t.eq(node.getAttributeNS(null, 'fill-opacity'), '1', "GraphicFill: fill-opacity is correct");
+ }
function test_SVG_drawpoint(t) {
if (!OpenLayers.Renderer.SVG.prototype.supported()) {
@@ -464,6 +490,71 @@
r.drawLineString(node, geometry);
t.eq(node.getAttribute("points"), "15000,-2500,0,-10000", "2-point line with 1st point outside range correctly clipped at inValidRange bounds");
}
+
+ function test_svg_createimagepattern(t) {
+ if (!OpenLayers.Renderer.SVG.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(13);
+
+ var r = new OpenLayers.Renderer.SVG(document.body);
+
+ var style = {
+ externalGraphic: "graphicfill-20x20.png",
+ pointRadius: 8
+ };
+
+ var pid20x20 = r.createImagePattern(style);
+
+ style.externalGraphic = "graphicfill-20x40.png";
+ var pid20x40 = r.createImagePattern(style);
+
+ style.externalGraphic = "graphicfill-40x20.png";
+ var pid40x20 = r.createImagePattern(style);
+
+ // need to wait for the patterns to be created, the pattern nodes are not created until images load
+ t.delay_call(2, function() {
+ var height = (style.pointRadius * 2) * 72 / 96 + "pt";
+ var width = height;
+
+ // test pattern attributes
+ var pattern = document.getElementById(pid20x20);
+ t.eq(pattern.getAttributeNS(null, "x"), "0", "pattern x is correct");
+ t.eq(pattern.getAttributeNS(null, "y"), "0", "pattern y is correct");
+ t.eq(pattern.getAttributeNS(null, "height"), height, "pattern height is correct");
+ t.eq(pattern.getAttributeNS(null, "width"), width, "pattern width is correct");
+ t.eq(pattern.getAttributeNS(null, "patternUnits"), "userSpaceOnUse", "pattern patternUnits is correct");
+
+ // test image attributes for 20x20 pixel image
+ var image = pattern.firstChild;
+ t.eq(image.getAttributeNS(r.xlinkns, "href"), style.externalGraphic, "image href is correct");
+ t.eq(image.getAttributeNS(null, "style"), "opacity: " + (style.graphicOpacity || style.fillOpacity || 1), "image style is correct");
+ t.eq(image.getAttributeNS(null, "height"), height, "image height is correct for 20x20 pixel image");
+ t.eq(image.getAttributeNS(null, "width"), width, "image width is correct for 20x20 pixel image");
+
+ // test image attributes for 20x40 pixel image
+ var height = (style.pointRadius * 2) * 72 / 96;
+ var width = height * 0.5;
+ height = height + "pt";
+ width = width + "pt";
+ pattern = document.getElementById(pid20x40);
+ var image = pattern.firstChild;
+ t.eq(image.getAttributeNS(null, "height"), height, "image height is correct for 20x40 pixel image");
+ t.eq(image.getAttributeNS(null, "width"), width, "image width is correct for 20x40 pixel image");
+
+ // test image attributes for 20x40 pixel image
+ var height = (style.pointRadius * 2) * 72 / 96;
+ var width = height * 2;
+ height = height + "pt";
+ width = width + "pt";
+ pattern = document.getElementById(pid40x20);
+ var image = pattern.firstChild;
+ t.eq(image.getAttributeNS(null, "height"), height, "image height is correct for 20x40 pixel image");
+ t.eq(image.getAttributeNS(null, "width"), width, "image width is correct for 20x40 pixel image");
+ });
+ }
</script>
</head>
Modified: sandbox/ossipoff/openlayers/tests/Renderer/VML.html
===================================================================
--- sandbox/ossipoff/openlayers/tests/Renderer/VML.html 2011-09-17 20:18:55 UTC (rev 12392)
+++ sandbox/ossipoff/openlayers/tests/Renderer/VML.html 2011-09-17 20:20:35 UTC (rev 12393)
@@ -97,6 +97,35 @@
t.eq(r.root.style.width, "1px", "root width is correct");
t.eq(r.root.style.height, "2px", "root height is correct");
}
+
+ function test_VML_setstyle(t) {
+ if (!OpenLayers.Renderer.VML.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(5);
+
+ var r = new OpenLayers.Renderer.VML(document.body);
+
+ // test graphic fill
+ var node = document.createElement('div');
+ var style = {
+ externalGraphic: "graphicfill-20x20.png",
+ pointRadius: 10,
+ fillOpacity: 1
+ };
+ var options = { isFilled: true };
+ r.setStyle(node, style, options);
+ var fill = node.childNodes[0];
+ var size = (style.pointRadius * 2) * 72 / 96;
+
+ t.eq(fill.opacity, 1, "GraphicFill: fill.opacity is correct");
+ t.eq(fill.src, style.externalGraphic, "GraphicFill: fill.src is correct");
+ t.eq(fill.type, 'tile', "GraphicFill: fill.type is correct");
+ t.eq(fill.size, size + 'pt,' + size + 'pt', "GraphicFill: fill.size is correct");
+ t.eq(fill.aspect, 'atmost', "GraphicFill: fill.aspect is correct");
+ }
function test_VML_drawText(t) {
if (!OpenLayers.Renderer.VML.prototype.supported()) {
Added: sandbox/ossipoff/openlayers/tests/Renderer/graphicfill-20x20.png
===================================================================
(Binary files differ)
Property changes on: sandbox/ossipoff/openlayers/tests/Renderer/graphicfill-20x20.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: sandbox/ossipoff/openlayers/tests/Renderer/graphicfill-20x40.png
===================================================================
(Binary files differ)
Property changes on: sandbox/ossipoff/openlayers/tests/Renderer/graphicfill-20x40.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: sandbox/ossipoff/openlayers/tests/Renderer/graphicfill-40x20.png
===================================================================
(Binary files differ)
Property changes on: sandbox/ossipoff/openlayers/tests/Renderer/graphicfill-40x20.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
More information about the Commits
mailing list