1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds and Borders Test: background-size '52px auto' with background-repeat '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-027-ref.htm" rel="match">
10
11 <meta content="image" name="flags">
12 <meta content="Check if 'background-size' is '52px auto' and 'background-repeat' is 'repeat round', then the width of the corresponding background image is 52px and then repeated while the height is first rescaled from 100px to 52px to keep the original image aspect ratio and then to 60px due to 'round'." name="assert">
13 <style>
14 div {
15 background-color: red;
16 background-image: url(support/100x100-blue-and-orange.png);
17 background-repeat: repeat round;
18 background-size: 52px auto;
19 height: 180px;
20 width: 156px;
21
22 /*
23 Background positioning area is 156px wide by 180px tall.
24 The width of the background image is 52px.
25 So, the height is rescaled to 52px to keep the original aspect ratio.
26 Then, because background-repeat is set to repeat round, the
27 height is rescaled as following:
28 Newest height = 180px / (round [180px / 52px]);
29 Newest height = 180px / (round [3.46]);
30 Newest height = 180px / (3);
31 Newest height = 60px;
32 */
33 }
34 </style>
35 </head>
36 <body>
37 <p>Test passes if there is 3 rows of 3 blue-and-orange rectangles and if there is <strong>no partially</strong> displayed rectangles and <strong>no red</strong>.</p>
38
39 <div></div>
40
41
42 </body></html>