scroll-initial-target-root.tentative.html (1603B)
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 </head> 11 12 <body> 13 <style> 14 .spacer { 15 width: 200vw; 16 height: 200vh; 17 } 18 19 .box { 20 position: absolute; 21 width: 60vw; 22 height: 60vh; 23 } 24 25 .top_left { 26 top: 0px; 27 left: 0px; 28 background-color: red; 29 } 30 31 .center { 32 top: 60vh; 33 left: 60vw; 34 background-color: purple; 35 scroll-initial-target: nearest; 36 } 37 38 .bottom_right { 39 top: 120vh; 40 left: 120vw; 41 background-color: yellow; 42 } 43 </style> 44 <div class="spacer"></div> 45 <div class="top_left box" id="top_left_box"></div> 46 <div class="center box" id="centerbox"></div> 47 <div class="bottom_right box"></div> 48 <script> 49 test((t) => { 50 let scroller = document.scrollingElement; 51 let top_left_box = document.getElementById("top_left_box"); 52 53 const expected_scroll_top = top_left_box.getBoundingClientRect().height; 54 const expected_scroll_left = top_left_box.getBoundingClientRect().width; 55 56 assert_approx_equals(scroller.scrollTop, expected_scroll_top, 1, 57 "scroll-initial-target sets initial vertical scroll position"); 58 assert_approx_equals(scroller.scrollLeft, expected_scroll_left, 1, 59 "scroll-initial-target sets initial horizontal scroll position"); 60 }); 61 </script> 62 </body>