1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html lang="en">
3 <head>
4 <title>CSS Test: CSS background position: animated</title>
5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/position/001.html" type="text/html">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background">
8 <meta content="dom animated" name="flags">
9 <style type="text/css">
10 #test {
11 background: url(support/diamond.png) no-repeat;
12 background-position: 0% 100%;
13 position: relative;
14 height: 20em; width: 20em;
15 margin: 2em;
16 }
17 #ring {
18 position: absolute; left: 0; top: 20em;
19 margin: -20px 0 0 -20px;
20 }
21 #control {
22 border: blue solid;
23 width: 24em;
24 }
25 </style>
26 <script type="text/javascript">
27 var position = 0; /* 0 .. 2*PI */
28 function test() {
29 with (Math) {
30 position += PI / 1000;
31 if (position >= 2 * PI) {
32 position = 0;
33 }
34 document.styleSheets[0].cssRules[0].style.backgroundPosition = (sin(position) + 1) * 50 + '% ' + (cos(position) + 1) * 50 + '%';
35 document.styleSheets[0].cssRules[1].style.left = (sin(position) + 1) * 10 + 'em';
36 document.styleSheets[0].cssRules[1].style.top = (cos(position) + 1) * 10 + 'em';
37 // document.getElementById('status').firstChild.data = document.styleSheets[0].cssRules[0].style.backgroundPosition;
38 }
39 }
40 </script>
41 </head>
42 <body onload="var query = location.search; if (query) { query = query.substring(1, query.length); } else { query = 10 } setInterval(test, query)">
43 <p>There should be a circle with a diamond inside the blue box below.
44 The diamond and the orange circle should appear to be moving in
45 a circle, around a common center point. The radius of motion of the
46 diamond should be slightly shorter than that of the orange circle
47 (measuring the radius to the center of each shape), so that the
48 diamond is always near the side of the circle closer to the center
49 of motion.</p>
50 <div id="control"><div id="test"><img src="support/ring.png" alt="O" id="ring"></div></div>
51 <!-- <p>Position: <span id="status">0% 0%</span></p> -->
52
53
54 </body>
55 </html>