Files
openlayers/tests/test_Style.html

148 lines
5.6 KiB
HTML

<html>
<head>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
function test_Style_constructor(t) {
t.plan(3);
var options = {'foo': 'bar'};
var style = new OpenLayers.Style(null, options);
t.ok(style instanceof OpenLayers.Style,
"new OpenLayers.Style returns object" );
t.eq(style.foo, "bar", "constructor sets options correctly");
t.eq(typeof style.createSymbolizer, "function", "style has a createSymbolizer function");
}
function test_Style_create(t) {
t.plan(10);
var map = new OpenLayers.Map("map");
var layer = new OpenLayers.Layer.Vector("layer");
var baseStyle = OpenLayers.Util.extend(
OpenLayers.Feature.Vector.style["default"],
{externalGraphic: "bar${foo}.png"});
var style = new OpenLayers.Style(baseStyle);
var rule1 = new OpenLayers.Rule.FeatureId({
fids: ["1"],
symbolizer: {"Point": {fillColor: "green"}},
maxScaleDenominator: 500000});
var rule2 = new OpenLayers.Rule.FeatureId({
fids: ["1"],
symbolizer: {"Point": {fillColor: "yellow"}},
minScaleDenominator: 500000,
maxScaleDenominator: 1000000});
var rule3 = new OpenLayers.Rule.FeatureId({
fids: ["1"],
symbolizer: {"Point": {fillColor: "red"}},
minScaleDenominator: 1000000,
maxScaleDenominator: 2500000});
style.addRules([rule1, rule2, rule3]);
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(3,5),
{"foo": "bar"});
feature.fid = "1";
// for this fid, the above rule should apply
layer.styleMap = new OpenLayers.StyleMap(style);
layer.addFeatures([feature]);
map.addLayer(layer);
map.setBaseLayer(layer);
map.setCenter(new OpenLayers.LonLat(3,5), 10);
// at this scale, the feature should be green
var createdStyle = style.createSymbolizer(feature);
t.eq(createdStyle.externalGraphic, "barbar.png", "Calculated property style correctly.");
t.eq(createdStyle.display, "", "Feature is visible at scale "+map.getScale());
t.eq(createdStyle.fillColor, "green", "Point symbolizer from rule applied correctly.");
map.setCenter(new OpenLayers.LonLat(3,5), 9);
// at this scale, the feature should be red
createdStyle = style.createSymbolizer(feature);
t.eq(createdStyle.display, "", "Feature is visible at scale "+map.getScale());
t.eq(createdStyle.fillColor, "yellow", "Point symbolizer from rule applied correctly.");
map.setCenter(new OpenLayers.LonLat(3,5), 8);
// at this scale, the feature should be yellow
createdStyle = style.createSymbolizer(feature);
t.eq(createdStyle.display, "", "Feature is visible at scale "+map.getScale());
t.eq(createdStyle.fillColor, "red", "Point symbolizer from rule applied correctly.");
map.setCenter(new OpenLayers.LonLat(3,5), 7);
// at this scale, the feature should be invisible
createdStyle = style.createSymbolizer(feature);
t.eq(createdStyle.display, "none", "Feature is invisible at scale "+map.getScale());
t.eq(createdStyle.fillColor, baseStyle.fillColor, "Point symbolizer from base style applied correctly.");
feature.fid = "2";
// now the rule should not apply
createdStyle = style.createSymbolizer(feature);
t.eq(createdStyle.fillColor, baseStyle.fillColor, "Correct style for rule that does not apply to fid=\"2\".");
}
function test_Style_createSymbolizer(t) {
t.plan(2);
var style = new OpenLayers.Style();
var rule = new OpenLayers.Rule({
id: Math.random()
});
var elseRule = new OpenLayers.Rule({
id: Math.random(),
elseFilter: true
});
style.addRules([rule, elseRule]);
// test that applySymbolizer is only called with rule
style.applySymbolizer = function(r) {
t.eq(r.id, rule.id, "(plain) applySymbolizer called with correct rule");
}
style.createSymbolizer(new OpenLayers.Feature.Vector());
rule.evaluate = function() {return false;};
style.applySymbolizer = function(r) {
t.eq(r.id, elseRule.id, "(else) applySymbolizer called with correct rule");
}
style.createSymbolizer(new OpenLayers.Feature.Vector());
}
function test_Style_context(t) {
t.plan(1);
var context = {
foo: "bar",
size: 10};
var rule = new OpenLayers.Rule.Comparison({
type: OpenLayers.Rule.Comparison.LESS_THAN,
context: context,
property: "size",
value: 11,
symbolizer: {"Point": {externalGraphic: "${foo}.png"}}});
var style = new OpenLayers.Style();
style.addRules([rule]);
var styleHash = style.createSymbolizer(new OpenLayers.Feature.Vector());
t.eq(styleHash.externalGraphic, "bar.png", "correctly evaluated rule against a custom context");
}
function test_Style_destroy(t) {
t.plan(1);
var style = new OpenLayers.Style();
style.destroy();
t.eq(style.rules, null, "rules array nulled properly");
}
</script>
</head>
<body>
<div id="map" style="width:500px;height:500px"></div>
</body>
</html>