third_party/blink/web_tests/paint/invalidation/block-shift-repaint.html

<html>
<head>
    <title>Test for http://bugs.webkit.org/show_bug.cgi?id=12079</title>
    <style type="text/css">
        div.playground { position: relative; width: 90px; height: 90px; }
        .red { background-color: yellow; }
        .blue { background-color: blue; }
        .green { background-color: green; }
        .zero { height: 0; width: 60px; }
        .half { height: 30px; width: 60px; }
        .full { height: 60px; width: 60px; }
    </style>
    <script src="resources/text-based-repaint.js" type="text/javascript"></script>
    <script type="text/javascript">
        function repaintTest()
        {
            var div1 = document.getElementById("div1");
            div1.style.height = "0";

            var div2 = document.getElementById("div2");
            div2.style.height = "30px";

            var top = document.getElementById("top");
            top.style.height = "0";

            var top = document.getElementById("innerDiv");
            innerDiv.style.height = "15px";
        }
    </script>
</head>
<body onload="runRepaintAndPixelTest()">
    <div class="playground">
        <div id="div1" class="blue half"></div>
        <div class="red half"></div>
        <div class="green half"></div>
    </div>

    <div class="playground">
        <div><div id="top" class="blue half"></div></div>
        <div class="red half"></div>
        <div class="green half"></div>
    </div>

    <div class="playground">
        <div id="div2" class="zero"></div>
        <div class="green half"></div>
        <div class="red half"></div>
    </div>

    <div class="playground" style="margin-top: 30px;">
        <div style="width: 10px; margin: auto;">
            <div id="innerDiv"></div>
        </div>
        <div class="half"></div>
        <div class="half" style="border-top: solid yellow 8px;"></div>
    </div>
</body>
</html>