mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Additional tests for labels

This commit is contained in:
Björn Weström 2015-01-11 16:17:02 +01:00
parent a27b3d8fcb
commit cbd7393d36
2 changed files with 292 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
test/web_style_dagre.html Normal file
View File

@ -0,0 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/d3.min.js"></script>
<script src="../../bjowes-dagre-d3/build/dagre-d3.js"></script>
<script src="../dist/mermaid.slim.js"></script> -
<!-- <script src="../dist/mermaid.full.min.js"></script> -->
<script>
var mermaid_config = {
startOnLoad:true
}
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<style>
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
</head>
<body>
<h1>Style</h1>
Styling is applied in the following order:
<ol>
<li>Node default style (see wiki)</li>
<li>CSS on the page</li>
<li>Class definitions inside the graph definition</li>
<li>Inline styling inside the graph definition</li>
</ol>
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
<h3>CSS in the page head:</h3>
<pre>
&lt;style&gt;
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
&lt;/style&gt;
</pre>
<h3>Graph definition</h3>
<pre>
graph TD;
noc[No class&lt;br />using default];
cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square&lt;br /&gt;defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq--&gt;ncss;
cyr[Class node-cyr&lt;br /&gt;defined by classDef];
od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
ncdef[classDef style];
od2-->ncdef;
cyr-->ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in&lt;br /&gt;graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</pre>
<div class="mermaid">
graph TD;
noc[No class<br />using default];
cyr2((Class node-cyr-undefined<br />is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square<br />defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr<br />defined by classDef];
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
ncdef[classDef style];
od2-->|Simple edge label|ncdef;
cyr-->|Complex<br>multiline<br>edge label|ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in<br />graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</div>
</body>
</html>

145
test/web_style_html_label.html Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.full.js"></script>
<script>
var mermaid_config = {
startOnLoad:true,
labelStyle:'hmtl'
}
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<style>
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
</head>
<body>
<h1>Style</h1>
Styling is applied in the following order:
<ol>
<li>Node default style (see wiki)</li>
<li>CSS on the page</li>
<li>Class definitions inside the graph definition</li>
<li>Inline styling inside the graph definition</li>
</ol>
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
<h3>CSS in the page head:</h3>
<pre>
&lt;style&gt;
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
&lt;/style&gt;
</pre>
<h3>Graph definition</h3>
<pre>
graph TD;
noc[No class&lt;br />using default];
cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square&lt;br /&gt;defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq--&gt;ncss;
cyr[Class node-cyr&lt;br /&gt;defined by classDef];
od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
ncdef[classDef style];
od2-->ncdef;
cyr-->ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in&lt;br /&gt;graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</pre>
<div class="mermaid">
graph TD;
noc[No class<br />using default];
cyr2((Class node-cyr-undefined<br />is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square<br />defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr<br />defined by classDef];
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
ncdef[classDef style];
od2-->|Simple edge label|ncdef;
cyr-->|Complex<br>multiline<br>edge label|ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in<br />graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</div>
</body>
</html>