| <!doctype html> |
| <meta charset=utf-8> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <script src="../resources/testcommon.js"></script> |
| <style> |
| :root { |
| --var-100px: 100px; |
| } |
| </style> |
| <body> |
| <div id="log"></div> |
| <script> |
| 'use strict'; |
| |
| function getKeyframes(e) { |
| return e.getAnimations()[0].effect.getKeyframes(); |
| } |
| |
| function assert_frames_equal(a, b, name) { |
| assert_equals(Object.keys(a).sort().toString(), |
| Object.keys(b).sort().toString(), |
| "properties on " + name); |
| for (var p in a) { |
| assert_equals(a[p], b[p], "value for '" + p + "' on " + name); |
| } |
| } |
| |
| test(function(t) { |
| var div = addDiv(t); |
| |
| div.style.left = '0px'; |
| getComputedStyle(div).transitionProperty; |
| div.style.transition = 'left 100s'; |
| div.style.left = '100px'; |
| |
| var frames = getKeyframes(div); |
| |
| assert_equals(frames.length, 2, "number of frames"); |
| |
| var expected = [ |
| { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", |
| left: "0px" }, |
| { offset: 1, computedOffset: 1, easing: "linear", composite: "auto", |
| left: "100px" }, |
| ]; |
| |
| for (var i = 0; i < frames.length; i++) { |
| assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); |
| } |
| }, 'KeyframeEffect.getKeyframes() returns expected frames for a simple' |
| + ' transition'); |
| |
| test(function(t) { |
| var div = addDiv(t); |
| |
| div.style.left = '0px'; |
| getComputedStyle(div).transitionProperty; |
| div.style.transition = 'left 100s steps(2,end)'; |
| div.style.left = '100px'; |
| |
| var frames = getKeyframes(div); |
| |
| assert_equals(frames.length, 2, "number of frames"); |
| |
| var expected = [ |
| { offset: 0, computedOffset: 0, easing: "steps(2)", composite: "auto", |
| left: "0px" }, |
| { offset: 1, computedOffset: 1, easing: "linear", composite: "auto", |
| left: "100px" }, |
| ]; |
| |
| for (var i = 0; i < frames.length; i++) { |
| assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); |
| } |
| }, 'KeyframeEffect.getKeyframes() returns expected frames for a simple' |
| + ' transition with a non-default easing function'); |
| |
| test(function(t) { |
| var div = addDiv(t); |
| div.style.left = '0px'; |
| getComputedStyle(div).transitionProperty; |
| div.style.transition = 'left 100s'; |
| div.style.left = 'var(--var-100px)'; |
| |
| var frames = getKeyframes(div); |
| |
| // CSS transition endpoints are based on the computed value so we |
| // shouldn't see the variable reference |
| var expected = [ |
| { offset: 0, computedOffset: 0, easing: 'ease', composite: "auto", |
| left: '0px' }, |
| { offset: 1, computedOffset: 1, easing: 'linear', composite: "auto", |
| left: '100px' }, |
| ]; |
| for (var i = 0; i < frames.length; i++) { |
| assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); |
| } |
| }, 'KeyframeEffect.getKeyframes() returns expected frames for a' |
| + ' transition with a CSS variable endpoint'); |
| |
| </script> |
| </body> |
