<!DOCTYPE html >
<html class="reftest-wait" >
<head >
<meta charset="utf-8" >
<title >CSS Masking: mask invalidation.</title >
<style type="text/css" >
div .outer {
position: absolute;
background-color: purple;
border: solid purple;
width: 200px;
height: 200px;
}
div .mask {
mask-image: url(#m1);
}
div .inner {
width: 5px;
height: 5px;
border: 1px solid transparent;
will-change: transform;
}
</style >
</head >
<body >
<div id="d1" class="outer mask" ><div class="inner" ></div ></div >
<script type="text/javascript" >
function changeMask()
{
document.getElementById("r1" ).setAttribute("width" , "50" );
document.getElementById("r1" ).setAttribute("height" , "50" );
document.getElementById("r1" ).setAttribute("x" , "100" );
document.getElementById("r1" ).setAttribute("y" , "100" );
document.documentElement.removeAttribute("class" );
}
document.addEventListener("MozReftestInvalidate" ,
changeMask);
</script >
<svg height="0" >
<mask id="m1" x="0" y="0" width="1" height="1" >
<rect id="r1" x="50" y="50" width="100" height="100" style ="stroke:none; fill: #ffffff;" />
</mask>
</svg>
</body >
</html >
Messung V0.5 C=99 H=100 G=99
¤ Dauer der Verarbeitung: 0.9 Sekunden
(vorverarbeitet)
¤
*© Formatika GbR, Deutschland