<!DOCTYPE html>
<meta charset="utf-8">
<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=1703356">
<link rel="author" href="mailto:barret@brennie.ca" title="Barret Rennie">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="./color-mix-non-srgb-001-ref.html">
<style>
div { color: black; }
.test { background-color: black; width: 14em; height: 1em; margin-top: 0; margin-bottom: 0; }
</style>
<body>
<script>
const TEST_CASES = [
    ["red", "green", "xyz", "rgb(188, 92, 0)"],
    ["red", "green", "lab", "rgb(161, 108, 0)"],
    ["red", "green", "lch", "rgb(145, 116, 0)"],
    ["red", "green 90%", "xyz", "rgb(89, 122, 0)"],
    ["red", "green 90%", "lab", "rgb(65, 126, 0)"],
    ["red", "green 90%", "lch", "rgb(49, 128, 0)"],
    ["red 90%", "green", "xyz", "rgb(243, 40, 0)"],
    ["red 90%", "green", "lab", "rgb(237, 55, 0)"],
    ["red 90%", "green", "lch", "rgb(235, 59, 0)"],
];

for (let [from, to, space, expected] of TEST_CASES) {
    const value = `color-mix(in ${space}, ${from}, ${to})`;

    const element = document.createElement("div")
    element.classList.add('test')
    element.style.backgroundColor = value;
    document.body.appendChild(element)
}
</script>
</body>