<!DOCTYPE html>
<style>
#flexbox {
    display: -webkit-flex;
    -webkit-flex-flow: column;
    height: 300px;
    width: 200px;
}
#left {
    -webkit-flex: 1;
    background-color: yellow;
    min-height: 0;
}
#content {
    -webkit-flex: 1;
    border: 5px solid blue;
    min-height: 0;
}
#content > div {
    height: 350px;
    background-color: orange;
}
</style>
<script>
// This test makes sure that we repaint the right region of a flexbox when
// changing the flex values. Only the middle of the test page should be
// repainted. If the top of the test page (above the flexbox) is repainted,
// this test fails.
function setFlex(value)
{
    document.getElementById("content").style.webkitFlex = value;
}

window.onload = function() {
    if (window.testRunner) {
        testRunner.dumpAsText(true);
        document.body.offsetTop;
        testRunner.displayAndTrackRepaints();
        testRunner.waitUntilDone();
    }
    setTimeout(function() {
        setFlex(4.6);
        setTimeout(function() {
            setFlex(5);
            if (window.testRunner)
                testRunner.notifyDone();
        })
    })
};
</script>
<div style="height: 60px"></div>
<div id="flexbox" dir="rtl">
<div id="left"></div>
<div id="content"><div></div></div>