Chromium Code Reviews Chromium Code Reviews
Issue 2138333002:
Cleaned up simple-keyframes.html test (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/web-animations-api/w3c/simple-keyframes.html |
| diff --git a/third_party/WebKit/LayoutTests/web-animations-api/w3c/simple-keyframes.html b/third_party/WebKit/LayoutTests/web-animations-api/w3c/simple-keyframes.html |
| index fee77a185293f826f03d3841b42079366bf5fbfe..cd02d60e700d5ba72bf3d974cb818011ebcd6dc9 100644 |
| --- a/third_party/WebKit/LayoutTests/web-animations-api/w3c/simple-keyframes.html |
| +++ b/third_party/WebKit/LayoutTests/web-animations-api/w3c/simple-keyframes.html |
| @@ -1,45 +1,58 @@ |
| <!DOCTYPE html> |
| +<meta charset=utf-8> |
| +<title>Animate() with no offsets</title> |
| +<link rel="help" href="http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects"> |
|
suzyh_UTC10 (ex-contributor)
2016/07/13 23:10:33
Help link should start https://w3c.github.io/web-a
|
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| -<script src="resources/keyframes-test.js"></script> |
| +<script src="../../imported/wpt/web-animations/testcommon.js"></script> |
| +<body> |
| <script> |
| -test(function() { |
| - assertAnimationStyles([ |
| +'use strict'; |
| +test(function(t) { |
| + var keyframes = [ |
| {opacity: '0.25', left: '25px'}, |
| {opacity: '0.75', left: '75px'}, |
| - ], { |
| + ]; |
| + var expectations = { |
| 0.5: {opacity: '0.5', left: '50px'}, |
| - }); |
| -}, |
| -'element.animate() with 2 keyframes', |
| -{ |
| - help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects', |
| - assert: [ |
| - 'element.animate() should start an animation when two keyframes', |
| - 'are provided with matching properties and no offsets specified.', |
| - ], |
| - author: 'Alan Cutter', |
| -}); |
| + }; |
| + for (var progress in expectations) { |
| + var element = createDiv(t); |
| + element.animate(keyframes, { |
| + duration: 1000, |
| + fill: 'forwards', |
| + delay: -progress * 1000, |
| + }); |
| + var computedStyle = getComputedStyle(element); |
| + for (var property in expectations[progress]) { |
| + assert_equals(computedStyle[property], expectations[progress][property], |
| + property + ' at ' + (progress * 100) + '%'); |
| + } |
| + } |
| +}, 'element.animate() with 2 keyframes'); |
| -test(function() { |
| - assertAnimationStyles([ |
| +test(function(t) { |
| + var keyframes =[ |
| {opacity: '0', left: '0px'}, |
| {opacity: '0.25', left: '25px'}, |
| {opacity: '0.75', left: '75px'}, |
| - ], { |
| + ]; |
| + var expectations = { |
| 0.25: {opacity: '0.125', left: '12.5px'}, |
| 0.75: {opacity: '0.5', left: '50px'}, |
| - }); |
| -}, |
| -'element.animate() with 3 keyframes', |
| -{ |
| - help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects', |
| - assert: [ |
| - 'element.animate() should start an animation when three keyframes', |
| - 'are provided with matching properties and no offsets specified.', |
| - 'The keyframes must maintain their ordering and get distributed', |
| - 'correctly.', |
| - ], |
| - author: 'Alan Cutter', |
| -}); |
| + }; |
| + for (var progress in expectations) { |
| + var element = createDiv(t); |
| + element.animate(keyframes, { |
| + duration: 1000, |
| + fill: 'forwards', |
| + delay: -progress * 1000, |
| + }); |
| + var computedStyle = getComputedStyle(element); |
| + for (var property in expectations[progress]) { |
| + assert_equals(computedStyle[property], expectations[progress][property], |
| + property + ' at ' + (progress * 100) + '%'); |
| + } |
| + } |
| +}, 'element.animate() with 3 keyframes'); |
| </script> |
