third_party/WebKit/ManualTests/left-overflow-repaint.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 </head>
   6 <body>
   7 <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>
   8
   9 <p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b>
  10 Scroll and resize the window as necessary to bring the three test cases below into view.
  11 Press each Test button once. Do not scroll, resize, or hide the window or switch to another
  12 tab.
  13 </p>
  14
  15 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
  16 In each test, &ldquo;Lorem&rdquo; will move down along with &ldquo;ipsum&rdquo;.
  17 </p>
  18
  19 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
  20 &ldquo;Lorem&rdquo; will stay behind as &ldquo;ipsum&rdquo; moves down.
  21 </p>
  22
  23 <div style="height: 120px">
  24     <p>
  25     <button onclick="document.getElementById('t').style.marginTop = '2em'">
  26         Test 1
  27     </button>
  28     Move block with left overflow
  29     </p>
  30     <div id="t" style="text-indent: -50px; background: silver; margin-left: 50px;">
  31         Lorem ipsum
  32     </div>
  33 </div>
  34 <hr>
  35 <div style="height: 120px">
  36     <p>
  37     <button onclick="document.getElementById('u').style.lineHeight = '3'">
  38         Test 2
  39     </button>
  40     </p>
  41     Move line with left overflow
  42     <div style="text-indent: -50px; background: silver; margin-left: 50px;">
  43         Lorem <span id="u">ipsum</span>
  44     </div>
  45 </div>
  46 <hr>
  47 <div style="height: 120px">
  48     <p>
  49     <button onclick="document.getElementById('v').style.height = '3em'">
  50         Test 3
  51     </button>
  52     Change height of table cell with left overflow
  53     </p>
  54     <table style="margin-left: 50px;"><tr>
  55     <td id="v" style="text-indent: -50px; background: silver;">
  56         Lorem ipsum
  57     </td></tr></table>
  58 </div>
  59
  60 </body>
  61 </html>