shadow-root-insertion.html (1276B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transitions: behavior when a shadow root is inserted while transitioning</title> 6 <meta name="assert" content="Checks the addition of a shadow root does not affect an in-flight transition"> 7 <link rel="help" href="https://drafts.csswg.org/css-transitions/"> 8 9 <script src="/resources/testharness.js" type="text/javascript"></script> 10 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 11 <script src="./support/helper.js" type="text/javascript"></script> 12 13 </head> 14 <body> 15 <div id="log"></div> 16 <script> 17 test(t => { 18 // Start a 100s transition 50% of the way through 19 const div = addDiv(t, { 20 style: 'transition: height 100s -50s linear; height: 0px', 21 }); 22 getComputedStyle(div).height; 23 div.style.height = '100px'; 24 assert_equals( 25 getComputedStyle(div).height, 26 '50px', 27 'Transition should be initially 50% complete' 28 ); 29 30 // Add a shadow root 31 div.attachShadow({ mode: "open" }); 32 33 // The transition on the height property should not have been canceled 34 assert_equals( 35 getComputedStyle(div).height, 36 '50px', 37 'Transition should not have been canceled' 38 ); 39 }, 'addition of a shadow root should not cancel in-flight transitions'); 40 </script> 41 42 </body> 43 </html>