diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/eyedropper/manual | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/eyedropper/manual')
| -rw-r--r-- | testing/web-platform/tests/eyedropper/manual/eye-dropper.tentative.html | 120 | ||||
| -rw-r--r-- | testing/web-platform/tests/eyedropper/manual/resources/eye_dropper_icon.svg | 1 |
2 files changed, 121 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 diff --git a/testing/web-platform/tests/eyedropper/manual/resources/eye_dropper_icon.svg b/testing/web-platform/tests/eyedropper/manual/resources/eye_dropper_icon.svg new file mode 100644 index 0000000000..20d39973b8 --- /dev/null +++ b/testing/web-platform/tests/eyedropper/manual/resources/eye_dropper_icon.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><path fill="WindowText" d="M20.71 5.63l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
\ No newline at end of file |
