<!DOCTYPE html>
<html>
<style>
#container {
position: relative;
width: 100px;
height: 50px;
/* Not using will-change:transform because it ignores subpixel accumulation. */
will-change: opacity;
}
#test {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid red;
}
#console {
display: none;
}
body, html {
margin: 0px;
padding: 0px;
}
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
var testData = [
// left of #container, initial left of #test, final left of #test
[ '10.5px', '12.5px', '10.5px' ],
[ '10.6px', '12.4px', '10.4px' ],
[ '10.4px', '12.6px', '10.6px' ],
[ '10.6px', '12.6px', '10.6px' ],
[ '10.4px', '12.4px', '10.4px' ]
];
var testIndex = 0;
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function repaintTest() {
document.getElementById('container').style.left = testData[testIndex][0];
document.getElementById('test').style.left = testData[testIndex][1];
runAfterLayoutAndPaint(runTest);
};
function runTest() {
if (window.internals)
internals.startTrackingRepaints(document);
document.getElementById('test').style.left = testData[testIndex][2];
if (window.internals) {
document.getElementById('console').textContent += testData[testIndex] + ':\n'
+ internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
internals.stopTrackingRepaints(document);
}
if (++testIndex < testData.length) {
repaintTest();
} else {
// Display the test results only after test is done so that it does not affect repaint rect results.
document.getElementById('console').style.display = "block";
if (window.testRunner)
testRunner.notifyDone();
}
}
</script>
<body onload="repaintTest()">
<div id="container"><div id="test"></div></div>
<pre id="console"></pre>