1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds and Borders Test: background-size '25% 25%' 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-17 -->
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 <meta content="image" name="flags">
10
11 <meta content="Check if 'background-size' is '25% 25%' and 'background-repeat' is 'repeat', then the background image is shown with a width and height of 25% (in this test, 50px by 50px), 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: 25% 25%;
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
24 and be repeated four times in horizontal and vertical.
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>