openlayers/tests/Style.html

   1 <html>
   2 <head>
   3     <script src="../lib/OpenLayers.js"></script>
   4     <script type="text/javascript">
   5
   6     function test_Style_constructor(t) {
   7         t.plan(6);
   8
   9         var rules = [
  10             new OpenLayers.Rule({
  11                 symbolizer: {fillColor: "red"},
  12                 filter: new OpenLayers.Filter.Comparison({
  13                     type: OpenLayers.Filter.Comparison.EQUAL_TO,
  14                     property: "type",
  15                     value: "fire engine"
  16                 })
  17             }),
  18             new OpenLayers.Rule({
  19                 symbolizer: {fillColor: "yellow"},
  20                 filter: new OpenLayers.Filter.Comparison({
  21                     type: OpenLayers.Filter.Comparison.EQUAL_TO,
  22                     property: "type",
  23                     value: "sports car"
  24                 })
  25             })
  26         ];
  27         var style = new OpenLayers.Style(null, {
  28             foo: "bar",
  29             rules: rules
  30         });
  31         t.ok(style instanceof OpenLayers.Style,
  32              "new OpenLayers.Style returns object" );
  33         t.eq(style.foo, "bar", "constructor sets options correctly");
  34         t.eq(style.rules.length, 2, "correct number of rules added");
  35         t.ok(style.rules[0] === rules[0], "correct first rule added");
  36         t.ok(style.rules[1] === rules[1], "correct second rule added");
  37         t.eq(typeof style.createSymbolizer, "function", "style has a createSymbolizer function");
  38     }
  39
  40     function test_Style_create(t) {
  41         t.plan(10);
  42
  43         var map = new OpenLayers.Map("map");
  44
  45         var layer = new OpenLayers.Layer.Vector("layer");
  46
  47         var baseStyle = OpenLayers.Util.extend(
  48             OpenLayers.Feature.Vector.style["default"],
  49             {externalGraphic: "bar${foo}.png"}
  50         );
  51
  52         var style = new OpenLayers.Style(baseStyle);
  53
  54         var rule1 = new OpenLayers.Rule({
  55             symbolizer: {"Point": {fillColor: "green"}},
  56             maxScaleDenominator: 500000,
  57             filter: new OpenLayers.Filter.FeatureId({
  58                 fids: ["1"]
  59             })
  60         });
  61         var rule2 = new OpenLayers.Rule({
  62             symbolizer: {"Point": {fillColor: "yellow"}},
  63             minScaleDenominator: 500000,
  64             maxScaleDenominator: 1000000,
  65             filter: new OpenLayers.Filter.FeatureId({
  66                 fids: ["1"]
  67             })
  68         });
  69         var rule3 = new OpenLayers.Rule({
  70             symbolizer: {"Point": {fillColor: "red"}},
  71             minScaleDenominator: 1000000,
  72             maxScaleDenominator: 2500000,
  73             filter: new OpenLayers.Filter.FeatureId({
  74                 fids: ["1"]
  75             })
  76         });
  77
  78         var feature = new OpenLayers.Feature.Vector(
  79             new OpenLayers.Geometry.Point(3,5),
  80             {"foo": "bar"}
  81         );
  82
  83         feature.fid = "1";
  84         // for this fid, the above rule should apply
  85
  86         layer.styleMap = new OpenLayers.StyleMap(style);
  87
  88         layer.addFeatures([feature]);
  89         map.addLayer(layer);
  90         map.setBaseLayer(layer);
  91
  92         map.setCenter(new OpenLayers.LonLat(3,5), 10);
  93
  94         var createdStyle = style.createSymbolizer(feature);
  95         t.eq(createdStyle.externalGraphic, "barbar.png", "Calculated property style for default symbolizer correctly.");
  96
  97         style.addRules([rule1, rule2, rule3]);
  98         createdStyle = style.createSymbolizer(feature);
  99
 100         // at this scale, the feature should be green
 101         t.eq(createdStyle.display, undefined, "Feature is visible at scale "+map.getScale());
 102         t.eq(createdStyle.fillColor, "green", "Point symbolizer from rule applied correctly.");
 103
 104         map.setCenter(new OpenLayers.LonLat(3,5), 9);
 105         // at this scale, the feature should be red
 106         createdStyle = style.createSymbolizer(feature);
 107         t.eq(createdStyle.display, undefined, "Feature is visible at scale "+map.getScale());
 108         t.eq(createdStyle.fillColor, "yellow", "Point symbolizer from rule applied correctly.");
 109
 110         map.setCenter(new OpenLayers.LonLat(3,5), 8);
 111         // at this scale, the feature should be yellow
 112         createdStyle = style.createSymbolizer(feature);
 113         t.eq(createdStyle.display, undefined, "Feature is visible at scale "+map.getScale());
 114         t.eq(createdStyle.fillColor, "red", "Point symbolizer from rule applied correctly.");
 115
 116         map.setCenter(new OpenLayers.LonLat(3,5), 7);
 117         // at this scale, the feature should be invisible
 118         createdStyle = style.createSymbolizer(feature);
 119         t.eq(createdStyle.display, "none", "Feature is invisible at scale "+map.getScale());
 120         t.eq(createdStyle.fillColor, baseStyle.fillColor, "Point symbolizer from base style applied correctly.");
 121
 122         feature.fid = "2";
 123         // now the rule should not apply
 124
 125         createdStyle = style.createSymbolizer(feature);
 126         t.eq(createdStyle.fillColor, baseStyle.fillColor, "Correct style for rule that does not apply to fid=\"2\".");
 127     }
 128
 129     function test_Style_createSymbolizer(t) {
 130         t.plan(2);
 131         var style = new OpenLayers.Style();
 132         var rule = new OpenLayers.Rule({
 133             id: Math.random()
 134         });
 135         var elseRule = new OpenLayers.Rule({
 136             id: Math.random(),
 137             elseFilter: true
 138         });
 139         style.addRules([rule, elseRule]);
 140
 141         // test that applySymbolizer is only called with rule
 142         style.applySymbolizer = function(r) {
 143             t.eq(r.id, rule.id, "(plain) applySymbolizer called with correct rule");
 144         }
 145         style.createSymbolizer(new OpenLayers.Feature.Vector());
 146
 147         rule.evaluate = function() {return false;};
 148         style.applySymbolizer = function(r) {
 149             t.eq(r.id, elseRule.id, "(else) applySymbolizer called with correct rule");
 150         };
 151         style.createSymbolizer(new OpenLayers.Feature.Vector());
 152     }
 153
 154     function test_Style_applySymbolizer(t) {
 155         t.plan(15);
 156
 157         var feature = new OpenLayers.Feature.Vector();
 158         var defaults = OpenLayers.Feature.Vector.style["default"];
 159         var style, symbolizer;
 160
 161         style = new OpenLayers.Style();
 162         symbolizer = style.createSymbolizer(feature);
 163         t.eq(symbolizer.pointRadius, defaults.pointRadius, "symbolizer has the correct pointRadius");
 164         t.eq(symbolizer.strokeWidth, defaults.strokeWidth, "symbolizer has the correct strokeWidth");
 165         t.eq(symbolizer.fillColor, defaults.fillColor, "symbolizer has the correct fillColor");
 166         t.eq(symbolizer.graphicName, defaults.graphicName, "symbolizer has the correct graphicName");
 167
 168         style = new OpenLayers.Style(null, {
 169             defaultsPerSymbolizer: true,
 170             rules: [
 171                 new OpenLayers.Rule({
 172                     symbolizer: {
 173                         stroke: true
 174                     }
 175                 })
 176             ]
 177         });
 178         symbolizer = style.createSymbolizer(feature);
 179         t.eq(symbolizer.strokeWidth, defaults.strokeWidth, "symbolizer has the correct strokeWidth");
 180         t.ok(symbolizer.fillColor == undefined, "fillColor is undefined");
 181
 182         style = new OpenLayers.Style(null, {
 183             defaultsPerSymbolizer: true,
 184             rules: [
 185                 new OpenLayers.Rule({
 186                     symbolizer: {
 187                     }
 188                 })
 189             ]
 190         });
 191         symbolizer = style.createSymbolizer(feature);
 192         t.eq(symbolizer.pointRadius, defaults.pointRadius, "symbolizer has the correct pointRadius");
 193         t.ok(symbolizer.strokeWidth == undefined, "strokeWidth is undefined");
 194         t.ok(symbolizer.fillColor == undefined, "fillColor is undefined");
 195         t.ok(symbolizer.graphicName == undefined, "graphicName is undefined");
 196
 197         style = new OpenLayers.Style(null, {
 198             defaultsPerSymbolizer: true,
 199             rules: [
 200                 new OpenLayers.Rule({
 201                     symbolizer: {
 202                         stroke: true
 203                     }
 204                 })
 205             ]
 206         });
 207         symbolizer = style.createSymbolizer(feature);
 208         t.eq(symbolizer.strokeWidth, defaults.strokeWidth, "symbolizer has the correct strokeWidth");
 209         t.ok(symbolizer.fillColor == undefined, "fillColor is undefined");
 210
 211         style = new OpenLayers.Style(null, {
 212             defaultsPerSymbolizer: true,
 213             rules: [
 214                 new OpenLayers.Rule({
 215                     symbolizer: {
 216                         fill: true
 217                     }
 218                 })
 219             ]
 220         });
 221         symbolizer = style.createSymbolizer(feature);
 222         t.eq(symbolizer.fillColor, defaults.fillColor, "symbolizer has the correct fillColor");
 223         t.ok(symbolizer.strokeWidth == undefined, "strokeWidth is undefined");
 224
 225         style = new OpenLayers.Style(null, {
 226             defaultsPerSymbolizer: true,
 227             rules: [
 228                 new OpenLayers.Rule({
 229                     symbolizer: {
 230                         graphic: true
 231                     }
 232                 })
 233             ]
 234         });
 235         symbolizer = style.createSymbolizer(feature);
 236         t.eq(symbolizer.graphicName, defaults.graphicName, "symbolizer has the correct graphicName");
 237     }
 238
 239     function test_Style_context(t) {
 240         t.plan(2);
 241         var rule = new OpenLayers.Rule({
 242             symbolizer: {"Point": {externalGraphic: "${img1}"}},
 243             filter: new OpenLayers.Filter.Comparison({
 244                 type: OpenLayers.Filter.Comparison.LESS_THAN,
 245                 property: "size",
 246                 value: 11
 247             })
 248         });
 249         var style = new OpenLayers.Style();
 250         style.context = {
 251             "img1": "myImage.png"
 252         };
 253         style.addRules([rule]);
 254         var feature = new OpenLayers.Feature.Vector();
 255         feature.attributes = {size: 10};
 256         var styleHash = style.createSymbolizer(feature);
 257         t.eq(styleHash.externalGraphic, "myImage.png", "correctly evaluated rule and calculated property styles from a custom context");
 258
 259         // same as above, but without rule (#1526)
 260         style = new OpenLayers.Style(
 261             {externalGraphic: "${getExternalGraphic}"},
 262             {context: {
 263                 getExternalGraphic: function(feature) {
 264                     return "foo" + feature.attributes.size + ".png";
 265                 }
 266             }});
 267         t.eq(style.createSymbolizer(feature).externalGraphic, "foo10.png", "correctly evaluated symbolizer without rule");
 268     };
 269
 270     function test_Style_findPropertyStyles(t) {
 271         t.plan(4);
 272         var rule1 = new OpenLayers.Rule({symbolizer: {
 273             pointRadius: 3,
 274             externalGraphic: "${foo}.bar"
 275         }});
 276         var rule2 = new OpenLayers.Rule({symbolizer: {"Point": {
 277             strokeWidth: "${foo}"
 278         }}});
 279         var style = new OpenLayers.Style({
 280             strokeOpacity: 1,
 281             strokeColor: "${foo}"
 282         });
 283         style.addRules([rule1, rule2]);
 284         var propertyStyles = style.findPropertyStyles();
 285         t.ok(propertyStyles.externalGraphic, "detected externalGraphic from rule correctly");
 286         t.ok(propertyStyles.strokeWidth, "detected strokeWidth from Point symbolizer correctly");
 287         t.ok(propertyStyles.strokeColor, "detected strokeColor from style correctly");
 288         t.eq(typeof propertyStyles.pointRadius, "undefined", "correctly detected pointRadius as non-property style");
 289     }
 290
 291     function test_createLiteral(t) {
 292         t.plan(6);
 293
 294         var value, context, feature, result, expected;
 295         var func = OpenLayers.Style.createLiteral;
 296
 297         // without templates
 298         value = "foo";
 299         expected = value;
 300         result = func(value);
 301         t.eq(result, expected, "(no template) preserves literal");
 302
 303         // with templates
 304         value = "${foo}"
 305         expected = "bar";
 306         context = {foo: expected};
 307         result = func(value, context);
 308         t.eq(result, expected, "(template) preserves literal");
 309
 310         expected = "";
 311         context = {foo: expected};
 312         result = func(value, context);
 313         t.eq(result, expected, "(template) preserves empty string");
 314
 315         expected = "16/03/2008";
 316         context = {foo: expected};
 317         result = func(value, context);
 318         t.eq(result, expected, "(template) preserves string with numbers");
 319
 320         expected = 16;
 321         context = {foo: expected + ""};
 322         result = func(value, context);
 323         t.eq(result, expected, "(template) casts integer in a string");
 324
 325         expected = 16;
 326         context = {foo: " " + expected + " "};
 327         result = func(value, context);
 328         t.eq(result, expected, "(template) casts integer in a space padded string");
 329
 330     }
 331
 332     function test_Style_destroy(t) {
 333         t.plan(1);
 334
 335         var style = new OpenLayers.Style();
 336         style.destroy();
 337         t.eq(style.rules, null, "rules array nulled properly");
 338     }
 339
 340     </script>
 341 </head>
 342 <body>
 343   <div id="map" style="width:500px;height:500px"></div>
 344 </body>
 345 </html>