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