Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/filter-effects/filter-region-negative-positioned-child-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>SVG Filters: CSS reference filters with negative positioned children</title>
<link rel="match" href="reference/filter-region-negative-positioned-child-001-ref.html">
<meta name="assert" content="CSS reference filters with negative positioned children"/>
<defs>
<filter id="f1" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
</filter>
</defs>
</svg>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.above {
top: -100px;
}
.parent {
filter: url(#f1);
background-color: white;
position: relative;
top: 100px;
}
</style>
<div class="parent">
<div class="green box"></div>
<div class="blue box above"></div>
</div>