]> dev.renevier.net Git - syp.git/blob - openlayers/tests/Style.html
fix broken script in wizard.php
[syp.git] / 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>