1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds and Borders Test: background-size 'auto 61px' with background-repeat 'round'</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="http://www.w3.org/TR/css3-background/#the-background-repeat" rel="help" title="3.4. Tiling Images: the 'background-repeat' property">
9 <link href="reference/background-size-025-ref.htm" rel="match">
10
11 <meta content="image" name="flags">
12 <meta content="Check if 'background-size' is 'auto 61px' and 'background-repeat' is 'round', then the height of the corresponding background image is rounded (70px in this test) so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled (70px in this test) to keep the original aspect ratio." name="assert">
13 <style>
14 div {
15 background-color: red;
16 background-image: url("support/100x100-blue-and-orange.png");
17 background-repeat: round; /* round round */
18 background-size: auto 61px;
19 height: 210px;
20 width: 210px;
21
22 /*
23 Background positioning area is 210px wide by 210px tall.
24 The set background size height is 61px. But because
25 background repeat is round, then the background image
26 is rescaled as follows:
27 Newest height = 210px / (round [210px / 61px]);
28 Newest height = 210px / (round [3.44]);
29 Newest height = 210px / (3);
30 Newest height = 70px;
31
32 The width is rescaled to 70px to keep the original aspect ratio.
33 */
34 }
35 </style>
36 </head>
37 <body>
38 <p>Test passes if there is 3 rows of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p>
39
40 <div></div>
41
42
43 </body></html>