object-fit-dyn-aspect-ratio-002-ref.html (1467B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title>CSS Reftest Reference</title> 10 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 11 <style> 12 div { 13 margin: 1px; 14 background: lime; 15 float: left; 16 } 17 18 .square { 19 width: 24px; 20 height: 24px; 21 } 22 .bigWide { 23 width: 48px; 24 height: 32px; 25 } 26 .bigTall { 27 width: 32px; 28 height: 48px; 29 } 30 .small { 31 width: 8px; 32 height: 8px; 33 } 34 35 br { clear: both; } 36 37 </style> 38 </head> 39 <body> 40 <!-- Note: each inline-style specified width here is just using the final 41 viewBox aspect-ratio (1/2) times the element's specified height. This 42 is how wide the concrete object size[1] should end up, for the 43 testcase's "object-fit:contain" elements. 44 [1] https://drafts.csswg.org/css-images-3/#concrete-object-size --> 45 <div class="square"></div> 46 <div class="square" style="width: 12px"></div> 47 <br> 48 <div class="bigWide"></div> 49 <div class="bigWide" style="width: 16px"></div> 50 <br> 51 <div class="bigTall"></div> 52 <div class="bigTall" style="width: 24px"></div> 53 <br> 54 <div class="small"></div> 55 <div class="small" style="width: 4px"></div> 56 <br> 57 </body> 58 </html>