1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds and Borders Test: background-size - one <percentage> and one auto keyword 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-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/ref-filled-green-100px-square.htm" rel="match">
9 <meta content="image" name="flags">
10 <meta content="Check if 'background-size' has one percentage and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height 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. Therefore the used height of the background-size in this test should be 100px." name="assert">
11 <style>
12 #ref-overlapped-red {
13 background-color: red;
14 height: 100px;
15 width: 100px;
16 }
17 #test-overlapping-green {
18 background-image: url(support/1x1-green.png);
19 background-repeat: no-repeat;
20 background-size: 50% auto;
21 bottom: 100px;
22 height: 100px;
23 position: relative;
24 width: 200px;
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>