Update web-platform-tests to revision 332b7c4e711d75ead4c0dfbf7f6f0b683206756d

This commit is contained in:
WPT Sync Bot 2019-09-25 10:24:05 +00:00
parent 46611b012e
commit b60afa18f5
389 changed files with 7767 additions and 2421 deletions

View file

@ -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

View file

@ -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',
},

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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)");

View file

@ -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>

View file

@ -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)");

View file

@ -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>

View file

@ -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 {

View file

@ -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;");
}

View file

@ -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;");
}

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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>

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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>

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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>

View file

@ -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 {

View file

@ -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>

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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 {

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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 {

View file

@ -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>

View file

@ -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>

View file

@ -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>