view-timeline-on-display-none-element.html (1622B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>View timeline on element with display:none</title> 4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> 9 <script src="/scroll-animations/view-timelines/testcommon.js"></script> 10 <script src="/css/css-typed-om/resources/testhelper.js"></script> 11 12 <style> 13 #container { 14 border: 10px solid lightgray; 15 overflow-x: scroll; 16 height: 200px; 17 width: 200px; 18 } 19 #content { 20 display: flex; 21 flex-flow: row nowrap; 22 justify-content: flex-start; 23 width: 1800px; 24 margin: 0; 25 } 26 .spacer { 27 width: 800px; 28 display: inline-block; 29 } 30 #target { 31 background-color: green; 32 height: 100px; 33 width: 100px; 34 display: none; 35 } 36 </style> 37 38 <div id="container"> 39 <div id="content"> 40 <div class="spacer"></div> 41 <div id="target"></div> 42 <div class="spacer"></div> 43 </div> 44 </div> 45 46 <script> 47 promise_test(async t => { 48 const timeline = new ViewTimeline({ subject: target }); 49 const anim = target.animate({ opacity: [0, 0.5] }, { timeline: timeline }); 50 t.add_cleanup(() => { 51 anim.cancel(); 52 }); 53 anim.rangeStart = "1em"; 54 container.scrollLeft = 750; 55 await waitForNextFrame(); 56 assert_equals(getComputedStyle(target).opacity, "1", 57 "Opacity with inactive timeline"); 58 }, "element with display: none should have inactive viewtimeline"); 59 </script>