<!doctype html> <meta charset=utf-8> <script src="../testcommon.js"></script> <style> :root { --var-100px: 100px; } </style> <body> <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'; window.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", left: "0px" }, { offset: 1, computedOffset: 1, easing: "linear", left: "100px" }, ]; for (var i = 0; i < frames.length; i++) { assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); } }, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a simple' + ' transition'); test(function(t) { var div = addDiv(t); div.style.left = '0px'; window.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)", left: "0px" }, { offset: 1, computedOffset: 1, easing: "linear", left: "100px" }, ]; for (var i = 0; i < frames.length; i++) { assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); } }, 'KeyframeEffectReadOnly.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'; window.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', left: '0px' }, { offset: 1, computedOffset: 1, easing: 'linear', left: '100px' }, ]; for (var i = 0; i < frames.length; i++) { assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); } }, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a' + ' transition with a CSS variable endpoint'); done(); </script> </body>