replaced-element-026.html (1032B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS aspect-ratio: video with aspect-ratio, object-fit and object-position</title> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> 7 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 8 <meta name="assert" content="This test verifies aspect-ratio affects the video element's ratio, but not the video content's ratio."> 9 10 <style> 11 div { 12 display: inline-block; 13 width: 60px; 14 height: 100px; 15 background: green; 16 } 17 video { 18 height: 100px; 19 aspect-ratio: 3/1; 20 object-fit: contain; 21 object-position: top left; 22 } 23 </style> 24 25 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 26 <!-- object-fit:contain should preserve the video poster's ratio, and scale it to 40x100. --> 27 <div></div><video poster="support/20x50-green.png"></video> 28 </html>