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 'round 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="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-029-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 'round repeat', then the width is first rescaled to from 100px to 52px and then rescaled to 60px due to 'round' and the height of the corresponding background image is rescaled from 100px to 60px (to keep the original image aspect ratio) and then repeated vertically." name="assert">
13 <style>
14 div {
15 background-color: red;
16 background-image: url(support/100x100-blue-and-orange.png);
17 background-repeat: round repeat;
18 background-size: 52px auto;
19 height: 180px;
20 width: 180px;
21
22 /*
23 Background positioning area is 180px wide by 180px tall.
24 The width of the background image is 52px.
25 But, because background-repeat is set to round repeat, the
26 width is rescaled as following:
27 Newest width = 180px / (round [180px / 52px]);
28 Newest width = 180px / (round [3.46]);
29 Newest width = 180px / (3);
30 Newest width = 60px;
31
32 Then the height is rescaled to from 100px to 60px to keep
33 the original aspect ratio.
34 */
35 }
36 </style>
37 </head>
38 <body>
39 <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>
40
41 <div></div>
42
43
44 </body></html>