scroll-initial-target-with-user-programmatic-scroll.tentative.html (4184B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title> CSS Scroll Snap 2 Test: scroll-initial-target*</title> 7 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src="/dom/events/scrolling/scroll_support.js"></script> 14 </head> 15 16 <body> 17 <style> 18 .spacer { 19 width: 1000px; 20 height: 1000px; 21 } 22 23 .scroller { 24 width: 300px; 25 height: 300px; 26 border: solid 1px black; 27 overflow: scroll; 28 margin: 0px; 29 position: absolute; 30 } 31 32 .box { 33 position: absolute; 34 width: 200px; 35 height: 200px; 36 } 37 38 .top_left { 39 top: 0px; 40 left: 0px; 41 background-color: red; 42 } 43 44 .center { 45 top: 200px; 46 left: 200px; 47 background-color: purple; 48 scroll-initial-target: nearest; 49 } 50 51 .bottom_right { 52 top: 400px; 53 left: 400px; 54 background-color: yellow; 55 } 56 </style> 57 <div class="scroller" id="user_scroller"> 58 <div class="spacer"></div> 59 <div class="top_left box" id="user_top_left_box"></div> 60 <div class="center box"></div> 61 <div class="bottom_right box"></div> 62 </div> 63 <div class="scroller" id="programmatic_scroller" style="left: 500px"> 64 <div class="spacer"></div> 65 <div class="top_left box" id="programmatic_top_left_box"></div> 66 <div class="center box"></div> 67 <div class="bottom_right box"></div> 68 </div> 69 <script> 70 async function user_scroll(scroller, current_offset, target_offset) { 71 return new test_driver.Actions().scroll(0, 0, 72 target_offset.x - current_offset.x, 73 target_offset.y - current_offset.y, { origin: scroller }) 74 .send(); 75 } 76 77 function programmatic_scroll(scroller, current_offset, target_offset) { 78 scroller.scrollTo(target_offset.x, target_offset.y); 79 } 80 81 async function test_scroll_initial_target(test, scroller, msg, scrolling_function) { 82 await waitForCompositorCommit(); 83 let top_left_box = document.getElementById("user_top_left_box"); 84 85 let expected_scroll_top = top_left_box.getBoundingClientRect().height; 86 let expected_scroll_left = top_left_box.getBoundingClientRect().width; 87 88 assert_approx_equals(scroller.scrollTop, expected_scroll_top, 1, 89 "scroll-initial-target sets initial vertical scroll position"); 90 assert_approx_equals(scroller.scrollLeft, expected_scroll_left, 1, 91 "scroll-initial-target sets initial horizontal scroll position"); 92 93 let scrollend_promise = new Promise((resolve) => { 94 scroller.addEventListener("scrollend", resolve); 95 }); 96 const current_offset = { x: scroller.scrollLeft, y: scroller.scrollTop }; 97 const target_offset = { 98 x: current_offset.x + 100, 99 y: current_offset.y + 100 100 }; 101 await scrolling_function(scroller, current_offset, target_offset); 102 103 // Only wait for scrollend if it is supported. 104 if (window.onscrollend == null || window.onscrollend != undefined) { 105 await scrollend_promise; 106 } 107 assert_approx_equals(scroller.scrollTop, target_offset.y, 1, 108 `${msg} (vertical)`); 109 assert_approx_equals(scroller.scrollLeft, target_offset.x, 1, 110 `${msg} (horizontal)`); 111 } 112 113 promise_test(async (t) => { 114 let scroller = document.getElementById("user_scroller"); 115 const msg = "user scroll is not overriden in by scroll-initial-target"; 116 await test_scroll_initial_target(t, scroller, msg, user_scroll); 117 }, "scroll-initial-target does not override user scroll"); 118 119 promise_test(async (t) => { 120 let scroller = document.getElementById("programmatic_scroller"); 121 const msg = 122 "programmatic scroll is not overriden in by scroll-initial-target"; 123 await test_scroll_initial_target(t, scroller, msg, programmatic_scroll); 124 }, "scroll-initial-target does not override programmatic scroll"); 125 </script> 126 </body>