1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds and Borders Test: background-size '20% 30%' with background-repeat 'no-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-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="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-031-ref.htm" rel="match">
10
11 <meta content="image" name="flags">
12 <meta content="Check if 'background-size' is '20% 30%' and 'background-repeat' is 'no-repeat round', then the height of the corresponding background image is 50px 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 to 20% (50px in this test) of the background area." name="assert">
13 <style>
14 #ref-overlapped-red {
15 background-color: red;
16 height: 150px;
17 width: 50px;
18 }
19 #test-overlapping-square {
20 background-image: url(support/100x100-blue-and-orange.png);
21 background-repeat: no-repeat round;
22 background-size: 20% 30%;
23 bottom: 150px;
24 height: 150px;
25 position: relative;
26 width: 250px;
27 }
28 /*
29 Background positioning area is 250px wide by 150px tall.
30 The width of the background image is 20% of 250px == 50px.
31 The height is rescaled to 30% of 150px == 45px.
32 Then, because background-repeat is set to no-repeat round, the
33 height is rescaled as following:
34 Newest height = 150px / (round [150px / 45px]);
35 Newest height = 150px / (round [3.33]);
36 Newest height = 150px / (3);
37 Newest height = 50px;
38 */
39 </style>
40 </head>
41 <body>
42 <p>Test passes if there is 1 column of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed square and <strong>no red</strong>.</p>
43
44 <div id="ref-overlapped-red"></div>
45 <div id="test-overlapping-square"></div>
46
47
48 </body></html>