parent-after-change-style-pseudo-element-flicker.html (975B)
1 <!DOCTYPE html> 2 <title>Test that resolving after-change style does not cause flicker in descendant pseudo-elements</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transitions-1/#after-change-style"> 4 <link rel="match" href="parent-after-change-style-pseudo-element-flicker-ref.html"> 5 6 <style> 7 div { 8 position: absolute; 9 width: 100px; 10 height: 100px; 11 } 12 13 @keyframes animation { 14 from, to { margin-left: 0 } 15 } 16 17 @starting-style { 18 .parent:after { } 19 } 20 21 .parent { 22 animation: animation 10000s; 23 } 24 25 .child:after { 26 content: ""; 27 position: absolute; 28 inset: 0; 29 background-color: black; 30 animation: animation 10000s; 31 } 32 33 </style> 34 <body onload="test()"> 35 <div class="parent"> 36 <div class="child"></div> 37 </div> 38 <script> 39 async function test() { 40 await new Promise(requestAnimationFrame); 41 await new Promise(requestAnimationFrame); 42 await new Promise(requestAnimationFrame); 43 await new Promise(requestAnimationFrame); 44 } 45 </script>