contain-size-inline-block-003-ref.html (1622B)
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: auto; 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 (i.e. it produces scrollbars of the appropriate size for the 36 amount of overflow). --> 37 <div class="basic"><div class="innerContents">inner</div></div> 38 <br> 39 40 outside before 41 <div class="basic"><div class="innerContents">inner</div></div> 42 outside after 43 <br> 44 45 <div class="basic height-ref"><div class="innerContents">inner</div></div> 46 <br> 47 48 <div class="basic height-ref"><div class="innerContents">inner</div></div> 49 <br> 50 51 <div class="basic width-ref"><div class="innerContents">inner</div></div> 52 <br> 53 54 <div class="basic width-ref"><div class="innerContents">inner</div></div> 55 </body> 56 </html>