<!DOCTYPE html>
<html>
<head>
<script src="../resources/run-after-layout-and-paint.js"></script>
<script src="resources/test-runner-geometry-logging.js"></script>
<style>
    div {
        background-color: red;
    }
</style>
<script>
function runTest() {
    testRunnerGeometryLogging([{
        func: function(el) {
            el.style.width = '100px';
            el.style.height = '100px';
            el.style.background = 'paint(logging-green) top left/50% 50% repeat-x';
        },
        expected: {width: 50, height: 50},
    }, {
        func: function(el) {
            el.style.width = '100px';
            el.style.height = '100px';
            el.style.background = 'paint(logging-green) center right/50% 20% no-repeat';
        },
        expected: {width: 50, height: 20},
    }, {
        func: function(el) {
            el.style.width = '100px';
            el.style.height = '100px';
            el.style.background = 'paint(logging-green) center center/60px 80px no-repeat';
        },
        expected: {width: 60, height: 80},
    }]);
}
</script>
</head>
<body onload="runTest()">
<p>This tests the geometry information in the paint callback.</p>
<p>See the devtools console for test output.</p>
</body>
</html>