scroll-timeline-nearest-dirty.html (1179B)
1 <!DOCTYPE html> 2 <title>Unrelated style mutation does not affect anonymous timeline</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> 7 <script src="/css/css-animations/support/testcommon.js"></script> 8 <script src="support/testcommon.js"></script> 9 <style> 10 @keyframes anim { 11 from { z-index: 100; } 12 to { z-index: 100; } 13 } 14 #scroller { 15 overflow: auto; 16 width: 100px; 17 height: 100px; 18 } 19 #element { 20 animation: anim forwards; 21 animation-timeline: scroll(); 22 } 23 #spacer { 24 height: 200px; 25 } 26 </style> 27 <div id=scroller> 28 <div id=element></div> 29 <div id=spacer></div> 30 </div> 31 32 <script> 33 setup(assert_implements_animation_timeline); 34 35 promise_test(async () => { 36 await waitForCSSScrollTimelineStyle(); 37 assert_equals(getComputedStyle(element).zIndex, '100'); 38 // Unrelated style mutation does not change the effect value: 39 element.style.color = 'green'; 40 assert_equals(getComputedStyle(element).zIndex, '100'); 41 }); 42 </script>