autotests/html/test.mss.html

0001 <!DOCTYPE html>
0002 <html><head>
0003 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
0004 <title>test.mss</title>
0005 <meta name="generator" content="KF5::SyntaxHighlighting - Definition (CartoCSS MSS) - Theme (Breeze Light)"/>
0006 </head><body style="background-color:#ffffff;color:#1f1c1b"><pre>
0007 <span style="color:#898887;">/* </span><span style="color:#ca60ca;">kate:</span><span style="color:#898887;"> </span><span style="color:#0095ff;">hl</span><span style="color:#bf0303;"> CartoCSS</span>
0008 <span style="color:#898887;">   This file contains some content coming from</span>
0009 <span style="color:#898887;">   https://github.com/gravitystorm/openstreetmap-carto</span>
0010 <span style="color:#898887;">   with CC0 license. This file is just for testing</span>
0011 <span style="color:#898887;">   katepart highlighting engine.</span>
0012 <span style="color:#898887;">   */</span>
0013
0014 <span style="color:#898887;">/* This is</span>
0015 <span style="color:#898887;">a multiline comment. */</span>
0016
0017 <span style="color:#898887;">// This is a single-line comment.</span>
0018
0019 #world <span style="color:#ca60ca;">{</span>
0020     <span style="color:#898887;">// various styles to define colors (all except the color function are rendered the same way):</span>
0021     <span style="color:#898887;">// Numbers are always treated as floating-point and highlighted. This syntax</span>
0022     polygon-opacity<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">50%</span><span style="color:#ca60ca;">;</span>
0023     <span style="color:#898887;">// is equivalent to</span>
0024     polygon-opacity<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">0.5</span><span style="color:#ca60ca;">;</span>
0025     <span style="color:#898887;">// This is a coma-separated list of numbers:</span>
0026     line-dasharray<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">6</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">3</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">2</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">3</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">2</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">3</span><span style="color:#ca60ca;">;</span>
0027     <span style="color:#898887;">// Also function calls are possible. Function calls like “url” get special highlighting:</span>
0028     shield-file<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#644a9b;">url</span><span style="color:#ca60ca;">(</span><span style="color:#ff5500;">&quot;myfile.svg&quot;</span><span style="color:#ca60ca;">);</span>
0029     <span style="color:#898887;">// Within function calls, strings can contains fields like [width] which get special highlighting:</span>
0030     shield-file<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#644a9b;">url</span><span style="color:#ca60ca;">(</span><span style="color:#ff5500;">&quot;symbols/shields/motorway_</span><span style="color:#0057ae;">[width]</span><span style="color:#ff5500;">x</span><span style="color:#0057ae;">[height]</span><span style="color:#ff5500;">.svg&quot;</span><span style="color:#ca60ca;">);</span>
0031     polygon-fill<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#aa5500;">white</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// List of known colors</span>
0032     polygon-fill<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#aa5500;">#ffffff</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// Six-digit hex color</span>
0033     polygon-fill<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#aa5500;">#fff</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// Three-digit hex color</span>
0034     polygon-fill<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> #ffff</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// Invalid hex color</span>
0035     polygon-fill<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#644a9b;">rgba</span><span style="color:#ca60ca;">(</span><span style="color:#b08000;">255</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">255</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">255</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">1</span><span style="color:#ca60ca;">);</span> <span style="color:#898887;">// define a color by a special function</span>
0036     <span style="color:#898887;">// everything else is simply interpreted as keyword:</span>
0037     line-clip<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> false</span><span style="color:#ca60ca;">;</span>
0038     line-clip<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> abcdef</span><span style="color:#ca60ca;">;</span>
0039 <span style="color:#ca60ca;">}</span>
0040
0041 <span style="color:#898887;">// You can define macros called “CartoCSS variables” with arbitrary values and types.</span>
0042 <span style="color:#898887;">// They do not behave much like variable, but more like macros.</span>
0043 <span style="color:#006e28;">@myvariable</span><span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">15</span><span style="color:#ca60ca;">;</span>
0044 <span style="color:#006e28;">@myvariable</span><span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#aa5500;">#123456</span><span style="color:#ca60ca;">;</span>
0045 <span style="color:#006e28;">@myvariable</span><span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#aa5500;">white</span><span style="color:#ca60ca;">;</span>
0046 <span style="color:#006e28;">@myothervariable</span><span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#006e28;">@myvariable</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// this variable gets defined by the value of another variable</span>
0047 <span style="color:#006e28;">@myvariable</span><span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#644a9b;">darken</span><span style="color:#ca60ca;">(</span><span style="color:#aa5500;">white</span><span style="color:#ca60ca;">,</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">5%</span><span style="color:#ca60ca;">);</span> <span style="color:#898887;">// A variable defined by the result of a function. The function “darken” gets special highlighting.</span>
0048 <span style="color:#898887;">// Variables can also contain strings:</span>
0049 <span style="color:#006e28;">@myvariable</span><span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#ff5500;">'abc'</span><span style="color:#ca60ca;">;</span>
0050
0051 <span style="color:#898887;">// These variables can be used later as values</span>
0052 #world <span style="color:#ca60ca;">{</span>
0053     polygon-fill<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#006e28;">@myvariable</span><span style="color:#ca60ca;">;</span>
0054 <span style="color:#ca60ca;">}</span>
0055
0056 <span style="color:#898887;">/* Typically, in MSS files you declare filters like “#world[zoom &gt;= 17]”</span>
0057 <span style="color:#898887;">followed by curly braces with parameters like “size” for Mapnik symbolizers like “text”. */</span>
0058
0059 <span style="color:#898887;">// Each Mapnik symbolizer parameter can be on its own line:</span>
0060 #world<span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&gt;=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">17</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span>
0061   text-wrap-width<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">20</span><span style="color:#ca60ca;">;</span>
0062   text-size<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">11</span><span style="color:#ca60ca;">;</span>
0063 <span style="color:#ca60ca;">}</span>
0064 <span style="color:#898887;">// Or you can put various of them into the same line:</span>
0065 #world<span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&gt;=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">19</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span> text-wrap-width<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">20</span><span style="color:#ca60ca;">;</span> text-size<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">11</span><span style="color:#ca60ca;">;</span> <span style="color:#ca60ca;">}</span>
0066
0067 <span style="color:#898887;">// It is allowed to omit the final “;” for the last Mapnik symbolizer parameter within a block:</span>
0068 #world<span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&gt;=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">19</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span> text-wrap-width<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">20</span><span style="color:#ca60ca;">;</span> text-size<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">11</span><span style="font-weight:bold;"> </span><span style="color:#ca60ca;">}</span>
0069 <span style="color:#898887;">// Also after an omitted final “;” the following code is nevertheless highlighted correctly:</span>
0070 #world<span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&gt;=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">19</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span> text-wrap-width<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">20</span><span style="color:#ca60ca;">;</span> text-size<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">11</span><span style="font-weight:bold;"> </span><span style="color:#ca60ca;">;</span> <span style="color:#ca60ca;">}</span>
0071 <span style="color:#898887;">// “null” and “zoom” are special keywords within filters, and highlighted as such:</span>
0072 <span style="color:#ca60ca;">[</span><span style="color:#0057ae;">&quot;name&quot; </span><span style="color:#ca60ca;">!=</span><span style="font-weight:bold;"> null</span><span style="color:#ca60ca;">][</span><span style="color:#0057ae;">&quot;ref&quot; </span><span style="color:#ca60ca;">=</span><span style="font-weight:bold;"> null</span><span style="color:#ca60ca;">][</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&gt;=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">19</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span> text-wrap-width<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">20</span><span style="color:#ca60ca;">;</span> <span style="color:#ca60ca;">}</span>
0073
0074 #admin-low-zoom<span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&lt;</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">11</span><span style="color:#ca60ca;">]</span>, <span style="color:#898887;">// You can make coma-separated lists of various filters</span>
0075 #admin-mid-zoom<span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&gt;=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">11</span><span style="color:#ca60ca;">][</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&lt;</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">13</span><span style="color:#ca60ca;">]</span>, <span style="color:#898887;">// like this one.</span>
0076 #admin-high-zoom<span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&gt;=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">13</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span>
0077   <span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">15</span><span style="color:#ca60ca;">]</span> <span style="color:#898887;">// “zoom” has special behaviour within filters and gets its own highlighting</span>
0078   <span style="color:#ca60ca;">[</span><span style="color:#0057ae;">admin_level </span><span style="color:#ca60ca;">=</span><span style="font-weight:bold;"> </span><span style="color:#bf0303;">'2'</span><span style="color:#ca60ca;">]</span>, <span style="color:#898887;">// data fields like “admin_level” can be referenced by their name and get highlighting as data fields</span>
0079   <span style="color:#ca60ca;">[</span><span style="color:#0057ae;">&quot;admin_level&quot; </span><span style="color:#ca60ca;">=</span><span style="font-weight:bold;"> </span><span style="color:#bf0303;">'2'</span><span style="color:#ca60ca;">]</span>, <span style="color:#898887;">// data fields like “admin_level” can be referenced by their name in quotes and get highlighting as data fields</span>
0080   <span style="color:#ca60ca;">[</span><span style="color:#0057ae;">admin_level </span><span style="color:#ca60ca;">=</span><span style="font-weight:bold;"> </span><span style="color:#bf0303;">'3'</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span>
0081     <span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&gt;=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">4</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span>
0082       <span style="color:#898887;">// You can create additional “Named instances” of Mapnik symbolizers by adding a “myname/” before the symbolizer.</span>
0083       <span style="color:#898887;">// The name of the named instance gets special highlighting:</span>
0084       <span style="color:#0057ae;">background/</span>line-color<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#aa5500;">white</span><span style="color:#ca60ca;">;</span>
0085       line-color<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#006e28;">@admin-boundaries</span><span style="color:#ca60ca;">;</span>
0086     <span style="color:#ca60ca;">}</span>
0087   <span style="color:#ca60ca;">}</span>
0088 <span style="color:#ca60ca;">}</span>
0089
0090 #admin-mid-zoom<span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&gt;=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">11</span><span style="color:#ca60ca;">][</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&lt;</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">13</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span>
0091   <span style="color:#ca60ca;">[</span><span style="color:#0057ae;">admin_level </span><span style="color:#ca60ca;">=</span><span style="font-weight:bold;"> </span><span style="color:#bf0303;">'abc'</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span> <span style="color:#898887;">// The string 'abc' is highlighted as a verbatim string, not as an expression string.</span>
0092     <span style="color:#ca60ca;">[</span><span style="font-weight:bold;">zoom</span><span style="color:#0057ae;"> </span><span style="color:#ca60ca;">&gt;=</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">4</span><span style="color:#ca60ca;">]</span> <span style="color:#ca60ca;">{</span>
0093       text-name<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#0057ae;">[test]</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// simplified reference to the value of the data field “test”</span>
0094       text-name<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#ff5500;">&quot;</span><span style="color:#0057ae;">[test]</span><span style="color:#ff5500;">&quot;</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// another reference to the data field “test”, this time within an expression string</span>
0095       <span style="color:#898887;">// A rather complex expression string that will do some math; @zoom is a special runtime value (in spite</span>
0096       <span style="color:#898887;">// of the @ it has nothing to do with ordinary variables):</span>
0097       text-size<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#ff5500;">&quot;(</span><span style="color:#0057ae;">[way_area]</span><span style="color:#ff5500;">*pow(4,</span><span style="color:#3daee9;">@zoom</span><span style="color:#ff5500;">)/24505740000)&quot;</span><span style="color:#ca60ca;">;</span>
0098       <span style="color:#898887;">// Here the same thing as simple expression:</span>
0099       <span style="color:#898887;">// Note that @zoom now is highlighted in another color, because in this context it does not reference to a</span>
0100       <span style="color:#898887;">// runtime variable anymore, but to an ordinary CartoCSS variable:</span>
0101       text-size<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#ca60ca;">(</span><span style="color:#0057ae;">[way_area]</span><span style="color:#ca60ca;">*</span><span style="color:#644a9b;">pow</span><span style="color:#ca60ca;">(</span><span style="color:#b08000;">4</span><span style="color:#ca60ca;">,</span><span style="color:#006e28;">@zoom</span><span style="color:#ca60ca;">)/</span><span style="color:#b08000;">24505740000</span><span style="color:#ca60ca;">);</span>
0102       text-name<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#ff5500;">&quot;</span><span style="color:#bf0303;">'Value: '</span><span style="color:#0057ae;">[test]</span><span style="color:#ff5500;">&quot;</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// A verbatim string 'Value: ' as part of an expression string.</span>
0103       text-name<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#ff5500;">'</span><span style="color:#bf0303;">&quot;Value: &quot;</span><span style="color:#0057ae;">[test]</span><span style="color:#ff5500;">'</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// &quot; and ' are interchangeable. The outer is always the expression string and the inner the verbatim string.</span>
0104       text-name<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#ff5500;">&quot;</span><span style="color:#0057ae;">[field]</span><span style="color:#ff5500;">\n&quot;</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// Expression strings however do not have escape sequences, so \n gets no special highlighting here. [field] however is highlighted as data field.</span>
0105       text-name<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#ff5500;">&quot;</span><span style="color:#0057ae;">[field]</span><span style="color:#ff5500;">+</span><span style="color:#bf0303;">'</span><span style="color:#3daee9;">\n</span><span style="color:#bf0303;">'</span><span style="color:#ff5500;">+</span><span style="color:#0057ae;">[otherfield]</span><span style="color:#ff5500;">&quot;</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// Inner strings, here the single-quoted string, are normal strings and highlight escape sequences like \n.</span>
0106       text-name<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#ff5500;">&quot;</span><span style="color:#0057ae;">[field]</span><span style="color:#ff5500;">+</span><span style="color:#bf0303;">'[testfield]'</span><span style="color:#ff5500;">+</span><span style="color:#0057ae;">[otherfield]</span><span style="color:#ff5500;">&quot;</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// Inner strings, here the single-quoted string, are normal strings and do not highlight any fields like [testfield].</span>
0107       text-name<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#0057ae;">[name]</span><span style="font-weight:bold;"> </span><span style="color:#ca60ca;">+</span><span style="font-weight:bold;"> </span><span style="color:#ca60ca;">/*</span><span style="font-weight:bold;"> Comments are not allowed within expressions</span><span style="color:#ca60ca;">,</span><span style="font-weight:bold;"> so no special comment highlighting here. </span><span style="color:#ca60ca;">*/</span><span style="font-weight:bold;"> </span><span style="color:#ff5500;">&quot;\n&quot;</span><span style="font-weight:bold;"> </span><span style="color:#ca60ca;">+</span><span style="font-weight:bold;"> </span><span style="color:#0057ae;">[ref]</span><span style="color:#ca60ca;">;</span>
0108     <span style="color:#ca60ca;">}</span>
0109   <span style="color:#ca60ca;">}</span>
0110 <span style="color:#ca60ca;">}</span>
0111
0112 .nature <span style="color:#ca60ca;">{</span> <span style="color:#898887;">// .nature references a class, which is similar to a layer like #nature, so both are rendered the same way</span>
0113     <span style="font-weight:bold;">::fill</span> <span style="color:#ca60ca;">{</span>
0114         <span style="color:#898887;">/* The :: syntax defined “attachments” (a sort of sub-layer within normal layers), here “::fill”.</span>
0115 <span style="color:#898887;">        Everything that is defined within an attachment is applied in the order of the first occurrence</span>
0116 <span style="color:#898887;">        of the attachment, instead of following the normal appliance order. Therefore attachments are</span>
0117 <span style="color:#898887;">        highlighted as dsControlFlow by default. */</span>
0118         opacity<span style="color:#ca60ca;">:</span><span style="font-weight:bold;"> </span><span style="color:#b08000;">0.05</span><span style="color:#ca60ca;">;</span>
0119     <span style="color:#ca60ca;">}</span>
0120 <span style="color:#ca60ca;">}</span>
0121 </pre></body></html>