mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
Update web-platform-tests to revision 332b7c4e711d75ead4c0dfbf7f6f0b683206756d
This commit is contained in:
parent
46611b012e
commit
b60afa18f5
389 changed files with 7767 additions and 2421 deletions
|
@ -162,10 +162,21 @@ test(t => {
|
|||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().easing, 'linear',
|
||||
assert_equals(effect.getComputedTiming().easing, 'ease',
|
||||
'Initial value of easing');
|
||||
}, 'easing of a new transition');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s steps(4)';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().easing, 'steps(4)',
|
||||
'Initial value of easing');
|
||||
}, 'non-default easing of a new transition');
|
||||
|
||||
|
||||
// ------------------------------
|
||||
// endTime
|
||||
|
|
|
@ -45,7 +45,7 @@ test(t => {
|
|||
const expected = [
|
||||
{ offset: 0,
|
||||
computedOffset: 0,
|
||||
easing: 'ease',
|
||||
easing: 'linear',
|
||||
composite: 'auto',
|
||||
left: '0px',
|
||||
},
|
||||
|
@ -80,7 +80,7 @@ test(t => {
|
|||
{
|
||||
offset: 0,
|
||||
computedOffset: 0,
|
||||
easing: 'steps(2)',
|
||||
easing: 'linear',
|
||||
composite: 'auto',
|
||||
left: '0px',
|
||||
},
|
||||
|
@ -96,8 +96,7 @@ test(t => {
|
|||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
|
||||
}
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
|
||||
+ ' transition with a non-default easing function');
|
||||
}, 'KeyframeEffect.getKeyframes() returns frames unaffected by a non-default easing function');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
@ -114,7 +113,7 @@ test(t => {
|
|||
{
|
||||
offset: 0,
|
||||
computedOffset: 0,
|
||||
easing: 'ease',
|
||||
easing: 'linear',
|
||||
composite: 'auto',
|
||||
left: '0px',
|
||||
},
|
||||
|
|
|
@ -14,6 +14,9 @@
|
|||
test_invalid_value("transition-delay", 'infinite');
|
||||
test_invalid_value("transition-delay", '0');
|
||||
test_invalid_value("transition-delay", '500ms 0.5s');
|
||||
|
||||
test_invalid_value("transition-delay", '-3s, initial');
|
||||
test_invalid_value("transition-delay", 'initial, -3s');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -14,6 +14,9 @@
|
|||
test_invalid_value("transition-duration", 'infinite');
|
||||
test_invalid_value("transition-duration", '-500ms');
|
||||
test_invalid_value("transition-duration", '1s 2s');
|
||||
|
||||
test_invalid_value("transition-duration", '1s, initial');
|
||||
test_invalid_value("transition-duration", 'initial, 1s');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions: parsing transition with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property">
|
||||
<meta name="assert" content="transition supports only the grammar '<single-transition> #'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// <single-transition> = [ none | <single-transition-property> ] ||
|
||||
// <time> || <easing-function> || <time>
|
||||
test_invalid_value("transition", "1s 2s 3s");
|
||||
test_invalid_value("transition", "-1s -2s");
|
||||
|
||||
test_invalid_value("transition", "steps(1) steps(2)");
|
||||
|
||||
test_invalid_value("transition", "none top");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -14,6 +14,9 @@
|
|||
test_invalid_value("transition-property", 'one two three');
|
||||
test_invalid_value("transition-property", '1, 2, 3');
|
||||
test_invalid_value("transition-property", 'none, one');
|
||||
|
||||
test_invalid_value("transition-property", 'initial, top');
|
||||
test_invalid_value("transition-property", 'top, initial');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions: transition sets longhands</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property">
|
||||
<meta name="assert" content="transition supports the full grammar '<single-transition> #'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/shorthand-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_shorthand_value('transition', '1s -3s cubic-bezier(0, -2, 1, 3) top', {
|
||||
'transition-property': 'top',
|
||||
'transition-duration': '1s',
|
||||
'transition-timing-function': 'cubic-bezier(0, -2, 1, 3)',
|
||||
'transition-delay': '-3s'
|
||||
});
|
||||
|
||||
test_shorthand_value('transition', '1s -3s, cubic-bezier(0, -2, 1, 3) top', {
|
||||
'transition-property': 'all, top',
|
||||
'transition-duration': '1s, 0s',
|
||||
'transition-timing-function': 'ease, cubic-bezier(0, -2, 1, 3)',
|
||||
'transition-delay': '-3s, 0s'
|
||||
});
|
||||
|
||||
test_shorthand_value('transition', 'cubic-bezier(0, -2, 1, 3) top, 1s -3s', {
|
||||
'transition-property': 'top, all',
|
||||
'transition-duration': '0s, 1s',
|
||||
'transition-timing-function': 'cubic-bezier(0, -2, 1, 3), ease',
|
||||
'transition-delay': '0s, -3s'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -13,6 +13,8 @@
|
|||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("transition-timing-function", "linear");
|
||||
test_computed_value("transition-timing-function", "", "ease");
|
||||
test_computed_value("transition-timing-function", "initial", "ease");
|
||||
|
||||
test_computed_value("transition-timing-function", "ease");
|
||||
test_computed_value("transition-timing-function", "ease-in");
|
||||
|
@ -22,7 +24,8 @@ test_computed_value("transition-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0
|
|||
test_computed_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)");
|
||||
test_computed_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
|
||||
|
||||
|
||||
test_computed_value("transition-timing-function", "step-start", "steps(1, start)");
|
||||
test_computed_value("transition-timing-function", "step-end", "steps(1)");
|
||||
test_computed_value("transition-timing-function", "steps(4, start)");
|
||||
test_computed_value("transition-timing-function", "steps(2, end)", "steps(2)");
|
||||
test_computed_value("transition-timing-function", "steps(2, jump-start)");
|
||||
|
|
|
@ -14,11 +14,25 @@
|
|||
<script>
|
||||
test_invalid_value("transition-timing-function", "auto");
|
||||
test_invalid_value("transition-timing-function", "ease-in ease-out");
|
||||
|
||||
test_invalid_value("transition-timing-function", "cubic-bezier(foobar)");
|
||||
test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3)");
|
||||
test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3, infinite)");
|
||||
test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3, 4, 5)");
|
||||
test_invalid_value("transition-timing-function", "cubic-bezier(-0.1, 0.1, 0.5, 0.9)");
|
||||
test_invalid_value("transition-timing-function", "cubic-bezier(0.5, 0.1, 1.1, 0.9)");
|
||||
|
||||
test_invalid_value("transition-timing-function", "steps(foobar)");
|
||||
test_invalid_value("transition-timing-function", "steps(3.3, end)");
|
||||
test_invalid_value("transition-timing-function", "steps(3, top)");
|
||||
test_invalid_value("transition-timing-function", "steps(-3, top)");
|
||||
test_invalid_value("transition-timing-function", "steps(0, jump-start)");
|
||||
test_invalid_value("transition-timing-function", "steps(0, jump-end)");
|
||||
test_invalid_value("transition-timing-function", "steps(0, jump-both)");
|
||||
test_invalid_value("transition-timing-function", "steps(1, jump-none)");
|
||||
|
||||
test_invalid_value("transition-timing-function", "initial, cubic-bezier(0, -2, 1, 3)");
|
||||
test_invalid_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3), initial");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -22,6 +22,9 @@ test_valid_value("transition-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)
|
|||
test_valid_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)");
|
||||
test_valid_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
|
||||
|
||||
test_valid_value("transition-timing-function", "step-start", "steps(1, start)");
|
||||
test_valid_value("transition-timing-function", "step-end", "steps(1)");
|
||||
test_valid_value("transition-timing-function", "steps(4)");
|
||||
test_valid_value("transition-timing-function", "steps(4, start)");
|
||||
test_valid_value("transition-timing-function", "steps(2, end)", "steps(2)");
|
||||
test_valid_value("transition-timing-function", "steps(2, jump-start)");
|
||||
|
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions: parsing transition with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property">
|
||||
<meta name="assert" content="transition supports the full grammar '<single-transition> #'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// <single-transition> = [ none | <single-transition-property> ] ||
|
||||
// <time> || <easing-function> || <time>
|
||||
test_valid_value("transition", "1s", ["1s", "all 1s ease 0s"]);
|
||||
test_valid_value("transition", "cubic-bezier(0, -2, 1, 3)", ["cubic-bezier(0, -2, 1, 3)", "all 0s cubic-bezier(0, -2, 1, 3) 0s"]);
|
||||
test_valid_value("transition", "1s -3s", ["1s -3s", "all 1s ease -3s"]);
|
||||
test_valid_value("transition", "none", ["none", "none 0s ease 0s"]);
|
||||
test_valid_value("transition", "top", ["top", "top 0s ease 0s"]);
|
||||
|
||||
test_valid_value("transition", "1s -3s cubic-bezier(0, -2, 1, 3) top", "top 1s cubic-bezier(0, -2, 1, 3) -3s");
|
||||
test_valid_value("transition", "1s -3s, cubic-bezier(0, -2, 1, 3) top", ["1s -3s, top cubic-bezier(0, -2, 1, 3)", "all 1s ease -3s, top 0s cubic-bezier(0, -2, 1, 3) 0s"]);
|
||||
|
||||
// TODO: Add test with a single negative time.
|
||||
// TODO: Add test with a single timing-function keyword.
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-delay' property set positive number to delay the execution of transition">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'transition-delay' property set 0 will not delay the execution of transition">
|
||||
<style>
|
||||
div {
|
||||
|
@ -33,7 +32,7 @@
|
|||
test.addEventListener("click", function(evt) {
|
||||
if (clicked == 0) {
|
||||
ref.setAttribute("style", "background-color: green;");
|
||||
setInterval(function() {console.log(clicked);
|
||||
setInterval(function() {
|
||||
if (clicked == 2) {
|
||||
test.setAttribute("style", "background-color: green;");
|
||||
}
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'transition-delay' property set negative number will not delay the execution of transition">
|
||||
<style>
|
||||
div {
|
||||
|
@ -33,7 +32,7 @@
|
|||
test.addEventListener("click", function(evt) {
|
||||
if (clicked == 0) {
|
||||
ref.setAttribute("style", "background-color: green;");
|
||||
setInterval(function() {console.log(clicked);
|
||||
setInterval(function() {
|
||||
if (clicked == 2) {
|
||||
test.setAttribute("style", "background-color: green;");
|
||||
}
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-duration' property set positive number specifies the time that transition from the old value to the new value should take.">
|
||||
<style>
|
||||
div {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the initial value of 'transition-duration' property is '0s' which means the transition is immediate.">
|
||||
<style>
|
||||
div {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="A negative value for 'transition-duration renders the declaration invalid which means the transition is immediate.">
|
||||
<style>
|
||||
div {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-duration' property set 'none' means that no property will be transitioned.">
|
||||
<style>
|
||||
div {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-duration' property set 'all' means that all properties are transitioned.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-duration' property set more than one properties like 'height, width'
|
||||
means only the specified properties will be transitioned.">
|
||||
<style>
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'background-position' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-bottom-color' property animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-bottom-width' property animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-left-color' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-left-width' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-right-color' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-right-width' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-top-color' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-top-width' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'border-spacing' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'bottom' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'clip' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'color' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'font-size' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'font-weight' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'left' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="ahem interact">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that the 'letter-spacing' property is animatable.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'line-height' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'margin-bottom' property is animatable.">
|
||||
<style>
|
||||
#ref {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'margin-left' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'margin-right' property is animatable.">
|
||||
<style>
|
||||
div {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'max-height' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'max-width' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'min-height' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'min-width' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'opacity' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'outline-color' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'outline-width' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'padding-bottom' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'padding-left' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'padding-right' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'padding-top' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'right' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'text-indent' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'text-shadow' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'top' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'vertical-align' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'visibility' property is animatable.">
|
||||
<style>
|
||||
#test {
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="ahem interact">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that the 'word-spacing' property is animatable.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css">
|
||||
<meta name="flags" content="ahem interact">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that the 'z-index' property is animatable.">
|
||||
<style>
|
||||
div {
|
|
@ -1,94 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: Parsing transition-timing-function</title>
|
||||
<meta name="assert" content="Test checks that transition-timing-function values are parsed properly">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function-property">
|
||||
<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');
|
||||
var defaultValue = 'ease';
|
||||
var values = {
|
||||
// keywords
|
||||
'ease': 'ease',
|
||||
'linear': 'linear',
|
||||
'ease-in': 'ease-in',
|
||||
'ease-out': 'ease-out',
|
||||
'ease-in-out': 'ease-in-out',
|
||||
'step-start': 'steps(1, start)',
|
||||
'step-end': 'steps(1)',
|
||||
// cubic bezier
|
||||
'cubic-bezier(0.1, 0.2, 0.3, 0.4)': 'cubic-bezier(0.1, 0.2, 0.3, 0.4)',
|
||||
'cubic-bezier(0.1, -0.2, 0.3, -0.4)': 'cubic-bezier(0.1, -0.2, 0.3, -0.4)',
|
||||
'cubic-bezier(0.1, 1.2, 0.3, 1.4)': 'cubic-bezier(0.1, 1.2, 0.3, 1.4)',
|
||||
// steps
|
||||
'steps(3, start)': 'steps(3, start)',
|
||||
'steps(3, end)': 'steps(3)',
|
||||
'steps(3)': 'steps(3)',
|
||||
'steps(3, jump-start)': 'steps(3, jump-start)',
|
||||
'steps(3, jump-end)': 'steps(3)',
|
||||
'steps(3, jump-both)': 'steps(3, jump-both)',
|
||||
'steps(3, jump-none)': 'steps(3, jump-none)',
|
||||
// invalid
|
||||
'cubic-bezier(foobar)': defaultValue,
|
||||
'steps(foobar)': defaultValue,
|
||||
'steps(3.3, end)': defaultValue,
|
||||
'steps(3, top)': defaultValue,
|
||||
'steps(-3, top)': defaultValue,
|
||||
'steps(0, jump-start)': defaultValue,
|
||||
'steps(0, jump-end)': defaultValue,
|
||||
'steps(0, jump-both)': defaultValue,
|
||||
'steps(1, jump-none)': defaultValue,
|
||||
// Both x values must be in the range [0, 1]
|
||||
'cubic-bezier(-0.1, -0.2, -0.3, -0.4)': defaultValue,
|
||||
'cubic-bezier(1.1, 1.2, 1.3, 1.4)': defaultValue
|
||||
};
|
||||
|
||||
// these tests are supposed to fail and
|
||||
// possibly make the engine issue a parser warning
|
||||
var invalidTests = {
|
||||
'cubic-bezier(foobar)': true,
|
||||
'steps(foobar)': true,
|
||||
'steps(3.3, end)': true,
|
||||
'steps(3, top)': true,
|
||||
'steps(-3, top)': true,
|
||||
// Both x values must be in the range [0, 1]
|
||||
'cubic-bezier(-0.1, -0.2, -0.3, -0.4)': true,
|
||||
'cubic-bezier(1.1, 1.2, 1.3, 1.4)': true
|
||||
};
|
||||
|
||||
for (var key in values) {
|
||||
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
||||
test(function() {
|
||||
setStyle('#transition', {
|
||||
'transition-timing-function': key
|
||||
});
|
||||
var result = computedStyle(transition, 'transition-timing-function');
|
||||
assert_equals(result, values[key], "Expected computed value");
|
||||
}, "parse '" + key + "'",
|
||||
{
|
||||
// mark tests that fail as such
|
||||
flags: invalidTests[key] ? "invalid" : ""
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-timing-function' property set 'ease' is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)">
|
||||
<style>
|
||||
div {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-timing-function' property set 'ease-in' is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)">
|
||||
<style>
|
||||
div {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-timing-function' property set 'ease-in-out' is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)">
|
||||
<style>
|
||||
div {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-timing-function' property set 'ease-out' is equivalent to cubic-bezier(0, 0, 0.58, 1.0)">
|
||||
<style>
|
||||
div {
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-timing-function' property set 'linear' is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)">
|
||||
<style>
|
||||
div {
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-timing-function - 'step-end' equivalent to 'steps(1, end)'</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-timing-function' property set 'step-end' is equivalent to 'steps(1, end)'">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition: width 2s;
|
||||
width: 100px;
|
||||
}
|
||||
#test1 {
|
||||
background-color: blue;
|
||||
transition-timing-function: step-end;
|
||||
}
|
||||
#test2 {
|
||||
background-color: yellow;
|
||||
transition-timing-function: steps(1, end);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
|
||||
<div id="test1"></div>
|
||||
<div id="test2"></div>
|
||||
<button>Start</button>
|
||||
<script>
|
||||
(function() {
|
||||
var button = document.querySelector("button");
|
||||
button.addEventListener("click", function(evt) {
|
||||
var test1 = document.querySelector("#test1"),
|
||||
test2 = document.querySelector("#test2");
|
||||
test1.setAttribute("style", "width: 300px");
|
||||
test2.setAttribute("style", "width: 300px");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-timing-function - 'step-start' equivalent to 'steps(1, start)'</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="The 'transition-timing-function' property set 'step-start' is equivalent to 'steps(1, start)'">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition: width 2s;
|
||||
width: 100px;
|
||||
}
|
||||
#test1 {
|
||||
background-color: blue;
|
||||
transition-timing-function: step-start;
|
||||
}
|
||||
#test2 {
|
||||
background-color: yellow;
|
||||
transition-timing-function: steps(1, start);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
|
||||
<div id="test1"></div>
|
||||
<div id="test2"></div>
|
||||
<button>Start</button>
|
||||
<script>
|
||||
(function() {
|
||||
var button = document.querySelector("button");
|
||||
button.addEventListener("click", function(evt) {
|
||||
var test1 = document.querySelector("#test1"),
|
||||
test2 = document.querySelector("#test2");
|
||||
test1.setAttribute("style", "width: 300px");
|
||||
test2.setAttribute("style", "width: 300px");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-timing-function - ease(initial value)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the initial value of 'transition-timing-function' property is 'ease'.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition-duration: 2s;
|
||||
transition-property: width;
|
||||
width: 100px;
|
||||
}
|
||||
#test1 {
|
||||
background-color: blue;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
#test2 {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
|
||||
<div id="test1"></div>
|
||||
<div id="test2"></div>
|
||||
<button>Start</button>
|
||||
<script>
|
||||
(function() {
|
||||
var button = document.querySelector("button");
|
||||
button.addEventListener("click", function(evt) {
|
||||
var test1 = document.querySelector("#test1"),
|
||||
test2 = document.querySelector("#test2");
|
||||
test1.setAttribute("style", "width: 300px");
|
||||
test2.setAttribute("style", "width: 300px");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the first parameter of 'steps()' function specifies the number of intervals.">
|
||||
<style>
|
||||
div {
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-timing-function - steps(the second parameter default 'end')</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the second parameter of 'steps()' function is default 'end'.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition-duration: 2s;
|
||||
transition-property: width;
|
||||
width: 100px;
|
||||
}
|
||||
#test1 {
|
||||
background-color: blue;
|
||||
transition-timing-function: steps(2);
|
||||
}
|
||||
#test2 {
|
||||
background-color: yellow;
|
||||
transition-timing-function: steps(2, end);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
|
||||
<div id="test1"></div>
|
||||
<div id="test2"></div>
|
||||
<button>Start</button>
|
||||
<script>
|
||||
(function() {
|
||||
var button = document.querySelector("button");
|
||||
button.addEventListener("click", function(evt) {
|
||||
var test1 = document.querySelector("#test1"),
|
||||
test2 = document.querySelector("#test2");
|
||||
test1.setAttribute("style", "width: 300px");
|
||||
test2.setAttribute("style", "width: 300px");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-timing-function - steps(-2)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'steps()' function with negative number is invalid, the transition-timing-function will use 'ease' as default.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition-duration: 2s;
|
||||
transition-property: width;
|
||||
width: 100px;
|
||||
}
|
||||
#test1 {
|
||||
background-color: blue;
|
||||
transition-timing-function: steps(-2);
|
||||
}
|
||||
#test2 {
|
||||
background-color: yellow;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
|
||||
<div id="test1"></div>
|
||||
<div id="test2"></div>
|
||||
<button>Start</button>
|
||||
<script>
|
||||
(function() {
|
||||
var button = document.querySelector("button");
|
||||
button.addEventListener("click", function(evt) {
|
||||
var test1 = document.querySelector("#test1"),
|
||||
test2 = document.querySelector("#test2");
|
||||
test1.setAttribute("style", "width: 300px");
|
||||
test2.setAttribute("style", "width: 300px");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transitions Test: transition-timing-function - steps(0)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
|
||||
<meta name="flags" content="interact">
|
||||
<meta name="assert" content="Test checks that the 'steps()' function with '0' is invalid, the transition-timing-function will use 'ease' as default.">
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
transition-duration: 2s;
|
||||
transition-property: width;
|
||||
width: 100px;
|
||||
}
|
||||
#test1 {
|
||||
background-color: blue;
|
||||
transition-timing-function: steps(0);
|
||||
}
|
||||
#test2 {
|
||||
background-color: yellow;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
|
||||
<div id="test1"></div>
|
||||
<div id="test2"></div>
|
||||
<button>Start</button>
|
||||
<script>
|
||||
(function() {
|
||||
var button = document.querySelector("button");
|
||||
button.addEventListener("click", function(evt) {
|
||||
var test1 = document.querySelector("#test1"),
|
||||
test2 = document.querySelector("#test2");
|
||||
test1.setAttribute("style", "width: 300px");
|
||||
test2.setAttribute("style", "width: 300px");
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
Loading…
Add table
Add a link
Reference in a new issue