1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds and Borders Test: background-size 'auto' 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-14 -->
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-026-ref.htm" rel="match">
9 <meta content="image" name="flags">
10 <meta content="Check if 'background-size' is 'auto' and 'background-repeat' is 'repeat', that the background image is shown at its intrinsic size (98px wide by 99px tall in this test) and repeats in both horizontal and vertical to cover the background painting area (the same as background positioning area in this test)." name="assert">
11 <style>
12 div {
13 background-color: red;
14 background-image: url(support/cat.png); /* 98px wide by 99px tall */
15 background-repeat: repeat; /* default */
16 background-size: auto; /* default */
17 height: 198px;
18 width: 196px;
19
20 /*
21 Background positioning area is 196px wide by 198px tall.
22 So, the image should be repeated twice in horizontal and vertical.
23 */
24 }
25 </style>
26 </head>
27 <body>
28 <p>Test passes if there is 2 rows of 2 cats and if there is <strong>no partially</strong> displayed cat and <strong>no red</strong>.</p>
29 <div></div>
30
31
32 </body></html>