scroll-initial-target-span.tentative.html (1509B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> CSS Scroll Snap 2 Test: scroll-initial-target with a <span> element</title> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/css-animations/support/testcommon.js"></script> 10 </head> 11 <body> 12 <style> 13 * { 14 margin: 0px; 15 } 16 .space { 17 width: 150%; 18 height: 150%; 19 } 20 .box { 21 height: 50px; 22 width: 50px; 23 border: solid 1px black; 24 background-color: turquoise; 25 } 26 .target { 27 scroll-initial-target: nearest; 28 } 29 .scroller { 30 overflow: scroll; 31 height: 100px; 32 width: 100px; 33 } 34 </style> 35 <div id="scroller" class="scroller"> 36 <div class="space"></div> 37 <span id="target" class="target"> 38 <div class="box"></div> 39 </span> 40 <div class="space"></div> 41 </div> 42 <script> 43 promise_test(async (t) => { 44 await waitForAnimationFrames(2); 45 const scroller = document.getElementById("scroller"); 46 const target = document.getElementById("target"); 47 48 assert_equals(scroller.scrollTop, target.offsetTop, 49 "scroller is initially scrolled to it <span> scroll-initial-target"); 50 }, "<span> scroll-initial-target is honored"); 51 </script> 52 </body> 53 </html>