source: trunk/LayoutTests/fast/overflow/scroll-div-hide-show.html @ 112919

Revision 112919, 6.7 KB checked in by commit-queue@webkit.org, 2 years ago (diff)

Scroll position is lost after hide/show element
https://bugs.webkit.org/show_bug.cgi?id=72852

Source/WebCore:

Maintain the scroll position of an overflowing element in the ElementRareData when the scrollable
RenderLayer is destroyed, which can be used to restore the scroll position if the same element gets
back a RenderLayer.

WebKit behaviour will be the same as Firefox and IE. It differs from Opera as it does not reset the
scroll position when an element is moved to another location in the same document. However Opera resets
the scroll position for elements moved to another document, which matches other browsers.

Patch by Rakesh KN <rakesh.kn@motorola.com> on 2012-04-02
Reviewed by Julien Chaffraix.

Test: fast/overflow/scroll-div-hide-show.html

  • dom/Element.cpp:

(WebCore::Element::removedFromDocument):
Reset the saved scroll offset if the node is moved to another location in the same document or another one.

(WebCore::Element::savedLayerScrollOffset):
(WebCore::Element::setSavedLayerScrollOffset):

  • dom/Element.h:

Add helper functions to access the layer scroll offset from the element's rare data.

  • dom/ElementRareData.h:

(ElementRareData):
Add the scroll offset book-keeping.

  • rendering/RenderLayer.cpp:

(WebCore::RenderLayer::RenderLayer):
Restore the scroll offset.
(WebCore::RenderLayer::~RenderLayer):
Store the scroll offset if document is not being destroyed.

LayoutTests:

