<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
    div.test { width: 200px; height: 120px; border: 1px solid blue; padding: 10px; }
</style>
    <script src="resources/repaint.js" type="text/javascript"></script>
    <script type="text/javascript">
       function repaintTest()
       {
           document.getElementById('a').style.height = '40px';
           document.getElementById('b').style.height = '60px';
       }
    </script>
</head>
<body onload="runRepaintTest();">
<p><b>BUG ID:</b> <a href="https://bugs.webkit.org/show_bug.cgi?id=8032">Bugzilla bug 8032</a> REGRESSION: Focus ring not completely redrawn after a Delete changes its size</p>

<p> Note that this bug (and the test) are just outline versions of <a href="https://bugs.webkit.org/show_bug.cgi?id=6301">Bugzilla bug 6301</a> and test <a href="border-repaint-glitch.html">border-repaint-glitch.html</a>

<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> 
The boxes will resize, maintaining their solid red rectangular outlines.
</p>

<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>  
The boxes will resize, but the outlines will break. The first box will be missing
small segments from either side of its bottom outline. The second box will have
small red horizontal segments protruding inwards from both sides of the outline,
where the bottom outline was before.
</p>

<div class="test">
    <div style="background: teal; padding: 0; outline: solid red 4px;">
        <div id="a" style="height: 60px; margin: 10px; background:silver;"></div>
    </div>
</div>
<br>
<div class="test">
    <div style="background: teal; padding: 0; outline: solid red 4px;">
        <div id="b" style="height: 40px; margin: 10px; background:silver;"></div>
    </div>
</div>

</body>
</html>
