repaint-during-resize-no-flex.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../../css3/flexbox/resources/flexbox.css">
<script src="../resources/text-based-repaint.js"></script>
<style>
body {
    margin: 0;
}
.flexbox {
    background: #333;
}
.flex-item {
    height: 50px;
    margin: 20px;
    background: #eee;
    width: 10px;
}

.width {
    width:50px;
}
</style>
</head>
<body>
<div class="flexbox">
    <div id="flex-item-1" class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>
<script>
function repaintTest() {
    var div = document.getElementById("flex-item-1");
    div.classList.add("width");
}
window.onload = function() {
    if (!window.testRunner) {
        document.body.appendChild(document.createTextNode(
            "Tests to make sure that when changing the size of one flex item changes the "
            + "location of another flex item, we properly repaint. The repaint rect should "
            + "include the three flex items."));
    }
    window.enablePixelTesting = true;
    runRepaintTest();
};
</script>
</body></html>

chromium/third_party/blink/web_tests/paint/invalidation/flexbox/repaint-during-resize-no-flex.html