svg-as-border-image-4a.html (904B)
1 <html class="reftest-wait"> 2 <head> 3 <title>test of svg-as-border-image</title> 4 <style type="text/css"> 5 div { 6 width: 400px; 7 height: 100px; 8 margin: 30px; 9 border-width: 30px; 10 border-style: solid; 11 } 12 #border5p { 13 border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch; 14 } 15 #border25p { 16 border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 25% stretch; 17 } 18 </style> 19 <script> 20 function resizeDiv() { 21 document.getElementById('border5p').style.width = '100px'; 22 document.getElementById('border25p').style.width = '100px'; 23 document.documentElement.removeAttribute('class'); 24 } 25 26 document.addEventListener('MozReftestInvalidate', resizeDiv); 27 </script> 28 </head> 29 <body> 30 <div id="border5p"></div> 31 <div id="border25p"></div> 32 </body> 33 </html>