<!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>
Codebase Browser
chromium