display-none-to-display-block.html (999B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 4 <link rel="help" href="https://drafts.csswg.org/css-display-4/#display-animation"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6429"> 6 <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> 7 <style> 8 @keyframes display-animation { 9 0% { display: none; } 10 100% { display: block; } 11 } 12 #target { 13 display: none; 14 width: 100px; 15 height: 100px; 16 background-color: green; 17 } 18 #target.animate { 19 animation: display-animation 1s; 20 display: block; 21 } 22 </style> 23 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 24 <div id="target"></div> 25 <script src="/css/css-animations/support/testcommon.js"></script> 26 <script> 27 onload = async () => { 28 await waitForAnimationFrames(1); 29 target.classList.add("animate"); 30 await waitForAnimationFrames(2); 31 document.documentElement.classList.remove("reftest-wait"); 32 }; 33 </script> 34 </html>