Source code
Revision control
Copy as Markdown
Other Tools
<?xml version="1.0"?>
<!-- Test that a fixed background layer inside an inactive layer tree
is clipped correctly. Here, the inactive layer tree is created by
the SVGEffects display item built for the clip-path on the outer div.
The bug only reproduces in XUL because fixed backgrounds are only
layerized if their animated geometry root is the root frame, but
in HTML there's always an enclosing HTML scroll frame. -->
#inner {
width: 100px;
height: 100px;
background: linear-gradient(red, blue) no-repeat fixed;
background-size: 800px 800px;
}
#outer {
margin: 50px 50px 0;
width: 100px;
height: 200px;
clip-path: url(#path);
position: fixed;
}
]]></style>
</div>
<defs>
<clipPath id="path" clipPathUnits="objectBoundingBox">
<polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/>
</clipPath>
</defs>
</svg>
</window>