| <!doctype html> |
| <!-- Tentative pending potential syntax changes in https://github.com/w3c/csswg-drafts/issues/6066 --> |
| <link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1695376"> |
| <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> |
| <link rel="author" href="https://mozilla.org" title="Mozilla"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| div { color: black } |
| </style> |
| <div id="test"></div> |
| <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 testElement = document.getElementById("test"); |
| const refElement = document.getElementById("ref"); |
| const testStyle = getComputedStyle(testElement); |
| const refStyle = getComputedStyle(refElement); |
| |
| let animation = null; |
| |
| for (let [from, to, animationProgress] of TEST_CASES) { |
| const animationProgressExplicit = animationProgress !== undefined; |
| animationProgress = animationProgressExplicit ? animationProgress : 0.5; |
| test(function() { |
| // Set up the ref. |
| if (animation) { |
| animation.cancel(); |
| } |
| animation = refElement.animate({ |
| backgroundColor: [from, to], |
| }, { duration: 1000 }); |
| animation.pause(); |
| animation.currentTime = 1000 * animationProgress; |
| |
| let progress = ` ${animationProgress * 100}%`; |
| let oneMinusProgress = ` ${(1 - animationProgress) * 100}%`; |
| let values = [ |
| `color-mix(in srgb, ${from}, ${to} ${progress})`, |
| `color-mix(in srgb, ${from} ${oneMinusProgress}, ${to})`, |
| `color-mix(in srgb, ${from} ${oneMinusProgress}, ${to} ${progress})`, |
| ]; |
| |
| if (animationProgress == 0.5) { |
| values.push(`color-mix(in srgb, ${from}, ${to})`); |
| } |
| |
| for (let value of values) { |
| testElement.style.backgroundColor = ""; |
| testElement.style.backgroundColor = value; |
| |
| assert_not_equals(testElement.style.backgroundColor, "", "Should parse " + value); |
| assert_equals(testStyle.backgroundColor, refStyle.backgroundColor, "Colors should match for " + value); |
| } |
| }, `From ${from} to ${to} at ${animationProgress}`); |
| } |
| </script> |
