scroll-marker-15.html (1989B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: scroll tracking for ::scroll-marker with overflow: hidden</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 overflow: hidden; 29 content: ''; 30 background-color: red; 31 display: inline-flex; 32 width: 10px; 33 height: 10px; 34 border-radius: 50%; 35 } 36 37 #scroller div::scroll-marker:target-current { 38 background-color: green; 39 } 40 </style> 41 <div id='scroller'> 42 <div></div> 43 <div id='target'></div> 44 </div> 45 <script> 46 function assertPseudoElementProperty(originatingElement, pseudoType, backgroundColor) { 47 const pseudoStyle = getComputedStyle(originatingElement, pseudoType); 48 const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color'); 49 assert_equals(pseudoBackgroundColor, backgroundColor, pseudoType + 50 " background-color should be " + backgroundColor.toString() + 51 " but was " + pseudoBackgroundColor.toString()); 52 } 53 promise_test(async () => { 54 await waitForAnimationFrames(2); 55 assertPseudoElementProperty(target, "::scroll-marker", "rgb(255, 0, 0)"); 56 }, "::scroll-marker is not activated when its originating element is not scrolled into the view"); 57 promise_test(async () => { 58 scroller.scrollTop = 150; 59 await waitForAnimationFrames(2); 60 assertPseudoElementProperty(target, "::scroll-marker", "rgb(0, 128, 0)"); 61 }, "::scroll-marker is activated when its originating element is scrolled into the view"); 62 </script>