transition-style-change-event-002.html (1283B)
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 { 11 container-type: inline-size; 12 } 13 #outer { 14 width: 100px; 15 color: green; 16 } 17 #target { 18 transition: color 100s step-end; 19 } 20 21 @container (min-width: 200px) { 22 #inner { color: red; } 23 } 24 @container (min-width: 200px) { 25 #target { 26 /* This rule exists just to have a container query dependency between 27 target and #inner */ 28 background-color: orange; 29 } 30 } 31 </style> 32 <div id="outer" class="container"> 33 <div id="inner" class="container"> 34 <div id="target">Green</div> 35 </div> 36 </div> 37 <script> 38 setup(() => assert_implements_size_container_queries()); 39 40 test(() => { 41 outer.offsetTop; 42 outer.style.width = "200px"; 43 assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)"); 44 }, "#inner color change to red triggers a step transition starting at green"); 45 </script>