!! test
<maplink> - custom link text
!! input
<maplink latitude=10 longitude=20 zoom=13 text='Foo &amp; bar'/>
!! result
<p><a class="mw-kartographer mw-kartographer-link" mw-data="interface" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20">Foo &amp; bar</a>
</p>
!! end

!! test
<maplink> - HTML sanitization
!! input
<maplink latitude=10 longitude=20 zoom=13 text='<&'/>
!! result
<p><a class="mw-kartographer mw-kartographer-link" mw-data="interface" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20">&lt;&amp;</a>
</p>
!! end

!! test
<maplink> - counters and markers
!! input
<maplink latitude=10 longitude=20 zoom=13 text='Foo'>
{
"type": "Feature",
	"geometry": {
		"type": "Point",
		"coordinates": [-122.3988, 37.8013]
	},
	"properties": {
		"marker-symbol": "-number"
	}
}
</maplink>

<maplink latitude=10 longitude=20 zoom=13>
{
"type": "Feature",
	"geometry": {
		"type": "Point",
		"coordinates": [-122.3988, 37.8013]
	},
	"properties": {
		"marker-symbol": "-number"
	}
}
</maplink>

<maplink latitude=10 longitude=20 zoom=13>
{
"type": "Feature",
	"geometry": {
		"type": "Point",
		"coordinates": [-122.3988, 37.8013]
	},
	"properties": {
		"marker-symbol": "-letter"
	}
}
</maplink>

<maplink latitude=10 longitude=20 zoom=13 mapstyle=osm>
{
"type": "Feature",
	"geometry": {
		"type": "Point",
		"coordinates": [-122.3988, 37.8013]
	},
	"properties": {
		"marker-symbol": "-letter"
	}
}
</maplink>
!! result
<p><a class="mw-kartographer mw-kartographer-link" mw-data="interface" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20" data-overlays="[&quot;_b34053f88dea58fe70a7da09c558f792394f6e11&quot;]">Foo</a>
</p><p><a class="mw-kartographer mw-kartographer-link" mw-data="interface" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20" data-overlays="[&quot;_2e4133dc429eb3c3abf4e45916c073e841f9d193&quot;]">2</a>
</p><p><a class="mw-kartographer mw-kartographer-link" mw-data="interface" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20" data-overlays="[&quot;_dd3c7bae539f7c3747c64d043c97e1a8834fbc8f&quot;]">A</a>
</p><p><a class="mw-kartographer mw-kartographer-link" mw-data="interface" data-style="osm" data-zoom="13" data-lat="10" data-lon="20" data-overlays="[&quot;_8ce73f7395e427bd6f462824717c0a214b3ca564&quot;]">B</a>
</p>
!! end

!! test
<maplink> - autolabelling with coordinates
!! input
<maplink latitude=10 longitude=20 zoom=13 />
!! result
<p><a class="mw-kartographer mw-kartographer-link" mw-data="interface" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20">10°0′0″N 20°0′0″E</a>
</p>
!! end


!! test
<mapframe>
!! input
<mapframe latitude=10 longitude=20 zoom=13 width=640 height=480/>
<mapframe latitude=10 longitude=20 zoom=13 width=640 height=480 align=left/>
<mapframe latitude=10 longitude=20 zoom=13 width=640 height=480 align=center/>
<mapframe latitude=10 longitude=20 zoom=13 width=50% height=480 align=right/>
!! result
<div class="mw-kartographer mw-kartographer-interactive floatright" mw-data="interface" style="width:640px; height:480px;" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20"></div>
<div class="mw-kartographer mw-kartographer-interactive floatleft" mw-data="interface" style="width:640px; height:480px;" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20"></div>
<div class="mw-kartographer mw-kartographer-interactive center" mw-data="interface" style="width:640px; height:480px;" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20"></div>
<div class="mw-kartographer mw-kartographer-interactive floatright" mw-data="interface" style="width:50%; height:480px;" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20"></div>

!! end

