scroll-marker-group-003.html (3403B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: ::scroll-marker-group and ::after invalidation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-pseudo"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 :root { 9 --after-background: red; 10 --scroll-marker-group-background: red; 11 } 12 13 div { 14 scroll-marker-group: after; 15 } 16 17 div>* { 18 background: green; 19 display: flex; 20 height: 20px; 21 width: 100px; 22 } 23 24 div.before::before { 25 background: green; 26 content: ""; 27 display: flex; 28 height: 20px; 29 width: 100px; 30 } 31 32 div.after::after { 33 background: var(--after-background); 34 content: ""; 35 display: flex; 36 height: 20px; 37 width: 100px; 38 } 39 40 div.scroll-marker-group::scroll-marker-group { 41 background: var(--scroll-marker-group-background); 42 display: flex; 43 height: 20px; 44 width: 100px; 45 } 46 </style> 47 <p>Test passes if there is a <strong>filled green rectangle</strong>. 48 <div id="target"> 49 <li></li> 50 <li></li> 51 </div> 52 <script> 53 function assertPseudoElementProperty(originatingElement, pseudoType, width, height, backgroundColor) { 54 const pseudoStyle = getComputedStyle(originatingElement, pseudoType); 55 const pseudoWidth = pseudoStyle.getPropertyValue('width'); 56 const pseudoHeight = pseudoStyle.getPropertyValue('height'); 57 const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color'); 58 assert_equals(width, pseudoWidth, pseudoType + " width should be " + width.toString() + " but was " + pseudoWidth.toString()); 59 assert_equals(height, pseudoHeight, pseudoType + " height should be " + height.toString() + " but was " + pseudoHeight.toString()); 60 assert_equals(backgroundColor, pseudoBackgroundColor, pseudoType + " background should be " + backgroundColor.toString() + " but was " + pseudoBackgroundColor.toString()); 61 } 62 document.documentElement.offsetTop; 63 target.className = "after"; 64 document.documentElement.offsetTop; 65 test(() => { 66 assertPseudoElementProperty(target, "::scroll-marker-group", "auto", "auto", "rgba(0, 0, 0, 0)"); 67 }, "::scroll-marker-group empty"); 68 target.className = "scroll-marker-group"; 69 document.documentElement.offsetTop; 70 test(() => { 71 assertPseudoElementProperty(target, "::scroll-marker-group", "100px", "20px", "rgb(255, 0, 0)"); 72 }, "::scroll-marker-group with red background"); 73 target.className = ""; 74 document.documentElement.offsetTop; 75 test(() => { 76 assertPseudoElementProperty(target, "::scroll-marker-group", "auto", "auto", "rgba(0, 0, 0, 0)"); 77 }, "::scroll-marker-group empty again"); 78 target.className = "after scroll-marker-group before"; 79 document.documentElement.offsetTop; 80 test(() => { 81 assertPseudoElementProperty(target, "::scroll-marker-group", "100px", "20px", "rgb(255, 0, 0)"); 82 }, "::scroll-marker-group with red background again"); 83 document.documentElement.offsetTop; 84 document.documentElement.style.setProperty('--after-background', 'green'); 85 document.documentElement.offsetTop; 86 document.documentElement.style.setProperty('--scroll-marker-group-background', 'green'); 87 document.documentElement.offsetTop; 88 test(() => { 89 assertPseudoElementProperty(target, "::scroll-marker-group", "100px", "20px", "rgb(0, 128, 0)"); 90 }, "::scroll-marker-group with green background"); 91 </script>