scroll-initial-target-aligns-with-snap-align.tentative.html (2360B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> CSS Scroll Snap 2 Test: scroll-initial-target*</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="/dom/events/scrolling/scroll_support.js"></script> 10 </head> 11 <body> 12 <style> 13 #space { 14 width: 1000px; 15 height: 1000px; 16 border: solid 1px red; 17 } 18 #scroller { 19 width: 400px; 20 height: 400px; 21 overflow: hidden; 22 border: solid 1px blue; 23 position: absolute; 24 } 25 #target { 26 width: 100px; 27 height: 100px; 28 background-color: pink; 29 scroll-initial-target: nearest; 30 position: absolute; 31 top: 400px; 32 left: 400px; 33 } 34 </style> 35 <div id="scroller"> 36 <div id="space"></div> 37 <div id="target"></div> 38 </div> 39 <script> 40 promise_test(async (t) => { 41 await waitForCompositorCommit(); 42 43 assert_equals(scroller.scrollTop, 400, 44 "scroller is vertically scrolled to target"); 45 assert_equals(scroller.scrollLeft, 400, 46 "scroller is horizontally scrolled to target"); 47 48 target.style.scrollSnapAlign = "center"; 49 await waitForCompositorCommit(); 50 51 assert_equals(scroller.scrollTop, 250, 52 "scroller is vertically aligned to target's center"); 53 assert_equals(scroller.scrollLeft, 250, 54 "scroller is horizontally aligned to target's center"); 55 56 target.style.scrollSnapAlign = "end"; 57 await waitForCompositorCommit(); 58 59 assert_equals(scroller.scrollTop, 100, 60 "scroller is vertically aligned to target's bottom"); 61 assert_equals(scroller.scrollLeft, 100, 62 "scroller is horizontally aligned to target's right"); 63 64 target.style.scrollSnapAlign = "start"; 65 await waitForCompositorCommit(); 66 67 assert_equals(scroller.scrollTop, 400, 68 "scroller is vertically aligned to target's top"); 69 assert_equals(scroller.scrollLeft, 400, 70 "scroller is horizontally aligned to target's left"); 71 }, "scroll-initial-target aligns with scroll-snap-align"); 72 </script> 73 </body> 74 </html>