replaced-element-044.html (1362B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS aspect-ratio: replaced element transferring intrinsic sizes</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11236"> 7 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 8 <meta name="assert" content=" 9 The inline size resulting from an intrinsic keyword is transferred 10 to the block axis through aspect ratio. 11 "> 12 13 <style> 14 canvas { aspect-ratio: 1; height: auto; background: cyan; } 15 </style> 16 17 <canvas width="50" height="25" style="width: auto" 18 data-expected-width="50" data-expected-height="50"></canvas> 19 <canvas width="50" height="25" style="width: min-content" 20 data-expected-width="50" data-expected-height="50"></canvas> 21 <canvas width="50" height="25" style="width: fit-content" 22 data-expected-width="50" data-expected-height="50"></canvas> 23 <canvas width="50" height="25" style="width: max-content" 24 data-expected-width="50" data-expected-height="50"></canvas> 25 26 <script src="/resources/testharness.js"></script> 27 <script src="/resources/testharnessreport.js"></script> 28 <script src="/resources/check-layout-th.js"></script> 29 <script> 30 checkLayout("canvas"); 31 </script>