scroll-behavior-3.html (4237B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Testcase for bug 1010538, instant scrolling expected</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 will-change: scroll-position; 39 } 40 41 #scroll_1, #scroll_4, #scroll_6, #scroll_8 { 42 scroll-behavior: auto; 43 } 44 45 #scroll_3 { 46 scroll-behavior: smooth; 47 } 48 49 </style> 50 </head> 51 <body> 52 <div id="scroll_1" class="scroll_box"> 53 <div id="box1a" class="a_box"></div> 54 <div id="box1b" class="another_box"></div> 55 </div> 56 <div id="scroll_2" class="scroll_box"> 57 <div id="box2a" class="a_box"></div> 58 <div id="box2b" class="another_box"></div> 59 </div> 60 <div id="scroll_3" class="scroll_box"> 61 <div id="box3a" class="a_box"></div> 62 <div id="box3b" class="another_box"></div> 63 </div> 64 <div id="scroll_4" class="scroll_box"> 65 <div id="box4a" class="a_box"></div> 66 <div id="box4b" class="another_box"></div> 67 </div> 68 <div id="scroll_5" class="scroll_box"> 69 <div id="box5a" class="a_box"></div> 70 <div id="box5b" class="another_box"></div> 71 </div> 72 <div id="scroll_6" class="scroll_box"> 73 <div id="box6a" class="a_box"></div> 74 <div id="box6b" class="another_box"></div> 75 </div> 76 <div id="scroll_7" class="scroll_box"> 77 <div id="box7a" class="a_box"></div> 78 <div id="box7b" class="another_box"></div> 79 </div> 80 <div id="scroll_8" class="scroll_box"> 81 <div id="box8a" class="a_box"></div> 82 <div id="box8b" class="another_box"></div> 83 </div> 84 <div id="scroll_9" class="scroll_box"> 85 <div id="box9a" class="a_box"></div> 86 <div id="box9b" class="another_box"></div> 87 </div> 88 <div id="scroll_10" class="scroll_box"> 89 <div id="box10a" class="a_box"></div> 90 <div id="box10b" class="another_box"></div> 91 </div> 92 <script> 93 function doTest() { 94 if (document.location.search != '?ref') { 95 document.getElementById("box1b").scrollIntoView({block: "end"}); 96 document.getElementById("box2b").scrollIntoView({block: "end"}); 97 document.getElementById("box3b").scrollIntoView({block: "end", behavior: "instant"}); 98 document.getElementById("box4b").scrollIntoView({block: "end", behavior: "instant"}); 99 document.getElementById("box5b").scrollIntoView({block: "end", behavior: "instant"}); 100 document.getElementById("box6b").scrollIntoView({block: "end", behavior: "auto"}); 101 document.getElementById("box7b").scrollIntoView({block: "end", behavior: "auto"}); 102 document.getElementById("box8b").scrollIntoView(false); 103 document.getElementById("box9b").scrollIntoView(false); 104 105 // Scroll_10 is a control, expected to scroll smoothly 106 document.getElementById("box10b").scrollIntoView({block: "end", behavior: "smooth"}); 107 108 // Interrupt any smooth scrolling 109 for (var i=1; i <= 10; i++) { 110 document.getElementById("scroll_" + i).scrollLeft 111 = document.getElementById("scroll_" + i).scrollLeft; 112 document.getElementById("scroll_" + i).scrollTop 113 = document.getElementById("scroll_" + i).scrollTop; 114 } 115 } else { 116 // Scroll all boxes except box 10 117 for (var i=1; i <= 9; i++) { 118 document.getElementById("box" + i + "b").scrollIntoView({block: "end", behavior: "instant"}); 119 } 120 } 121 document.documentElement.removeAttribute("class"); 122 } 123 124 for (var i=1; i <= 10; i++) { 125 document.getElementById("box" + i + "a") 126 .scrollIntoView({block: "start", behavior: "instant"}); 127 } 128 129 window.addEventListener("MozReftestInvalidate", doTest); 130 </script> 131 </body> 132 </html>