servo/tests/wpt/css-tests/css-transitions-1_dev/html/transition-duration-001.htm

108 lines
No EOL
3.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Transitions Test: Parsing transition-duration</title>
<meta content="Test checks that transition-duration values are parsed properly" name="assert">
<link href="http://www.w3.org/TR/css3-transitions/#transition-duration-property" rel="help" title="2.2. The 'transition-duration' Property">
<link href="http://www.w3.org/TR/css3-values/#time" rel="help" title="CSS Values and Units Module Level 3 - 6.2. Times: the <time> type and s, ms units">
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
<meta content="dom" name="flags">
<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>
<script id="metadata_cache">/*
{
"parse '10.2s'": {},
"parse '1s'": {},
"parse '0.1s'": {},
"parse '0.01s'": {},
"parse '0.001s'": {},
"parse '0.009s'": {},
"parse '0s'": {},
"parse '.0s'": {},
"parse '0.0s'": {},
"parse '.3s'": {},
"parse '-5s'": { "flags": "invalid" },
"parse '10200ms'": {},
"parse '1000ms'": {},
"parse '100ms'": {},
"parse '10ms'": {},
"parse '9ms'": {},
"parse '1ms'": {},
"parse '0ms'": {},
"parse '-500ms'": { "flags": "invalid" },
"parse '1s, 0.1s, 10ms'": {},
"parse 'foobar'": { "flags": "invalid" }
}
*/</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 + "'",
{
// mark tests that fail as such
flags: invalidTests[key] ? "invalid" : ""
});
}
}
</script>
</body></html>