2009-09-09 22:16:18 -07:00
|
|
|
<!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>
|
2010-03-28 18:46:59 -07:00
|
|
|
<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>
|
2012-06-21 22:06:49 -07:00
|
|
|
<div id="c5" style="overflow-y:scroll; width:200px; height:200px; position:absolute; top:400px; left:0;">
|
|
|
|
|
<div style="-moz-transform:translateY(400px); transform:translateY(400px)">
|
|
|
|
|
<span id="target5" style="display:inline-block; vertical-align:top; height:20px;">target</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="height:800px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="c6" style="overflow-y:scroll; width:200px; height:200px; position:absolute; top:400px; left:200px;">
|
|
|
|
|
<div style="height:200px"></div>
|
|
|
|
|
<div style="height:100px; -moz-transform:scale(2); transform:scale(2)">
|
|
|
|
|
<span id="target6" style="display:inline-block; vertical-align:top; height:20px;">target</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="height:800px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="c7" style="overflow-y:scroll; width:200px; height:200px; position:absolute; top:400px; left:400px;">
|
|
|
|
|
<div style="overflow:auto; height:200px; -moz-transform:translateY(400px); transform:translateY(400px)">
|
|
|
|
|
<div style="height:200px;"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<span id="target7" style="display:inline-block; vertical-align:top; height:20px;">target</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="height:800px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="height:800px;"></div>
|
|
|
|
|
</div>
|
2009-09-09 22:16:18 -07:00
|
|
|
|
|
|
|
|
<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");
|
2011-08-07 13:17:00 -07:00
|
|
|
var selection = window.getSelection().QueryInterface(Components.interfaces.nsISelectionPrivate);
|
2009-09-09 22:16:18 -07:00
|
|
|
|
|
|
|
|
var c = document.getElementById("c" + id);
|
|
|
|
|
var target = document.getElementById("target" + id);
|
2010-03-28 18:46:59 -07:00
|
|
|
if (target.contentDocument) {
|
|
|
|
|
target = target.contentDocument.getElementById("target" + id);
|
|
|
|
|
}
|
2009-09-09 22:16:18 -07:00
|
|
|
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);
|
|
|
|
|
|
2010-03-28 18:46:59 -07:00
|
|
|
// 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);
|
|
|
|
|
|
2012-06-21 22:06:49 -07:00
|
|
|
// Test that scrolling a translated element into view takes
|
|
|
|
|
// account of the transform.
|
|
|
|
|
testCollapsed("5", 0, 0, 400);
|
|
|
|
|
|
|
|
|
|
// Test that scrolling a scaled element into view takes
|
|
|
|
|
// account of the transform.
|
|
|
|
|
testCollapsed("6", 0, 0, 150);
|
|
|
|
|
|
|
|
|
|
// Test that scrolling an element with a translated, scrolling container
|
|
|
|
|
// into view takes account of the transform.
|
|
|
|
|
testCollapsed("7", 0, 0, 400);
|
|
|
|
|
|
2009-09-09 22:16:18 -07:00
|
|
|
SimpleTest.finish();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
|
addLoadEvent(doTest);
|
|
|
|
|
</script>
|
|
|
|
|
</pre>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
