| <!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> |
