120 lines
No EOL
2.9 KiB
HTML
120 lines
No EOL
2.9 KiB
HTML
<!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> |