transition-behavior-events.html (1668B)
1 <!DOCTYPE html> 2 <title>CSS transition event dispatch depending on transition-behavior</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-transitions-1/#event-transitionevent"> 5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#transition-behavior-property"> 6 <meta name="assert" content=" 7 Even for a property like `width` which has a non-discrete animation type, 8 transitions among non-interpolable values should only start (as observed 9 by the `transitionrun` and `transitionstart` events) if discrete transitions 10 are allowed by `transition-behavior`. 11 "> 12 <style> 13 #width1, #width2 { 14 width: auto; 15 transition: width 3s -1s linear; 16 } 17 </style> 18 <div id="width1" style="transition-behavior: normal"></div> 19 <div id="width2" style="transition-behavior: allow-discrete"></div> 20 <script src="/resources/testharness.js"></script> 21 <script src="/resources/testharnessreport.js"></script> 22 <script> 23 promise_setup(() => new Promise((resolve, reject) => { 24 for (let event of ["transitionrun", "transitionstart"]) { 25 let event_log = []; 26 addEventListener(event, event => { 27 event_log.push(event.target.id); 28 }); 29 promise_test(async function() { 30 assert_array_equals(event_log, ["width2"], "Should only get " + event + " event on #width2"); 31 }, event + " events"); 32 } 33 document.body.offsetLeft; 34 addEventListener("error", event => reject(event.message)); 35 requestAnimationFrame(() => { 36 document.getElementById("width1").style.width = document.getElementById("width2").style.width = "100px"; 37 requestAnimationFrame(resolve); 38 39 }); 40 })); 41 </script>