starting-style-rule-pseudo-elements.html (2465B)
1 <!DOCTYPE html> 2 <title>CSS Transitions Test: @starting-style for pseudo elements</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/css-transitions/support/helper.js"></script> 7 <div id="target" class="trans"></div> 8 <style> 9 #target::before { 10 transition-property: background-color, color; 11 transition-duration: 100s; 12 transition-timing-function: steps(2, start); 13 color: green; 14 background-color: white; 15 content: ""; 16 } 17 @starting-style { 18 #target::before { 19 background-color: black; 20 } 21 } 22 #target.red::before { 23 background-color: red; 24 } 25 </style> 26 <script> 27 promise_test(async t => { 28 await waitForAnimationFrames(2); 29 assert_equals(getComputedStyle(target, "::before").color, "rgb(0, 128, 0)", 30 "No transition of color"); 31 assert_equals(getComputedStyle(target, "::before").backgroundColor, "rgb(128, 128, 128)", 32 "Background transition from @starting-style value black to white"); 33 }, "Triggered transition from first style update"); 34 35 promise_test(async t => { 36 target.style.display = "none"; 37 target.className = "red"; 38 assert_equals(getComputedStyle(target, "::before").backgroundColor, "rgb(255, 0, 0)", 39 "Overridden with red. No transition while display:none"); 40 target.className = ""; 41 assert_equals(getComputedStyle(target, "::before").backgroundColor, "rgb(255, 255, 255)", 42 "Removing class while display:none. Still no transition"); 43 await waitForAnimationFrames(2); 44 target.style.display = "block"; 45 await waitForAnimationFrames(2); 46 assert_equals(getComputedStyle(target, "::before").backgroundColor, "rgb(128, 128, 128)", 47 "Background transition from @starting-style value black to white"); 48 }, "Triggered transition from display:none to display:block"); 49 50 promise_test(async t => { 51 let removed = target; 52 removed.remove(); 53 await waitForAnimationFrames(2); 54 document.body.appendChild(removed); 55 await waitForAnimationFrames(2); 56 assert_equals(getComputedStyle(target, "::before").backgroundColor, "rgb(128, 128, 128)", 57 "Background transition from @starting-style value black to white"); 58 }, "Triggered transition on DOM insertion"); 59 </script>