<https://webkit.org/b/106133> document.body.scrollTop &...

<https://webkit.org/b/106133> document.body.scrollTop & document.documentElement.scrollTop differ cross-browser

Patch by Gurpreet Kaur <gur.trio@gmail.com> on 2013-08-26
Reviewed by Darin Adler.

Source/WebCore:

Webkit always uses document.body.scrollTop whether quirks or
standard mode. Similiar behaviour is for document.body.scrollLeft.
As per the specification webkit should return document.body.scrollTop
for quirks mode and document.documentElement.scrollTop for standard mode.
Same for document.body.scrollLeft and document.documentElement.scrollLeft.

Tests: fast/dom/Element/scrollLeft-Quirks.html
       fast/dom/Element/scrollLeft.html
       fast/dom/Element/scrollTop-Quirks.html
       fast/dom/Element/scrollTop.html

* dom/Element.cpp:
(WebCore::Element::scrollLeft):
(WebCore::Element::scrollTop):
If the element does not have any associated CSS layout box or the element
is the root element and the Document is in quirks mode return zero.
Else If the element is the root element return the value of scrollY
for scrollTop and scrollX for scrollLeft.
* html/HTMLBodyElement.cpp:
(WebCore::HTMLBodyElement::scrollLeft):
(WebCore::HTMLBodyElement::scrollTop):
If the element is the HTML body element, the Document is in quirks mode,
return the value of scrollY for scrollTop and scrollX for scrollLeft.

LayoutTests:

* fast/dom/Element/scrollLeft-Quirks-expected.txt: Added.
* fast/dom/Element/scrollLeft-Quirks.html: Added.
* fast/dom/Element/scrollLeft-expected.txt: Added.
* fast/dom/Element/scrollLeft.html: Added.
* fast/dom/Element/scrollTop-Quirks-expected.txt: Added.
* fast/dom/Element/scrollTop-Quirks.html: Added.
* fast/dom/Element/scrollTop-expected.txt: Added.
* fast/dom/Element/scrollTop.html: Added.
Added new tests for verifying our behavior for document.body.scrollTop/scrollLeft and
document.documentElement.scrollTop/scrollLeft for both Quirks as well as Standard mode.

