| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>EyeDropper test</title> |
| <style> |
| #canvas { |
| background-color: #ff0000; |
| position: absolute; |
| left: 250px; |
| height: 300px; |
| width: 300px; |
| } |
| #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 eye dropper in the color picker feature.<br><br><br> |
| <div id="action">TODO: Open the color picker.</div> |
| <div id="canvas"></div> |
| <input type="color" id="color"> |
| <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: Open the eye dropper and click on the red canvas"; |
| log("color picker opened"); |
| }) |
| |
| document.getElementById("color").addEventListener("input", function(e) { |
| let entry = log("color updated to " + e.target.value + " expected: #ff0000"); |
| let span = document.createElement("span"); |
| |
| let red = parseInt(e.target.value.substring(1, 3), 16); |
| let green = parseInt(e.target.value.substring(3, 5), 16); |
| let blue = parseInt(e.target.value.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); |
| setTimeout(function() { |
| e.target.disabled = true; |
| // hack to close the color picker without user action. |
| e.target.type="text"; |
| e.target.type="color"; |
| }, 500); |
| reset.classList.add("visible"); |
| action.classList.add("hidden"); |
| }) |
| |
| document.getElementById("reset").addEventListener("click", function() { |
| action.innerHTML = "TODO: Open the color picker."; |
| action.classList.remove("hidden"); |
| reset.classList.remove("visible"); |
| color.value = "#000000"; |
| color.disabled = false; |
| logger.innerHTML = ""; |
| }) |
| </script> |
| </body> |
| </html> |
