container-queries.html (969B)
1 <!doctype html> 2 <title>Container queries use CSS pixels (i.e. not multipled by effective zoom)</title> 3 <link rel="author" title="Chris Harelson" href="mailto:chrishtr@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-viewport/"> 5 <link rel="match" href="reference/container-queries-ref.html"> 6 <style> 7 .container { 8 container-type: inline-size; 9 width: 100px; 10 height: 100px; 11 } 12 .child { 13 background-color: green; 14 height: 50px; 15 width: 50px; 16 @container (width > 120px) { 17 background-color: red; 18 } 19 } 20 </style> 21 <p>All boxes below should be green.</p> 22 <div class="container"> 23 <div class="child"></div> 24 </div> 25 <div class="container" style="zoom: 2"> 26 <div class="child"></div> 27 </div> 28 <div class="container" style="zoom: 2"> 29 <div class="nested" style="zoom: 2"> 30 <div class="child"></div> 31 </div> 32 </div> 33 <div class="outer" style="zoom: 2"> 34 <div class="container"> 35 <div class="child"></div> 36 </div> 37 </div>