blob: d5bf3ad2b50672574bf3c8ba385df16416e993fc [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>SVG img and bg test</title>
<script src="../../fast/repaint/resources/repaint.js" type="text/javascript"></script>
<script type="text/javascript">
function repaintTest() {
document.getElementById('test').className = 'revealed';
}
</script>
<style type="text/css" media="screen">
div {
-webkit-box-sizing: border-box;
}
#test
{
position: relative;
height: 200px;
width: 200px;
background: url('resources/circle.svg') 0 0 no-repeat;
border: 1px solid black;
}
#revealer {
position: absolute;
top: 100px;
left: 0;
height: 100px;
width: 200px;
background-color: red;
}
#test.revealed > #revealer {
display: none;
}
#test:hover > #revealer {
display: block;
}
</style>
</head>
<body onload="runRepaintTest()">
<p>You should continue see a full blue circle when part of the element is redrawn (hover to test interactively).</p>
<div id="test">
<div id="revealer"></div>
</div>
</body>
</html>