eye-dropper.tentative.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<title>EyeDropper API test</title>
<style>
#canvas {
  background-color: #ff0000;
  position: absolute;
  left: 250px;
  height: 300px;
  width: 300px;
}
#color {
  background: url("resources/eye_dropper_icon.svg") no-repeat;
  width: 20px;
  height: 20px;
  border: 0;
  padding: 10px;
}
#color:disabled {
  visibility: hidden;
}
#result {
  visibility: hidden;
  width: 50px;
  height: 50px;
}
#result.visible {
  visibility: visible;
}
#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 EyeDropper API.<br><br><br>
  <div id="action">TODO: Click on the eye dropper icon.</div>
  <div id="canvas"></div>
  <button id="color"></button>
  <div id="result"></div>
  <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: Click on the red canvas";
      log("eye dropper opened");
      let eyeDropper = new EyeDropper();
      eyeDropper.open()
      .then(colorSelectionResult => {
        let entry = log("color selected is " + colorSelectionResult.sRGBHex + " expected: #ff0000");

        result.style.backgroundColor = colorSelectionResult.sRGBHex;
        result.classList.add("visible");

        let span = document.createElement("span");
        let red = parseInt(colorSelectionResult.sRGBHex.substring(1, 3), 16);
        let green = parseInt(colorSelectionResult.sRGBHex.substring(3, 5), 16);
        let blue = parseInt(colorSelectionResult.sRGBHex.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);
        reset.classList.add("visible");
        action.classList.add("hidden");
        color.disabled = true;
      })
      .catch(error => {
        log("no color was selected");
      });
    });

    document.getElementById("reset").addEventListener("click", function() {
      action.innerHTML = "TODO: Click on the eye dropper icon.";
      action.classList.remove("hidden");
      result.classList.remove("visible");
      reset.classList.remove("visible");
      color.disabled = false;
      logger.innerHTML = "";
    })
  </script>
</body>
</html>
chromium/third_party/blink/web_tests/external/wpt/eyedropper/manual/eye-dropper.tentative.html
