animation-trigger-untriggered-animations-exposed.tentative.html (1995B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/web-animations-2#animation-trigger"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 </head> 9 <body> 10 <style> 11 .scroller { 12 overflow-y: scroll; 13 border: solid 1px; 14 place-self: center; 15 height: 300px; 16 width: 200px; 17 } 18 @keyframes slide-in { 19 from { 20 transform: translateX(-50px); 21 } 22 } 23 #subject { 24 height: 100px; 25 width: 100px; 26 background-color: purple; 27 timeline-trigger: --trigger view() contain 0% contain 100%; 28 } 29 .target { 30 height: 100px; 31 width: 100%; 32 background-color: blue; 33 animation: slide-in 3s; 34 color: white; 35 } 36 .space { 37 height: 250px; 38 width: 50%; 39 } 40 41 .active { 42 animation-fill-mode: both; 43 } 44 .idle { 45 animation-fill-mode: none; 46 } 47 48 .valid { 49 animation-trigger: --trigger play-once; 50 } 51 .invalid { 52 animation-trigger: --nonexistent-trigger play-once; 53 } 54 55 </style> 56 <div id="scroller" class="scroller"> 57 <div class="space"></div> 58 <div id="subject"></div> 59 <div class="space"></div> 60 <div id="active_target" class="active valid target">Active</div> 61 <div id="idle_target" class="idle valid target">Idle</div> 62 <div id="invalid_target" class="invalid target">Invalid</div> 63 </div> 64 <script> 65 promise_test(async () => { 66 for (const target of document.querySelectorAll(".target")) { 67 assert_equals(target.getAnimations().length, 1, 68 `animation on ${target.id} is exposed`); 69 } 70 }, "getAnimations includes an untriggered " + 71 "'fill-mode: none' and 'fill-mode: both' animations."); 72 </script> 73 </body> 74 </html>