ManualTests/left-overflow-repaint.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
</head>
<body>
<p><b>BUG ID:</b> <a href="http://bugs.webkit.org/show_bug.cgi?id=7916">Bugzilla bug 7916</a> Box repaint rect does not include the left overflow</p>

<p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b> 
Scroll and resize the window as necessary to bring the three test cases below into view.
Press each Test button once. Do not scroll, resize, or hide the window or switch to another
tab.
</p>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
In each test, &ldquo;Lorem&rdquo; will move down along with &ldquo;ipsum&rdquo;. 
</p>

<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
&ldquo;Lorem&rdquo; will stay behind as &ldquo;ipsum&rdquo; moves down.
</p>

<div style="height: 120px">
    <p>
    <button onclick="document.getElementById('t').style.marginTop = '2em'">
        Test 1
    </button>
    Move block with left overflow
    </p>
    <div id="t" style="text-indent: -50px; background: silver; margin-left: 50px;">
        Lorem ipsum
    </div>
</div>
<hr>
<div style="height: 120px">
    <p>
    <button onclick="document.getElementById('u').style.lineHeight = '3'">
        Test 2
    </button>
    </p>
    Move line with left overflow
    <div style="text-indent: -50px; background: silver; margin-left: 50px;">
        Lorem <span id="u">ipsum</span>
    </div>
</div>
<hr>
<div style="height: 120px">
    <p>
    <button onclick="document.getElementById('v').style.height = '3em'">
        Test 3
    </button>
    Change height of table cell with left overflow
    </p>
    <table style="margin-left: 50px;"><tr>
    <td id="v" style="text-indent: -50px; background: silver;">
        Lorem ipsum
    </td></tr></table>
</div>

</body>
</html>