adding moz-context-properties demo

jsnkuhn · May 25, 2017 · 6142371 · 6142371
1 parent 5457417
commit 6142371
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/moz-context-properties/index.html b/moz-context-properties/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic context-fill/context-stroke/-moz-context-properties test</title>
+    <style>
+
+    img {
+      width: 100px;
+      height: 100px;
+      -moz-context-properties: fill, stroke;
+    }
+
+    .img1 {
+        fill: lime;
+        stroke: purple;
+    }
+
+    .img2 {
+        fill: blue;
+        stroke: orange;
+    }
+
+    .img3 {
+        fill: yellow;
+        stroke: red;
+    }
+
+    </style>
+  </head>
+  <body>
+    <img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
+                           <rect width='100%' height='100%' stroke-width='30px'
+                           fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
+    <img class="img2" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
+                           <rect width='100%' height='100%' stroke-width='30px'
+                           fill='context-fill yellow' stroke='context-stroke'/></svg>">
+    <img class="img3" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
+                          <rect width='100%' height='100%' stroke-width='30px'
+                          fill='context-stroke' stroke='context-fill red'/></svg>">
+  </body>
+</html>