gecko-dev/layout/base/tests/test_scroll_selection_into_view.html

114 lines
3.9 KiB
HTML

<!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) {
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>