test/css: add some visually-verified test cases for our new features

[libsvgtiny.git] / test / css / id-and-class.svg

diff --git a/test/css/id-and-class.svg b/test/css/id-and-class.svg
new file mode 100644 (file)
index 0000000..be5a9d7
--- /dev/null
+++ b/test/css/id-and-class.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+Test the following select handlers via the corresponding CSS
+constructs,
+
+  node_has_id    : #id
+  node_has_class : .class
+
+The two rules for .rects and #rect2 should take effect with the latter
+having precedence; the rules for .Rects and #Rect2 should not because
+everything is case-sensitive.
+-->
+<svg width="640"
+     height="480"
+     viewBox="0 0 640 480"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:svg="http://www.w3.org/2000/svg">
+
+  <style>
+    .rects {
+      fill-opacity: 0.25;
+    }
+    #rect2 {
+      fill-opacity: 0.75;
+    }
+    .Rects {
+      fill-opacity: 1;
+    }
+    #Rect2 {
+      fill-opacity: 1;
+    }
+  </style>
+
+  <rect class="rects"
+        x="5"
+        y="5"
+        width="390"
+        height="470"
+        fill="red" />
+
+  <rect id="rect2"
+        class="rects"
+        x="320"
+        y="0"
+        width="320"
+        height="480"
+        fill="blue" />
+
+</svg>