<!DOCTYPE html>
<html>
<head>
<style>
.container {
/* Not using will-change: transform because it ignores subpixel accumulation. */
will-change: opacity;
position: absolute;
top: 100px;
left:100.5px;
background-color: red;
}
#target {
position: absolute;
left: 0px;
width: 10px;
height: 10px;
border: 2px solid red;
}
#target.green {
border-color: green;
}
</style>
<script src="../resources/text-based-repaint.js" type="text/javascript"></script>
</head>
<body onload="runRepaintAndPixelTest();">
<div class="container">
<div id="target">
</div>
</div>
<script>
// This test ensures that children of a composited element with a sub-pixel offset are properly repainted.
// The box should have a fully green border.
function repaintTest() {
var target = document.getElementById('target');
target.classList.add('green');
}
</script>