content-animation.html (1422B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>content animation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-content/#content-property"> 5 <meta name="test" content="box-shadow supports animation"> 6 <link rel="author" href="mailto:graouts@apple.com" title="Antoine Quint"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 11 .target::after { 12 content: "default"; 13 } 14 15 @keyframes content-animation { 16 from { content: "from" } 17 to { content: "to" } 18 } 19 20 .target.animated::after { 21 animation: content-animation 1s paused linear forwards; 22 } 23 24 </style> 25 <body> 26 <div class="target"></div> 27 <script> 28 29 test(function() { 30 const target = document.querySelector(".target"); 31 const style = getComputedStyle(target, "::after"); 32 33 assert_equals(style.content, '"default"', "Before the animation is applied."); 34 35 target.classList.add("animated"); 36 const animation = target.getAnimations({ subtree: true })[0]; 37 38 const testContentAtTime = (time, expected) => { 39 animation.currentTime = time; 40 assert_equals(style.content, `"${expected}"`, `Check the animated value at time = ${time}ms`); 41 }; 42 43 testContentAtTime(0, 'from'); 44 testContentAtTime(499, 'from'); 45 testContentAtTime(500, 'to'); 46 testContentAtTime(999, 'to'); 47 testContentAtTime(1000, 'to'); 48 }, "The content property can be animated with a discrete animation type."); 49 50 </script> 51 </body>