empty-pseudo-class-with-animation.html (1518B)
1 <!DOCTYPE html> 2 <link rel="author" href="mailto:graouts@apple.com"> 3 <link rel="help" href="https://drafts.csswg.org/css-animations/"> 4 <link rel="help" href="https://drafts.csswg.org/selectors/#the-empty-pseudo"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/css-animations/support/testcommon.js"></script> 8 9 <div class="container"></div> 10 11 <style> 12 13 .container { 14 width: 100px; 15 height: 100px; 16 background-color: rgb(0, 255, 0); 17 } 18 19 .container:empty { 20 background-color: rgb(255, 0, 0); 21 animation: anim 1s; 22 } 23 24 @keyframes anim { } 25 26 </style> 27 28 <script> 29 30 promise_test(async () => { 31 const container = document.querySelector(".container"); 32 const computedStyle = getComputedStyle(container); 33 34 // Check that the :empty rule applies initially. 35 assert_equals(computedStyle.backgroundColor, 'rgb(255, 0, 0)', 36 'The initial background-color matches the value set by the :empty rule.'); 37 38 // Await a couple of frames to let any animation-related style updates happen. 39 await waitForAnimationFrames(2); 40 41 // Append a child which should no longer let the :empty rule apply. 42 container.appendChild(document.createElement("span")); 43 assert_equals(computedStyle.backgroundColor, 'rgb(0, 255, 0)', 44 'The background-color after inserting a child into the container no longer matches the value set by the :empty rule.'); 45 }, 'Setting an "animation" style property on an element does not interfere with the :empty pseudo-class.'); 46 47 </script>