container-units-sharing-via-rule-node.html (1250B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1835179"> 5 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 6 <link rel="author" href="https://mozilla.org" title="Mozilla"> 7 <link rel="match" href="container-units-sharing-via-rule-node-ref.html"> 8 <style> 9 .test { 10 position: relative; 11 z-index: 0; 12 border: 1px solid; 13 max-width: max-content; 14 } 15 16 .container { 17 position: absolute; 18 container-type: size; 19 inset: 0; 20 } 21 22 .container-content { 23 position: absolute; 24 top: 0; 25 left: 0; 26 width: 100cqi; 27 height: 100cqb; 28 background-color: green; 29 } 30 31 span { 32 display: block; 33 background-color: red; 34 } 35 </style> 36 <div class="test"> 37 <div class="container"> 38 <div class="container-content"></div> 39 </div> 40 <span style="width: 40px; height: 40px"></span> 41 </div> 42 <div class="test"> 43 <div class="container"> 44 <div class="container-content"></div> 45 </div> 46 <span style="width: 100px; height: 100px"></span> 47 </div> 48 <div class="test"> 49 <div class="container"> 50 <div class="container-content"></div> 51 </div> 52 <span style="width: 200px; height: 200px"></span> 53 </div>