aspect-ratio-1.html (1473B)
1 <!DOCTYPE html> 2 <link rel="help" 3 href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 4 <script src='/resources/testharness.js'></script> 5 <script src='/resources/testharnessreport.js'></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <meta name="assert" 8 content="stretch keyword works in the presence of aspect-ratio"> 9 10 <style> 11 p { 12 margin-bottom: 4px; 13 } 14 15 .grandchild { 16 width: 30px; 17 height: 40px; 18 } 19 </style> 20 21 <body onload="checkLayout('p + div > div')"> 22 23 <p>basic stretch into definite width</p> 24 <div style="width: 100px;"> 25 <div style="outline: 5px solid; aspect-ratio: 2 / 1; width: stretch;" 26 data-expected-height="50"> 27 <div class="grandchild"></div> 28 </div> 29 </div> 30 31 <p>basic stretch into definite height</p> 32 <div style="height: 100px;"> 33 <div style="outline: 5px solid; aspect-ratio: 2 / 1; height: stretch;" 34 data-expected-width="200"> 35 <div class="grandchild"></div> 36 </div> 37 </div> 38 39 <p>indefinite height stretch is ignored</p> 40 <div style="width: 100px;"> 41 <div style="outline: 5px solid; aspect-ratio: 2 / 1; height: stretch;" 42 data-expected-height="50"> 43 <div class="grandchild"></div> 44 </div> 45 </div> 46 47 <p>indefinite min-height stretch is ignored</p> 48 <div style="width: 100px;"> 49 <div style="outline: 5px solid; aspect-ratio: 2 / 1; min-height: stretch;" 50 data-expected-height="50"> 51 <div class="grandchild"></div> 52 </div> 53 </div>