diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/eyedropper/manual/eye-dropper.tentative.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/eyedropper/manual/eye-dropper.tentative.html')
| -rw-r--r-- | testing/web-platform/tests/eyedropper/manual/eye-dropper.tentative.html | 120 |
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 |