Source code
Revision control
Copy as Markdown
Other Tools
<!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>