1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds and Borders Test: background-size '50px' with background-repeat 'repeat'</title>
5 <link href="http://www.intel.com" rel="author" title="Intel">
6 <link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-15 -->
7 <link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
8 <link href="reference/background-size-028-ref.htm" rel="match">
9
10 <meta content="image" name="flags">
11 <meta 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." name="assert">
12 <style>
13 div {
14 background-color: red;
15 background-image: url(support/100x100-blue-and-orange.png);
16 background-repeat: repeat; /* default */
17 background-size: 50px; /* 50px auto */
18 height: 200px;
19 width: 200px;
20
21 /*
22 Background positioning area is 200px wide by 200px tall.
23 So, the image should be rescaled to 50px by 50px and
24 then be repeated four times in horizontal and vertical directions.
25 */
26 }
27 </style>
28 </head>
29 <body>
30 <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>
31
32 <div></div>
33
34
35 </body></html>