starting-style-rule-none.html (1107B)
1 <!DOCTYPE html> 2 <title>CSS Transitions Test: No transition if @starting-style display value is none</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"></div> 8 <style> 9 #target { 10 transition-property: background-color; 11 transition-duration: 100s; 12 transition-timing-function: steps(2, start); 13 background-color: green; 14 } 15 @starting-style { 16 #target { 17 display: none; 18 background-color: red; 19 } 20 } 21 </style> 22 <script> 23 setup(() => { 24 assert_true(supportsStartingStyle(), "Prerequisite: @starting-style parses"); 25 }); 26 27 promise_test(async t => { 28 await waitForAnimationFrames(2); 29 assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)", 30 "No transition of background-color when @starting-style display is 'none'"); 31 }, "@starting-style with display:none"); 32 </script>