<!DOCTYPE html>
<html>
<head>
<title>EyeDropper test</title>
<style>
#canvas {
  background-color: #ff0000;
  position: absolute;
  left: 250px;
  height: 300px;
  width: 300px;
}
#action {
  font-weight: bold;
}
#action.hidden {
  visibility: hidden;
}
#logger {
  position: absolute;
  top: 400px;
}
#reset {
  position: absolute;
  top: 40px;
  visibility: hidden;
}
#reset.visible {
  visibility: visible;
}
.passed {
  color: green;
  font-size: x-large;
}
.failed {
  color: red;
  font-size: x-large;
}
</style>
</head>
<body>
  This tests the eye dropper in the color picker feature.<br><br><br>
  <div id="action">TODO: Open the color picker.</div>
  <div id="canvas"></div>
  <input type="color" id="color">
  <ol id="logger"></ol>
  <button id="reset">Reset test!</button>

  <script>
    function log(str) {
      let entry = document.createElement("li");
      entry.innerText = str;
      logger.appendChild(entry);
      return entry;
    }

    document.getElementById("color").addEventListener("click", function() {
      action.innerHTML = "TODO: Open the eye dropper and click on the red canvas";
      log("color picker opened");
    })

    document.getElementById("color").addEventListener("input", function(e) {
      let entry = log("color updated to " + e.target.value + " expected: #ff0000");
      let span = document.createElement("span");

      let red = parseInt(e.target.value.substring(1, 3), 16);
      let green = parseInt(e.target.value.substring(3, 5), 16);
      let blue = parseInt(e.target.value.substring(5, 7), 16);
      // Make sure the selected color is close to pure red (#FF0000), but allow
      // some deviation due to monitor color calibration.
      if (red >= 0xC0 && green <= 0x3F && blue <= 0x3F) {
        span.innerText = "PASS ";
        span.classList.add("passed");
      } else {
        span.innerText = "FAIL ";
        span.classList.add("failed");
      }
      entry.prepend(span);
      setTimeout(function() {
        e.target.disabled = true;
        // hack to close the color picker without user action.
        e.target.type="text";
        e.target.type="color";
      }, 500);
      reset.classList.add("visible");
      action.classList.add("hidden");
    })

    document.getElementById("reset").addEventListener("click", function() {
      action.innerHTML = "TODO: Open the color picker.";
      action.classList.remove("hidden");
      reset.classList.remove("visible");
      color.value = "#000000";
      color.disabled = false;
      logger.innerHTML = "";
    })
  </script>
</body>
</html>