1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds and Borders Test: background-size '100% 100%' with background-clip 'content-box'</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="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
9 <meta content="image" name="flags">
10 <meta content="Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 150px by 150px in this test), and then the background image is clipped to fit into the content area (it is 100px by 100px as background-clip is 'content-box')." name="assert">
11 <style>
12 #ref-overlapped-red {
13 background-color: red;
14 left: 30px;
15 height: 100px;
16 position: relative;
17 top: 30px;
18 width: 100px;
19 }
20 #test-overlapping-cat {
21 background-clip: content-box;
22 background-image: url(support/cat.png); /* 98px wide by 99px tall */
23 background-repeat: no-repeat;
24 background-size: 100% 100%;
25 border: transparent dotted 5px;
26 bottom: 100px;
27 height: 100px;
28 padding: 25px;
29 position: relative;
30 width: 100px;
31
32 /*
33 Background positioning area is 150px wide by 150px tall,
34 and background painting area is 100px wide by 100px tall.
35 So, the image should be scaled to 150px by 150px,
36 and then be clipped to 100px by 100px.
37 */
38 }
39 </style>
40 </head>
41 <body>
42 <p>Test passes if there is a partially displayed cat and <strong>no red</strong>.</p>
43 <div id="ref-overlapped-red"></div>
44 <div id="test-overlapping-cat"></div>
45
46
47 </body></html>