scroll-marker-controls-scroll-tracking-001.html (1945B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: scroll tracking for ::scroll-marker </title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/css-transitions/support/helper.js"></script> 8 <style> 9 #scroller { 10 overflow: scroll; 11 scroll-marker-group: before; 12 height: 100px; 13 } 14 15 #scroller::scroll-marker-group { 16 border: 3px solid black; 17 display: flex; 18 width: 100px; 19 height: 20px; 20 } 21 22 #scroller div { 23 width: 100px; 24 height: 100px; 25 } 26 27 #scroller div::scroll-marker { 28 content: ''; 29 background-color: red; 30 display: inline-flex; 31 width: 10px; 32 height: 10px; 33 border-radius: 50%; 34 } 35 36 #scroller div::scroll-marker:target-current { 37 background-color: green; 38 } 39 </style> 40 <div id='scroller'> 41 <div></div> 42 <div id='target'></div> 43 </div> 44 <script> 45 function assertPseudoElementProperty(originatingElement, pseudoType, backgroundColor) { 46 const pseudoStyle = getComputedStyle(originatingElement, pseudoType); 47 const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color'); 48 assert_equals(pseudoBackgroundColor, backgroundColor, pseudoType + 49 " background-color should be " + backgroundColor.toString() + 50 " but was " + pseudoBackgroundColor.toString()); 51 } 52 promise_test(async () => { 53 await waitForAnimationFrames(2); 54 assertPseudoElementProperty(target, "::scroll-marker", "rgb(255, 0, 0)"); 55 }, "::scroll-marker is not activated when its originating element is not scrolled into the view"); 56 promise_test(async () => { 57 scroller.scrollTop = 150; 58 await waitForAnimationFrames(2); 59 assertPseudoElementProperty(target, "::scroll-marker", "rgb(0, 128, 0)"); 60 }, "::scroll-marker is activated when its originating element is scrolled into the view"); 61 </script>