1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds and Borders Test: background-size - one auto keyword and one <percentage> values</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-09 -->
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-006-ref.htm" rel="match">
9 <meta content="image" name="flags">
10 <meta content="Check if 'background-size' has one 'auto' and one percentage values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. A percentage is relative to the dimensions of the background positioning area. Therefore the used width of the background-size in this test should be 45px." name="assert">
11 <style>
12 #ref-overlapped-red {
13 background-color: red;
14 height: 45px;
15 width: 45px;
16 }
17 #test-overlapping-green {
18 background-image: url(support/60x60-green.png);
19 background-repeat: no-repeat;
20 background-size: auto 45%;
21 bottom: 45px;
22 height: 100px;
23 position: relative;
24 width: 50px;
25 }
26 </style>
27 </head>
28 <body>
29 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
30 <div id="ref-overlapped-red"></div>
31 <div id="test-overlapping-green"></div>
32
33
34 </body></html>