transition-style-change-event.html (1942B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Container Queries - Style Change Event for transitions</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transitions/#starting"> 5 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#animated-containers"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/cq-testcommon.js"></script> 9 <style> 10 .container { container-type: size } 11 #outer { 12 width: 100px; 13 color: green; 14 } 15 @container (min-width: 200px) { 16 #inner { color: red } 17 } 18 @container (min-width: 400px) { 19 #target { 20 color: green; 21 transition: color 1s step-start; 22 } 23 } 24 </style> 25 <div id="outer" class="container"> 26 <div id="inner" class="container"> 27 <div id="target">Green</div> 28 </div> 29 </div> 30 </div> 31 <script> 32 setup(() => assert_implements_size_container_queries()); 33 34 const t = async_test(""); 35 const event_handler = t.step_func_done((e) => { 36 assert_unreached("Transition event incorrectly triggered: " + e.type); 37 }); 38 for (let event_name of ["transitionrun", 39 "transitionstart", 40 "transitionend", 41 "transitioncancel"]) { 42 target.addEventListener(event_name, event_handler); 43 } 44 45 outer.offsetTop; 46 // #target is green. Making the #outer container 200px will turn #inner and 47 // #target red through inheritance. 48 outer.style.width = "200px"; 49 // Making #inner 400px will make #target green. 50 inner.style.width = "400px"; 51 // Both changes above should happen in one style change event and should not 52 // trigger any transition events. Run two rAFs to make sure any events have 53 // time to trigger. 54 requestAnimationFrame(() => requestAnimationFrame(t.step_func_done(() => { 55 assert_equals(getComputedStyle(inner).color, "rgb(255, 0, 0)", 56 "@container queries supported"); 57 }))); 58 </script>