container-queries-block-size.html (843B)
1 <!doctype html> 2 <link rel="help" href="https://drafts.csswg.org/css-viewport/"> 3 <link rel="match" href="reference/container-queries-block-size-ref.html"> 4 <style> 5 .container { 6 container-type: size; 7 width: 100px; 8 height: 200px; 9 writing-mode: vertical-lr; 10 } 11 .child { 12 background-color: green; 13 height: 50px; 14 width: 50px; 15 @container (block-size > 120px) { 16 background-color: red; 17 } 18 } 19 </style> 20 <p>All boxes below should be green.</p> 21 <div class="container"> 22 <div class="child"></div> 23 </div> 24 <div class="container" style="zoom: 2"> 25 <div class="child"></div> 26 </div> 27 <div class="container" style="zoom: 2"> 28 <div class="nested" style="zoom: 2"> 29 <div class="child"></div> 30 </div> 31 </div> 32 <div class="outer" style="zoom: 2"> 33 <div class="container"> 34 <div class="child"></div> 35 </div> 36 </div>