scroll-state-snapped-snap-changing.html (2862B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(snapped) matches for scrollchanging</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> 4 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 11 <script src="/css/css-transitions/support/helper.js"></script> 12 <style> 13 html { scroll-snap-type: block mandatory; } 14 body { margin: 0; } 15 #filler { height: 10000px; } 16 .snapped { 17 container-type: scroll-state; 18 scroll-snap-align: start; 19 width: 100px; 20 height: 100px; 21 } 22 @container scroll-state(snapped: block) { 23 span { --snapped: true; } 24 } 25 </style> 26 <div id="snapped1" class="snapped"> 27 <span id="target1"></span> 28 </div> 29 <div id="snapped2" class="snapped"> 30 <span id="target2"></span> 31 </div> 32 <div id="filler"></div> 33 <script> 34 setup(() => assert_implements_scroll_state_container_queries()); 35 36 let changeTarget; 37 let changingTarget; 38 39 window.addEventListener("scrollsnapchange", e => changeTarget = e.snapTargetBlock); 40 window.addEventListener("scrollsnapchanging", e => changingTarget = e.snapTargetBlock); 41 42 promise_test(async t => { 43 await waitForAnimationFrames(2); 44 assert_equals(getComputedStyle(target1).getPropertyValue("--snapped"), "true"); 45 assert_equals(getComputedStyle(target2).getPropertyValue("--snapped"), ""); 46 assert_equals(changeTarget, snapped1, "snapchange has been called for #snapped1"); 47 assert_equals(changingTarget, undefined, "snapchanging has not been called"); 48 assert_equals(window.scrollY, 0); 49 }, "Initially snapped to #snapped1, scroll-state() styling #target1") 50 51 promise_test(async t => { 52 await new test_driver.Actions() 53 .addPointer("pointer1", "touch") 54 .pointerMove(0, 200, {origin: "viewport"}) 55 .pointerDown() 56 .pause(50) 57 .pointerMove(0, 0, {origin: "viewport"}) 58 .pause(50) 59 .send(); 60 await waitForAnimationFrames(2); 61 assert_equals(changeTarget, snapped1, "snapchange has not been called for #snapped2"); 62 assert_equals(changingTarget, snapped2, "snapchanging has been called for #snapped2"); 63 assert_equals(getComputedStyle(target1).getPropertyValue("--snapped"), "", 64 "#target1 not matching scroll-state(snapped) while scrolling"); 65 assert_equals(getComputedStyle(target2).getPropertyValue("--snapped"), "true", 66 "#target2 matching scroll-state(snapped) while scrolling"); 67 }, "scroll-state(snapped) matching #snapped2 while scrolling"); 68 </script>