1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url('resources/Aurora.jpg');
-webkit-background-size: 100% 100%;
font-family: "Lucida Grande";
height: 800px;
}
#features {
position: relative;
width: 400px;
list-style: none;
}
#features > li > .picture {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-in;
-webkit-transform: rotate(-5deg);
opacity: 0.2;
border: 5px solid white;
background-color: gray;
position: absolute;
left: 20%;
width: 380px;
height: 180px;
top: 30px;
}
#features > li.enabled > .picture {
-webkit-transition-timing-function: ease-out;
-webkit-transform:rotate(10deg);
}
#features > li > .description {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 560ms;
-webkit-transition-timing-function: ease-in;
line-height: 1.4em;
position: absolute;
background-color: black;
color: white;
margin: 10px;
padding: 10px;
border: 3px solid white;
-webkit-border-radius: 9px;
font-size: 16px;
left: 20%;
top: 330px;
width: 350px;
}
#features > li.enabled > .description {
-webkit-transform:translate3d(100px,0,0);
}
</style>
<script>
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsText();
}
function init()
{
document.getElementById("item").className = "enabled";
setTimeout(check, 1000);
}
function log(s)
{
var results = document.getElementById('results');
results.innerHTML += s + '<br>';
}
function check()
{
var transform = window.getComputedStyle(document.getElementById('description')).webkitTransform;
if (transform == "matrix(1, 0, 0, 1, 100, 0)")
log('transform="'+transform+'" as expected: PASS');
else
log('transform="'+transform+'", expected "matrix(1, 0, 0, 1, 100, 0)": FAIL');
if (window.testRunner)
testRunner.notifyDone();
}
</script>
</head>
<body onload="init()">
<ul id="features">
<li id="item">
<div class="picture"></div>
<div id="description" class="description">
<b>Spaces</b> lets you group your application windows and banish
clutter completely. Leopard gives you a space for everything and
makes it easy to switch between your spaces. Start by simply
clicking the Spaces icon in the Dock.
</div>
</li>
</ul>
<div id="results"></div>
</body>
</html>
|
