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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transitions Test: Parsing transition-duration</title>
<meta name="assert" content="Test checks that transition-duration values are parsed properly">
<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property">
<link rel="help" title="CSS Values and Units Module Level 3 - 6.2. Times: the ‘<time>’ type and ‘s’, ‘ms’ units" href="http://www.w3.org/TR/css3-values/#time">
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
<meta name="flags" content="dom">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
<script src="./support/helper.js" type="text/javascript"></script>
</head>
<body>
<!-- required by testharnessreport.js -->
<div id="log"></div>
<!-- elements used for testing -->
<div id="container">
<div id="transition"></div>
</div>
<script>
var transition = document.getElementById('transition');
// <time> [, <time>]*
var values = {
// seconds
'10.2s': '10.2s',
'1s': '1s',
'0.1s': '0.1s',
'0.01s': '0.01s',
'0.001s': '0.001s',
'0.009s': '0.009s',
'0s': '0s',
'.0s': '0s',
'0.0s': '0s',
'.3s': '0.3s',
'-5s' : '0s',
// milliseconds
'10200ms': '10.2s',
'1000ms': '1s',
'100ms': '0.1s',
'10ms': '0.01s',
'9ms': '0.009s',
'1ms': '0.001s',
'0ms': '0s',
'-500ms' : '0s',
// combination
'1s, 0.1s, 10ms': '1s, 0.1s, 0.01s',
// invalid
'foobar': '0s'
};
// these tests are supposed to fail and
// possibly make the engine issue a parser warning
var invalidTests = {
'-5s': true,
'-500ms': true,
'foobar': true
};
for (var key in values) {
if (Object.prototype.hasOwnProperty.call(values, key)) {
test(function() {
setStyle('#transition', {
'transition-duration': key
});
var result = computedStyle(transition, 'transition-duration');
assert_equals(result, values[key], "Expected computed value");
}, "parse '" + key + "'");
}
}
</script>
</body>
</html>
|
