contain-size-block-004-ref.html (2399B)
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 overflow: hidden; 11 position: relative; 12 border: 2px solid green; 13 } 14 .height-ref { 15 height: 60px; 16 background: lightblue; 17 } 18 .width-ref { 19 width: 60px; 20 } 21 .floatLBasic-ref { 22 float: left; 23 } 24 .floatLWidth-ref { 25 float: left; 26 width: 60px; 27 } 28 .flexBaselineCheck { 29 display: flex; 30 align-items: baseline; 31 } 32 .innerContents { 33 color: transparent; 34 height: 100px; 35 width: 100px; 36 position: absolute; 37 } 38 .zeroHeightContents { 39 color: transparent; 40 height: 0px; 41 width: 0px; 42 } 43 </style> 44 </head> 45 <body> 46 <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in 47 the testcase, and we simply use 'position: absolute' on the descendants 48 wherever the testcase has 'contain: size' on the container. This 49 produces an accurate reference rendering, because out-of-flow content 50 doesn't contribute to the container's sizing, but does create scrollable 51 overflow. --> 52 <div class="basic"><div class="innerContents">inner</div></div> 53 <br> 54 55 <div class="basic height-ref"><div class="innerContents">inner</div></div> 56 <br> 57 58 <div class="basic height-ref"><div class="innerContents">inner</div></div> 59 <br> 60 61 <div class="basic width-ref"><div class="innerContents">inner</div></div> 62 <br> 63 64 <div class="basic width-ref"><div class="innerContents">inner</div></div> 65 <br> 66 67 <div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div> 68 <br> 69 70 <div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div> 71 <br> 72 73 <div class="flexBaselineCheck"> 74 outside before 75 <div class="basic"> 76 <!-- We use the out-of-flow "innerContents" to create the correct 77 amount of scrollable overflow to match the testcase, and we 78 use the smaller in-flow "zeroHeightContents" to provide a 79 baseline that we can use to verify the testcase's baseline 80 alignment position. --> 81 <div class="innerContents">inner</div> 82 <div class="zeroHeightContents">i</div> 83 </div> 84 outside after 85 </div> 86 </body> 87 </html>