meta { title: "Basic MapCSS tests"; } /** * test different symbols */ node[ test:fill ] { symbol-size: 50; symbol-fill-color: purple; } node[ test:fill = circle ] { symbol-shape : circle ; } /* whitespace at all possible places */ node[test:fill=square]{symbol-shape:square;} /* no whitespace at all */ node[ test:fill = triangle ] { symbol-shape: triangle; } node[ test:fill = pentagon ] { symbol-shape: pentagon } node[ test:fill = hexagon ] { symbol-shape: hexagon; } node[ test:fill = heptagon ] { symbol-shape: heptagon; } node[ test:fill = octagon ] { symbol-shape: octagon; } node[ test:fill = nonagon ] {symbol-shape: nonagon; } node[ test:fill = decagon ] { symbol-shape: decagon; } node[ test:stroke ] { symbol-size: 50; symbol-stroke-color: purple; } node[ test:stroke = circle ] { symbol-shape: circle; } node[ test:stroke = square ] { symbol-shape: square; } node[ test:stroke = triangle ] { symbol-shape: triangle; } node[ test:stroke = triangle ] { symbol-shape: triangle; } node[ test:stroke = pentagon ] { symbol-shape: pentagon; } node[ test:stroke = hexagon ] { symbol-shape: hexagon; } node[ test:stroke = heptagon ] { symbol-shape: heptagon; } node[ test:stroke = octagon ] { symbol-shape: octagon; } node[ test:stroke = nonagon ] { symbol-shape: nonagon; } node[ test:stroke = decagon ] { symbol-shape: decagon; } /** * Test default values. * This should display a circle although neither size nor color are specified */ node[test=circle] { symbol-shape: circle; } /** * 3 Tests: relative symbol-stroke-width, alignment and stacking of stroke & fill for shapes */ node[test=pentagon1] { symbol-shape: pentagon; symbol-size: 50; symbol-stroke-color: gold; symbol-stroke-opacity: 0.9; symbol-stroke-width: 10; } node[test=pentagon1]::stroke-casing { symbol-shape: pentagon; symbol-size: 50; symbol-stroke-color: #ddd; symbol-stroke-opacity: 0.6; symbol-stroke-width: +8; z-index: -10; } node[test=pentagon1]::fill { symbol-shape: pentagon; symbol-size: 50; symbol-fill-color: darkblue; symbol-fill-opacity: 1.0; z-index: -15; } node[test=pentagon2] { symbol-shape: pentagon; symbol-size: 50; symbol-stroke-color: blue; symbol-stroke-opacity: 0.9; symbol-stroke-width: 10; } node[test=pentagon2]::fill-above { symbol-shape: pentagon; symbol-size: 50; symbol-fill-color: white; symbol-fill-opacity: 0.3; z-index: 2; } node[test=pentagon3] { symbol-shape: pentagon; symbol-size: 50; symbol-fill-color: darkgreen; } node[test=pentagon3]::stroke-above { symbol-shape: pentagon; symbol-size: 50; symbol-stroke-color: yellow; symbol-stroke-width: 1.0; z-index: 1; } /** * Dashes Test * 1. Basic test - pattern should not be broken at way nodes * 2. Transparent and with background color. The foreground and background dashes must not overlap. * 3. Dashes offset - cuts off the first dash segment */ way[test=dash1] { width: 10; color: blue; dashes: 30,4,17,14; } way[test=dash2] { width: 10; color: blue; opacity: 0.3; dashes: 30,4,17,14; dashes-background-color: gold; dashes-background-opacity: 0.3; } way[test=dash3] { width: 10; color: blue; dashes: 30,4,17,14; dashes-background-color: gold; dashes-offset:30; } /** * Casing test * Absolute and relative casing. Both should look the same. */ way[test="casing1"] { width: 8; color: #0a0; casing-color: #bbb; casing-width: 12; } way[test="casing2"] { width: 8; color: #0a0; casing-color: #bbb; casing-width: +4; } /** * Text placement test */ node[test=text-placement]::* { font-size: 10; text: auto; symbol-shape: square; symbol-size: 50; symbol-fill-opacity: 0.0; } node[test=text-placement]::above_center { text-anchor-vertical: above; text-anchor-horizontal: center; text-color: gold; } node[test=text-placement]::top_left { text-anchor-vertical: top; text-anchor-horizontal: left; text-color: yellow; } node[test=text-placement]::top_right { text-anchor-vertical: top; text-anchor-horizontal: right; text-color: green; } node[test=text-placement]::center_center { text-anchor-vertical: center; text-anchor-horizontal: center; text-color: white; } node[test=text-placement]::center_right { text-anchor-vertical: center; text-anchor-horizontal: right; text-color: magenta; } node[test=text-placement]::bottom_left { text-anchor-vertical: bottom; text-anchor-horizontal: left; text-color: blue; } node[test=text-placement]::bottom_right { text-anchor-vertical: bottom; text-anchor-horizontal: right; text-color: lime; } node[test=text-placement]::below_center { text-anchor-vertical: below; text-anchor-horizontal: center; text-color: red; } node[test=text-placement] { symbol-fill-color: blue; symbol-fill-opacity: 0.4; } way[test=text-along-path] { text: auto; text-position: line; width: 6; color: #00f; } way[test=text-along-path2] { text: auto; text-position: line; text-offset: 8; font-size: 12; width: 1; color: #f0f; dashes: 10; }