<!DOCTYPE html >
<html class="reftest-wait" >
<head >
<meta charset="utf-8" >
<title >CSS Masking: mask invalidation.</title >
<style type="text/css" >
div .outer {
background-color: purple;
position: absolute;
margin: 1px 2px 3px 4px;
border: solid purple;
width: 40px;
height: 20px;
}
div .mask {
mask-size: 100% 100%;
mask-origin: border-box;
mask-image: url('data:image/svg+xml, ' );
}
#d1 {
top: 10px;
left: 10px;
mask-clip: padding-box;
border-width: 10px;
padding: 0px;
}
#d2 {
top: 10px;
left: 110px;
mask-clip: padding-box;
border-width: 0px;
padding: 10px;
}
#d3 {
top: 15px;
left: 215px;
mask-clip: content-box;
border-width: 10px;
padding: 0px;
}
</style >
</head >
<body >
<div id="d1" class="outer mask" ></div >
<div id="d2" class="outer mask" ></div >
<div id="d3" class="outer mask" ></div >
<script type="text/javascript" >
function invalidateMaskedElements()
{
// Shrink border area , thicken padding area . Keep ths size of this
// division unchanged.
document.getElementById("d1" ).style .borderWidth = "5px" ;
document.getElementById("d1" ).style .padding = "5px" ;
// Shrink padding area , thicken border area . Keep ths size of this
// division unchanged.
document.getElementById("d2" ).style .borderWidth = "5px" ;
document.getElementById("d2" ).style .padding = "5px" ;
// Shrink border area , thicken content area . Keep ths size of this
// division unchanged.
document.getElementById("d3" ).style .width = "50px" ;
document.getElementById("d3" ).style .height = "30px" ;
document.getElementById("d3" ).style .borderWidth = "0px" ;
document.documentElement.removeAttribute("class" );
}
document.addEventListener("MozReftestInvalidate" ,
invalidateMaskedElements);
</script >
</body >
</html >
Messung V0.5 C=97 H=98 G=97
¤ Dauer der Verarbeitung: 0.19 Sekunden
(vorverarbeitet)
¤
*© Formatika GbR, Deutschland