| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>CSS transitions with color-mix</title> |
| </head> |
| <style> |
| #target-1, #target-2, #target-3, #target-4, #target-5, #target-6 { |
| color: black; |
| height: 100px; |
| width: 100px; |
| display: inline-block; |
| transition: background-color 1s linear; |
| } |
| #target-1, |
| #target-2.update-2, |
| #target-3, |
| #target-4.update-4 { |
| background-color: color-mix(in srgb, white 50%, |
| currentcolor); |
| } |
| #target-1.update-1, |
| #target-2 { |
| background-color: rgb(0, 255, 0); |
| } |
| |
| #target-3.update-3, |
| #target-4 { |
| background-color: color(srgb 0.0 1.0 0.0); |
| } |
| |
| #target-5, #target-6.update-6 { |
| background-color: color-mix(in srgb, transparent 50%, |
| currentcolor); |
| } |
| |
| #target-6, #target-5.update-5 { |
| background-color: rgba(255, 255, 255, 0.75); |
| } |
| |
| </style> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="/css/support/color-testcommon.js"></script> |
| <body> |
| <div id="target-1"></div> |
| <div id="target-2"></div> |
| <div id="target-3"></div> |
| <div id="target-4"></div> |
| <div id="target-5"></div> |
| <div id="target-6"></div> |
| </body> |
| <script> |
| 'use strict'; |
| |
| async function runAnimationTest(t, elementId, update, |
| expected_colors) { |
| const elem = document.getElementById(elementId); |
| t.add_cleanup(() => { |
| elem.classList.remove(update); |
| }); |
| await waitForNextFrame(); |
| await waitForNextFrame(); |
| elem.classList.add(update); |
| const anim = elem.getAnimations()[0]; |
| await anim.ready; |
| // Keep the animation in effect when it reaches the end. |
| anim.effect.updateTiming({ fill: 'forwards' }); |
| expected_colors.forEach(data => { |
| anim.currentTime = 1000 * data.at; |
| const actual = getComputedStyle(elem).backgroundColor; |
| const expected = data.value; |
| assert_oklab_color( |
| actual, expected, |
| `Background color at ${100*data.at}% animation progress`); |
| }); |
| } |
| |
| const gray_to_green = [ |
| { at: 0, value: 'oklab(0.5981 0.0000 0.0000)' }, |
| { at: 0.25, value: 'oklab(0.6652 -0.0584 0.0449)' }, |
| { at: 0.5, value: 'oklab(0.7323 -0.1169 0.0898)' }, |
| { at: 0.75, value: 'oklab(0.7994 -0.1754 0.1346)' }, |
| { at: 1, value: 'oklab(0.8664 -0.2338 0.1795)' } |
| ]; |
| |
| const green_to_gray = [ |
| { at: 0, value: 'oklab(0.8664 -0.2338 0.1795)' }, |
| { at: 0.25, value: 'oklab(0.7994 -0.1754 0.1346)' }, |
| { at: 0.5, value: 'oklab(0.7323 -0.1169 0.0898)' }, |
| { at: 0.75, value: 'oklab(0.6652 -0.0584 0.0449)' }, |
| { at: 1, value: 'oklab(0.5981 0.0000 0.0000)' } |
| ]; |
| |
| const translucent_black_to_white = [ |
| { at: 0, value: 'oklab(0 0 0 / 0.5)' }, |
| { at: 0.25, value: 'oklab(0.3330 0 0 / 0.5623)' }, |
| { at: 0.5, value: 'oklab(0.5997 0 0 / 0.6245)' }, |
| { at: 0.75, value: 'oklab(0.8180 0 0 / 0.6868)' }, |
| { at: 1, value: 'oklab(1 0 0 / 0.75)' } |
| ]; |
| |
| const translucent_white_to_black = [ |
| { at: 0, value: 'oklab(1 0 0 / 0.75)' }, |
| { at: 0.25, value: 'oklab(0.8180 0 0. / 0.6868)' }, |
| { at: 0.5, value: 'oklab(0.5997 0 0 / 0.6245)' }, |
| { at: 0.75, value: 'oklab(0.3330 0 0 / 0.5623)' }, |
| { at: 1, value: 'oklab(0 0 0 / 0.5)' } |
| ]; |
| |
| window.onload = async () => { |
| promise_test(t => { |
| return runAnimationTest(t, 'target-1', 'update-1', |
| gray_to_green); |
| }, 'Transition from color-mix to legacy rgb'); |
| |
| promise_test(t => { |
| return runAnimationTest(t, 'target-2', 'update-2', |
| green_to_gray); |
| }, 'Transition from legacy rgb to color-mix'); |
| |
| promise_test(t => { |
| return runAnimationTest(t, 'target-3', 'update-3', |
| gray_to_green); |
| }, 'Transition from color-mix to srgb'); |
| |
| promise_test(t => { |
| return runAnimationTest(t, 'target-4', 'update-4', |
| green_to_gray); |
| }, 'Transition from srgb to color-mix'); |
| |
| promise_test(t => { |
| return runAnimationTest(t, 'target-5', 'update-5', |
| translucent_black_to_white); |
| }, 'Transition from color-mix with transparency to legacy rgba'); |
| |
| promise_test(t => { |
| return runAnimationTest(t, 'target-6', 'update-6', |
| translucent_white_to_black); |
| }, 'Transition from legacy rgba to color-mix with transparency'); |
| }; |
| </script> |
| </html> |