display-in-container.html (1500B)
1 <!doctype html> 2 <title>CSS Container Queries Test: @container queries affecting display type</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> 4 <link rel="match" href="display-in-container-ref.html"> 5 <style> 6 .container, .not_a_container { 7 width: auto; 8 height: 100px; 9 border: 1px solid black; 10 margin-bottom: 10px; 11 } 12 .container { 13 container-type: size; 14 } 15 span { 16 border: 1px solid green; 17 margin: 2px; 18 } 19 20 /* Note: 150px - 2px, since .container has a 1px border */ 21 @container (min-width: 148px) { 22 div { display: flex; } 23 span { flex: 1; } 24 } 25 26 /* Note: 200px - 2px, since .container has a 1px border */ 27 @container (min-width: 198px) { 28 div { display: revert; } 29 span { display: block; } 30 } 31 32 /* Should not apply: */ 33 @container (min-width: 199px) { 34 * { color: red; background-color: red; } 35 } 36 </style> 37 <div style="width:150px"> 38 <div class=container> 39 <main> 40 <div> 41 <span>Test1</span> 42 <span>Test2</span> 43 <span>Test3</span> 44 </div> 45 </main> 46 </div> 47 </div> 48 <div style="width:200px"> 49 <div class=container> 50 <main> 51 <div> 52 <span>Test1</span> 53 <span>Test2</span> 54 <span>Test3</span> 55 </div> 56 </main> 57 </div> 58 </div> 59 <div style="width:150px"> 60 <div class=not_a_container> 61 <main> 62 <div> 63 <span>Test1</span> 64 <span>Test2</span> 65 <span>Test3</span> 66 </div> 67 </main> 68 </div> 69 </div>