diff --git a/test/web_style_dagre.html b/test/web_style_dagre.html new file mode 100644 index 000000000..517d2debe --- /dev/null +++ b/test/web_style_dagre.html @@ -0,0 +1,147 @@ + + + + + + + + - + + + + + + +

Style

+ Styling is applied in the following order: +
    +
  1. Node default style (see wiki)
    2. +
  2. CSS on the page
    3. +
  3. Class definitions inside the graph definition
    4. +
  4. Inline styling inside the graph definition
    5. +
+ and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page". + +

CSS in the page head:

+ 
+        <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>
+
+

Graph definition

+ 
+    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-->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<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;
+
+ +
+ graph TD; + + noc[No class
using default]; + cyr2((Class node-cyr-undefined
is undefined, using default)); + class cyr2 node-cyr-undefined; + ndef[Default style]; + noc-->ndef; + cyr2-->ndef; + + sq[Class node-square
defined in page CSS]; + class sq node-square; + ncss[Page CSS style]; + sq-->ncss; + + cyr[Class node-cyr
defined by classDef]; + od2>Class node-odd-override
defined in page CSS
and defined by classDef]; + ncdef[classDef style]; + od2-->|Simple edge label|ncdef; + cyr-->|Complex
multiline
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
defined by classDef
and inline style]; + class e1 node-e1; + style e1 fill:#FF0000; + e2>Class node-odd-override
defined in page CSS
and defined by classDef
and inline style]; + class e2 node-e2; + style e2 fill:#FF0000; + e((Inline style in
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; +
+ + + + + diff --git a/test/web_style_html_label.html b/test/web_style_html_label.html new file mode 100644 index 000000000..24c638d1c --- /dev/null +++ b/test/web_style_html_label.html @@ -0,0 +1,145 @@ + + + + + + + + + + + +

Style

+ Styling is applied in the following order: +
    +
  1. Node default style (see wiki)
    2. +
  2. CSS on the page
    3. +
  3. Class definitions inside the graph definition
    4. +
  4. Inline styling inside the graph definition
    5. +
+ and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page". + +

CSS in the page head:

+ 
+        <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>
+
+

Graph definition

+ 
+    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-->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<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;
+
+ +
+ graph TD; + + noc[No class
using default]; + cyr2((Class node-cyr-undefined
is undefined, using default)); + class cyr2 node-cyr-undefined; + ndef[Default style]; + noc-->ndef; + cyr2-->ndef; + + sq[Class node-square
defined in page CSS]; + class sq node-square; + ncss[Page CSS style]; + sq-->ncss; + + cyr[Class node-cyr
defined by classDef]; + od2>Class node-odd-override
defined in page CSS
and defined by classDef]; + ncdef[classDef style]; + od2-->|Simple edge label|ncdef; + cyr-->|Complex
multiline
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
defined by classDef
and inline style]; + class e1 node-e1; + style e1 fill:#FF0000; + e2>Class node-odd-override
defined in page CSS
and defined by classDef
and inline style]; + class e2 node-e2; + style e2 fill:#FF0000; + e((Inline style in
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; +
+ + + + +