<!DOCTYPE html>
<style>
#flexbox {
    display: flex;
    flex-flow: column;
    height: 300px;
    width: 200px;
}
#left {
    flex: 1;
    background-color: yellow;
    min-height: 0;
}
#content {
    flex: 1;
    border: 5px solid blue;
    min-height: 0;
}
#content > div {
    height: 350px;
    background-color: orange;
}
</style>
<script src="../resources/text-based-repaint.js"></script>
<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.flex = value;
}

window.testIsAsync = true;
window.onload = runRepaintAndPixelTest;

function repaintTest() {
    requestAnimationFrame(function() {
        setFlex(4.6);
        document.getElementById("content").offsetTop;
        requestAnimationFrame(function() {
            setFlex(5);
            finishRepaintTest();
        }, 1)
    }, 1)
};
</script>
<div style="height: 60px"></div>
<div id="flexbox" dir="rtl">
<div id="left"></div>
<div id="content"><div></div></div>