background-size-030.html (1693B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Backgrounds and Borders Test: background-size '25% 25%' 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-17 --> 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 <meta name="flags" content="image"> 11 12 <meta name="assert" content="Check if 'background-size' is '25% 25%' and 'background-repeat' is 'repeat', then the background image is shown with a width and height of 25% (in this test, 50px by 50px), and then it is repeated in both directions."> 13 <meta name="fuzzy" content="maxDifference=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: 25% 25%; 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 26 and be repeated four times in horizontal and vertical. 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>