rule-width-interpolation-conversion-001.html (1467B)
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>CSS gap width change computed value to non compatible value mid-animation</title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-width"> 6 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 <style> 11 #target { 12 column-rule-width: 10px; 13 column-rule-style: solid; 14 animation: width-anim 2s linear paused; 15 } 16 @keyframes width-anim { 17 from { column-rule-width: 0px; } 18 } 19 </style> 20 </head> 21 <body> 22 <div id="target">Dynamic Gap-Width Test</div> 23 24 <script> 25 promise_test(async () => { 26 const el = document.getElementById('target'); 27 const anim = el.getAnimations()[0]; 28 29 assert_equals(getComputedStyle(el).columnRuleWidth, '0px'); 30 31 // Jump to 50% of the animation. 32 anim.currentTime = anim.effect.getComputedTiming().duration / 2; 33 34 const intermediate = getComputedStyle(el).columnRuleWidth; 35 assert_equals( 36 intermediate, 37 '5px' // The width at 50% of the animation. 38 ); 39 40 el.style.columnRuleWidth = 'repeat(auto, 10px)'; 41 42 const snapped = getComputedStyle(el).columnRuleWidth; 43 assert_equals( 44 snapped, 45 'repeat(auto, 10px)' 46 ); 47 }); 48 </script> 49 </body> 50 </html>