<!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>
Codebase Browser
chromium