<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transitions Test: Parsing transition-delay</title>
<meta name="assert" content="Test checks that transition-delay values are parsed properly">
<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-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',
'.0s': '0s',
'0.0s': '0s',
'.3s': '0.3s',
'-5s' : '-5s',
// milliseconds
'10200ms': '10.2s',
'1000ms': '1s',
'100ms': '0.1s',
'10ms': '0.01s',
'9ms': '0.009s',
'1ms': '0.001s',
'0ms': '0s',
'-500ms' : '-0.5s',
// 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 = {
'foobar': true
};
for (var key in values) {
if (Object.prototype.hasOwnProperty.call(values, key)) {
test(function() {
setStyle('#transition', {
'transition-delay': key
});
var result = computedStyle(transition, 'transition-delay');
assert_equals(result, values[key], "Expected computed value");
}, "parse '" + key + "'");
}
}
</script>
</body>
</html>
Codebase Browser
chromium