!! test
Error messages
!! input
<maplink latitude=10 longitude=fail text=Derp>>Derp goes here</maplink>
<mapframe latitude=10 longitude=20 zoom=13 width=" 640	" height=480 align=crap mapstyle=derp />
<mapframe latitude=10 longitude=20 zoom=13 width=% height=480/>
<mapframe latitude=10 longitude=20 zoom=13 width=0% height=480/>
<mapframe latitude=10 longitude=20 zoom=13 width=05% height=480/>
<mapframe latitude=10 longitude=20 zoom=13 width=300% height=480/>
!! result
<div class="mw-kartographer mw-kartographer-error"><p>&lt;maplink&gt; problems:
</p>
<ul><li> Syntax error</li>
<li> Attribute "longitude" has an invalid value</li>
<li> Attribute "zoom" is missing</li></ul>
</div>
<div class="mw-kartographer mw-kartographer-error"><p>&lt;mapframe&gt; problems:
</p>
<ul><li> Attribute "mapstyle" has an invalid value</li>
<li> Attribute "align" has an invalid value</li></ul>
</div>
<div class="mw-kartographer mw-kartographer-error">&lt;mapframe&gt;: Attribute "width" has an invalid value</div>
<div class="mw-kartographer mw-kartographer-error">&lt;mapframe&gt;: Attribute "width" has an invalid value</div>
<div class="mw-kartographer mw-kartographer-error">&lt;mapframe&gt;: Attribute "width" has an invalid value</div>
<div class="mw-kartographer mw-kartographer-error">&lt;mapframe&gt;: Attribute "width" has an invalid value</div>

!! end

!! test
CSS sanitization
!! input
<maplink latitude=10 longitude=20 zoom=10 style="color: red;" text="<span style='color: red;'&gt;foo</span&gt;"/>
<maplink latitude=10 longitude=20 zoom=10 style="foo: bar; background-image: url(https://example.com);" text="<span style='foo: bar; background-image: url(https://example.com);'&gt;foo</span&gt;"/>
!! result
<p><a class="mw-kartographer mw-kartographer-link" mw-data="interface" style="color: red;" data-style="osm-intl" data-zoom="10" data-lat="10" data-lon="20"><span style="color: red;">foo</span></a>
<a class="mw-kartographer mw-kartographer-link" mw-data="interface" style="/* insecure input */" data-style="osm-intl" data-zoom="10" data-lat="10" data-lon="20"><span style="/* insecure input */">foo</span></a>
</p>
!! end

!! test
Marker styles
!! input
<maplink latitude=10 longitude=20 zoom=13>[
{
	"type": "Feature",
	"geometry": {
		"type": "Point",
		"coordinates": [1, 2]
 	}
},
{
"type": "Feature",
	"geometry": {
		"type": "Point",
		"coordinates": [-122.3988, 37.8013]
	},
	"properties": {
		"marker-symbol": "-letter",
		"marker-color": "#abc"
	}
},
{
"type": "Feature",
	"geometry": {
		"type": "Point",
		"coordinates": [-122.3988, 37.8013]
	},
	"properties": {
		"marker-symbol": "-number",
		"marker-color": "#DDEEFF"
	}
}
]</maplink>

<maplink latitude=10 longitude=20 zoom=13 style="border: yellow;">
{
"type": "Feature",
	"geometry": {
		"type": "Point",
		"coordinates": [-122.3988, 37.8013]
	},
	"properties": {
		"marker-symbol": "-number",
		"marker-color": "fff"
	}
}
</maplink>

<maplink latitude=10 longitude=20 zoom=13>
{
"type": "Feature",
	"geometry": {
		"type": "Point",
		"coordinates": [-122.3988, 37.8013]
	},
	"properties": {
		"marker-symbol": "-number",
		"marker-color": "something bad"
	}
}
</maplink>
!! result
<p><a class="mw-kartographer mw-kartographer-link mw-kartographer-autostyled" mw-data="interface" style="background: #abc;" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20" data-overlays="[&quot;_19a72be79a2653cf0eeccdba3776a568873e8865&quot;]">A</a>
</p><p><a class="mw-kartographer mw-kartographer-link mw-kartographer-autostyled" mw-data="interface" style="background: #fff; border: yellow;" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20" data-overlays="[&quot;_348b58ab5ba1db004b387561db7d945cdf90cea0&quot;]">2</a>
</p><p><a class="mw-kartographer mw-kartographer-link" mw-data="interface" data-style="osm-intl" data-zoom="13" data-lat="10" data-lon="20" data-overlays="[&quot;_737b28c57ddefefdb1da5a25bc09425dd124b6b6&quot;]">3</a>
</p>
!! end