starting-style-rule-basic.html (2348B)
1 <!DOCTYPE html> 2 <title>CSS Transitions Test: Basic tests for @starting-style</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 { 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 } 16 @starting-style { 17 #target { 18 background-color: black; 19 } 20 } 21 #target.red { 22 background-color: red; 23 } 24 </style> 25 <script> 26 promise_test(async t => { 27 await waitForAnimationFrames(2); 28 assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)", 29 "No transition of color"); 30 assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 128, 128)", 31 "Background transition from @starting-style value black to white"); 32 }, "Triggered transition from first style update"); 33 34 promise_test(async t => { 35 target.style.display = "none"; 36 target.className = "red"; 37 assert_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", 38 "Overridden with red. No transition while display:none"); 39 target.className = ""; 40 assert_equals(getComputedStyle(target).backgroundColor, "rgb(255, 255, 255)", 41 "Removing class while display:none. Still no transition"); 42 await waitForAnimationFrames(2); 43 target.style.display = "block"; 44 await waitForAnimationFrames(2); 45 assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 128, 128)", 46 "Background transition from @starting-style value black to white"); 47 }, "Triggered transition from display:none to display:block"); 48 49 promise_test(async t => { 50 let removed = target; 51 removed.remove(); 52 await waitForAnimationFrames(2); 53 document.body.appendChild(removed); 54 await waitForAnimationFrames(2); 55 assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 128, 128)", 56 "Background transition from @starting-style value black to white"); 57 }, "Triggered transition on DOM insertion"); 58 </script>