contain-size-inline-block-004-ref.html (1536B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Reftest Reference</title> 6 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 7 <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu"> 8 <style> 9 .basic { 10 display: inline-block; 11 overflow: hidden; 12 position: relative; 13 border: 2px solid green; 14 } 15 .height-ref { 16 height: 60px; 17 } 18 .width-ref { 19 width: 60px; 20 } 21 .innerContents { 22 color: transparent; 23 height: 100px; 24 width: 100px; 25 position: absolute; 26 } 27 </style> 28 </head> 29 <body> 30 <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in 31 the testcase, and we simply use 'position: absolute' on the descendants 32 wherever the testcase has 'contain: size' on the container. This 33 produces an accurate reference rendering, because out-of-flow content 34 doesn't contribute to the container's sizing, but does create scrollable 35 overflow. --> 36 <div class="basic"><div class="innerContents">inner</div></div> 37 <br> 38 39 outside before 40 <div class="basic"><div class="innerContents">inner</div></div> 41 outside after 42 <br> 43 44 <div class="basic height-ref"><div class="innerContents">inner</div></div> 45 <br> 46 47 <div class="basic height-ref"><div class="innerContents">inner</div></div> 48 <br> 49 50 <div class="basic width-ref"><div class="innerContents">inner</div></div> 51 <br> 52 53 <div class="basic width-ref"><div class="innerContents">inner</div></div> 54 </body> 55 </html>