blob: 7e86aadbf8493dfd18f148cdcbbfd0b813f18265 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<?xml version="1.0"?>
<!DOCTYPE window>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="RTL overflow test" width="640px" height="480px" style="direction: rtl" onload="load()" class="reftest-wait">
<hbox style="max-width: 200px; border: 1px solid red;">
<scrollbox id="sb" align="start" pack="start" orient="horizontal" flex="1">
<button id="sb1" label="test1"/><button label="test2"/><button label="test3"/><button label="test4"/><button label="test5"/>
</scrollbox>
</hbox>
<hbox style="max-width: 200px; border: 1px solid blue">
<arrowscrollbox id="asb" align="start" pack="start" orient="horizontal" flex="1">
<button id="asb1" label="test1"/><button label="test2"/><button label="test3"/><button label="test4"/><button label="test5"/>
</arrowscrollbox>
</hbox>
<hbox style="max-width: 200px; border: 1px solid black">
<hbox align="end" pack="end" flex="1">
<button label="test1"/><button label="test2"/><button label="test3"/><button label="test4"/><button label="test5"/>
</hbox>
</hbox>
<script type="text/javascript">
<![CDATA[
function load() {
// arrowscrollbox provides a helper ensureElementIsVisible method
document.getElementById("asb").ensureElementIsVisible(document.getElementById("asb1"), false);
// scrollbox doesn't provide that, so we have to do the heavy lifting directly
var sb = document.getElementById("sb");
var sb1 = document.getElementById("sb1");
var rect = sb.getBoundingClientRect();
var containerStart = rect.left;
var containerEnd = rect.right;
rect = sb1.getBoundingClientRect();
var elementStart = rect.left;
var elementEnd = rect.right;
var amountToScroll = 0;
if (elementStart < containerStart) {
amountToScroll = elementStart - containerStart;
} else if (elementEnd > containerEnd) {
amountToScroll = elementEnd - containerEnd;
}
sb.scrollLeft += amountToScroll;
document.documentElement.removeAttribute("class");
}
]]>
</script>
</window>
|
