mirror of
https://github.com/servo/servo.git
synced 2025-10-03 18:19:14 +01:00
6f62723898
* scrollLeft/scrollTop returned values of parent or even document root Only the scroll of the node itself is returned. Otherwise 0.0. * Scrolling via script had set viewport. This resulted in other nodes appearing scrolled. Now scroll_offsets are updated with correct node id. These bugs caused other odd behavior like both body and document.documentElement being scrolled or the view for scrolled elements jumping.
173 lines
6.3 KiB
HTML
173 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>cssom-view - elementScroll</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
#section {
|
|
width: 300px;
|
|
height: 500px;
|
|
/*position: absolute;*/
|
|
top: 16px;
|
|
left: 16px;
|
|
border: inset gray 3px;
|
|
overflow: hidden;
|
|
background: white;
|
|
}
|
|
|
|
#scrollable {
|
|
width: 400px;
|
|
height: 700px;
|
|
background: linear-gradient(135deg, red, blue);
|
|
}
|
|
|
|
</style>
|
|
|
|
<section id="section">
|
|
<div id="scrollable"></div>
|
|
<div id="unrelated"></div>
|
|
</section>
|
|
|
|
<script>
|
|
setup({explicit_done:true});
|
|
window.onload = function () {
|
|
var section = document.getElementById("section");
|
|
var unrelated = document.getElementById("unrelated");
|
|
|
|
test(function () {
|
|
assert_equals(section.scrollTop, 0, "initial scrollTop should be 0");
|
|
assert_equals(section.scrollLeft, 0, "initial scrollLeft should be 0");
|
|
|
|
section.scrollTop = 30;
|
|
section.scrollLeft = 40;
|
|
|
|
assert_equals(section.scrollTop, 30, "changed scrollTop should be 40");
|
|
assert_equals(section.scrollLeft, 40, "changed scrollLeft should be 40");
|
|
assert_equals(unrelated.scrollTop, 0, "unrelated element should not scroll");
|
|
assert_equals(unrelated.scrollLeft, 0, "unrelated element should not scroll");
|
|
}, "Element scrollTop/Left getter/setter test");
|
|
|
|
test(function () {
|
|
section.scroll(50, 60);
|
|
|
|
assert_equals(section.scrollLeft, 50, "changed scrollLeft should be 50");
|
|
assert_equals(section.scrollTop, 60, "changed scrollTop should be 60");
|
|
}, "Element scroll test (two arguments)");
|
|
|
|
test(function () {
|
|
section.scroll({left: 55, top: 65});
|
|
|
|
assert_equals(section.scrollLeft, 55, "changed scrollLeft should be 55");
|
|
assert_equals(section.scrollTop, 65, "changed scrollTop should be 65");
|
|
|
|
section.scroll({left: 85});
|
|
|
|
assert_equals(section.scrollLeft, 85, "changed scrollLeft should be 85");
|
|
assert_equals(section.scrollTop, 65, "scrollTop should stay at 65");
|
|
|
|
section.scroll({top: 75});
|
|
|
|
assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
|
|
assert_equals(section.scrollTop, 75, "changed scrollTop should be 75");
|
|
|
|
section.scroll({});
|
|
|
|
assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
|
|
assert_equals(section.scrollTop, 75, "scrollTop should stay at 75");
|
|
|
|
section.scroll();
|
|
|
|
assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
|
|
assert_equals(section.scrollTop, 75, "scrollTop should stay at 75");
|
|
}, "Element scroll test (one argument)");
|
|
|
|
test(function () {
|
|
section.scrollTo(80, 70);
|
|
|
|
assert_equals(section.scrollLeft, 80, "changed scrollLeft should be 70");
|
|
assert_equals(section.scrollTop, 70, "changed scrollTop should be 80");
|
|
}, "Element scrollTo test (two arguments)");
|
|
|
|
test(function () {
|
|
section.scrollTo({left: 75, top: 85});
|
|
|
|
assert_equals(section.scrollLeft, 75, "changed scrollLeft should be 75");
|
|
assert_equals(section.scrollTop, 85, "changed scrollTop should be 85");
|
|
|
|
section.scrollTo({left: 65});
|
|
|
|
assert_equals(section.scrollLeft, 65, "changed scrollLeft should be 65");
|
|
assert_equals(section.scrollTop, 85, "scrollTop should stay at 85");
|
|
|
|
section.scrollTo({top: 55});
|
|
|
|
assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65");
|
|
assert_equals(section.scrollTop, 55, "changed scrollTop should be 55");
|
|
|
|
section.scrollTo({});
|
|
|
|
assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65");
|
|
assert_equals(section.scrollTop, 55, "scrollTop should stay at 55");
|
|
|
|
section.scrollTo();
|
|
|
|
assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 55");
|
|
assert_equals(section.scrollTop, 55, "scrollTop should stay at 55");
|
|
}, "Element scrollTo test (one argument)");
|
|
|
|
test(function () {
|
|
var left = section.scrollLeft;
|
|
var top = section.scrollTop;
|
|
|
|
section.scrollBy(10, 20);
|
|
|
|
assert_equals(section.scrollLeft, left + 10, "increment of scrollLeft should be 10")
|
|
assert_equals(section.scrollTop, top + 20, "increment of scrollTop should be 20")
|
|
}, "Element scrollBy test (two arguments)");
|
|
|
|
test(function () {
|
|
var left = section.scrollLeft;
|
|
var top = section.scrollTop;
|
|
|
|
section.scrollBy({left: 5, top: 15});
|
|
left += 5
|
|
top += 15
|
|
|
|
assert_equals(section.scrollLeft, left, "increment of scrollLeft should be 5")
|
|
assert_equals(section.scrollTop, top, "increment of scrollTop should be 15")
|
|
|
|
section.scrollBy({left: -15});
|
|
left -= 15
|
|
|
|
assert_equals(section.scrollLeft, left, "decrement of scrollLeft should be 15")
|
|
assert_equals(section.scrollTop, top, "scrollTop should not be modified")
|
|
|
|
section.scrollBy({top: -5});
|
|
top -= 5;
|
|
|
|
assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
|
|
assert_equals(section.scrollTop, top, "decrement of scrollTop should be 5")
|
|
|
|
section.scrollBy({});
|
|
|
|
assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
|
|
assert_equals(section.scrollTop, top, "scrollTop should not be modified")
|
|
|
|
section.scrollBy();
|
|
|
|
assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
|
|
assert_equals(section.scrollTop, top, "scrollTop should not be modified")
|
|
}, "Element scrollBy test (one argument)");
|
|
|
|
test(function () {
|
|
section.scrollTop = 1000;
|
|
section.scrollLeft = 1000;
|
|
|
|
assert_equals(section.scrollTop, 700 - 500, "changed scrollTop should be 200");
|
|
assert_equals(section.scrollLeft, 400 - 300, "changed scrollLeft should be 100");
|
|
|
|
}, "Element scroll maximum test");
|
|
|
|
done();
|
|
};
|
|
</script>
|