OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>Test SVG in CSS backgrounds with non-integer viewBox dimensions</title> |
| 3 <style> |
| 4 body { |
| 5 margin: 0; |
| 6 } |
| 7 div { |
| 8 display: inline-block; |
| 9 } |
| 10 #t1 { |
| 11 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 81.914 81.859"><rect width="81.914" height="40"/></svg>'); |
| 12 width: 8px; |
| 13 height: 8px; |
| 14 } |
| 15 #t2 { |
| 16 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 81.914 81.859"><rect width="81.914" height="40"/></svg>'); |
| 17 width: 16px; |
| 18 height: 16px; |
| 19 } |
| 20 #t3 { |
| 21 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 81.914 81.859"><rect width="81.914" height="40"/></svg>'); |
| 22 width: 32px; |
| 23 height: 32px; |
| 24 } |
| 25 #t4 { |
| 26 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 81.914 81.859"><rect width="81.914" height="40"/></svg>'); |
| 27 width: 64px; |
| 28 height: 64px; |
| 29 } |
| 30 #t5 { |
| 31 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 81.914 81.859"><rect width="81.914" height="40"/></svg>'); |
| 32 width: 128px; |
| 33 height: 128px; |
| 34 } |
| 35 #t6 { |
| 36 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1 0.95"><rect width="1" height="0.5"/></svg>'); |
| 37 width: 8px; |
| 38 height: 8px; |
| 39 } |
| 40 #t7 { |
| 41 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1 0.97"><rect width="1" height="0.5"/></svg>'); |
| 42 width: 16px; |
| 43 height: 16px; |
| 44 } |
| 45 #t8 { |
| 46 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1 0.99"><rect width="1" height="0.5"/></svg>'); |
| 47 width: 32px; |
| 48 height: 32px; |
| 49 } |
| 50 #t9 { |
| 51 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1 0.993"><rect width="1" height="0.5"/></svg>'); |
| 52 width: 64px; |
| 53 height: 64px; |
| 54 } |
| 55 #t10 { |
| 56 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1 0.997"><rect width="1" height="0.5"/></svg>'); |
| 57 width: 128px; |
| 58 height: 128px; |
| 59 } |
| 60 #cover { |
| 61 position: absolute; |
| 62 left: 0; |
| 63 width: 600px; |
| 64 top: 0; |
| 65 height: 127px; /* We're only interested in the 128:th row. */ |
| 66 background-color: blue; |
| 67 } |
| 68 </style> |
| 69 <div id="t1"></div> |
| 70 <div id="t2"></div> |
| 71 <div id="t3"></div> |
| 72 <div id="t4"></div> |
| 73 <div id="t5"></div> |
| 74 <div id="t6"></div> |
| 75 <div id="t7"></div> |
| 76 <div id="t8"></div> |
| 77 <div id="t9"></div> |
| 78 <div id="t10"></div> |
| 79 <div id="cover"></div> |
OLD | NEW |