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>
|