<script src="resources/ensure-hidpi.js"></script>
<style>
img {
    width: 200px;
    height: 200px;
}

p {
    width: 200px;
    height: 100px;
    display: inline-block;
    font: 20px/1 Ahem;
}

.filtered {
    -webkit-filter: url(#hueRotate);
}
</style>
<div style="display: none">
  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <defs>
      <filter id="hueRotate">
        <feColorMatrix type="hueRotate" values="0"/>
        <feMerge>
          <feMergeNode/>
        </feMerge>
      </filter>
    </defs>
  </svg>
</div>
<div>This is testing HiDPI output from filters. The actual effects are no-ops.</div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect fill='green' width='100%' height='100%'/></svg>">
<img class="filtered" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect fill='green' width='100%' height='100%'/></svg>">
<div>
    <p>Text</p>
    <p class="filtered">Text</p>
</div>