svg-element-invalid-filter.html | Explore in Territory

<!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 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="lime" x="0" y="0" height="50" width="50"/>
</svg>

<svg style="filter: url(invalid)" viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>

<svg style="filter: url(invalid#missing)" viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>

<svg style="filter: url(filter)" viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
</p>

<p id="test-child">
<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="lime" x="0" y="0" height="50" width="50"
       style="filter: blur(0px)"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"
       style="filter: url(#missing)"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"
       style="filter: url(invalid)"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"
       style="filter: url(invalid#missing)"/>
</svg>

<svg viewBox="0 0 50 50">
  <rect fill="lime" x="0" y="0" height="50" width="50"
       style="filter: url(filter)"/>
</svg>
</p>
chromium/third_party/blink/web_tests/svg/filters/svg-element-invalid-filter.html
