keyword-sizes-for-intrinsic-contributions-002.html (2497B)
1 <!DOCTYPE html> 2 <title>Keyword sizes for intrinsic contributions</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#sizing-values"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12333"> 7 <link rel="help" href="https://github.com/servo/servo/issues/37478"> 8 <meta assert="Intrinsic keywords for min/max block sizes on a replaced element affect the inline min/max-content contributions."> 9 10 <style> 11 .test { width: max-content; background: red; border: 5px solid; margin: 5px; } 12 .test.flex-row { display: flex; flex-direction: row; } 13 .test.flex-col { display: flex; flex-direction: column; } 14 .test.grid { display: grid } 15 canvas { display: block; background: green; height: 0px; width: max-content; } 16 </style> 17 <div id="log"></div> 18 19 <div class="test" data-expected-width="60" data-expected-height="60"> 20 <canvas width="50" height="50" style="height: 0px; min-height: max-content"></canvas> 21 </div> 22 <div class="test" data-expected-width="60" data-expected-height="60"> 23 <canvas width="50" height="50" style="height: 100px; max-height: max-content"></canvas> 24 </div> 25 26 <div class="test flex-row" data-expected-width="60" data-expected-height="60"> 27 <canvas width="50" height="50" style="height: 0px; min-height: max-content"></canvas> 28 </div> 29 <div class="test flex-row" data-expected-width="60" data-expected-height="60"> 30 <canvas width="50" height="50" style="height: 100px; max-height: max-content"></canvas> 31 </div> 32 33 <div class="test flex-col" data-expected-width="60" data-expected-height="60"> 34 <canvas width="50" height="50" style="height: 0px; min-height: max-content"></canvas> 35 </div> 36 <div class="test flex-col" data-expected-width="60" data-expected-height="60"> 37 <canvas width="50" height="50" style="height: 100px; max-height: max-content"></canvas> 38 </div> 39 40 <div class="test grid" data-expected-width="60" data-expected-height="60"> 41 <canvas width="50" height="50" style="height: 0px; min-height: max-content"></canvas> 42 </div> 43 <div class="test grid" data-expected-width="60" data-expected-height="60"> 44 <canvas width="50" height="50" style="height: 100px; max-height: max-content"></canvas> 45 </div> 46 47 <script src="/resources/testharness.js"></script> 48 <script src="/resources/testharnessreport.js"></script> 49 <script src="/resources/check-layout-th.js"></script> 50 <script> 51 checkLayout(".test"); 52 </script>