ManualTests/scrollIntoView-vertical.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="rdar://problem/3471901">3471901</a> support scrollIntoView method for DOM elements (3474)</p>
   8
   9 <p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b>
  10 Following the numbered steps, click each button to scroll the specified colored box into view.</p>
  11
  12 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
  13 A colored box should scroll into view after clicking each button.  The text on the button specifies the expected position (top, bottom) of the box scrolled into view.</p>
  14
  15 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
  16 Colored box does not scroll into view, or the box is scrolled to the wrong positon (top, bottom).
  17 </p>
  18
  19 <div id="purplebox" style="background-color:purple; width: 300px; height: 100px;">
  20         <input type="button" value="STEP 1: click to scroll yellow box to BOTTOM of view" onclick="document.getElementById('yellowbox').scrollIntoView(false);">
  21         <input type="button" value="STEP 4: click to scroll orange box to TOP of view" onclick="document.getElementById('orangebox').scrollIntoView(true);">
  22 </div>
  23
  24 <div style="height: 500px; width: 500px; border: 1px solid;">here is a big empty div</div>
  25
  26 <div id="greenbox" style="background-color:green; width: 300px; height: 100px;">
  27         <input type="button" value="STEP 3: click to scroll purple box to TOP of view" onclick="document.getElementById('purplebox').scrollIntoView();">
  28 </div>
  29
  30 <div style="height: 500px; width: 500px; border: 1px solid;">here is a big empty div</div>
  31
  32 <div id="yellowbox" style="background-color:yellow; width: 300px; height: 100px;">
  33         <input type="button" value="STEP 2: click to scroll green box to TOP of view" onclick="document.getElementById('greenbox').scrollIntoView(true);">
  34 </div>
  35
  36 <div style="height: 500px; width: 500px; border: 1px solid;">here is a big empty div</div>
  37
  38 <div id="orangebox" style="background-color:orange; width: 300px; height: 100px;">
  39  Test Complete
  40 </div>
  41
  42 <div style="height: 500px; width: 500px; border: 1px solid;">here is a big empty div</div>
  43
  44 </body>
  45 </html>