<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../resources/js-test.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>
</body>
</html>