contain-size-block-003-ref.html (2485B)
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: auto; 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 (i.e. it produces scrollbars of the appropriate size for the 52 amount of overflow). --> 53 <div class="basic"><div class="innerContents">inner</div></div> 54 <br> 55 56 <div class="basic height-ref"><div class="innerContents">inner</div></div> 57 <br> 58 59 <div class="basic height-ref"><div class="innerContents">inner</div></div> 60 <br> 61 62 <div class="basic width-ref"><div class="innerContents">inner</div></div> 63 <br> 64 65 <div class="basic width-ref"><div class="innerContents">inner</div></div> 66 <br> 67 68 <div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div> 69 <br> 70 71 <div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div> 72 <br> 73 74 <div class="flexBaselineCheck"> 75 outside before 76 <div class="basic"> 77 <!-- We use the out-of-flow "innerContents" to create the correct 78 amount of scrollable overflow to match the testcase, and we 79 use the smaller in-flow "zeroHeightContents" to provide a 80 baseline that we can use to verify the testcase's baseline 81 alignment position. --> 82 <div class="innerContents">inner</div> 83 <div class="zeroHeightContents">i</div> 84 </div> 85 outside after 86 </div> 87 </body> 88 </html>