scroll-behavior-5.html (3072B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Testcase for bug 1010538 - Element.ScrollLeft and Element.ScrollTop scroll-behavior</title> 6 <style type="text/css"> 7 8 html,body { 9 color: black; 10 background-color: white; 11 font-size: 16px; 12 padding: 0; 13 margin: 0; 14 } 15 16 .a_box { 17 position: relative; 18 left: 0px; 19 top: 0px; 20 width: 20px; 21 height: 20px; 22 background: blue; 23 } 24 25 .another_box { 26 position: relative; 27 left: 2000px; 28 top: 2000px; 29 width: 20px; 30 height: 20px; 31 background: green; 32 } 33 34 .scroll_box { 35 width: 50px; 36 height: 50px; 37 overflow: scroll; 38 } 39 40 #scroll_2, #scroll_4 { 41 scroll-behavior: auto; 42 } 43 44 #scroll_5, #scroll_6 { 45 scroll-behavior: smooth; 46 } 47 48 </style> 49 </head> 50 <body> 51 <div id="scroll_1" class="scroll_box"> 52 <div id="box1a" class="a_box"></div> 53 <div id="box1b" class="another_box"></div> 54 </div> 55 <div id="scroll_2" class="scroll_box"> 56 <div id="box2a" class="a_box"></div> 57 <div id="box2b" class="another_box"></div> 58 </div> 59 <div id="scroll_3" class="scroll_box"> 60 <div id="box3a" class="a_box"></div> 61 <div id="box3b" class="another_box"></div> 62 </div> 63 <div id="scroll_4" class="scroll_box"> 64 <div id="box4a" class="a_box"></div> 65 <div id="box4b" class="another_box"></div> 66 </div> 67 <div id="scroll_5" class="scroll_box"> 68 <div id="box5a" class="a_box"></div> 69 <div id="box5b" class="another_box"></div> 70 </div> 71 <div id="scroll_6" class="scroll_box"> 72 <div id="box6a" class="a_box"></div> 73 <div id="box6b" class="another_box"></div> 74 </div> 75 <script> 76 function doTest() { 77 if (document.location.search != '?ref') { 78 // Expect instantaneous scroll: 79 document.getElementById("scroll_1").scrollTo({left: 0, top: 0}); 80 document.getElementById("scroll_2").scrollTo({left: 0, top: 0}); 81 document.getElementById("scroll_3").scrollTo(0, 0); 82 document.getElementById("scroll_4").scrollTo(0, 0); 83 84 // Expect smooth scroll: 85 document.getElementById("scroll_5").scrollTo({left: 0, top: 0}); 86 document.getElementById("scroll_6").scrollTo(0, 0); 87 88 // Interrupt any smooth scrolling 89 for (var i=1; i <= 6; i++) { 90 document.getElementById("scroll_" + i).scrollTo(); 91 } 92 } else { 93 // Scroll all boxes except for box5a and box6a 94 for (var i=1; i <= 4; i++) { 95 document.getElementById("box" + i + "a").scrollIntoView({block: "end", behavior: "instant"}); 96 } 97 } 98 document.documentElement.removeAttribute("class"); 99 } 100 101 for (var i=1; i <= 6; i++) { 102 document.getElementById("box" + i + "b") 103 .scrollIntoView({block: "start", behavior: "instant"}); 104 } 105 106 window.addEventListener("MozReftestInvalidate", doTest); 107 </script> 108 </body> 109 </html>