background-size-028.html (1847B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Backgrounds and Borders Test: background-size '50px' with background-repeat 'repeat'</title> 6 <link rel="author" title="Intel" href="http://www.intel.com"> 7 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-15 --> 8 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property"> 9 <link rel="match" href="reference/background-size-028-ref.xht"> 10 11 <meta name="flags" content="image"> 12 <meta name="assert" content="Check if 'background-size' is '50px' and 'background-repeat' is 'repeat', then the background image is shown with a width of 50px and its height is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension, and then it is repeated in both directions."> 13 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-5056"> 14 <style> 15 div { 16 background-color: red; 17 background-image: url(support/100x100-blue-and-orange.png); 18 background-repeat: repeat; /* default */ 19 background-size: 50px; /* 50px auto */ 20 height: 200px; 21 width: 200px; 22 23 /* 24 Background positioning area is 200px wide by 200px tall. 25 So, the image should be rescaled to 50px by 50px and 26 then be repeated four times in horizontal and vertical directions. 27 */ 28 } 29 </style> 30 </head> 31 <body> 32 <p>Test passes if there is 4 rows of 4 blue-and-orange squares and if there is <strong>no partially</strong> displayed square and <strong>no red</strong>.</p> 33 34 <div></div> 35 </body> 36 </html>