1 files changed, 120 insertions, 0 deletions
diff --git a/testing/web-platform/tests/eyedropper/manual/eye-dropper.tentative.html b/testing/web-platform/tests/eyedropper/manual/eye-dropper.tentative.html
new file mode 100644
index 0000000000..9cf7a68a47
--- /dev/null
+++ b/testing/web-platform/tests/eyedropper/manual/eye-dropper.tentative.html
@@ -0,0 +1,120 @@
+<!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>
+\ No newline at end of file