diff options
Diffstat (limited to 'tests/wpt/css-tests/css-animations-1_dev/html')
43 files changed, 19 insertions, 4015 deletions
diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-001.htm deleted file mode 100644 index dcd3ef1d49d..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-001.htm +++ /dev/null @@ -1,68 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-delay - negative value</title> -<link href="http://www.nokia.com" rel="author" title="Nokia Inc."> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-timing-function" rel="help"> -<meta content="animated" name="flags"> -<meta content="When animation-delay is set to a negative time offset, - animation will execute as soon as it is applied - but act as if the animation had started the specified - time in the past." name="assert"> -<style> - div { - animation-timing-function: linear; - - height: 100px; - width: 100px; - position: relative; - } - - #test-negative-delay { - animation-name: test-negative-delay; - animation-duration: 10s; - animation-delay: -5s; - - background-color: blue; - } - - #ref-no-delay { - animation-name: ref-no-delay; - animation-duration: 5s; - - background-color: yellow; - } - - @keyframes test-negative-delay { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes ref-no-delay { - from { - left: 75px; - } - to { - left: 0px; - } - } -</style> -</head><body> - <p> - Test passes if there are a filled blue square with 'Filler Text' - and a filled yellow square with 'Filler Text', and if the two squares - start moving together from right to left as soon as the page loads. - </p> - <div id="test-negative-delay">Filler Text</div> - <div id="ref-no-delay">Filler Text</div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-002.htm deleted file mode 100644 index c4b32f38c21..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-002.htm +++ /dev/null @@ -1,43 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-delay - positive value</title> -<link href="http://www.nokia.com" rel="author" title="Nokia Inc."> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<meta content="animated" name="flags"> -<meta content="When animation-delay is set to a positive time offset, - animation will delay execution by the specified offset value." name="assert"> -<style> - div { - animation-name: sample; - animation-duration: 5s; - animation-delay: 5s; - - background-color: blue; - height: 100px; - width: 100px; - position: relative; - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } -</style> -</head><body> - <p> - Test passes if there is a filled blue square with 'Filler Text', - which starts moving from right to left after about 5 seconds - from the time the page is loaded. - </p> - <div>Filler Text</div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-003.htm deleted file mode 100644 index 806242b6e72..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-003.htm +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-delay - 0s</title> -<link href="http://www.nokia.com" rel="author" title="Nokia Inc."> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<meta content="animated" name="flags"> -<meta content="When animation-delay is set to 0s (zero seconds), - animation will execute as soon as it is applied." name="assert"> -<style> - div { - animation-name: sample; - animation-duration: 10s; - animation-delay: 0s; - - background-color: blue; - height: 100px; - width: 100px; - position: relative; - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } -</style> -</head><body> - <p> - Test passes if there is a filled blue square with 'Filler Text', - which starts moving from right to left as soon as the page loads. - </p> - <div>Filler Text</div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-004.htm deleted file mode 100644 index 5a467b87263..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-004.htm +++ /dev/null @@ -1,43 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-delay - ::after</title> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<meta content="animated" name="flags"> -<meta content="Check that animation-delay applies to the ::after pseudo element." name="assert"> -<style> - div::after { - animation-name: sample; - animation-duration: 5s; - animation-delay: 5s; - - background-color: blue; - content: "Filler Text"; - display: block; - height: 100px; - width: 100px; - position: relative; - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } -</style> -</head><body> - <p> - Test passes if there is a filled blue square with 'Filler Text', - which starts moving from right to left after about 5 seconds - from the time the page is loaded. - </p> - <div></div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-005.htm deleted file mode 100644 index 80d8ccd18c7..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-delay-005.htm +++ /dev/null @@ -1,43 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-delay - ::before</title> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-18 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-delay" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<meta content="animated" name="flags"> -<meta content="Check that animation-delay applies to the ::before pseudo element." name="assert"> -<style> - div::before { - animation-name: sample; - animation-duration: 5s; - animation-delay: 5s; - - background-color: blue; - content: "Filler Text"; - display: block; - height: 100px; - width: 100px; - position: relative; - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } -</style> -</head><body> - <p> - Test passes if there is a filled blue square with 'Filler Text', - which starts moving from right to left after about 5 seconds - from the time the page is loaded. - </p> - <div></div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-001.htm deleted file mode 100644 index d7b4d896c16..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-001.htm +++ /dev/null @@ -1,48 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-direction - alternate</title> -<link href="http://www.nokia.com" rel="author" title="Nokia Inc."> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help"> -<meta content="animated" name="flags"> -<meta content="When animation-direction is set to alternate, - animation cycle will iteration that are - odd counts are played in the normal direction, - and the animation cycle iterations that are - even counts are played in a reverse direction." name="assert"> -<style> - div { - animation-name: sample; - animation-duration: 10s; - animation-direction: alternate; - animation-iteration-count: infinite; - - background-color: blue; - height: 100px; - width: 100px; - position: relative; - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } -</style> -</head><body> - <p> - Test passes if there is a filled blue square with 'Filler Text', - which starts moving from right to left on the page load, - and then moves from left to right. This cycle gets repeated. - </p> - <div>Filler Text</div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-002.htm deleted file mode 100644 index 6ed07a53890..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-002.htm +++ /dev/null @@ -1,45 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-direction - normal</title> -<link href="http://www.nokia.com" rel="author" title="Nokia Inc."> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help"> -<meta content="animated" name="flags"> -<meta content="When animation-direction is set to normal, - all iterations of animation are played as specified." name="assert"> -<style> - div { - animation-name: sample; - animation-duration: 10s; - animation-direction: normal; - animation-iteration-count: infinite; - - background-color: blue; - height: 100px; - width: 100px; - position: relative; - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } -</style> -</head><body> - <p> - Test passes if there is a filled color square with 'Filler Text', - which starts moving from right to left, then back to right and moves from - right to left again. This cycle gets repeated. - </p> - <div>Filler Text</div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-003.htm deleted file mode 100644 index d7bdcb887fb..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-003.htm +++ /dev/null @@ -1,47 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-direction - alternate-reverse</title> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help"> -<meta content="animated" name="flags"> -<meta content="When animation-direction is set to alternate-reverse, - the animation cycle iterations that are - odd counts are played in the normal direction, - and the animation cycle iterations that are - even counts are played in a reverse direction." name="assert"> -<style> - div { - animation-name: sample; - animation-duration: 10s; - animation-direction: alternate-reverse; - animation-iteration-count: infinite; - - background-color: blue; - height: 100px; - width: 100px; - position: relative; - } - - @keyframes sample { - from { - left: 0px; - } - to { - left: 150px; - } - } -</style> -</head><body> - <p> - Test passes if there is a filled blue square with 'Filler Text', - which starts moving from right to left on the page load, - and then moves from left to right. This cycle gets repeated. - </p> - <div>Filler Text</div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-004.htm deleted file mode 100644 index 35c84477474..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-004.htm +++ /dev/null @@ -1,45 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-direction - reverse</title> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help"> -<meta content="animated" name="flags"> -<meta content="When animation-direction is set to reverse, - all iterations of the animation are played in the reverse direction - from the way they were specified." name="assert"> -<style> - div { - animation-name: sample; - animation-duration: 10s; - animation-direction: reverse; - animation-iteration-count: infinite; - - background-color: blue; - height: 100px; - width: 100px; - position: relative; - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } -</style> -</head><body> - <p> - Test passes if there is a filled color square with 'Filler Text', - which starts moving from left to right, then back to left again and moves from - left to right. This cycle gets repeated. - </p> - <div>Filler Text</div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-005.htm deleted file mode 100644 index ebb26b5cd8c..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-005.htm +++ /dev/null @@ -1,45 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-direction - ::after</title> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help"> -<meta content="animated" name="flags"> -<meta content="Check that animation-direction applies to the ::after pseudo element." name="assert"> -<style> - div::after { - animation-name: sample; - animation-duration: 10s; - animation-direction: alternate; - animation-iteration-count: infinite; - - background-color: blue; - content: "Filler Text"; - display: block; - height: 100px; - width: 100px; - position: relative; - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } -</style> -</head><body> - <p> - Test passes if there is a filled blue square with 'Filler Text', - which starts moving from right to left on the page load, - and then moves from left to right. This cycle gets repeated. - </p> - <div></div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-006.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-006.htm deleted file mode 100644 index 3f6a47e4a00..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-direction-006.htm +++ /dev/null @@ -1,45 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS Animations Test: animation-direction - ::before</title> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:zhiqiang.zhang@intel.com" rel="reviewer" title="Zhiqiang Zhang"> <!-- 2015-03-24 --> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-direction" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-name" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-duration" rel="help"> -<link href="http://dev.w3.org/csswg/css-animations-1/#animation-iteration-count" rel="help"> -<meta content="animated" name="flags"> -<meta content="Check that animation-direction applies to the ::before pseudo element" name="assert"> -<style> - div::before { - animation-name: sample; - animation-duration: 10s; - animation-direction: alternate; - animation-iteration-count: infinite; - - background-color: blue; - content: "Filler Text"; - display: block; - height: 100px; - width: 100px; - position: relative; - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } -</style> -</head><body> - <p> - Test passes if there is a filled blue square with 'Filler Text', - which starts moving from right to left on the page load, - and then moves from left to right. This cycle gets repeated. - </p> - <div></div> - - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-001.htm deleted file mode 100644 index 43f7d560726..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-001.htm +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-duration value is set blank.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="When animation-duration value is set blank; animation is not visible."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: absolute; - left: 0px; - - -webkit-animation-name: sample; - -webkit-animation-duration: ; - - -moz-animation-name: sample; - -moz-animation-duration: ; - - animation-name: sample; - animation-duration: ; - } - .def { - position: absolute; - background-color: red; - left: 0px; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - z-index: -1; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - Assertion: When animation-duration value is set blank; animation is not visible. - </p> - <p> - <ul> - <li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li> - <li>FAIL if blue box is animated/moved or if red is visible.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - <div class="def"> - Reference - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-002.htm deleted file mode 100644 index 43e21b959d2..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-002.htm +++ /dev/null @@ -1,75 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-duration has a finite value.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - - animation-name: sample; - animation-duration: 10s; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle. - </p> - <ul> - <li>PASS if a blue colored box with text "CSS3 Testing Content" appears below; starts moving from right to left upon page load and lasts for a span of 10seconds</li> - <li>FAIL if the animation does not span for 10seconds.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-003.htm deleted file mode 100644 index 5149398a9d1..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-003.htm +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-duration with negative value.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen)."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: absolute; - left: 0px; - - -webkit-animation-name: sample; - -webkit-animation-duration: -20s; - - -moz-animation-name: sample; - -moz-animation-duration: -20s; - - animation-name: sample; - animation-duration: -20s; - } - .def { - position: absolute; - background-color: red; - left: 0px; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - z-index: -1; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen). - </p> - <ul> - <li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li> - <li>FAIL if any animation is seen with the blue box or if red is visible.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - <div class="def"> - Reference - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-004.htm deleted file mode 100644 index 69d34158a88..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-duration-004.htm +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-duration value set to 0 (zero).</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen)."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: absolute; - left: 0px; - - -webkit-animation-name: sample; - -webkit-animation-duration: 0s; - - -moz-animation-name: sample; - -moz-animation-duration: 0s; - - animation-name: sample; - animation-duration: 0s; - } - .def { - position: absolute; - background-color: red; - left: 0px; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - z-index: -1; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - Assertion: When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen). - </p> - <p> - <ul> - <li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li> - <li>FAIL if blue box is animated/moved or if red is visible.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - <div class="def"> - Reference - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-001.htm deleted file mode 100644 index 03793b0cedc..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-001.htm +++ /dev/null @@ -1,75 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations. animation-iteration-count is not set and testing for default value.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - - animation-name: sample; - animation-duration: 10s; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once. - </p> - <ul> - <li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and box starts to animate/move from right to left ONCE.</li> - <li>FAIL if the box fails to animate to left or repeats animation more than once.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-002.htm deleted file mode 100644 index 69dd86e0b62..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-002.htm +++ /dev/null @@ -1,79 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations. animation-iteration-count set to infinite.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="animation-iteration-count set to infinite causes the animation to repeat forever."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-iteration-count: infinite; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-iteration-count: infinite; - - animation-name: sample; - animation-duration: 10s; - animation-iteration-count: infinite; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: animation-iteration-count set to infinite causes the animation to repeat forever. - </p> - <ul> - <li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and repeatedly moves from right to left. Every time a cycle is finished, the box gets re-positioned to right and continues to move left.</li> - <li>FAIL if the box fails to repeat animation cycles infinitely from right to left</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-003.htm deleted file mode 100644 index 4c14c585344..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-003.htm +++ /dev/null @@ -1,94 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations. animation-iteration-count set to negative value.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: absolute; - left: 0px; - - -webkit-animation-name: sample; - -webkit-animation-iteration-count: -1; - -webkit-animation-duration: 10s; - - -moz-animation-name: sample; - -moz-animation-iteration-count: -1; - -moz-animation-duration: 10s; - - animation-name: sample; - animation-iteration-count: -1; - animation-duration: 10s; - } - .def { - position: absolute; - background-color: red; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - left: 0px; - z-index: -1; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation. - </p> - <ul> - <li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and NO movement/animation is seen. Also, RED color should NOT be seen anywhere on this page.</li> - <li>FAIL if the box animates to left OR if RED color is seen anywhere on this page.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - <div class="def"> - Reference - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-004.htm deleted file mode 100644 index 0638a1c4caf..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-004.htm +++ /dev/null @@ -1,91 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations. animation-iteration-count set to non-integer.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="Setting animation-iteration-count to non-integer leads animation to end part way."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - //padding: 0.2em 1em; - //margin: 6em; - position: relative; - left: 0px; - - -webkit-animation-name: sample; - -webkit-animation-iteration-count: 3.1; - -webkit-animation-duration: 10s; - - -moz-animation-name: sample; - -moz-animation-iteration-count: 3.1; - -moz-animation-duration: 10s; - - animation-name: sample; - animation-iteration-count: 3.1; - animation-duration: 10s; - } - - .def { - background-color: green; - width: 250px; - height: 10px; - position: relative; - left: 0px; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: Setting animation-iteration-count to non-integer leads animation to end part way. - </p> - <ul> - <li>PASS if a blue colored Box with text "CSS3 Testing Content" animates from right to left along the green bar THRICE (for a span of 10 seconds each) and for the FOURTH time animation appears to break in middle and blue box immediately positions itself to left.</li> - <li>FAIL if NO animation is seen OR if animation does not end part-way in its FOURth cycle.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - <div class="def"> - - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-005.htm deleted file mode 100644 index a5b424c0f3e..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-005.htm +++ /dev/null @@ -1,79 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations. animation-iteration-count is set to a finite value.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="When animation-iteration-count is set to a finite value; animation will play for the specified number of times."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-iteration-count: 2; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-iteration-count: 2; - - animation-name: sample; - animation-duration: 10s; - animation-iteration-count: 2; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: When animation-iteration-count is set to a finite integer value; that value is taken as the number of times that the animation has to repeat from beginning to the end. - </p> - <ul> - <li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and box starts to animate/move from right to left twice.</li> - <li>FAIL if the animation is not as expected.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-006.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-006.htm deleted file mode 100644 index b3725e75e08..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-count-006.htm +++ /dev/null @@ -1,93 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations. animation-iteration-count set to zero.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="When animation-iteration-count is set to zero NO animation is seen."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: absolute; - left: 0px; - - -webkit-animation-name: sample; - -webkit-animation-iteration-count: 0; - -webkit-animation-duration: 10s; - - -moz-animation-name: sample; - -moz-animation-iteration-count: 0; - -moz-animation-duration: 10s; - - animation-name: sample; - animation-iteration-count: 0; - animation-duration: 10s; - } - .def { - position: absolute; - background-color: red; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - left: 0px; - z-index: -1; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: When animation-iteration-count is set to zero NO animation is seen. - </p> - <ul> - <li>PASS if a blue colored Box with text "CSS3 Testing Content" appears below and NO movement/animation is seen. Also, RED color should NOT be seen anywhere on this page.</li> - <li>FAIL if the box animates to left OR if RED color is seen anywhere on this page.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - <div class="def"> - Reference - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-event.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-event.htm deleted file mode 100644 index 9c962f925eb..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-iteration-event.htm +++ /dev/null @@ -1,111 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-events"> - <meta name="flags" content="animated"> - <meta name="assert" content='To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.'> - <style type="text/css" media="screen"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - /*Added extra style information --- BEGIN modification*/ - color: Yellow; - font-weight: bolder; - font-size: xx-large; - text-align: center; - vertical-align: middle; - /*Added extra style information --- END modification*/ - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 1em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-iteration-count: 2; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-iteration-count: 2; - - animation-name: sample; - animation-duration: 10s; - animation-iteration-count: 2; - } - /* */ - </style> - <script type="text/javascript"> - /* */ - var box_var; - function init() - { - getvalues(); - } - function getvalues() - { - box_var = document.getElementById("box" ); - box_var.addEventListener("webkitAnimationIteration" , start_f, true); - box_var.addEventListener("animationiteration" , start_f, true); - } - function start_f() - { - /*This line of code has been commented to avoid automated result evaluation. - //document.getElementById(" result" ).innerHTML = "TRUE"; - */ - box_var.innerHTML = "2"; - } - /* */ - </script> - </head> - <body onload="init()"> - <p id="testdetails"> - <p> - Assertion: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one. - </p> - <ul> - <li>PASS if the box moves from Right to Left for a period of 10 seconds. It should contain a digit 1 for first animation. Content of box changes to 2 during second animation. Also the animation should stop after 2 cycles. </li> - <li>FAIL if the output is not as expected. </li> - </ul> - </p> - <div class="abc" id="box"> - 1 - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes.htm deleted file mode 100644 index d42b31235fd..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-keyframes.htm +++ /dev/null @@ -1,93 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : keyframes specified using percentages or from/to keywords on animation time line.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#keyframes"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="To verify that keyframes set using percentages or from/to keywords on animation time line are in effect."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - background-color: blue; - } - 30% { - background-color: green; - } - 65% { - background-color: red; - } - to { - background-color: blue; - } - } - - @-moz-keyframes sample { - from { - background-color: blue; - } - 30% { - background-color: green; - } - 65% { - background-color: red; - } - to { - background-color: blue; - } - } - - @keyframes sample { - from { - background-color: blue; - } - 30% { - background-color: green; - } - 65% { - background-color: red; - } - to { - background-color: blue; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - - animation-name: sample; - animation-duration: 10s; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: To verify that keyframes set using percentages or from/to keywords on animation time line are in effect. - </p> - <ul> - <li>PASS if the color of the box is blue initially on page load and gradually changes in the order: BLUE to GREEN to RED and back to BLUE in 10 seconds</li> - <li>FAIL if the color of the box is NOT changing in the specified order within a span of 10 seconds.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-001.htm deleted file mode 100644 index 08937c3d63a..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-001.htm +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-name set with no value</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="To verify that NO animation is seen when animation-name is set without any value."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: absolute; - left: 0px; - - -webkit-animation-name: ; - -webkit-animation-duration: 10s; - - -moz-animation-name: ; - -moz-animation-duration: 10s; - - animation-name: ; - animation-duration: 10s; - } - .def { - position: absolute; - background-color: red; - left: 0px; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - z-index: -1; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: To verify that NO animation is seen when animation-name is set without any value. - </p> - <ul> - <li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li> - <li>FAIL if box moves to left or some animation is observed or if red is visible.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - <div class="def"> - Reference - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-002.htm deleted file mode 100644 index d727f3e6b1e..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-002.htm +++ /dev/null @@ -1,75 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-name set to valid keyframes rule name</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - - animation-name: sample; - animation-duration: 10s; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen. - </p> - <ul> - <li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and animates/moves towards left.</li> - <li>FAIL if box fails to transcend towards left.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-003.htm deleted file mode 100644 index 7b54f17c4c8..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-003.htm +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-name set to none</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="To verify that NO animation is seen when animation-name is set to none."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - left: 0px; - padding: 0.2em 1em; - margin: 6em; - position: absolute; - - -webkit-animation-name: none; - -webkit-animation-duration: 10s; - - -moz-animation-name: none; - -moz-animation-duration: 10s; - - animation-name: none; - animation-duration: 10s; - } - .def { - position: absolute; - background-color: red; - left: 0px; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - z-index: -1; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: To verify that NO animation is seen when animation-name is set to none. - </p> - <ul> - <li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li> - <li>FAIL if box moves to left or some animation is observed or if red is visible.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - <div class="def"> - Reference - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-004.htm deleted file mode 100644 index 21594786054..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-name-004.htm +++ /dev/null @@ -1,91 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-name does not match any keyframe at-rule.</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: absolute; - left: 0px; - - -webkit-animation-name: sample1; - -webkit-animation-duration: 10s; - - -moz-animation-name: sample1; - -moz-animation-duration: 10s; - - animation-name: sample1; - animation-duration: 10s; - } - .def { - position: absolute; - background-color: red; - left: 0px; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - z-index: -1; - } - - - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute. - </p> - <ul> - <li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and box should not animate/move towards left. Also no red should be visible on this page.</li> - <li>FAIL if box animates or moves towards left or if red is visible.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - <div class="def"> - Reference - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-001.htm deleted file mode 100644 index 2498be913c0..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-001.htm +++ /dev/null @@ -1,93 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-play-state set to paused </title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-play-state"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="A paused animation will display the current value of the animation in a STATIC state (no animation)."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: absolute; - left: 0px; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-play-state: paused; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-play-state: paused; - - animation-name: sample; - animation-duration: 10s; - animation-play-state: paused; - } - .def { - position: absolute; - left: 150px; - background-color: red; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - z-index: -1; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: A paused animation will display the current value of the animation in a STATIC state (no animation). - </p> - <ul> - <li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red color should be visible on this page.</li> - <li>FAIL if the box is animated or if red color is visible.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - <div class="def"> - Reference - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-002.htm deleted file mode 100644 index 26eddf879bd..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-play-state-002.htm +++ /dev/null @@ -1,80 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-play-state set to playing </title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-play-state"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="When animation-play-state is set to running; animation continues to render."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-play-state: running; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-play-state: running; - - animation-name: sample; - animation-duration: 10s; - animation-play-state: running; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: When animation-play-state is set to running; animation continues to render. - </p> - <ul> - <li>PASS if a blue colored box with text "CSS3 Testing Content" appears below, which moves from right to left (in 10seconds) upon page load.</li> - <li>FAIL if the animation is not as expected.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-001.htm deleted file mode 100644 index 7c57ae0d64f..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-001.htm +++ /dev/null @@ -1,79 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1). </title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-timing-function: cubic-bezier(0,0,1,1); - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-timing-function: cubic-bezier(0,0,1,1); - - animation-name: sample; - animation-duration: 10s; - animation-timing-function: cubic-bezier(0,0,1,1); - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) (this is same as setting time function to linear); animation is rendered with constant speed from begining till end. - </p> - <ul> - <li>PASS if blue box with text "CSS3 Testing Content" moves from right to left with constant speed</li> - <li>FAIL if box is moved with accelerated/decelerated speed OR fails to move left(no animation).</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-002.htm deleted file mode 100644 index 70ccc63d7c3..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-002.htm +++ /dev/null @@ -1,79 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-timing-function set to ease. </title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-timing-function: ease; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-timing-function: ease; - - animation-name: sample; - animation-duration: 10s; - animation-timing-function: ease; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end. - </p> - <ul> - <li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; initially the animation starts slow, gains acceleration in the middle and again slows down at the end.</li> - <li>FAIL if the animation is not as expected.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-003.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-003.htm deleted file mode 100644 index 81bb75acf7f..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-003.htm +++ /dev/null @@ -1,79 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-timing-function set to ease-in. </title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-timing-function: ease-in; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-timing-function: ease-in; - - animation-name: sample; - animation-duration: 10s; - animation-timing-function: ease-in; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses. - </p> - <ul> - <li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; animation starts slow and gains acceleration as time progresses.</li> - <li>FAIL if the animation is not as expected.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-004.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-004.htm deleted file mode 100644 index bbe2ba821eb..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-004.htm +++ /dev/null @@ -1,79 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-timing-function set to ease-in-out. </title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-timing-function: ease-in-out; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-timing-function: ease-in-out; - - animation-name: sample; - animation-duration: 10s; - animation-timing-function: ease-in-out; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end. - </p> - <ul> - <li>PASS if blue box with text "CSS3 Testing Content" moves from right to left; initially the animation starts slow, gains acceleration in the middle and again slows down at the end.</li> - <li>FAIL if the animation is not as expected.</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-005.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-005.htm deleted file mode 100644 index 417f2e4c94c..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-005.htm +++ /dev/null @@ -1,79 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-timing-function set to ease-out. </title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-timing-function: ease-out; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-timing-function: ease-out; - - animation-name: sample; - animation-duration: 10s; - animation-timing-function: ease-out; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses. - </p> - <ul> - <li>PASS if blue box with text "CSS3 Testing Content" moves from right to left, animation starts and relatively slows down as time progresses.</li> - <li>FAIL if box is moved with constant/accelerated speed OR fails to move left (no animation).</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-006.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-006.htm deleted file mode 100644 index 697124f28ad..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animation-timing-function-006.htm +++ /dev/null @@ -1,79 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS Tests: CSS Animations : animation-timing-function set to linear. </title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content="To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end."> - <style type="text/css"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - width: 100px; - height: 100px; - padding: 0.2em 1em; - margin: 6em; - position: relative; - - -webkit-animation-name: sample; - -webkit-animation-duration: 10s; - -webkit-animation-timing-function: linear; - - -moz-animation-name: sample; - -moz-animation-duration: 10s; - -moz-animation-timing-function: linear; - - animation-name: sample; - animation-duration: 10s; - animation-timing-function: linear; - } - /* */ - </style> - </head> - <body> - <p id="testdetails"> - <p> - Assertion: To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end. - </p> - <ul> - <li>PASS if blue box with text "CSS3 Testing Content" moves from right to left with constant speed</li> - <li>FAIL if box is moved with accelerated/decelerated speed OR fails to move left(no animation).</li> - </ul> - </p> - <div class="abc"> - CSS3 Testing Content - </div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/animationstart-and-animationend-events.htm b/tests/wpt/css-tests/css-animations-1_dev/html/animationstart-and-animationend-events.htm deleted file mode 100644 index dceba7f1a40..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/animationstart-and-animationend-events.htm +++ /dev/null @@ -1,127 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <title>CSS3 Animations: To verify animationstart and animationend events are handled. </title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta http-equiv="Content-Style-Type" content="text/css"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-events"> - <link rel="help" href="http://www.w3.org/TR/css3-animations/#timing-functions"> - <link rel="author" title="Nokia Inc." href="http://www.nokia.com/"> - <meta name="flags" content="animated"> - <meta name="assert" content='To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.'> - <style type="text/css" media="screen"> - /* */ - @-webkit-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - @-moz-keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - - - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .abc { - background-color: blue; - /*Added extra style information --- BEGIN modification*/ - color: Yellow; - font-weight: bolder; - font-size: xx-large; - text-align: center; - vertical-align: middle; - /*Added extra style information --- END modification*/ - width: 100px; - height: 100px; - padding: 0.2em 1em; - //margin: 6em; - position: relative; - - -webkit-animation-name: sample; - //-webkit-animation-delay: 0.1s; - -webkit-animation-duration: 10s; - -webkit-animation-timing-function: linear; - - -moz-animation-name: sample; - //-moz-animation-delay: 0.1s; - -moz-animation-duration: 10s; - -moz-animation-timing-function: linear; - - animation-name: sample; - //animation-delay: 0.1s; - animation-duration: 10s; - animation-timing-function: linear; - } - /* */ - </style> - <script type="text/javascript"> - /* */ - var box_var; - function init() - { - getvalues(); - } - function getvalues() - { - box_var=document.getElementById('box'); - box_var.addEventListener('webkitAnimationStart',start_f,true); - box_var.addEventListener('webkitAnimationEnd',end_f,true); - box_var.addEventListener('animationstart',start_f,true); - box_var.addEventListener('animationend',end_f,true); - <!--box_var.addEventListener('webkitAnimationEnd',start_f,true);--> - } - function start_f() - { - /*This line of code has been commented to avoid automated result evaluation. - *document.getElementById('result').innerHTML="TRUE"; - */ - document.getElementById('box').innerHTML = "START"; - } - function end_f() - { - /*This line of code has been commented to avoid automated result evaluation. - *document.getElementById('result1').innerHTML="TRUE"; - */ - document.getElementById('box').innerHTML = "STOP"; - } - /* */ - </script> - </head> - <body onload="init()"> - <p id="testdetails"> - <p> - Assertion: To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends. - </p> - <ul> - <li>PASS if blue box is rendered with text START as the animation begins and changes to STOP when animation is finished. </li> - <li>FAIL if text "FAIL" is displayed OR START is NOT rendered when animation begins OR STOP is NOT rendered when animation ends.</li> - </ul> - </p> - <div class="abc" id="box"> - FAIL - </div> - <!-- below markup is removed to avoid inline display of results. - * <p><b>Animation Event Start Value:</b> <span id="result"></span></p> - * <p><b>Animation Event End Value:</b> <span id="result1"></span></p> - --> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm b/tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm index d553407c81e..5e155a1bbef 100644 --- a/tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm +++ b/tests/wpt/css-tests/css-animations-1_dev/html/chapter-4.htm @@ -13,7 +13,7 @@ <body> <h1>CSS Animations Module Level 1 CR Test Suite</h1> - <h2>Keyframes (36 tests)</h2> + <h2>Keyframes (0 tests)</h2> <table width="100%"> <col id="test-column"> <col id="refs-column"> @@ -31,18 +31,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s4">+</a> <a href="http://www.w3.org/TR/css3-animations/#keyframes">4 Keyframes</a></th></tr> - <!-- 1 tests --> - <tr id="animation-keyframes-4" class="animated"> - <td> - <a href="animation-keyframes.htm">animation-keyframes</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : keyframes specified using percentages or from/to keywords on animation time line. - <ul class="assert"> - <li>To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.#keyframe-declaration-block"> <!-- 0 tests --> @@ -54,423 +43,16 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s4.1">+</a> <a href="http://www.w3.org/TR/css3-animations/#timing-functions">4.1 Timing functions for keyframes</a></th></tr> - <!-- 1 tests --> - <tr id="animationstart-and-animationend-events-4.1" class="animated"> - <td> - <a href="animationstart-and-animationend-events.htm">animationstart-and-animationend-events</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS3 Animations: To verify animationstart and animationend events are handled. - <ul class="assert"> - <li>To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.2"> <tr><th colspan="4" scope="rowgroup"> <a href="#s4.2">+</a> <a href="http://www.w3.org/TR/css3-animations/#animation-name-property">4.2 The ‘animation-name’ Property</a></th></tr> - <!-- 25 tests --> - <tr id="animation-duration-001-4.2" class="primary animated"> - <td><strong> - <a href="animation-duration-001.htm">animation-duration-001</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-duration value is set blank. - <ul class="assert"> - <li>When animation-duration value is set blank; animation is not visible.</li> - </ul> - </td> - </tr> - <tr id="animation-duration-002-4.2" class="primary animated"> - <td><strong> - <a href="animation-duration-002.htm">animation-duration-002</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-duration has a finite value. - <ul class="assert"> - <li>When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.</li> - </ul> - </td> - </tr> - <tr id="animation-duration-003-4.2" class="primary animated"> - <td><strong> - <a href="animation-duration-003.htm">animation-duration-003</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-duration with negative value. - <ul class="assert"> - <li>A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).</li> - </ul> - </td> - </tr> - <tr id="animation-duration-004-4.2" class="primary animated"> - <td><strong> - <a href="animation-duration-004.htm">animation-duration-004</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-duration value set to 0 (zero). - <ul class="assert"> - <li>When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-001-4.2" class="primary animated"> - <td><strong> - <a href="animation-iteration-count-001.htm">animation-iteration-count-001</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count is not set and testing for default value. - <ul class="assert"> - <li>When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-002-4.2" class="primary animated"> - <td><strong> - <a href="animation-iteration-count-002.htm">animation-iteration-count-002</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to infinite. - <ul class="assert"> - <li>animation-iteration-count set to infinite causes the animation to repeat forever.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-003-4.2" class="primary animated"> - <td><strong> - <a href="animation-iteration-count-003.htm">animation-iteration-count-003</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to negative value. - <ul class="assert"> - <li>When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-004-4.2" class="primary animated"> - <td><strong> - <a href="animation-iteration-count-004.htm">animation-iteration-count-004</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to non-integer. - <ul class="assert"> - <li>Setting animation-iteration-count to non-integer leads animation to end part way.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-005-4.2" class="primary animated"> - <td><strong> - <a href="animation-iteration-count-005.htm">animation-iteration-count-005</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count is set to a finite value. - <ul class="assert"> - <li>When animation-iteration-count is set to a finite value; animation will play for the specified number of times.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-006-4.2" class="primary animated"> - <td><strong> - <a href="animation-iteration-count-006.htm">animation-iteration-count-006</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to zero. - <ul class="assert"> - <li>When animation-iteration-count is set to zero NO animation is seen.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-event-4.2" class="primary animated"> - <td><strong> - <a href="animation-iteration-event.htm">animation-iteration-event</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one. - <ul class="assert"> - <li>To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li> - </ul> - </td> - </tr> - <tr id="animation-keyframes-4.2" class="primary animated"> - <td><strong> - <a href="animation-keyframes.htm">animation-keyframes</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : keyframes specified using percentages or from/to keywords on animation time line. - <ul class="assert"> - <li>To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.</li> - </ul> - </td> - </tr> - <tr id="animation-name-001-4.2" class="primary animated"> - <td><strong> - <a href="animation-name-001.htm">animation-name-001</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-name set with no value - <ul class="assert"> - <li>To verify that NO animation is seen when animation-name is set without any value.</li> - </ul> - </td> - </tr> - <tr id="animation-name-002-4.2" class="primary animated"> - <td><strong> - <a href="animation-name-002.htm">animation-name-002</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-name set to valid keyframes rule name - <ul class="assert"> - <li>When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.</li> - </ul> - </td> - </tr> - <tr id="animation-name-003-4.2" class="primary animated"> - <td><strong> - <a href="animation-name-003.htm">animation-name-003</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-name set to none - <ul class="assert"> - <li>To verify that NO animation is seen when animation-name is set to none.</li> - </ul> - </td> - </tr> - <tr id="animation-name-004-4.2" class="primary animated"> - <td><strong> - <a href="animation-name-004.htm">animation-name-004</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-name does not match any keyframe at-rule. - <ul class="assert"> - <li>To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.</li> - </ul> - </td> - </tr> - <tr id="animation-play-state-001-4.2" class="animated"> - <td> - <a href="animation-play-state-001.htm">animation-play-state-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-play-state set to paused - <ul class="assert"> - <li>A paused animation will display the current value of the animation in a STATIC state (no animation).</li> - </ul> - </td> - </tr> - <tr id="animation-play-state-002-4.2" class="animated"> - <td> - <a href="animation-play-state-002.htm">animation-play-state-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-play-state set to playing - <ul class="assert"> - <li>When animation-play-state is set to running; animation continues to render.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-001-4.2" class="animated"> - <td> - <a href="animation-timing-function-001.htm">animation-timing-function-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1). - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-002-4.2" class="animated"> - <td> - <a href="animation-timing-function-002.htm">animation-timing-function-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-003-4.2" class="animated"> - <td> - <a href="animation-timing-function-003.htm">animation-timing-function-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease-in. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-004-4.2" class="animated"> - <td> - <a href="animation-timing-function-004.htm">animation-timing-function-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease-in-out. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-005-4.2" class="animated"> - <td> - <a href="animation-timing-function-005.htm">animation-timing-function-005</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease-out. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-006-4.2" class="animated"> - <td> - <a href="animation-timing-function-006.htm">animation-timing-function-006</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to linear. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.</li> - </ul> - </td> - </tr> - <tr id="animationstart-and-animationend-events-4.2" class="primary animated"> - <td><strong> - <a href="animationstart-and-animationend-events.htm">animationstart-and-animationend-events</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS3 Animations: To verify animationstart and animationend events are handled. - <ul class="assert"> - <li>To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.2.#animation-name"> - <!-- 11 tests --> - <tr id="animation-delay-001-4.2.#animation-name" class="animated"> - <td> - <a href="animation-delay-001.htm">animation-delay-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - negative value - <ul class="assert"> - <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-002-4.2.#animation-name" class="animated"> - <td> - <a href="animation-delay-002.htm">animation-delay-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - positive value - <ul class="assert"> - <li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-003-4.2.#animation-name" class="animated"> - <td> - <a href="animation-delay-003.htm">animation-delay-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - 0s - <ul class="assert"> - <li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-004-4.2.#animation-name" class="animated"> - <td> - <a href="animation-delay-004.htm">animation-delay-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - ::after - <ul class="assert"> - <li>Check that animation-delay applies to the ::after pseudo element.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-005-4.2.#animation-name" class="animated"> - <td> - <a href="animation-delay-005.htm">animation-delay-005</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - ::before - <ul class="assert"> - <li>Check that animation-delay applies to the ::before pseudo element.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-001-4.2.#animation-name" class="animated"> - <td> - <a href="animation-direction-001.htm">animation-direction-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - alternate - <ul class="assert"> - <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-002-4.2.#animation-name" class="animated"> - <td> - <a href="animation-direction-002.htm">animation-direction-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - normal - <ul class="assert"> - <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-003-4.2.#animation-name" class="animated"> - <td> - <a href="animation-direction-003.htm">animation-direction-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - alternate-reverse - <ul class="assert"> - <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-004-4.2.#animation-name" class="animated"> - <td> - <a href="animation-direction-004.htm">animation-direction-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - reverse - <ul class="assert"> - <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-005-4.2.#animation-name" class="animated"> - <td> - <a href="animation-direction-005.htm">animation-direction-005</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - ::after - <ul class="assert"> - <li>Check that animation-direction applies to the ::after pseudo element.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-006-4.2.#animation-name" class="animated"> - <td> - <a href="animation-direction-006.htm">animation-direction-006</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - ::before - <ul class="assert"> - <li>Check that animation-direction applies to the ::before pseudo element</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.2.#list-matching"> <!-- 0 tests --> @@ -482,644 +64,28 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s4.3">+</a> <a href="http://www.w3.org/TR/css3-animations/#animation-duration-property">4.3 The ‘animation-duration’ Property</a></th></tr> - <!-- 25 tests --> - <tr id="animation-duration-001-4.3" class="animated"> - <td> - <a href="animation-duration-001.htm">animation-duration-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-duration value is set blank. - <ul class="assert"> - <li>When animation-duration value is set blank; animation is not visible.</li> - </ul> - </td> - </tr> - <tr id="animation-duration-002-4.3" class="animated"> - <td> - <a href="animation-duration-002.htm">animation-duration-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-duration has a finite value. - <ul class="assert"> - <li>When animation-duration is set to a finite value/duration, animation takes specified time to complete one cycle.</li> - </ul> - </td> - </tr> - <tr id="animation-duration-003-4.3" class="animated"> - <td> - <a href="animation-duration-003.htm">animation-duration-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-duration with negative value. - <ul class="assert"> - <li>A negative value for animation-duration is treated as 0 (zero); then animation cycle is immediate (i.e. there will be no animation seen).</li> - </ul> - </td> - </tr> - <tr id="animation-duration-004-4.3" class="animated"> - <td> - <a href="animation-duration-004.htm">animation-duration-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-duration value set to 0 (zero). - <ul class="assert"> - <li>When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-001-4.3" class="animated"> - <td> - <a href="animation-iteration-count-001.htm">animation-iteration-count-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count is not set and testing for default value. - <ul class="assert"> - <li>When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-002-4.3" class="animated"> - <td> - <a href="animation-iteration-count-002.htm">animation-iteration-count-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to infinite. - <ul class="assert"> - <li>animation-iteration-count set to infinite causes the animation to repeat forever.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-003-4.3" class="animated"> - <td> - <a href="animation-iteration-count-003.htm">animation-iteration-count-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to negative value. - <ul class="assert"> - <li>When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-004-4.3" class="animated"> - <td> - <a href="animation-iteration-count-004.htm">animation-iteration-count-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to non-integer. - <ul class="assert"> - <li>Setting animation-iteration-count to non-integer leads animation to end part way.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-005-4.3" class="animated"> - <td> - <a href="animation-iteration-count-005.htm">animation-iteration-count-005</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count is set to a finite value. - <ul class="assert"> - <li>When animation-iteration-count is set to a finite value; animation will play for the specified number of times.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-006-4.3" class="animated"> - <td> - <a href="animation-iteration-count-006.htm">animation-iteration-count-006</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to zero. - <ul class="assert"> - <li>When animation-iteration-count is set to zero NO animation is seen.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-event-4.3" class="animated"> - <td> - <a href="animation-iteration-event.htm">animation-iteration-event</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one. - <ul class="assert"> - <li>To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li> - </ul> - </td> - </tr> - <tr id="animation-keyframes-4.3" class="animated"> - <td> - <a href="animation-keyframes.htm">animation-keyframes</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : keyframes specified using percentages or from/to keywords on animation time line. - <ul class="assert"> - <li>To verify that keyframes set using percentages or from/to keywords on animation time line are in effect.</li> - </ul> - </td> - </tr> - <tr id="animation-name-001-4.3" class="animated"> - <td> - <a href="animation-name-001.htm">animation-name-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-name set with no value - <ul class="assert"> - <li>To verify that NO animation is seen when animation-name is set without any value.</li> - </ul> - </td> - </tr> - <tr id="animation-name-002-4.3" class="animated"> - <td> - <a href="animation-name-002.htm">animation-name-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-name set to valid keyframes rule name - <ul class="assert"> - <li>When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.</li> - </ul> - </td> - </tr> - <tr id="animation-name-003-4.3" class="animated"> - <td> - <a href="animation-name-003.htm">animation-name-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-name set to none - <ul class="assert"> - <li>To verify that NO animation is seen when animation-name is set to none.</li> - </ul> - </td> - </tr> - <tr id="animation-name-004-4.3" class="animated"> - <td> - <a href="animation-name-004.htm">animation-name-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-name does not match any keyframe at-rule. - <ul class="assert"> - <li>To verify: if animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.</li> - </ul> - </td> - </tr> - <tr id="animation-play-state-001-4.3" class="animated"> - <td> - <a href="animation-play-state-001.htm">animation-play-state-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-play-state set to paused - <ul class="assert"> - <li>A paused animation will display the current value of the animation in a STATIC state (no animation).</li> - </ul> - </td> - </tr> - <tr id="animation-play-state-002-4.3" class="animated"> - <td> - <a href="animation-play-state-002.htm">animation-play-state-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-play-state set to playing - <ul class="assert"> - <li>When animation-play-state is set to running; animation continues to render.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-001-4.3" class="animated"> - <td> - <a href="animation-timing-function-001.htm">animation-timing-function-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1). - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-002-4.3" class="animated"> - <td> - <a href="animation-timing-function-002.htm">animation-timing-function-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-003-4.3" class="animated"> - <td> - <a href="animation-timing-function-003.htm">animation-timing-function-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease-in. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-004-4.3" class="animated"> - <td> - <a href="animation-timing-function-004.htm">animation-timing-function-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease-in-out. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-005-4.3" class="animated"> - <td> - <a href="animation-timing-function-005.htm">animation-timing-function-005</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease-out. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-006-4.3" class="animated"> - <td> - <a href="animation-timing-function-006.htm">animation-timing-function-006</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to linear. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.</li> - </ul> - </td> - </tr> - <tr id="animationstart-and-animationend-events-4.3" class="animated"> - <td> - <a href="animationstart-and-animationend-events.htm">animationstart-and-animationend-events</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS3 Animations: To verify animationstart and animationend events are handled. - <ul class="assert"> - <li>To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.3.#animation-duration"> - <!-- 11 tests --> - <tr id="animation-delay-001-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-delay-001.htm">animation-delay-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - negative value - <ul class="assert"> - <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-002-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-delay-002.htm">animation-delay-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - positive value - <ul class="assert"> - <li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-003-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-delay-003.htm">animation-delay-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - 0s - <ul class="assert"> - <li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-004-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-delay-004.htm">animation-delay-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - ::after - <ul class="assert"> - <li>Check that animation-delay applies to the ::after pseudo element.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-005-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-delay-005.htm">animation-delay-005</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - ::before - <ul class="assert"> - <li>Check that animation-delay applies to the ::before pseudo element.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-001-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-direction-001.htm">animation-direction-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - alternate - <ul class="assert"> - <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-002-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-direction-002.htm">animation-direction-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - normal - <ul class="assert"> - <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-003-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-direction-003.htm">animation-direction-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - alternate-reverse - <ul class="assert"> - <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-004-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-direction-004.htm">animation-direction-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - reverse - <ul class="assert"> - <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-005-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-direction-005.htm">animation-direction-005</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - ::after - <ul class="assert"> - <li>Check that animation-direction applies to the ::after pseudo element.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-006-4.3.#animation-duration" class="animated"> - <td> - <a href="animation-direction-006.htm">animation-direction-006</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - ::before - <ul class="assert"> - <li>Check that animation-direction applies to the ::before pseudo element</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.4"> <tr><th colspan="4" scope="rowgroup"> <a href="#s4.4">+</a> <a href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">4.4 The ‘animation-timing-function’ Property</a></th></tr> - <!-- 6 tests --> - <tr id="animation-timing-function-001-4.4" class="primary animated"> - <td><strong> - <a href="animation-timing-function-001.htm">animation-timing-function-001</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to cubic-bezier with parameters (0,0,1,1). - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to cubic-bezier with parameters (0,0,1,1) animation is rendered with constant speed from begining till end.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-002-4.4" class="primary animated"> - <td><strong> - <a href="animation-timing-function-002.htm">animation-timing-function-002</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease; animation starts slow, gains acceleration in the middle and again slows down at the end.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-003-4.4" class="primary animated"> - <td><strong> - <a href="animation-timing-function-003.htm">animation-timing-function-003</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease-in. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease-in; animation starts slow and gains acceleration as time progresses.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-004-4.4" class="primary animated"> - <td><strong> - <a href="animation-timing-function-004.htm">animation-timing-function-004</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease-in-out. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease-in-out; animation starts slow, gains acceleration in the middle and again slows down at the end.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-005-4.4" class="primary animated"> - <td><strong> - <a href="animation-timing-function-005.htm">animation-timing-function-005</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to ease-out. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to ease-out; animation starts with higher(than the normal) speed and relatively slows down as time progresses.</li> - </ul> - </td> - </tr> - <tr id="animation-timing-function-006-4.4" class="primary animated"> - <td><strong> - <a href="animation-timing-function-006.htm">animation-timing-function-006</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-timing-function set to linear. - <ul class="assert"> - <li>To verify that: when animation-timing-function is set to linear; animation is rendered with constant speed from begining till the end.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.4.#animation-timing-function"> - <!-- 1 tests --> - <tr id="animation-delay-001-4.4.#animation-timing-function" class="animated"> - <td> - <a href="animation-delay-001.htm">animation-delay-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - negative value - <ul class="assert"> - <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.5"> <tr><th colspan="4" scope="rowgroup"> <a href="#s4.5">+</a> <a href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">4.5 The ‘animation-iteration-count’ Property</a></th></tr> - <!-- 7 tests --> - <tr id="animation-iteration-count-001-4.5" class="animated"> - <td> - <a href="animation-iteration-count-001.htm">animation-iteration-count-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count is not set and testing for default value. - <ul class="assert"> - <li>When animation-iteration-count is not set; 1 is taken by default and animation will play from beginning to end once.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-002-4.5" class="animated"> - <td> - <a href="animation-iteration-count-002.htm">animation-iteration-count-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to infinite. - <ul class="assert"> - <li>animation-iteration-count set to infinite causes the animation to repeat forever.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-003-4.5" class="animated"> - <td> - <a href="animation-iteration-count-003.htm">animation-iteration-count-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to negative value. - <ul class="assert"> - <li>When animation-iteration-count is set to negative count, value should be computed to 0 (zero) and results in NO animation.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-004-4.5" class="animated"> - <td> - <a href="animation-iteration-count-004.htm">animation-iteration-count-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to non-integer. - <ul class="assert"> - <li>Setting animation-iteration-count to non-integer leads animation to end part way.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-005-4.5" class="animated"> - <td> - <a href="animation-iteration-count-005.htm">animation-iteration-count-005</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count is set to a finite value. - <ul class="assert"> - <li>When animation-iteration-count is set to a finite value; animation will play for the specified number of times.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-count-006-4.5" class="animated"> - <td> - <a href="animation-iteration-count-006.htm">animation-iteration-count-006</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations. animation-iteration-count set to zero. - <ul class="assert"> - <li>When animation-iteration-count is set to zero NO animation is seen.</li> - </ul> - </td> - </tr> - <tr id="animation-iteration-event-4.5" class="animated"> - <td> - <a href="animation-iteration-event.htm">animation-iteration-event</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one. - <ul class="assert"> - <li>To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.5.#animation-iteration-count"> - <!-- 6 tests --> - <tr id="animation-direction-001-4.5.#animation-iteration-count" class="animated"> - <td> - <a href="animation-direction-001.htm">animation-direction-001</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - alternate - <ul class="assert"> - <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-002-4.5.#animation-iteration-count" class="animated"> - <td> - <a href="animation-direction-002.htm">animation-direction-002</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - normal - <ul class="assert"> - <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-003-4.5.#animation-iteration-count" class="animated"> - <td> - <a href="animation-direction-003.htm">animation-direction-003</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - alternate-reverse - <ul class="assert"> - <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-004-4.5.#animation-iteration-count" class="animated"> - <td> - <a href="animation-direction-004.htm">animation-direction-004</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - reverse - <ul class="assert"> - <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-005-4.5.#animation-iteration-count" class="animated"> - <td> - <a href="animation-direction-005.htm">animation-direction-005</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - ::after - <ul class="assert"> - <li>Check that animation-direction applies to the ::after pseudo element.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-006-4.5.#animation-iteration-count" class="animated"> - <td> - <a href="animation-direction-006.htm">animation-direction-006</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - ::before - <ul class="assert"> - <li>Check that animation-direction applies to the ::before pseudo element</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.5.#single-animation-iteration-count"> <!-- 0 tests --> @@ -1137,73 +103,7 @@ <!-- 0 tests --> </tbody> <tbody id="s4.6.#animation-direction"> - <!-- 6 tests --> - <tr id="animation-direction-001-4.6.#animation-direction" class="primary animated"> - <td><strong> - <a href="animation-direction-001.htm">animation-direction-001</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - alternate - <ul class="assert"> - <li>When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-002-4.6.#animation-direction" class="primary animated"> - <td><strong> - <a href="animation-direction-002.htm">animation-direction-002</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - normal - <ul class="assert"> - <li>When animation-direction is set to normal, all iterations of animation are played as specified.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-003-4.6.#animation-direction" class="primary animated"> - <td><strong> - <a href="animation-direction-003.htm">animation-direction-003</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - alternate-reverse - <ul class="assert"> - <li>When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-004-4.6.#animation-direction" class="primary animated"> - <td><strong> - <a href="animation-direction-004.htm">animation-direction-004</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - reverse - <ul class="assert"> - <li>When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-005-4.6.#animation-direction" class="primary animated"> - <td><strong> - <a href="animation-direction-005.htm">animation-direction-005</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - ::after - <ul class="assert"> - <li>Check that animation-direction applies to the ::after pseudo element.</li> - </ul> - </td> - </tr> - <tr id="animation-direction-006-4.6.#animation-direction" class="primary animated"> - <td><strong> - <a href="animation-direction-006.htm">animation-direction-006</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-direction - ::before - <ul class="assert"> - <li>Check that animation-direction applies to the ::before pseudo element</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.6.#normal"> <!-- 0 tests --> @@ -1221,29 +121,7 @@ <!-- 0 tests --> </tbody> <tbody id="s4.7.#animation-play-state"> - <!-- 2 tests --> - <tr id="animation-play-state-001-4.7.#animation-play-state" class="primary animated"> - <td><strong> - <a href="animation-play-state-001.htm">animation-play-state-001</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-play-state set to paused - <ul class="assert"> - <li>A paused animation will display the current value of the animation in a STATIC state (no animation).</li> - </ul> - </td> - </tr> - <tr id="animation-play-state-002-4.7.#animation-play-state" class="primary animated"> - <td><strong> - <a href="animation-play-state-002.htm">animation-play-state-002</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS Animations : animation-play-state set to playing - <ul class="assert"> - <li>When animation-play-state is set to running; animation continues to render.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.7.#single-animation-play-state"> <!-- 0 tests --> @@ -1255,62 +133,7 @@ <!-- 0 tests --> </tbody> <tbody id="s4.8.#animation-delay"> - <!-- 5 tests --> - <tr id="animation-delay-001-4.8.#animation-delay" class="primary animated"> - <td><strong> - <a href="animation-delay-001.htm">animation-delay-001</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - negative value - <ul class="assert"> - <li>When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-002-4.8.#animation-delay" class="primary animated"> - <td><strong> - <a href="animation-delay-002.htm">animation-delay-002</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - positive value - <ul class="assert"> - <li>When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-003-4.8.#animation-delay" class="primary animated"> - <td><strong> - <a href="animation-delay-003.htm">animation-delay-003</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - 0s - <ul class="assert"> - <li>When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-004-4.8.#animation-delay" class="primary animated"> - <td><strong> - <a href="animation-delay-004.htm">animation-delay-004</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - ::after - <ul class="assert"> - <li>Check that animation-delay applies to the ::after pseudo element.</li> - </ul> - </td> - </tr> - <tr id="animation-delay-005-4.8.#animation-delay" class="primary animated"> - <td><strong> - <a href="animation-delay-005.htm">animation-delay-005</a></strong></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>animation-delay - ::before - <ul class="assert"> - <li>Check that animation-delay applies to the ::before pseudo element.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s4.9"> <tr><th colspan="4" scope="rowgroup"> diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/chapter-5.htm b/tests/wpt/css-tests/css-animations-1_dev/html/chapter-5.htm index 8ba09dd88e1..e2c215feb5d 100644 --- a/tests/wpt/css-tests/css-animations-1_dev/html/chapter-5.htm +++ b/tests/wpt/css-tests/css-animations-1_dev/html/chapter-5.htm @@ -13,7 +13,7 @@ <body> <h1>CSS Animations Module Level 1 CR Test Suite</h1> - <h2>Animation Events (4 tests)</h2> + <h2>Animation Events (0 tests)</h2> <table width="100%"> <col id="test-column"> <col id="refs-column"> @@ -31,29 +31,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s5">+</a> <a href="http://www.w3.org/TR/css3-animations/#animation-events">5 Animation Events</a></th></tr> - <!-- 2 tests --> - <tr id="animation-iteration-event-5" class="animated"> - <td> - <a href="animation-iteration-event.htm">animation-iteration-event</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS3 Animations: To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one. - <ul class="assert"> - <li>To verify if " animationiteration " event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.</li> - </ul> - </td> - </tr> - <tr id="animationstart-and-animationend-events-5" class="animated"> - <td> - <a href="animationstart-and-animationend-events.htm">animationstart-and-animationend-events</a></td> - <td></td> - <td><abbr class="animated" title="Animated test">Animated</abbr></td> - <td>CSS3 Animations: To verify animationstart and animationend events are handled. - <ul class="assert"> - <li>To verify if "animationstart" event occurs when animation starts and "animationend" occurs when the animation ends.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s5.1"> <tr><th colspan="4" scope="rowgroup"> @@ -77,26 +55,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s5.1.2">+</a> <a href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes">5.1.2 Attributes</a></th></tr> - <!-- 2 tests --> - <tr id="pseudoelement-001-5.1.2" class="primary script"> - <td><strong> - <a href="pseudoElement-001.htm">pseudoelement-001</a></strong></td> - <td></td> - <td><abbr class="script" title="Executes tests in script">Script</abbr></td> - <td>pseudoElement attribute of Event - return the name or empty string - </td> - </tr> - <tr id="pseudoelement-002-5.1.2" class="primary"> - <td><strong> - <a href="pseudoElement-002.htm">pseudoelement-002</a></strong></td> - <td></td> - <td></td> - <td>the target of the event is that pseudo-element's corresponding element - <ul class="assert"> - <li>The target of the event is that pseudo-element's corresponding element.</li> - </ul> - </td> - </tr> + <!-- 0 tests --> </tbody> <tbody id="s5.1.2.#AnimationEvent-animationName"> <!-- 0 tests --> diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/pseudoElement-001.htm b/tests/wpt/css-tests/css-animations-1_dev/html/pseudoElement-001.htm deleted file mode 100644 index eabb89e12fc..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/pseudoElement-001.htm +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS3 Animations Test: pseudoElement attribute of Event - return the name or empty string</title> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui"> -<link href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes" rel="help" title="5.1.2. Attributes"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<style> - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - .test { - animation-duration: 10s; - animation-name: sample; - animation-timing-function: linear; - background-color: blue; - height: 50px; - position: relative; - width: 100px; - } - #testDiv2::after { - content: "pseudoElement"; - } -</style> -</head><body><div id="log"></div> -<div id="testDiv1" class="test"></div> -<div id="testDiv2" class="test"></div> -<script> - var t1 = async_test("Check if the pseudoElement attribute returns the empty string when the animation runs on an element"); - var t2 = async_test("Check if the pseudoElement attribute returns the name (beginning with two colons) of the CSS pseudo-element when the animation runs"); - var testDiv1 = document.getElementById('testDiv1'); - var testDiv2 = document.getElementById('testDiv2'); - - testDiv1.addEventListener('animationstart', function(event) { - t1.step(function() { - assert_equals(event.pseudoElement, "", "the pseudoElement value"); - }); - t1.done(); - }, false); - - testDiv2.addEventListener('animationstart', function(event) { - t2.step(function() { - assert_equals(event.pseudoElement, "::after", "the pseudoElement value"); - }); - t2.done(); - }, false); -</script> -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/pseudoElement-002.htm b/tests/wpt/css-tests/css-animations-1_dev/html/pseudoElement-002.htm deleted file mode 100644 index b1131b4b040..00000000000 --- a/tests/wpt/css-tests/css-animations-1_dev/html/pseudoElement-002.htm +++ /dev/null @@ -1,35 +0,0 @@ -<!DOCTYPE html> -<html><head><meta charset="utf-8"> -<title>CSS3 Animations Test: the target of the event is that pseudo-element's corresponding element</title> -<link href="http://www.intel.com" rel="author" title="Intel"> -<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui"> -<link href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes" rel="help" title="5.1.2. Attributes"> -<meta content="" name="flags"> -<meta content="The target of the event is that pseudo-element's corresponding element." name="assert"> -<style> - @keyframes sample { - from { - left: 150px; - } - to { - left: 0px; - } - } - #testDiv { - animation-duration: 5s; - animation-name: sample; - animation-timing-function: linear; - position: relative; - } - #testDiv::before { - content: "<"; - } - #testDiv::after { - content: ">"; - } -</style> -</head><body> - <p>Test passes if the '<pseudoElement>' moves from right to left one time.</p> - <div id="testDiv">pseudoElement</div> - -</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/reference/support/pattern-gg-gr.png b/tests/wpt/css-tests/css-animations-1_dev/html/reference/support/pattern-gg-gr.png Binary files differindex 091de70bb72..a6d65b0d4a1 100644 --- a/tests/wpt/css-tests/css-animations-1_dev/html/reference/support/pattern-gg-gr.png +++ b/tests/wpt/css-tests/css-animations-1_dev/html/reference/support/pattern-gg-gr.png diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/support/pattern-gg-gr.png b/tests/wpt/css-tests/css-animations-1_dev/html/support/pattern-gg-gr.png Binary files differindex 091de70bb72..a6d65b0d4a1 100644 --- a/tests/wpt/css-tests/css-animations-1_dev/html/support/pattern-gg-gr.png +++ b/tests/wpt/css-tests/css-animations-1_dev/html/support/pattern-gg-gr.png diff --git a/tests/wpt/css-tests/css-animations-1_dev/html/toc.htm b/tests/wpt/css-tests/css-animations-1_dev/html/toc.htm index fe9602bf02d..8fd9abb4b71 100644 --- a/tests/wpt/css-tests/css-animations-1_dev/html/toc.htm +++ b/tests/wpt/css-tests/css-animations-1_dev/html/toc.htm @@ -37,12 +37,12 @@ <tbody id="s4"> <tr><th><a href="chapter-4.htm">Chapter 4 - Keyframes</a></th> - <td>(36 Tests)</td></tr> + <td>(0 Tests)</td></tr> </tbody> <tbody id="s5"> <tr><th><a href="chapter-5.htm">Chapter 5 - Animation Events</a></th> - <td>(4 Tests)</td></tr> + <td>(0 Tests)</td></tr> </tbody> <tbody id="s6"> <tr><th><a href="chapter-6.htm">Chapter 6 - |
