background-size-aspect-ratio.htm (1921B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Original aspect ratio of image is maintained when 'background-size: auto' and 'background-repeat: round'</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> 7 <meta name="assert" content="If 'background-repeat' is 'round' for one dimension only and if 'background-size' is 'auto' in the other dimension, then the other dimension is sclaed so that the original aspect ratio is restored." /> 8 <style type="text/css"> 9 .reference 10 { 11 width: 1in; 12 height: 1in; 13 background: url("../support/cat.png") no-repeat; 14 background-size: 80px 80px; 15 } 16 .test1 17 { 18 width: 400px; 19 height: 150px; 20 border: thick solid black; 21 background-image: url("../support/cat.png"); 22 background-repeat: round no-repeat; 23 background-size: 83px auto; 24 margin-bottom: 10px; 25 } 26 .test2 27 { 28 width: 150px; 29 height: 400px; 30 border: thick solid black; 31 background-image: url("../support/cat.png"); 32 background-repeat: no-repeat round; 33 background-size: auto 83px; 34 } 35 </style> 36 </head> 37 <body> 38 <p>Test passes if there are five unclipped cats in each of the two boxes, and if all the cats on the page are the same size.</p> 39 <div class="reference"></div> 40 <div class="test1"></div> 41 <div class="test2"></div> 42 </body> 43 </html>