scroll-state-scrolled-multiple-scrollers.html (2992B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrolled) multiple scrollers</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 <script src="/dom/events/scrolling/scroll_support.js"></script> 11 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 12 <style> 13 .scroller { 14 width: 200px; 15 height: 200px; 16 container-type: scroll-state; 17 overflow-y: scroll; 18 } 19 .filler { 20 height: 600px; 21 } 22 .target { 23 --top1: no; 24 --top2: no; 25 --bottom1: no; 26 --bottom2: no; 27 } 28 #target1 { 29 @container scroll-state(scrolled: top) { 30 --top1: yes; 31 } 32 @container scroll-state(scrolled: bottom) { 33 --bottom1: yes; 34 } 35 } 36 #target2 { 37 @container scroll-state(scrolled: top) { 38 --top2: yes; 39 } 40 @container scroll-state(scrolled: bottom) { 41 --bottom2: yes; 42 } 43 } 44 </style> 45 <div id="scroller1" class="scroller"> 46 <div class="filler"> 47 <div id="target1" class="target"></div> 48 </div> 49 </div> 50 <div id="scroller2" class="scroller"> 51 <div class="filler"> 52 <div id="target2" class="target"></div> 53 </div> 54 </div> 55 <script> 56 setup(() => assert_implements_scroll_state_container_queries()); 57 58 function touch_scroll(start_pos, end_pos) { 59 return new test_driver.Actions() 60 .addPointer("TestPointer", "touch") 61 .pointerMove(Math.round(start_pos.x), Math.round(start_pos.y)) 62 .pointerDown() 63 .addTick() 64 .pause(200) 65 .pointerMove(Math.round(end_pos.x), Math.round(end_pos.y)) 66 .addTick() 67 .pointerUp() 68 .send(); 69 } 70 71 promise_test(async t => { 72 let scrollEndPromise1 = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller1); 73 let scrollEndPromise2 = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller2); 74 75 scroller1.addEventListener('scroll', () => { 76 scroller2.scrollTop = 300; 77 scroller2.scrollBy({top: -150, behavior: "smooth"}); 78 }, { once: true }); 79 80 // Scroll element position 81 const start = { 82 x: 100, 83 y: 100, 84 }; 85 const end = { x: 100, y: 0 }; 86 await touch_scroll(start, end); 87 88 await Promise.all([scrollEndPromise1, scrollEndPromise2]); 89 await waitForAnimationFrames(2); 90 91 assert_equals(getComputedStyle(target1).getPropertyValue("--top1"), "no"); 92 assert_equals(getComputedStyle(target1).getPropertyValue("--bottom1"), "yes"); 93 assert_equals(scroller2.scrollTop, 150); 94 assert_equals(getComputedStyle(target2).getPropertyValue("--top2"), "yes"); 95 assert_equals(getComputedStyle(target2).getPropertyValue("--bottom2"), "no"); 96 }, "User scroll caused programmatic relative scroll"); 97 98 </script>