<!DOCTYPE html>
<meta charset=utf-8>
<title>Form input type=color</title>
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
<link rel=help href="https://html.spec.whatwg.org/multipage/multipage/common-microsyntaxes.html#colors">
<link rel=help href="https://html.spec.whatwg.org/multipage/multipage/states-of-the-type-attribute.html#color-state-(type=color)">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<script>
  var colors = [
    {value: "", expected: "#000000", testname: "Empty value should return #000000"},
    {expected: "#000000", testname: "Missing value should return #000000"},
    {value: "#ffffff", expected: "#ffffff", testname: "Valid simple color: should return #ffffff"},
    {value: "#FFFFFF", expected: "#ffffff", testname: "Valid simple color (containing LATIN CAPITAL LETTERS): should return #ffffff (converted to ASCII lowercase)"},
    {value: "#0F0F0F", expected: "#0f0f0f", testname: "Zero-padding"},
    {value: "#fff", expected: "#000000", testname: "Invalid simple color: not 7 characters long"},
    {value: "fffffff", expected: "#000000", testname: "Invalid simple color: no starting # sign"},
    {value: "#gggggg", expected: "#000000", testname: "Invalid simple color: non ASCII hex digits"},
    {value: "foobar", expected: "#000000", testname: "Invalid simple color: foobar"},
    {value: "#ffffff\u0000", expected: "#000000", testname: "Invalid color: trailing Null (U+0000)"},
    {value: "#ffffff;", expected: "#000000", testname: "Invalid color: trailing ;"},
    {value: " #ffffff", expected: "#000000", testname: "Invalid color: leading space"},
    {value: "#ffffff ", expected: "#000000", testname: "Invalid color: trailing space"},
    {value: " #ffffff ", expected: "#000000", testname: "Invalid color: leading+trailing spaces"},
    {value: "crimson", expected: "#000000", testname: "Invalid color: keyword crimson"},
    {value: "bisque", expected: "#000000", testname: "Invalid color: keyword bisque"},
    {value: "currentColor", expected: "#000000", testname: "Invalid color: keyword currentColor"},
    {value: "transparent", expected: "#000000", testname: "Invalid color: keyword transparent"},
    {value: "ActiveBorder", expected: "#000000", testname: "Invalid color: keyword ActiveBorder"},
    {value: "inherit", expected: "#000000", testname: "Invalid color: keyword inherit"},
    {value: "rgb(1,1,1)", expected: "#000000", testname: "Invalid color: rgb(1,1,1)"},
    {value: "rgb(1,1,1,1)", expected: "#000000", testname: "Invalid color: rgb(1,1,1,1)"},
    {value: "#FFFFF\u1F4A9", expected: "#000000", testname: "Invalid color: PILE OF POO (U+1F4A9)"}
  ];
  for (var i = 0; i < colors.length; i++) {
    var w = colors[i];
    test(function() {
      var input = document.createElement("input");
      input.type = "color";
      input.value = w.value;
      assert_equals(input.value, w.expected);
    }, w.testname);
  }
</script>