scroll-marker-target-before-after.html (2634B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: :target-before and :target-after on ::scroll-marker</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11600"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/css-transitions/support/helper.js"></script> 9 <style> 10 .scroller { 11 width: 600px; 12 height: 300px; 13 overflow: scroll; 14 scroll-marker-group: after; 15 } 16 17 .scroller div { 18 width: 600px; 19 height: 300px; 20 margin-bottom: 20px; 21 background: green; 22 } 23 24 .scroller::scroll-marker-group { 25 border: 3px solid black; 26 padding: 5px; 27 height: 20px; 28 display: block; 29 } 30 31 .scroller div::scroll-marker { 32 content: ""; 33 width: 10px; 34 height: 10px; 35 background-color: blue; 36 border-radius: 100%; 37 display: inline-block; 38 } 39 40 .scroller div::scroll-marker:target-current { 41 background-color: green; 42 } 43 44 .scroller div::scroll-marker:target-before { 45 background-color: red; 46 } 47 48 .scroller div::scroll-marker:target-after { 49 background-color: yellow; 50 } 51 </style> 52 <div class="scroller"> 53 <div></div> 54 <div></div> 55 <div></div> 56 <div></div> 57 <div></div> 58 <div></div> 59 </div> 60 <script> 61 function checkScrollMarkers(markerTargets, targetCurrentIndex) { 62 for (let i = 0; i < markerTargets.length; ++i) { 63 if (i < targetCurrentIndex) { 64 assert_equals(getComputedStyle(markerTargets[i], "::scroll-marker").backgroundColor, "rgb(255, 0, 0)", "::scroll-marker before the :target-current one should be red as :target-before"); 65 } else if (i === targetCurrentIndex) { 66 assert_equals(getComputedStyle(markerTargets[i], "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "the :target-current ::scroll-marker should be green"); 67 } else { 68 assert_equals(getComputedStyle(markerTargets[i], "::scroll-marker").backgroundColor, "rgb(255, 255, 0)", "::scroll-marker before the :target-current one should be yellow as :target-after"); 69 } 70 } 71 } 72 const scroller = document.querySelector(".scroller"); 73 const markerTargets = scroller.querySelectorAll("div"); 74 for (let i = 0; i < markerTargets.length; ++i) { 75 promise_test(async t => { 76 // Make i-th scroll marker :target-current. 77 markerTargets[i].scrollIntoView(); 78 await waitForAnimationFrames(2); 79 // Check the :target-before/:target-after relations on all scroll markers. 80 checkScrollMarkers(markerTargets, i); 81 }, i + "th scroll marker test"); 82 } 83 </script>