| <!doctype html> |
| <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> |
| <link rel="author" href="https://mozilla.org" title="Mozilla"> |
| <style> |
| .ref { width: 14em; height: 1em; margin-top: 0; margin-bottom: 0;} |
| </style> |
| <body> |
| <div id="ref"></div> |
| <script> |
| const TEST_CASES = [ |
| ["blue", "red"], |
| ["blue", "green"], |
| ["rgb(255, 0, 0, .2)", "red"], |
| ["blue", "red", 0.9], |
| ["blue", "red", 0], |
| ["currentColor", "white"], |
| ["currentColor", "rgba(0, 0, 0, .5)"], |
| ]; |
| |
| const refElement = document.getElementById("ref"); |
| const refStyle = getComputedStyle(refElement); |
| |
| let animation = null; |
| |
| for (let [from, to, animationProgress] of TEST_CASES) { |
| const animationProgressExplicit = animationProgress !== undefined; |
| animationProgress = animationProgressExplicit ? animationProgress : 0.5; |
| // Set up the ref. |
| if (animation) { |
| animation.cancel(); |
| } |
| animation = refElement.animate({ |
| backgroundColor: [from, to], |
| }, { duration: 1000 }); |
| animation.pause(); |
| animation.currentTime = 1000 * animationProgress; |
| |
| let results = animationProgress == 0.5 ? 4 : 3; |
| |
| for (let i = 0; i < results; ++i) { |
| let element = document.createElement("div") |
| element.classList.add('ref') |
| element.style.backgroundColor = refStyle.backgroundColor; |
| document.body.appendChild(element) |
| } |
| } |
| |
| refElement.remove() |
| </script> |
| </body> |