Patch by Rakesh KN <rakesh.kn@motorola.com> on 2012-04-02
Reviewed by Julien Chaffraix.

  • fast/overflow/scroll-div-hide-show-expected.txt: Added.
  • fast/overflow/scroll-div-hide-show.html: Added.
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<script src="../js/resources/js-test-pre.js"></script>
6</head>
7<body>
8<p>Scrolled position should be restored when the div is hidden and shown again</p>
9<div style="height:100px; width:100px; overflow: scroll; display: block;" id="main">
10<pre id="preId">
11line 1 with some text which has to be scroll to be visible
12line 2 with some text which has to be scroll to be visible
13line 3 with some text which has to be scroll to be visible
14line 4 with some text which has to be scroll to be visible
15line 5 with some text which has to be scroll to be visible
16line 6 with some text which has to be scroll to be visible
17line 7 with some text which has to be scroll to be visible
18line 8 with some text which has to be scroll to be visible
19line 9 with some text which has to be scroll to be visible
20line 10 with some text which has to be scroll to be visible
21line 11 with some text which has to be scroll to be visible
22line 12 with some text which has to be scroll to be visible
23</pre>
24</div>
25
26<div id="second">
27Div will be moved here.
28</div>
29
30<iframe id="frame" style="display:block; width:400px; height: 400px;"></iframe>
31<div id="console"></div>
32<script>
33var e = document.getElementById("main");
34debug("Scrolling to 0, 75");
35e.scrollTop = 75;
36e.style.display = 'none';
37debug("Div's display is none now");
38shouldBe('e.scrollTop', '0');
39e.style.display = 'block';
40debug("Div's display is block again");
41shouldBe('e.scrollTop', '75');
42
43debug("");
44debug("Test that after changing the scroll position to different values the scroll position is restored");
45debug("Scrolling to 50, 50");
46e.scrollTop = 50;
47e.scrollLeft = 50;
48debug("Div's display is none now");
49e.style.display = 'none';
50shouldBe('e.scrollTop', '0');
51shouldBe('e.scrollLeft', '0');
52debug("Div's display is block again");
53e.style.display = 'block';
54shouldBe('e.scrollTop', '50');
55shouldBe('e.scrollLeft', '50');
56
57debug("Scrolling to 30, 10");
58e.scrollTop = 10;
59e.scrollLeft = 30;
60debug("Div's display is none now");
61e.style.display = 'none';
62shouldBe('e.scrollTop', '0');
63shouldBe('e.scrollLeft', '0');
64debug("Div's display is block again");
65e.style.display = 'block';
66shouldBe('e.scrollTop', '10');
67shouldBe('e.scrollLeft', '30');
68
69debug("Scrolling to 100, 0");
70e.scrollTop = 0;
71e.scrollLeft = 100;
72debug("Div's display is none now");
73e.style.display = 'none';
74shouldBe('e.scrollTop', '0');
75shouldBe('e.scrollLeft', '0');
76debug("Div's display is block again");
77e.style.display = 'block';
78shouldBe('e.scrollTop', '0');
79shouldBe('e.scrollLeft', '100');
80
81debug("");
82debug("Testing that scroll position is restored when height and width of scrolling area is changed");
83e.style.height = e.scrollHeight + 50;
84e.style.width = e.scrollWidth + 50;
85debug("Scrolling to 35, 75");
86e.scrollTop = 75;
87e.scrollLeft = 35;
88debug("Div's display is none now");
89e.style.display = 'none';
90shouldBe('e.scrollTop', '0');
91shouldBe('e.scrollLeft', '0');
92debug("Div's display is block again");
93e.style.display = 'block';
94shouldBe('e.scrollTop', '75');
95shouldBe('e.scrollLeft', '35');
96debug("Adding some more text to div");
97e.innerHTML += "line 13 <br/> line 14 <br/> line 15 <br/> line 16 <br/> line 17 <br/>";
98debug("Scrolling to 125, 100");
99e.scrollTop = 100;
100e.scrollLeft = 125;
101debug("Div's display is none now");
102e.style.display = 'none';
103shouldBe('e.scrollTop', '0');
104shouldBe('e.scrollLeft', '0');
105debug("Div's display is block again");
106e.style.display = 'block';
107shouldBe('e.scrollTop', '100');
108shouldBe('e.scrollLeft', '125');
109
110debug("");
111debug("Test that scroll position is reset when the node is moved to different location in the document");
112e.style.display = 'none';
113document.getElementById("second").appendChild(e);
114e.style.display = 'block';
115shouldBe('e.scrollTop', '0');
116shouldBe('e.scrollLeft', '0');
117
118var divContent = document.getElementById("preId").innerHTML;
119
120debug("");
121debug("Testing that scroll position is restored for RTL texts");
122document.getElementById("preId").innerHTML = "ممرحبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
123    \nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
124    \nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
125    \nبًامرحبًامرحبًامرحبًامرحبًارحبًا\
126    \nحبًامرحبًامرحبًامرحبًارحبًا\
127    \nممرحبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
128    \nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
129    \nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
130    \nبًامرحبًامرحبًامرحبًامرحبًارحبًا\
131    \nممرحبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
132    \nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
133    \nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
134    \nبًامرحبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
135    \nبًامرحبًامرحبًامرحبًارحبًا\
136    \nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا\
137    \nبًامرحبًامرحبًامرحبًامرحبًامرحبًارحبًا";
138
139e.dir="rtl";
140
141debug("Scrolling to 50, 150");
142e.scrollTop = 150;
143e.scrollLeft = 50;
144debug("Div's display is none now");
145e.style.display = 'none';
146shouldBe('e.scrollTop', '0');
147shouldBe('e.scrollLeft', '0');
148debug("Div's display is block again");
149e.style.display = 'block';
150shouldBe('e.scrollTop', '150');
151shouldBe('e.scrollLeft', '50');
152
153debug("");
154debug("Test iframe scrolling");
155var frame = document.getElementById('frame');
156var doc = frame.contentDocument.open();
157doc.write("<div style='width:100px; height:100px; background:yellow;'></div>");
158doc.close();
159frame.contentDocument.body.style.width = "2000px";
160frame.contentDocument.body.style.height = "2000px";
161
162debug("Scrolling Iframe to (50, 75)");
163frame.contentWindow.scrollTo(50, 75);
164
165frame.style.display = 'none';
166debug("Iframe's display is none now");
167
168frame.style.display = 'block';
169debug("Iframe's display is block again");
170
171shouldBe('frame.contentWindow.pageYOffset', '75');
172shouldBe('frame.contentWindow.pageXOffset', '50');
173
174debug("");
175debug("Testing scroll offset getting reset when moved to other document");
176document.getElementById("preId").innerHTML = divContent;
177e.dir="ltr";
178debug("Scrolling div to (50, 75)");
179e.scrollTop = 75;
180e.scrollLeft = 50;
181e.style.display = 'none';
182frame.contentDocument.body.appendChild(e);
183e.style.display = 'block';
184shouldBe('e.scrollTop', '0');
185shouldBe('e.scrollLeft', '0');
186
187successfullyParsed = true;
188</script>
189<script src="../js/resources/js-test-post.js"></script>
190</body>
191</html>
Note: See TracBrowser for help on using the repository browser.