third_party/WebKit/LayoutTests/fast/repaint/border-repaint-glitch.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html lang="en">
   4 <head>
   5 <style type="text/css">
   6     div.test { width: 200px; height: 120px; border: 1px solid blue; padding: 10px; }
   7 </style>
   8     <script src="resources/text-based-repaint.js" type="text/javascript"></script>
   9     <script type="text/javascript">
  10        function repaintTest()
  11        {
  12            document.getElementById('a').style.height = '40px';
  13            document.getElementById('b').style.height = '60px';
  14        }
  15     </script>
  16 </head>
  17 <body onload="runRepaintTest();">
  18 <p><b>BUG ID:</b> <a href="https://bugs.webkit.org/show_bug.cgi?id=6301">Bugzilla bug 6301</a> REGRESSION: Border repaint glitch</p>
  19
  20 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
  21 The boxes will resize, maintaining their solid red rectangular borders.
  22 </p>
  23
  24 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
  25 The boxes will resize, but the borders will break. The first box will be missing
  26 small segments from either side of its bottom border. The second box will have
  27 small red horizontal segments protruding inwards from both sides of the border,
  28 where the bottom border was before.
  29 </p>
  30
  31 <div class="test">
  32     <div style="background: teal; padding: 0; border: solid red 4px;">
  33         <div id="a" style="height: 60px; margin: 10px; background:silver;"></div>
  34     </div>
  35 </div>
  36 <br>
  37 <div class="test">
  38     <div style="background: teal; padding: 0; border: solid red 4px;">
  39         <div id="b" style="height: 40px; margin: 10px; background:silver;"></div>
  40     </div>
  41 </div>
  42
  43 </body>
  44 </html>