transform-non-invertible-no-transition.html (971B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#matrix-interpolation"> 5 <meta name="assert" content="transform does not transition between non-invertible and invertible matrices"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/css-transitions/support/helper.js"></script> 10 11 <style> 12 13 #target { 14 transition: transform 1s; 15 } 16 17 </style> 18 <div id="target"></div> 19 <script> 20 promise_test(async t => { 21 await waitForAnimationFrames(1); 22 const target = document.getElementById("target"); 23 getComputedStyle(target).transform; // ensure there's a before-change style 24 target.style.transform = "matrix3d(2,0,0,0, 0,2,0,0, 0,0,0,0, 0,0,0,1)"; 25 assert_equals(document.getAnimations().length, 0, "No transitions"); 26 }, "Setting 'transform' to a non-invertible matrix does not yield a CSS Transition"); 27 </script>