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