<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: Resolving HSL color values</title>
<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-color-values">
<meta name="assert" content="Tests if HSL 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(", ") + ")";
    }

    // Taken mostly from https://drafts.csswg.org/css-color/#hsl-to-rgb
    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 = Math.min(Math.max(Math.round(hueToRgb(t1, t2, hue + 2) * 255), 0), 255);
      var g = Math.min(Math.max(Math.round(hueToRgb(t1, t2, hue) * 255), 0), 255);
      var b = Math.min(Math.max(Math.round(hueToRgb(t1, t2, hue - 2) * 255), 0), 255);
      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;
    }

    // Test HSL parsing
    for (var hue of [0, 30, 60, 90, 120, 180, 210, 240, 270, 300, 330, 360]) {
        for (var sat of [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1]) {
            for (var light of [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1]) {
                rgb_channels = hslToRgb(hue / 60, sat, light);
                for (var alpha of [undefined, 0, 0.2, 1]) {
                    hsl_color = "hsl(" + hue + ", " + sat * 100 + "%, " + light * 100 + "%)";
                    rgb_channels[3] = alpha;
                    if (alpha !== undefined) {
                        hsl_color = "hsla(" + hue + ", " + sat * 100 + "%, " + light * 100 + "%, " + alpha + ")";
                    }
                    color_test(hsl_color, expected_value(rgb_channels), "HSL/HSLA value should parse and round correctly");
                }
            }
        }
    }
</script>