<!doctype html> <meta charset="utf-8"> <title>Container Queries - Style Change Event for transitions</title> <link rel="help" href="https://drafts.csswg.org/css-transitions/#starting"> <link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="support/cq-testcommon.js"></script> <style> .container { container-type: size } #outer { width: 100px; color: green; } @container (min-width: 200px) { #inner { color: red } } @container (min-width: 400px) { #target { color: green; transition: color 1s step-start; } } </style> <div id="outer" class="container"> <div id="inner" class="container"> <div id="target">Green</div> </div> </div> </div> <script> setup(() => assert_implements_container_queries()); const t = async_test(""); const event_handler = t.step_func_done((e) => { assert_unreached("Transition event incorrectly triggered: " + e.type); }); for (let event_name of ["transitionrun", "transitionstart", "transitionend", "transitioncancel"]) { target.addEventListener(event_name, event_handler); } outer.offsetTop; // #target is green. Making the #outer container 200px will turn #inner and // #target red through inheritance. outer.style.width = "200px"; // Making #inner 400px will make #target green. inner.style.width = "400px"; // Both changes above should happen in one style change event and should not // trigger any transition events. Run two rAFs to make sure any events have // time to trigger. requestAnimationFrame(() => requestAnimationFrame(t.step_func_done(() => { assert_equals(getComputedStyle(inner).color, "rgb(255, 0, 0)", "@container queries supported"); }))); </script>