| <!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> |
