dom-element-scroll.html (3344B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>dom-element-scroll tests</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrolltop"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #section1 { 9 width: 300px; 10 height: 500px; 11 top: 16px; 12 left: 16px; 13 border: inset gray 3px; 14 background: white; 15 } 16 17 #scrollable { 18 width: 400px; 19 height: 700px; 20 background: linear-gradient(135deg, red, blue); 21 } 22 23 #section2 { 24 width: 300px; 25 height: 500px; 26 top: 16px; 27 left: 16px; 28 border: inset gray 3px; 29 background: white; 30 } 31 32 #unscrollable { 33 width: 200px; 34 height: 300px; 35 background: linear-gradient(135deg, red, blue); 36 } 37 </style> 38 <section id="section1"> 39 <div id="scrollable"></div> 40 </section> 41 <section id="section2"> 42 <div id="unscrollable"></div> 43 </section> 44 <script> 45 var section1 = document.getElementById("section1"); 46 var section2 = document.getElementById("section2"); 47 48 test(function () { 49 // let it be "hidden" to have scrolling box 50 section1.style.overflow = "hidden"; 51 52 section1.scroll(50, 60); 53 assert_equals(section1.scrollLeft, 50, "changed scrollLeft should be 50"); 54 assert_equals(section1.scrollTop, 60, "changed scrollTop should be 60"); 55 56 section1.scroll(0, 0); // back to the origin 57 }, "Element test for having scrolling box"); 58 59 test(function () { 60 section1.scroll(10, 20); 61 assert_equals(section1.scrollLeft, 10, "changed scrollLeft should be 10"); 62 assert_equals(section1.scrollTop, 20, "changed scrollTop should be 20"); 63 64 section1.scroll(0, 0); // back to the origin 65 }, "Element test for having overflow"); 66 67 test(function () { 68 // make it not "hidden" to not have scrolling box 69 section1.style.overflow = "visible"; 70 71 section1.scroll(50, 0); 72 assert_equals(section1.scrollLeft, 0, "changed scrollLeft should be 0"); 73 assert_equals(section1.scrollTop, 0, "changed scrollTop should be 0"); 74 75 section1.scroll(0, 60); 76 assert_equals(section1.scrollLeft, 0, "changed scrollLeft should be 0"); 77 assert_equals(section1.scrollTop, 0, "changed scrollTop should be 0"); 78 79 section1.scroll(50, 60); 80 assert_equals(section1.scrollLeft, 0, "changed scrollLeft should be 0"); 81 assert_equals(section1.scrollTop, 0, "changed scrollTop should be 0"); 82 83 section1.scroll(0, 0); // back to the origin 84 }, "Element test for not having scrolling box"); 85 86 test(function () { 87 section2.scroll(0, 20); 88 assert_equals(section2.scrollLeft, 0, "changed scrollLeft should be 0"); 89 assert_equals(section2.scrollTop, 0, "changed scrollTop should be 0"); 90 91 section2.scroll(10, 0); 92 assert_equals(section2.scrollLeft, 0, "changed scrollLeft should be 0"); 93 assert_equals(section2.scrollTop, 0, "changed scrollTop should be 0"); 94 95 section2.scroll(10, 20); 96 assert_equals(section2.scrollLeft, 0, "changed scrollLeft should be 0"); 97 assert_equals(section2.scrollTop, 0, "changed scrollTop should be 0"); 98 }, "Element test for not having overflow"); 99 100 </script>