192 lines
6.7 KiB
HTML
192 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<script src="../../resources/js-test-pre.js"></script>
|
||
</head>
|
||
<body>
|
||
<p>Scrolled position should be restored when the div is hidden and shown again</p>
|
||
<div style="height:100px; width:100px; overflow: scroll; display: block;" id="main">
|
||
<pre id="preId">
|
||
line 1 with some text which has to be scroll to be visible
|
||
line 2 with some text which has to be scroll to be visible
|
||
line 3 with some text which has to be scroll to be visible
|
||
line 4 with some text which has to be scroll to be visible
|
||
line 5 with some text which has to be scroll to be visible
|
||
line 6 with some text which has to be scroll to be visible
|
||
line 7 with some text which has to be scroll to be visible
|
||
line 8 with some text which has to be scroll to be visible
|
||
line 9 with some text which has to be scroll to be visible
|
||
line 10 with some text which has to be scroll to be visible
|
||
line 11 with some text which has to be scroll to be visible
|
||
line 12 with some text which has to be scroll to be visible
|
||
</pre>
|
||
</div>
|
||
|
||
<div id="second">
|
||
Div will be moved here.
|
||
</div>
|
||
|
||
<iframe id="frame" style="display:block; width:400px; height: 400px;"></iframe>
|
||
<div id="console"></div>
|
||
<script>
|
||
var e = document.getElementById("main");
|
||
debug("Scrolling to 0, 75");
|
||
e.scrollTop = 75;
|
||
e.style.display = 'none';
|
||
debug("Div's display is none now");
|
||
shouldBe('e.scrollTop', '0');
|
||
e.style.display = 'block';
|
||
debug("Div's display is block again");
|
||
shouldBe('e.scrollTop', '75');
|
||
|
||
debug("");
|
||
debug("Test that after changing the scroll position to different values the scroll position is restored");
|
||
debug("Scrolling to 50, 50");
|
||
e.scrollTop = 50;
|
||
e.scrollLeft = 50;
|
||
debug("Div's display is none now");
|
||
e.style.display = 'none';
|
||
shouldBe('e.scrollTop', '0');
|
||
shouldBe('e.scrollLeft', '0');
|
||
debug("Div's display is block again");
|
||
e.style.display = 'block';
|
||
shouldBe('e.scrollTop', '50');
|
||
shouldBe('e.scrollLeft', '50');
|
||
|
||
debug("Scrolling to 30, 10");
|
||
e.scrollTop = 10;
|
||
e.scrollLeft = 30;
|
||
debug("Div's display is none now");
|
||
e.style.display = 'none';
|
||
shouldBe('e.scrollTop', '0');
|
||
shouldBe('e.scrollLeft', '0');
|
||
debug("Div's display is block again");
|
||
e.style.display = 'block';
|
||
shouldBe('e.scrollTop', '10');
|
||
shouldBe('e.scrollLeft', '30');
|
||
|
||
debug("Scrolling to 100, 0");
|
||
e.scrollTop = 0;
|
||
e.scrollLeft = 100;
|
||
debug("Div's display is none now");
|
||
e.style.display = 'none';
|
||
shouldBe('e.scrollTop', '0');
|
||
shouldBe('e.scrollLeft', '0');
|
||
debug("Div's display is block again");
|
||
e.style.display = 'block';
|
||
shouldBe('e.scrollTop', '0');
|
||
shouldBe('e.scrollLeft', '100');
|
||
|
||
debug("");
|
||
debug("Testing that scroll position is restored when height and width of scrolling area is changed");
|
||
e.style.height = e.scrollHeight + 50;
|
||
e.style.width = e.scrollWidth + 50;
|
||
debug("Scrolling to 35, 75");
|
||
e.scrollTop = 75;
|
||
e.scrollLeft = 35;
|
||
debug("Div's display is none now");
|
||
e.style.display = 'none';
|
||
shouldBe('e.scrollTop', '0');
|
||
shouldBe('e.scrollLeft', '0');
|
||
debug("Div's display is block again");
|
||
e.style.display = 'block';
|
||
shouldBe('e.scrollTop', '75');
|
||
shouldBe('e.scrollLeft', '35');
|
||
debug("Adding some more text to div");
|
||
e.innerHTML += "line 13 <br/> line 14 <br/> line 15 <br/> line 16 <br/> line 17 <br/>";
|
||
debug("Scrolling to 125, 100");
|
||
e.scrollTop = 100;
|
||
e.scrollLeft = 125;
|
||
debug("Div's display is none now");
|
||
e.style.display = 'none';
|
||
shouldBe('e.scrollTop', '0');
|
||
shouldBe('e.scrollLeft', '0');
|
||
debug("Div's display is block again");
|
||
e.style.display = 'block';
|
||
shouldBe('e.scrollTop', '100');
|
||
shouldBe('e.scrollLeft', '125');
|
||
|
||
debug("");
|
||
debug("Test that scroll position is reset when the node is moved to different location in the document");
|
||
e.style.display = 'none';
|
||
document.getElementById("second").appendChild(e);
|
||
e.style.display = 'block';
|
||
shouldBe('e.scrollTop', '0');
|
||
shouldBe('e.scrollLeft', '0');
|
||
|
||
var divContent = document.getElementById("preId").innerHTML;
|
||
|
||
debug("");
|
||
debug("Testing that scroll position is restored for RTL texts");
|
||
document.getElementById("preId").innerHTML = "ممرحبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nممرحبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nممرحبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
|
||
\nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا";
|
||
|
||
e.dir="rtl";
|
||
|
||
debug("Scrolling to -50, 150");
|
||
e.scrollTop = 150;
|
||
e.scrollLeft = -50;
|
||
debug("Div's display is none now");
|
||
e.style.display = 'none';
|
||
shouldBe('e.scrollTop', '0');
|
||
shouldBe('e.scrollLeft', '0');
|
||
debug("Div's display is block again");
|
||
e.style.display = 'block';
|
||
shouldBe('e.scrollTop', '150');
|
||
shouldBe('e.scrollLeft', '-50');
|
||
|
||
debug("");
|
||
debug("Test iframe scrolling");
|
||
var frame = document.getElementById('frame');
|
||
var doc = frame.contentDocument.open();
|
||
doc.write("<div style='width:100px; height:100px; background:yellow;'></div>");
|
||
doc.close();
|
||
frame.contentDocument.body.style.width = "2000px";
|
||
frame.contentDocument.body.style.height = "2000px";
|
||
|
||
debug("Scrolling Iframe to (50, 75)");
|
||
frame.contentWindow.scrollTo(50, 75);
|
||
|
||
frame.style.display = 'none';
|
||
debug("Iframe's display is none now");
|
||
|
||
frame.style.display = 'block';
|
||
debug("Iframe's display is block again");
|
||
|
||
shouldBe('frame.contentWindow.pageYOffset', '75');
|
||
shouldBe('frame.contentWindow.pageXOffset', '50');
|
||
|
||
debug("");
|
||
debug("Testing scroll offset getting reset when moved to other document");
|
||
document.getElementById("preId").innerHTML = divContent;
|
||
e.dir="ltr";
|
||
debug("Scrolling div to (50, 75)");
|
||
e.scrollTop = 75;
|
||
e.scrollLeft = 50;
|
||
e.style.display = 'none';
|
||
frame.contentDocument.body.appendChild(e);
|
||
e.style.display = 'block';
|
||
shouldBe('e.scrollTop', '0');
|
||
shouldBe('e.scrollLeft', '0');
|
||
|
||
successfullyParsed = true;
|
||
</script>
|
||
<script src="../../resources/js-test-post.js"></script>
|
||
</body>
|
||
</html>
|