size-change-during-transition-crash.html (830B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <meta charset="utf-8"> 4 <title>Container Queries - Size change during transitions crash</title> 5 <link rel="help" href="https://crbug.com/1451359"> 6 <style> 7 #outer { 8 container-type: inline-size; 9 width: 100px; 10 } 11 #inner { 12 background-color: black; 13 transition: background-color 60s; 14 } 15 #inner.target { 16 background-color: white; 17 } 18 @container (width > 200px) { 19 #inner.target { 20 background-color: lime; 21 } 22 } 23 </style> 24 <p>Pass if no crash.</p> 25 <div id="outer"> 26 <div id="inner">Look at my background</div> 27 </div> 28 <script> 29 inner.offsetTop; 30 inner.className = "target"; 31 requestAnimationFrame(() => { 32 requestAnimationFrame(() => { 33 outer.style.width = "300px"; 34 document.documentElement.removeAttribute("class"); 35 }); 36 }); 37 </script>