| <!doctype html> |
| |
| <style> |
| svg { |
| width: 100px; |
| height: 100px; |
| margin: 1px; |
| } |
| |
| #test-root { |
| position: absolute; |
| left: 10px; |
| top: 10px; |
| } |
| |
| #test-child { |
| position: absolute; |
| left: 10px; |
| top: 130px; |
| } |
| </style> |
| |
| <p id="test-root"> |
| |
| <!-- SVG root element: the first three filters are valid, the rest are not. --> |
| |
| <svg style="filter: url(#filter)" viewBox="0 0 50 50"> |
| <filter id="filter"> |
| <feColorMatrix type="matrix" values="0 0 0 0 0, 1 0 0 0 0, 0 0 0 0 0, 0 0 0 1 0"/> |
| </filter> |
| <rect fill="red" x="0" y="0" height="50" width="50"/> |
| </svg> |
| |
| <svg style="filter: blur(0px)" viewBox="0 0 50 50"> |
| <rect fill="lime" x="0" y="0" height="50" width="50"/> |
| </svg> |
| |
| <svg style="filter: url(#filter) blur(0px)" viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50"/> |
| </svg> |
| |
| <svg style="filter: url(#missing)" viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50"/> |
| </svg> |
| |
| <svg style="filter: url(invalid)" viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50"/> |
| </svg> |
| |
| <svg style="filter: url(invalid#missing)" viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50"/> |
| </svg> |
| |
| <svg style="filter: url(filter)" viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50"/> |
| </svg> |
| </p> |
| |
| <p id="test-child"> |
| |
| <!-- SVG child element: the first filter is valid, the rest are not. --> |
| |
| <svg viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50" |
| style="filter: url(#filter)"/> |
| </svg> |
| |
| <svg viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50" |
| style="filter: url(#filter) blur(0px)"/> |
| </svg> |
| |
| <svg viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50" |
| style="filter: blur(0px)"/> |
| </svg> |
| |
| <svg viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50" |
| style="filter: url(#missing)"/> |
| </svg> |
| |
| <svg viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50" |
| style="filter: url(invalid)"/> |
| </svg> |
| |
| <svg viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50" |
| style="filter: url(invalid#missing)"/> |
| </svg> |
| |
| <svg viewBox="0 0 50 50"> |
| <rect fill="red" x="0" y="0" height="50" width="50" |
| style="filter: url(filter)"/> |
| </svg> |
| </p> |
