<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: Resolving HWB color values</title>
<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-color-4/#hwb-to-rgb">
<meta name="assert" content="Tests if HWB color values are resolved properly">
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div id="parent" style="color: rgb(45, 23, 27)">
    <div id="inner"></div>
</div>

<script>
    function color_test(color, expected, reason) {
        test(function() {
            var element = document.getElementById('inner');
            // Random value not in our test data.
            fail_value = "rgb(12, 34, 223)"
            element.style.color = "black";
            element.style.cssText = "color: " + fail_value + "; color: " + color;

            if (expected === null)
                assert_equals(getComputedStyle(element).color, fail_value);
            else
                assert_equals(getComputedStyle(element).color, expected);
        }, `${reason}: ${color}`);
    }

    function expected_value(rgb_channels) {
        if (rgb_channels === null)
            return null;
        else if (rgb_channels.length === 3 || rgb_channels[3] == 1 || rgb_channels[3] === undefined)
            return "rgb(" + rgb_channels.slice(0, 3).join(", ") + ")";
        else
            return "rgba(" + rgb_channels.join(", ") + ")";
    }

    function hslToRgb(hue, sat, light) {
      if (light <= .5) {
        var t2 = light * (sat + 1);
      } else {
        var t2 = light + sat - (light * sat);
      }
      var t1 = light * 2 - t2;
      var r = hueToRgb(t1, t2, hue + 2);
      var g = hueToRgb(t1, t2, hue);
      var b = hueToRgb(t1, t2, hue - 2);
      return [r,g,b];
    }

    function hueToRgb(t1, t2, hue) {
      if (hue < 0) hue += 6;
      if (hue >= 6) hue -= 6;

      if (hue < 1) return (t2 - t1) * hue + t1;
      else if (hue < 3) return t2;
      else if (hue < 4) return (t2 - t1) * (4 - hue) + t1;
      else return t1;
    }

    function hwbToRgb(hue, white, black) {
      if (white + black >= 1) {
        let gray = Math.min(Math.max(Math.round(white / (white + black) * 255), 0), 255);
        return [gray, gray, gray];
      }

      var rgb = hslToRgb(hue, 1, .5);
      for (var i = 0; i < 3; i++) {
        rgb[i] *= (1 - white - black);
        rgb[i] += white;
        rgb[i] = Math.min(Math.max(Math.round(rgb[i] * 255), 0), 255);
      }
      return rgb;
    }

    // Test HWB parsing.
    for (var hue of [0, 30, 60, 90, 120, 180, 210, 240, 270, 300, 330, 360]) {
        for (var white of [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1]) {
            for (var black of [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1]) {
                rgb_channels = hwbToRgb(hue / 60, white, black);
                for (var alpha of [undefined, 0, 0.2, 1]) {
                    rgb_channels[3] = alpha;

                    // Test hue using angle notation.
                    let hwb_color_using_degrees = `hwb(${hue}deg ${white * 100}% ${black * 100}%)`;
                    if (alpha !== undefined) {
                        hwb_color_using_degrees = `hwb(${hue}deg ${white * 100}% ${black * 100}% / ${alpha})`;
                    }
                    color_test(hwb_color_using_degrees, expected_value(rgb_channels), "HWB value should parse and round correctly");

                    // Test hue using number notation.
                    let hwb_color_using_number = `hwb(${hue} ${white * 100}% ${black * 100}%)`;
                    if (alpha !== undefined) {
                        hwb_color_using_number = `hwb(${hue} ${white * 100}% ${black * 100}% / ${alpha})`;
                    }
                    color_test(hwb_color_using_number, expected_value(rgb_channels), "HWB value should parse and round correctly");
                }
            }
        }
    }
</script>