summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/eyedropper/manual
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/eyedropper/manual
parentInitial commit. (diff)
downloadfirefox-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.html120
-rw-r--r--testing/web-platform/tests/eyedropper/manual/resources/eye_dropper_icon.svg1
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