* fast/css/zoom-body-scroll-expected.txt:
* fast/css/zoom-body-scroll.html:
* fast/events/mouse-cursor.html:
* http/tests/navigation/anchor-frames-expected.txt:
* http/tests/navigation/anchor-frames-gbk-expected.txt:
* http/tests/navigation/resources/frame-with-anchor-gbk.html:
* http/tests/navigation/resources/frame-with-anchor-same-origin.html:
* http/tests/navigation/resources/frame-with-anchor.html:
* platform/mac-wk2/tiled-drawing/resources/scroll-and-load-page.html:
* platform/mac-wk2/tiled-drawing/tiled-drawing-scroll-position-page-cache-restoration.html:
* platform/win/fast/css/zoom-body-scroll-expected.txt:
Rebaselining existing tests as per the new behavior. The test cases are changed to use
quirks mode because it uses document.body.scrollTop/scrollLeft and as per the new code
document.body.scrollTop/scrollLeft will return correct value if document is in quirk mode
Also test cases have been modified so that it tests what it used to.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@154614 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 3fad2303
2013-08-26 Gurpreet Kaur <gur.trio@gmail.com>
<https://webkit.org/b/106133> document.body.scrollTop & document.documentElement.scrollTop differ cross-browser
Reviewed by Darin Adler.
* fast/dom/Element/scrollLeft-Quirks-expected.txt: Added.
* fast/dom/Element/scrollLeft-Quirks.html: Added.
* fast/dom/Element/scrollLeft-expected.txt: Added.
* fast/dom/Element/scrollLeft.html: Added.
* fast/dom/Element/scrollTop-Quirks-expected.txt: Added.
* fast/dom/Element/scrollTop-Quirks.html: Added.
* fast/dom/Element/scrollTop-expected.txt: Added.
* fast/dom/Element/scrollTop.html: Added.
Added new tests for verifying our behavior for document.body.scrollTop/scrollLeft and
document.documentElement.scrollTop/scrollLeft for both Quirks as well as Standard mode.
* fast/css/zoom-body-scroll-expected.txt:
* fast/css/zoom-body-scroll.html:
* fast/events/mouse-cursor.html:
* http/tests/navigation/anchor-frames-expected.txt:
* http/tests/navigation/anchor-frames-gbk-expected.txt:
* http/tests/navigation/resources/frame-with-anchor-gbk.html:
* http/tests/navigation/resources/frame-with-anchor-same-origin.html:
* http/tests/navigation/resources/frame-with-anchor.html:
* platform/mac-wk2/tiled-drawing/resources/scroll-and-load-page.html:
* platform/mac-wk2/tiled-drawing/tiled-drawing-scroll-position-page-cache-restoration.html:
* platform/win/fast/css/zoom-body-scroll-expected.txt:
Rebaselining existing tests as per the new behavior. The test cases are changed to use
quirks mode because it uses document.body.scrollTop/scrollLeft and as per the new code
document.body.scrollTop/scrollLeft will return correct value if document is in quirk mode
Also test cases have been modified so that it tests what it used to.
2013-08-26 Gavin Barraclough <barraclough@apple.com>
RegExpMatchesArray should not call [[put]]
......@@ -9,7 +9,7 @@ scrollLeft: 50
Zooming in
scrollHeight: 1000
scrollWidth: 1000
scrollTop: 0
scrollTop: 100
scrollLeft: 50
Scrolling down to 100
......
<!DOCTYPE HTML>
<html>
<body>
<body onload="bodyScroll()">
<div style="width: 1000px; height: 1000px; position: absolute; top: 0; left: 0;"></div>
<div style="width: 100px; height: 100px; position: absolute; top: 100px; left: 0; background: green"></div>
<p>
......@@ -15,31 +14,34 @@
console.appendChild(document.createTextNode(message + "\n"));
}
if (window.testRunner) {
testRunner.dumpAsText();
var body = document.body;
log("scrollHeight: " + body.scrollHeight);
log("scrollWidth: " + body.scrollWidth);
function bodyScroll() {
if (window.testRunner) {
testRunner.dumpAsText();
var body = document.body;
window.scrollTo(50,100);
log("scrollHeight: " + body.scrollHeight);
log("scrollWidth: " + body.scrollWidth);
log("\nScrolling right to 50");
body.scrollLeft = 50;
log("scrollLeft: " + body.scrollLeft);
log("\nScrolling right to 50");
body.scrollLeft = 50;
log("scrollLeft: " + body.scrollLeft);
log("\nZooming in");
eventSender.zoomPageIn();
log("scrollHeight: " + body.scrollHeight);
log("scrollWidth: " + body.scrollWidth);
log("scrollTop: " + body.scrollTop);
log("scrollLeft: " + body.scrollLeft);
log("\nZooming in");
eventSender.zoomPageIn();
log("scrollHeight: " + body.scrollHeight);
log("scrollWidth: " + body.scrollWidth);
log("scrollTop: " + body.scrollTop);
log("scrollLeft: " + body.scrollLeft);
log("\nScrolling down to 100");
body.scrollTop = 100;
log("scrollTop: " + body.scrollTop);
log("\nScrolling down to 100");
body.scrollTop = 100;
log("scrollTop: " + body.scrollTop);
log("\nZooming back out");
eventSender.zoomPageOut();
log("scrollTop: " + body.scrollTop);
log("scrollLeft: " + body.scrollLeft);
log("\nZooming back out");
eventSender.zoomPageOut();
log("scrollTop: " + body.scrollTop);
log("scrollLeft: " + body.scrollLeft);
}
}
</script>
</body>
......
Tests that for quirks mode document.body.scrollLeft returns the scroll left value
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS window.pageXOffset is 500
PASS document.body.scrollLeft is 500
PASS document.documentElement.scrollLeft is 0
PASS successfullyParsed is true
TEST COMPLETE
<html>
<head>
<style>
div {
height: 9999px;
width:9999px;
}
</style>
<script src="../../js/resources/js-test-pre.js"></script>
<script>
function runTest() {
description('Tests that for quirks mode document.body.scrollLeft returns the scroll left value');
setTimeout(function() {
window.scrollTo(500,0);
shouldBe("window.pageXOffset","500");
shouldBe("document.body.scrollLeft","500");
shouldBe("document.documentElement.scrollLeft","0");
finishJSTest();
}, 0);
}
var jsTestIsAsync = true;
</script>
</head>
<body onload="runTest()">
<div></div>
<script src="../../js/resources/js-test-post.js"></script>
</body>
</html>
Tests that for standard mode document.documentElement.scrollLeft returns the scroll left value
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS window.pageXOffset is 500
PASS document.body.scrollLeft is 0
PASS document.documentElement.scrollLeft is 500
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 9999px;
width:9999px;
}
</style>
<script src="../../js/resources/js-test-pre.js"></script>
<script>
function runTest() {
description('Tests that for standard mode document.documentElement.scrollLeft returns the scroll left value');
setTimeout(function() {
window.scrollTo(500,0);
shouldBe("window.pageXOffset","500");
shouldBe("document.body.scrollLeft","0");
shouldBe("document.documentElement.scrollLeft","500");
finishJSTest();
}, 0);
}
var jsTestIsAsync = true;
</script>
</head>
<body onload="runTest()">
<div></div>
<script src="../../js/resources/js-test-post.js"></script>
</body>
</html>
Tests that for quirks mode document.body.scrollTop returns the scroll top value
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS window.pageYOffset is 500
PASS document.body.scrollTop is 500
PASS document.documentElement.scrollTop is 0
PASS successfullyParsed is true
TEST COMPLETE
<html>
<head>
<style>
div {
height: 9999px;
width:9999px;
}
</style>
<script src="../../js/resources/js-test-pre.js"></script>
<script>
function runTest() {
description('Tests that for quirks mode document.body.scrollTop returns the scroll top value');
setTimeout(function() {
window.scrollTo(0,500);
shouldBe("window.pageYOffset","500");
shouldBe("document.body.scrollTop","500");
shouldBe("document.documentElement.scrollTop","0");
finishJSTest();
}, 0);
}
var jsTestIsAsync = true;
</script>
</head>
<body onload="runTest()">
<div></div>
<script src="../../js/resources/js-test-post.js"></script>
</body>
</html>
Tests that for standard mode document.documentElement.scrollTop returns the scroll top value
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS window.pageYOffset is 500
PASS document.body.scrollTop is 0
PASS document.documentElement.scrollTop is 500
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 9999px;
width:9999px;
}
</style>
<script src="../../js/resources/js-test-pre.js"></script>
<script>
function runTest() {
description('Tests that for standard mode document.documentElement.scrollTop returns the scroll top value');
setTimeout(function() {
window.scrollTo(0,500);
shouldBe("window.pageYOffset","500");
shouldBe("document.body.scrollTop","0");
shouldBe("document.documentElement.scrollTop","500");
finishJSTest();
}, 0);
}
var jsTestIsAsync = true;
</script>
</head>
<body onload="runTest()">
<div></div>
<script src="../../js/resources/js-test-post.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="../js/resources/js-test-pre.js"></script>
......@@ -9,7 +8,7 @@
<body>
<p id="description"></p>
<p><a href=https://bugs.webkit.org/show_bug.cgi?id=100550>Bug 100550</a></p>
<svg xmlns="http://www.w3.org/2000/svg"
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
<defs>
<cursor id="greenbox" xlink:href="resources/greenbox.png" x="0" y="0"/>
......@@ -45,7 +44,7 @@
<script>
var testContainer = document.getElementById('test-container');
function runTests() {
// Can't do anything useful here without eventSender
if (window.eventSender) {
......@@ -68,7 +67,7 @@ function runTests() {
// This text is redundant with the test output - hide it
testContainer.style.display = 'none';
}
finishJSTest();
}
......
......@@ -8,7 +8,7 @@ Tests that loading a frame with a URL that contains a fragment pointed at a name
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS document.body.offsetHeight > document.documentElement.clientHeight is true
PASS document.body.offsetHeight > window.innerHeight is true
PASS document.body.scrollTop > 0 is true
PASS document.body.scrollTop + document.documentElement.clientHeight > 2000 is true
PASS successfullyParsed is true
......
......@@ -8,7 +8,7 @@ Tests that loading a frame with a URL that contains a fragment pointed at a name
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS document.body.offsetHeight > document.documentElement.clientHeight is true
PASS document.body.offsetHeight > window.innerHeight is true
PASS document.body.scrollTop > 0 is true
PASS document.body.scrollTop + document.documentElement.clientHeight > 2000 is true
PASS successfullyParsed is true
......
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
......@@ -12,20 +11,20 @@
setTimeout(function() {
// Make sure that the body is taller than the viewport (i.e. scrolling is
// required).
shouldBeTrue('document.body.offsetHeight > document.documentElement.clientHeight');
shouldBeTrue('document.body.offsetHeight > window.innerHeight');
// We should be scrolled at least a little bit
shouldBeTrue('document.body.scrollTop > 0');
// And the bottom of the viewable area should be at least 2000 pixels from the top, due to the spacer element above.
shouldBeTrue('document.body.scrollTop + document.documentElement.clientHeight > 2000');
finishJSTest();
finishJSTest();
}, 0);
}
var jsTestIsAsync = true;
</script>
</script>
</head>
<body onload="runTest()">
<p id="description"></p>
......
<!DOCTYPE html>
<html>
<head>
<script src="../../../js-test-resources/js-test-pre.js"></script>
......@@ -10,11 +9,11 @@
setTimeout(function() {
shouldBeTrue('document.body.scrollTop > 0');
shouldBeTrue('document.body.scrollLeft == 0');
finishJSTest();
finishJSTest();
}, 0);
}
var jsTestIsAsync = true;
</script>
</script>
</head>
<body>
<!-- large same-origin grandchild frame -->
......
<!DOCTYPE html>
<html>
<head>
<script src="../../../js-test-resources/js-test-pre.js"></script>
......@@ -11,20 +10,20 @@
setTimeout(function() {
// Make sure that the body is taller than the viewport (i.e. scrolling is
// required).
shouldBeTrue('document.body.offsetHeight > document.documentElement.clientHeight');
shouldBeTrue('document.body.offsetHeight > window.innerHeight');
// We should be scrolled at least a little bit
shouldBeTrue('document.body.scrollTop > 0');
// And the bottom of the viewable area should be at least 2000 pixels from the top, due to the spacer element above.
shouldBeTrue('document.body.scrollTop + document.documentElement.clientHeight > 2000');
finishJSTest();
finishJSTest();
}, 0);
}
var jsTestIsAsync = true;
</script>
</script>
</head>
<body onload="runTest()">
<p id="description"></p>
......
<!DOCTYPE html>
<html>
<head>
<script>
......@@ -10,7 +9,7 @@
}
window.finishedTest = function (layerTree)
{
{
document.getElementById('layers').innerText = layerTree;
testRunner.notifyDone();
}
......
......@@ -9,13 +9,13 @@ scrollLeft: 50
Zooming in
scrollHeight: 1000
scrollWidth: 1000
scrollTop: 0
scrollTop: 100
scrollLeft: 50
Scrolling down to 100
scrollTop: 100
Zooming back out
scrollTop: 99
scrollLeft: 49
scrollTop: 100
scrollLeft: 50
2013-08-26 Gurpreet Kaur <gur.trio@gmail.com>
<https://webkit.org/b/106133> document.body.scrollTop & document.documentElement.scrollTop differ cross-browser
Reviewed by Darin Adler.
Webkit always uses document.body.scrollTop whether quirks or
standard mode. Similiar behaviour is for document.body.scrollLeft.
As per the specification webkit should return document.body.scrollTop
for quirks mode and document.documentElement.scrollTop for standard mode.
Same for document.body.scrollLeft and document.documentElement.scrollLeft.
Tests: fast/dom/Element/scrollLeft-Quirks.html
fast/dom/Element/scrollLeft.html
fast/dom/Element/scrollTop-Quirks.html
fast/dom/Element/scrollTop.html
* dom/Element.cpp:
(WebCore::Element::scrollLeft):
(WebCore::Element::scrollTop):
If the element does not have any associated CSS layout box or the element
is the root element and the Document is in quirks mode return zero.
Else If the element is the root element return the value of scrollY
for scrollTop and scrollX for scrollLeft.
* html/HTMLBodyElement.cpp:
(WebCore::HTMLBodyElement::scrollLeft):
(WebCore::HTMLBodyElement::scrollTop):
If the element is the HTML body element, the Document is in quirks mode,
return the value of scrollY for scrollTop and scrollX for scrollLeft.
2013-08-26 Antti Koivisto <antti@apple.com>
REGRESSION (r154581): Some plugin tests failing in debug bots
......@@ -760,7 +760,16 @@ int Element::clientHeight()
int Element::scrollLeft()
{
if (document()->documentElement() == this && document()->inQuirksMode())
return 0;
document()->updateLayoutIgnorePendingStylesheets();
if (document()->documentElement() == this) {
if (RenderView* renderView = document()->renderView()) {
if (FrameView* view = &renderView->frameView())
return adjustForAbsoluteZoom(view->scrollX(), renderView);
}
}
if (RenderBox* rend = renderBox())
return adjustForAbsoluteZoom(rend->scrollLeft(), rend);
return 0;
......@@ -768,7 +777,16 @@ int Element::scrollLeft()
int Element::scrollTop()
{
if (document()->documentElement() == this && document()->inQuirksMode())
return 0;
document()->updateLayoutIgnorePendingStylesheets();
if (document()->documentElement() == this) {
if (RenderView* renderView = document()->renderView()) {
if (FrameView* view = &renderView->frameView())
return adjustForAbsoluteZoom(view->scrollY(), renderView);
}
}
if (RenderBox* rend = renderBox())
return adjustForAbsoluteZoom(rend->scrollTop(), rend);
return 0;
......
......@@ -261,8 +261,9 @@ static int adjustForZoom(int value, Document* document)
int HTMLBodyElement::scrollLeft()
{
// Update the document's layout.
Document* document = this->document();
if (!document->inQuirksMode())
return 0;
document->updateLayoutIgnorePendingStylesheets();
FrameView* view = document->view();
return view ? adjustForZoom(view->scrollX(), document) : 0;
......@@ -283,8 +284,9 @@ void HTMLBodyElement::setScrollLeft(int scrollLeft)
int HTMLBodyElement::scrollTop()
{
// Update the document's layout.
Document* document = this->document();
if (!document->inQuirksMode())
return 0;
document->updateLayoutIgnorePendingStylesheets();
FrameView* view = document->view();
return view ? adjustForZoom(view->scrollY(), document) : 0;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment