1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Border Image: border-image-repeat with SVG content</title>
5 <link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
6 <link href="https://www.mozilla.org" rel="author" title="Mozilla">
7 <link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
8 <link href="reference/border-image-repeat-1-ref.htm" rel="match">
9 <meta content="The test checks the result of border-image-repeat with SVG content." name="assert">
10 <style type="text/css">
11 .outer {
12 height: 16px;
13 width: 32px;
14 border-width: 16px;
15 border-style: solid;
16 border-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='blue' stroke-width='0'%3E%3Cpath d='M2 2h4v44H2z'/%3E%3Cpath d='M2 2h44v4H2z'/%3E%3Cpath d='M42 2h4v44h-4z'/%3E%3Cpath d='M2 42h44v4H2zM8'/%3E%3C/g%3E%3C/svg%3E") 16 repeat;
17 }
18 </style>
19 </head>
20 <body>
21 <div class="outer"></div>
22
23
24 </body></html>