animation-fill-outside-range-test.html (3226B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/"> 7 <link rel="match" href="animation-fill-outside-range-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 <meta name="fuzzy" content="maxDifference=0-50; totalPixels=0-300" /> 11 <style> 12 .scroller { 13 height: 200px; 14 width: 500px; 15 overflow: auto; 16 position: absolute; 17 top: 100px; 18 } 19 20 .anim { 21 position: absolute; 22 width: 100px; 23 height: 100px; 24 background: darkred; 25 view-timeline: --view; 26 } 27 .anim.contain { 28 background: green; 29 } 30 .spacer { 31 height: 1000px; 32 } 33 34 .before { 35 top: 450px; 36 } 37 .after { 38 top: 50px; 39 } 40 .contain { 41 top: 250px; 42 } 43 @keyframes opaque-before { 44 0% { opacity: 1; } 45 0.01% { opacity : 0; } 46 100% { opacity : 0; } 47 } 48 @keyframes opaque-after { 49 0% { opacity: 0; } 50 99.9% { opacity : 0; } 51 100% { opacity : 1; } 52 } 53 .indicator { 54 position: fixed; 55 top: 50px; 56 } 57 .contain .indicator { 58 top: 100px; 59 } 60 .contain .indicator:nth-child(2) { 61 left: 200px; 62 } 63 64 .after .indicator { 65 left: 200px; 66 } 67 68 .indicator > div { 69 display: inline-block; 70 width: 25px; 71 height: 25px; 72 position: relative; 73 border-radius: 100%; 74 box-sizing: border-box; 75 border: 2px solid black; 76 padding: 3px; 77 background: lightgray; 78 background-clip: content-box; 79 } 80 81 .indicator > div > div { 82 width: 100%; 83 height: 100%; 84 border-radius: 100%; 85 background: green; 86 opacity: 0; 87 animation-fill-mode: both; 88 animation-timeline: --view; 89 } 90 91 .after .indicator > div > div, 92 .contain .indicator > div > div { 93 animation-name: opaque-after; 94 } 95 .before .indicator > div > div, 96 .contain .indicator:nth-child(2) > div > div { 97 animation-name: opaque-before; 98 } 99 100 .contain .indicator > div > div { 101 animation-range: entry; 102 } 103 104 .contain .indicator:nth-child(2) > div > div { 105 animation-range: exit; 106 } 107 108 </style> 109 </head> 110 <body> 111 <p>All of the activity indicators should be active as the animations should be filling.</p> 112 <div class="scroller"> 113 <div class="anim after"><div class="indicator">After cover phase: <div><div></div></div></div></div> 114 <div class="anim before"><div class="indicator">Before cover phase: <div><div></div></div></div></div> 115 <div class="anim contain"> 116 <div class="indicator entry">After entry phase: <div><div></div></div></div> 117 <div class="indicator exit">Before exit phase: <div><div></div></div></div> 118 </div> 119 <div class="spacer"></div> 120 </div> 121 </body> 122 <script> 123 async function run() { 124 let scroller = document.querySelector('.scroller'); 125 // Scroll such that each animation becomes active. 126 scroller.scrollTo(0, 0); 127 await waitForCompositorReady(); 128 scroller.scrollTo({top: 400}); 129 await waitForNextFrame(); 130 131 // Then scroll between them so that we are before one and after the other. 132 scroller.scrollTo({top: 200}); 133 await waitForNextFrame(); 134 takeScreenshot(); 135 } 136 run(); 137 </script> 138 </html>