38 lines
1.0 KiB
HTML
38 lines
1.0 KiB
HTML
<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>
|