scroll-behavior-6.html (5264B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Testcase for bug 1010538 - Element.ScrollBy and Element.ScrollTo</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 </style> 42 </head> 43 <body> 44 <div id="scroll_1" class="scroll_box"> 45 <div id="box1a" class="a_box"></div> 46 <div id="box1b" class="another_box"></div> 47 </div> 48 <div id="scroll_2" class="scroll_box"> 49 <div id="box2a" class="a_box"></div> 50 <div id="box2b" class="another_box"></div> 51 </div> 52 <div id="scroll_3" class="scroll_box"> 53 <div id="box3a" class="a_box"></div> 54 <div id="box3b" class="another_box"></div> 55 </div> 56 <div id="scroll_4" class="scroll_box"> 57 <div id="box4a" class="a_box"></div> 58 <div id="box4b" class="another_box"></div> 59 </div> 60 <div id="scroll_5" class="scroll_box"> 61 <div id="box5a" class="a_box"></div> 62 <div id="box5b" class="another_box"></div> 63 </div> 64 <div id="scroll_6" class="scroll_box"> 65 <div id="box6a" class="a_box"></div> 66 <div id="box6b" class="another_box"></div> 67 </div> 68 <div id="scroll_7" class="scroll_box"> 69 <div id="box7a" class="a_box"></div> 70 <div id="box7b" class="another_box"></div> 71 </div> 72 <div id="scroll_8" class="scroll_box"> 73 <div id="box8a" class="a_box"></div> 74 <div id="box8b" class="another_box"></div> 75 </div> 76 <div id="scroll_9" class="scroll_box"> 77 <div id="box9a" class="a_box"></div> 78 <div id="box9b" class="another_box"></div> 79 </div> 80 <div id="scroll_10" class="scroll_box"> 81 <div id="box10a" class="a_box"></div> 82 <div id="box10b" class="another_box"></div> 83 </div> 84 <script> 85 function doTest() { 86 if (document.location.search != '?ref') { 87 document.getElementById("scroll_1").scrollTo({left: 0, top: 0}); 88 document.getElementById("scroll_1").scrollBy({left: 5, top: 0}); 89 90 document.getElementById("scroll_2").scrollTo({left: 0, top: 0}); 91 document.getElementById("scroll_2").scrollBy({left: 0, top: 5}); 92 93 document.getElementById("scroll_3").scrollTo({left: 0, top: 0}); 94 document.getElementById("scroll_3").scrollBy({left: 5, top: 5}); 95 96 document.getElementById("scroll_4").scrollTo({left: 0, top: 0}); 97 document.getElementById("scroll_4").scrollBy({left: 5}); 98 document.getElementById("scroll_4").scrollBy({top: 5}); 99 100 document.getElementById("scroll_5").scrollTo({left: 0, top: 0}); 101 document.getElementById("scroll_5").scrollBy({left: 5, top: 5, behavior: "smooth"}); 102 // Expected to NOT interrupt smooth scrolling 103 document.getElementById("scroll_5").scrollBy({}); 104 105 document.getElementById("scroll_6").scrollTo({left: 0, top: 0}); 106 document.getElementById("scroll_6").scrollBy({left: 5, behavior: "smooth"}); 107 // Expected to interrupt smooth scrolling and use the current position 108 // As the default for the axis that are not specified in the target 109 document.getElementById("scroll_6").scrollBy({top: 5, behavior: "smooth"}); 110 111 document.getElementById("scroll_7").scrollTo(0, 0); 112 document.getElementById("scroll_7").scrollBy(5, 0); 113 114 document.getElementById("scroll_8").scrollTo(0, 0); 115 document.getElementById("scroll_8").scrollBy(0, 5); 116 117 document.getElementById("scroll_9").scrollTo(0, 0); 118 document.getElementById("scroll_9").scrollBy(5, 5); 119 120 document.getElementById("scroll_10").scrollTo(0, 0); 121 document.getElementById("scroll_10").scrollBy({left: 5, top: 5, behavior: "smooth"}); 122 // Expected to NOT interrupt smooth scrolling 123 document.getElementById("scroll_10").scrollBy(0, 0); 124 } else { 125 document.getElementById("scroll_1").scrollTo({left: 5, top: 0}); 126 document.getElementById("scroll_2").scrollTo({left: 0, top: 5}); 127 document.getElementById("scroll_3").scrollTo({left: 5, top: 5}); 128 document.getElementById("scroll_4").scrollTo({left: 5, top: 5}); 129 document.getElementById("scroll_5").scrollTo({left: 5, top: 5}); 130 document.getElementById("scroll_6").scrollTo(0, 5); 131 document.getElementById("scroll_7").scrollTo(5, 0); 132 document.getElementById("scroll_8").scrollTo(0, 5); 133 document.getElementById("scroll_9").scrollTo(5, 5); 134 document.getElementById("scroll_10").scrollTo(5, 5); 135 } 136 137 // Allow smooth scrolling to complete before testing result 138 setTimeout(function() { 139 document.documentElement.removeAttribute("class"); 140 }, 500); 141 } 142 143 window.addEventListener("MozReftestInvalidate", doTest); 144 </script> 145 </body> 146 </html>