intrinsic-percent-replaced-019.html (2070B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 4 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1748339"> 7 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 8 9 <style> 10 .outer { 11 /* This is just to make the percent values resolve to something 12 predictable, and not browser-viewport-size-dependent. */ 13 width: 500px; 14 } 15 16 .abspos-cb { 17 position: relative; 18 height: 0; 19 width: 0; 20 21 /* This element's padding-box ends up 90px-by-90px, calculated as 9% of the 22 .outer elements's 500px width (9% * 500px = 45px) on all four sides (top, 23 left, right, and bottom). This padding-box serves as the containing block 24 for the abspos flex container, and its size should be considered definite, 25 since the percentage-based padding has a definite percentage basis to 26 resolve against. So, all the percentage heights down the descendant-chain 27 (all the way down to the canvas) should be considered definite as well, and 28 that should contribute to canvas's intrinsic width contribution 29 (transferring via its aspect-ratio) when the flex item resolves its 30 'flex-basis:content'. */ 31 padding: 9%; 32 border: 5px solid green; 33 } 34 35 .flex-container { 36 height: 100%; 37 width: 100%; 38 position: absolute; 39 display: flex; 40 border: 5px solid green; 41 box-sizing: border-box; 42 top: 0; 43 left: 0; 44 } 45 46 .item { 47 border: 5px solid green; 48 height: 100%; 49 /* width unset */ 50 flex-basis: content; 51 box-sizing: border-box; 52 } 53 54 canvas { 55 width: 100%; 56 height: 100%; 57 border: 5px solid green; 58 background: green; 59 box-sizing: border-box; 60 } 61 </style> 62 63 <p>Test passes if there is a filled green square.</p> 64 <div class="outer"> 65 <div class="abspos-cb"> 66 <div class="flex-container"> 67 <div class="item"> 68 <canvas width="10" height="10"></canvas> 69 </div> 70 </div> 71 </div> 72 </div>