snap-events-with-pseudo-target.tentative.html (2820B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> CSS Scroll Snap 2 Test: Snap Events with pseudo-element targets.</title> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="/css/css-scroll-snap/snap-events/resources/common.js"></script> 13 <script src="/css/css-scroll-snap/snap-events/resources/user-scroll-common.js"></script> 14 <script src="/dom/events/scrolling/scroll_support.js"></script> 15 </head> 16 <body> 17 <style> 18 .scroller { 19 overflow: scroll; 20 width: 200px; 21 height: 200px; 22 border: solid 1px black; 23 scroll-snap-type: y mandatory; 24 position: absolute; 25 resize: both; 26 } 27 .space { 28 height: 300vh; 29 width: 300vw; 30 position: absolute; 31 } 32 .scroller::before, .scroller::after { 33 scroll-snap-align: start; 34 height: 50px; 35 width: 50px; 36 color: white; 37 display: block; 38 } 39 .scroller::before { 40 content: "before"; 41 background-color: blue; 42 } 43 .scroller::after { 44 content: "after"; 45 background-color: orange; 46 margin-top: 100px; 47 } 48 </style> 49 <div class="scroller" id="scroller"> 50 <div class="space"></div> 51 </div> 52 53 <script> 54 const start_pos = { 55 x: scroller.clientWidth / 2, 56 y: scroller.clientHeight / 2, 57 }; 58 const end_pos = { x: scroller.clientWidth / 2, y: 0 }; 59 // The top of the ::after pseudo element is the sum of the 60 // ::before pseudo-element's height (50) and the ::after 61 // pseudo-element's margin-top (100). 62 const after_pseudo_element_top = 50 + 100; 63 const test_data = { 64 scroller: scroller, 65 scrolling_function: async () => { 66 await snap_event_touch_scroll_helper(start_pos, end_pos); 67 }, 68 expected_snap_targets: { block: scroller, inline: null }, 69 expected_scroll_offsets: { 70 x: 0, 71 y: after_pseudo_element_top, 72 } 73 }; 74 75 promise_test(async (t) => { 76 await test_scrollsnapchange(t, test_data); 77 }, "snapTarget for scrollsnapchange is the owning element when a snap area " + 78 "belongs to a pseudo-element"); 79 80 promise_test(async (t) => { 81 await test_snap_event(t, test_data, "scrollsnapchanging"); 82 }, "snapTarget for scrollsnapchanging is the owning element when a snap area " + 83 "belongs to a pseudo-element"); 84 </script> 85 </body> 86 </html>