box-sizing-dimensions.html (1869B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS aspect-ratio: uses content box when "auto" is present and box-sizing dimensions when it is absent</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> 5 <meta name="assert" content='CSS aspect-ratio: uses content box when "auto" is present and box-sizing dimensions when it is absent.'> 6 <style> 7 img { 8 border: 20px solid blue; 9 width: 100px; 10 height: auto; 11 } 12 13 .aspect { 14 aspect-ratio: 2 / 1; 15 } 16 17 .aspect-auto { 18 aspect-ratio: auto 2 / 1; 19 } 20 21 .border-box { 22 box-sizing: border-box; 23 } 24 25 .non-replaced { 26 background: green; 27 border: 20px solid blue; 28 width: 100px; 29 } 30 </style> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/resources/check-layout-th.js"></script> 34 35 <body onload="checkLayout('.item')"> 36 37 <img class="item aspect" src="./support/20x50-green.png" width="20" height="50" data-expected-width="140" data-expected-height="90"> 38 39 <img class="item aspect border-box" src="./support/20x50-green.png" width="20" height="50" data-expected-width="100" data-expected-height="50"> 40 41 <img class="item aspect-auto" src="./support/20x50-green.png" width="20" height="50" data-expected-width="140" data-expected-height="290"> 42 43 <img class="item aspect-auto border-box" src="./support/20x50-green.png" width="20" height="50" data-expected-width="100" data-expected-height="190"> 44 45 <div class="item non-replaced aspect" data-expected-width="140" data-expected-height="90"></div> 46 47 <div class="item non-replaced aspect border-box" data-expected-width="100" data-expected-height="50"></div> 48 49 <div class="item non-replaced aspect-auto" data-expected-width="140" data-expected-height="90"></div> 50 51 <div class="item non-replaced aspect-auto border-box" data-expected-width="100" data-expected-height="70"></div>