starting-style-name-defining-rules.html (1613B)
1 <!DOCTYPE html> 2 <title>CSS Transitions Test: Name defining @-rules in @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 <style> 7 @starting-style { 8 @keyframes anim { 9 from { color: green; } 10 to { color: red; } 11 } 12 @font-face { 13 font-family: web-font; 14 src: url('/fonts/Ahem.ttf'); 15 } 16 @layer first; 17 } 18 19 @layer second { 20 #target.not_start { 21 background-color: green; 22 } 23 } 24 @layer first { 25 #target.not_start { 26 background-color: red; 27 } 28 } 29 30 #target.not_start { 31 animation-name: anim; 32 animation-duration: 60s; 33 animation-timing-function: step-end; 34 font-family: web-font; 35 font-size: 20px; 36 } 37 38 #target { 39 /* For measuring text width */ 40 display: inline-block; 41 } 42 </style> 43 <span id="target">XXXX</span> 44 <script> 45 test(() => { 46 // Force style update to ensure before-change style is defined. 47 target.offsetTop; 48 target.className = "not_start"; 49 let target_style = getComputedStyle(target); 50 assert_equals(target_style.color, "rgb(0, 128, 0)", "@keyframes applied"); 51 assert_equals(target_style.backgroundColor, "rgb(0, 128, 0)", "@layer applied"); 52 }, "@keyframes and @layer in @starting-style apply"); 53 54 promise_test(async () => { 55 await document.fonts.load("20px/1 web-font"); 56 assert_equals(getComputedStyle(target).width, "80px"); 57 }, "Load @font-face from @starting-style rule"); 58 </script>