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