CSSTransition-ready.tentative.html (2478B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>CSSTransition.ready</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/helper.js"></script> 9 <div id="log"></div> 10 <script> 11 'use strict'; 12 13 promise_test(async t => { 14 const div = addDiv(t); 15 16 // Set up pending transition 17 div.style.transform = 'translate(0px)'; 18 getComputedStyle(div).transform; 19 div.style.transition = 'transform 100s'; 20 div.style.transform = 'translate(10px)'; 21 getComputedStyle(div).transform; 22 23 const animation = div.getAnimations()[0]; 24 assert_true(animation.pending, 'Animation is initially pending'); 25 const readyPromise = animation.ready; 26 27 // Now remove transform from transition-property and flush styles 28 div.style.transitionProperty = 'none'; 29 getComputedStyle(div).transitionProperty; 30 31 try { 32 await readyPromise; 33 assert_unreached('ready promise was fulfilled'); 34 } catch (err) { 35 assert_equals(err.name, 'AbortError', 36 'ready promise is rejected with AbortError'); 37 assert_equals(animation.playState, 'idle', 38 'Animation is idle after transition was canceled'); 39 } 40 }, 'ready promise is rejected when a transition is canceled by updating' 41 + ' transition-property'); 42 43 promise_test(async t => { 44 const div = addDiv(t); 45 46 // Set up pending transition 47 div.style.marginLeft = '0px'; 48 getComputedStyle(div).marginLeft; 49 div.style.transition = 'margin-left 100s'; 50 div.style.marginLeft = '100px'; 51 getComputedStyle(div).marginLeft; 52 53 const animation = div.getAnimations()[0]; 54 assert_true(animation.pending, 'Animation is initially pending'); 55 const readyPromise = animation.ready; 56 57 // Update the transition to animate to something not-interpolable 58 div.style.marginLeft = 'auto'; 59 getComputedStyle(div).marginLeft; 60 61 try { 62 await readyPromise; 63 assert_unreached('ready promise was fulfilled'); 64 } catch (err) { 65 assert_equals(err.name, 'AbortError', 66 'ready promise is rejected with AbortError'); 67 assert_equals(animation.playState, 'idle', 68 'Animation is idle after transition was canceled'); 69 } 70 }, 'ready promise is rejected when a transition is canceled by changing' 71 + ' the transition property to something not interpolable'); 72 73 </script>