flex-item-transferred-sizes-padding-border-sizing.html (1494B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers" /> 6 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-width" /> 7 <link rel="help" href="https://drafts.csswg.org/css-sizing/#box-sizing" /> 8 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=243887" /> 9 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> 10 </head> 11 <!-- The box should be a 100px x 100px green square. The initial width should 12 be 90px due to the transferred min-width constraint from the specified 13 min-height. Since box-sizing is border-box, 10px will be removed from 14 the min-height (padding on the top and bottom of the box), and 90px will 15 be used to compute the transferred min-width. 5px of padding will then 16 be added on all sides of the 90px x 90px box to give it a resulting 17 size of 100px x 100px. --> 18 <style> 19 .flexContainer { 20 display: flex; 21 flex-direction: column; 22 float: left; 23 } 24 .item { 25 background: green; 26 padding-left: 25px; 27 padding-right: 25px; 28 box-sizing: border-box; 29 } 30 </style> 31 <body> 32 <p>Test passes if there is a filled green square.</p> 33 <div class="flexContainer"> 34 <div class="item" style="min-height:100px; aspect-ratio: 1/1;"></div> 35 </div> 36 </body> 37 </html>