| <!doctype html> |
| <meta charset=utf-8> |
| <title>Animation.frameRate</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../imported/w3c/web-platform-tests/web-animations/testcommon.js"></script> |
| <body> |
| <script> |
| 'use strict'; |
| |
| promise_test(async t => { |
| const timestamps = []; |
| const numberOfTimestamps = 4; |
| |
| const frameRate = 30; |
| const timing = { duration: 10_000, iterations: Infinity }; |
| |
| const label1 = "one"; |
| const label2 = "two"; |
| |
| await new Promise(resolve => { |
| let numberOfCallbacks = 0; |
| |
| const animations = []; |
| |
| const addTimestamp = label => { |
| timestamps.push({ label, value: document.timeline.currentTime }); |
| if (timestamps.length == numberOfTimestamps) |
| resolve(); |
| }; |
| |
| const addAnimation = label => { |
| const animation = document.timeline.animate(progress => addTimestamp(label), timing); |
| animation.frameRate = frameRate; |
| animations.push(animation); |
| t.add_cleanup(() => animation.cancel()); |
| }; |
| |
| // Add one animation now. |
| addAnimation(label1); |
| |
| // And another one in a different frame |
| requestAnimationFrame(() => addAnimation(label2)); |
| }); |
| |
| assert_equals(timestamps.length, numberOfTimestamps, "The expected number of timestamps were recorded"); |
| |
| assert_equals(timestamps[0].label, label1, `The first timestamp was for animation "${label1}"`); |
| assert_equals(timestamps[1].label, label2, `The second timestamp was for animation "${label2}"`); |
| assert_equals(timestamps[2].label, label1, `The third timestamp was for animation "${label1}"`); |
| assert_equals(timestamps[3].label, label2, `The fourth timestamp was for animation "${label2}"`); |
| |
| assert_not_equals(timestamps[0].value, timestamps[1].value, "The first two do not match"); |
| assert_equals(timestamps[2].value, timestamps[3].value, "The last two timestamps match"); |
| assert_not_equals(timestamps[0].value, timestamps[3].value, "The first and last timestamps don't match"); |
| }, "Animations with the same frameRate started separately fire at the same timeline time"); |
| |
| </script> |
| </body> |
