<html>
<head>
<script>jsTestIsAsync = true;</script>
<script src="../../resources/js-test-pre.js"></script>

<style>
#wrapper {
    width: 40px;
}

#outer-background-shorthand {
    width: 20px;
    padding-top: 20px;
    float:right;
	background:-webkit-gradient(
	    linear, 
	    left top, 
	    left bottom, 
	    color-stop(0%, rgba(255,255,0,0)), color-stop(100%, rgba(0,0,0,1))
	);
}

#outer-background-size-auto {
    width: 20px;
    padding-top: 20px;
	background-size: auto;
	background-image: -webkit-gradient(
	    linear, 
	    left top, 
	    left bottom, 
	    color-stop(0%, rgba(255,255,0,0)), color-stop(100%, rgba(0,0,0,1))
	);
}

.inner {
    height: 10px;
}
</style>

<script>
description("This test verifies that gradient background gets repainted properly after child box height change.");

function start() {
    window.setTimeout(function() { 
        document.getElementsByClassName('inner')[0].style.height = 200 + 'px'; 
        document.getElementsByClassName('inner')[1].style.height = 200 + 'px'; 
        
        window.setTimeout(logRepaints, 200);
    }, 0); 

    if (!window.testRunner || !window.internals)
        return;
        
    window.internals.startTrackingRepaints();
    window.testRunner.displayAndTrackRepaints();
}

function logRepaints() {
    if (!window.internals)
        return;

    repaintRects = window.internals.repaintRectsAsText();
    window.internals.stopTrackingRepaints();
    shouldNotBe("repaintRects.indexOf('28 84')", "-1");
    shouldNotBe("repaintRects.indexOf('8 84')", "-1");
    finishJSTest();
}
</script>
</head>

<body onload='start();'>
<div id='wrapper'>
    <div id='outer-background-shorthand'>
        <div class='inner'>
        </div>
    </div>
    <div id='outer-background-size-auto'>
        <div class='inner'>
        </div>
    </div>
</div>
</body>
<script src="../../resources/js-test-post.js"></script>
</html>