<!doctype html> <meta charset="utf-8"> <title>dom-element-scroll tests</title> <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrolltop"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> #section1 { width: 300px; height: 500px; top: 16px; left: 16px; border: inset gray 3px; background: white; } #scrollable { width: 400px; height: 700px; background: linear-gradient(135deg, red, blue); } #section2 { width: 300px; height: 500px; top: 16px; left: 16px; border: inset gray 3px; background: white; } #unscrollable { width: 200px; height: 300px; background: linear-gradient(135deg, red, blue); } </style> <section id="section1"> <div id="scrollable"></div> </section> <section id="section2"> <div id="unscrollable"></div> </section> <script> var section1 = document.getElementById("section1"); var section2 = document.getElementById("section2"); test(function () { // let it be "hidden" to have scrolling box section1.style.overflow = "hidden"; section1.scroll(50, 60); assert_equals(section1.scrollLeft, 50, "changed scrollLeft should be 50"); assert_equals(section1.scrollTop, 60, "changed scrollTop should be 60"); section1.scroll(0, 0); // back to the origin }, "Element test for having scrolling box"); test(function () { section1.scroll(10, 20); assert_equals(section1.scrollLeft, 10, "changed scrollLeft should be 10"); assert_equals(section1.scrollTop, 20, "changed scrollTop should be 20"); section1.scroll(0, 0); // back to the origin }, "Element test for having overflow"); test(function () { // make it not "hidden" to not have scrolling box section1.style.overflow = "visible"; section1.scroll(50, 0); assert_equals(section1.scrollLeft, 0, "changed scrollLeft should be 0"); assert_equals(section1.scrollTop, 0, "changed scrollTop should be 0"); section1.scroll(0, 60); assert_equals(section1.scrollLeft, 0, "changed scrollLeft should be 0"); assert_equals(section1.scrollTop, 0, "changed scrollTop should be 0"); section1.scroll(50, 60); assert_equals(section1.scrollLeft, 0, "changed scrollLeft should be 0"); assert_equals(section1.scrollTop, 0, "changed scrollTop should be 0"); section1.scroll(0, 0); // back to the origin }, "Element test for not having scrolling box"); test(function () { section2.scroll(0, 20); assert_equals(section2.scrollLeft, 0, "changed scrollLeft should be 0"); assert_equals(section2.scrollTop, 0, "changed scrollTop should be 0"); section2.scroll(10, 0); assert_equals(section2.scrollLeft, 0, "changed scrollLeft should be 0"); assert_equals(section2.scrollTop, 0, "changed scrollTop should be 0"); section2.scroll(10, 20); assert_equals(section2.scrollLeft, 0, "changed scrollLeft should be 0"); assert_equals(section2.scrollTop, 0, "changed scrollTop should be 0"); }, "Element test for not having overflow"); </script>