layout/base/tests/test_scroll_selection_into_view.html
author Blake Kaplan <mrbkap@gmail.com>
Tue, 03 Sep 2013 15:01:00 -0400
changeset 110284 54dde77e836c60cf478cb330c966b0f91272f55c
parent 102183 ef1c6a327b0d7fd8db7691ff8809ea8349ac3064
permissions -rw-r--r--
Bug 860123 - Use the right window's selection in some tests. r=ehsan, a=bajaj

<!DOCTYPE HTML>
<html>
<head>
  <title>Test for scrolling selection into view</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>

<p id="display"></p>
<div id="c1" style="overflow-y:scroll; width:200px; height:200px; position:absolute; top:200px; left:0;">
  <div style="height:400px;"></div>
  <div><span id="target1"
        style="display:inline-block; vertical-align:top; height:20px;">target</span>
  </div>
  <div style="height:400px;"></div>
</div>
<div id="c2" style="overflow:hidden; width:200px; height:200px; position:absolute; top:200px; left:200px;">
  <div style="height:400px;"></div>
  <div><span id="target2"
        style="display:inline-block; vertical-align:top; height:20px;">target2</span>
  </div>
  <div style="height:400px;"></div>
</div>
<div id="c3" style="overflow-y:scroll; width:200px; height:200px; position:absolute; top:200px; left:400px;">
  <div style="height:400px;"></div>
  <div><span id="target3"
        style="display:inline-block; vertical-align:top; height:300px;">target3</span>
  </div>
  <div style="height:400px;"></div>
</div>
<div id="c4" style="overflow-y:scroll; width:200px; height:200px; position:absolute; top:200px; left:600px;">
  <iframe id="target4" style="border:none; width:100%; height:1100px; display:block;"
          src="data:text/html,
               <body style='margin:0; overflow:hidden;'>
                 <div style='height:400px;'></div>
                 <div><span id='target4'
                            style='display:inline-block; vertical-align:top; height:300px;'>target4</span>
                 </div>
                 <div style='height:400px;'></div>">
  </iframe>
</div>

<pre id="test">
<script class="testbody" type="text/javascript">

var ANCHOR = 0;
var FOCUS = 1;

function testCollapsed(id, vPercent, startAt, expected) {
  netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
  var selection = window.getSelection().QueryInterface(Components.interfaces.nsISelectionPrivate);

  var c = document.getElementById("c" + id);
  var target = document.getElementById("target" + id);
  if (target.contentDocument) {
    selection = target.contentWindow.getSelection().QueryInterface(Components.interfaces.nsISelectionPrivate);
    target = target.contentDocument.getElementById("target" + id);
  }
  selection.collapse(target.parentNode, 0);
  c.scrollTop = startAt;
  selection.scrollIntoView(FOCUS, true, vPercent, 0);
  is(c.scrollTop, expected, "Scrolling " + target.id +
     " into view with vPercent " + vPercent + ", starting at " + startAt);
}

function doTest() {
  // Test scrolling an element smaller than the scrollport
  testCollapsed("1", 0, 0, 400);
  testCollapsed("1", 100, 0, 220);
  testCollapsed("1", -1, 0, 220);
  testCollapsed("1", 0, 500, 400);
  testCollapsed("1", 100, 500, 220);
  testCollapsed("1", -1, 500, 400);

  // overflow:hidden elements should not be scrolled by selection
  // scrolling-into-view
  testCollapsed("2", 0, 0, 0);
  testCollapsed("2", 100, 0, 0);
  testCollapsed("2", -1, 0, 0);
  testCollapsed("2", 0, 500, 500);
  testCollapsed("2", 100, 500, 500);
  testCollapsed("2", -1, 500, 500);

  // Test scrolling an element larger than the scrollport
  testCollapsed("3", 0, 0, 400);
  testCollapsed("3", 100, 0, 500);
  testCollapsed("3", -1, 0, 400);
  testCollapsed("3", 0, 1000, 400);
  testCollapsed("3", 100, 1000, 500);
  // If the element can't be completely visible, we make the top edge
  // visible.
  testCollapsed("3", -1, 1000, 400);

  // Test scrolling an element larger than the scrollport
  testCollapsed("4", 0, 0, 400);
  testCollapsed("4", 100, 0, 500);
  testCollapsed("4", -1, 0, 400);
  testCollapsed("4", 0, 1000, 400);
  testCollapsed("4", 100, 1000, 500);
  // If the element can't be completely visible, we make the top edge
  // visible.
  testCollapsed("4", -1, 1000, 400);

  SimpleTest.finish();
}

SimpleTest.waitForExplicitFinish();
addLoadEvent(doTest);
</script>
</pre>
</body>

</html>