background-position-201

CSS background position: animated

WeasyPrint

This browser

Flags
animated, dom

Source

 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>