diff options
Diffstat (limited to 'testing/web-platform/tests/eyedropper')
3 files changed, 166 insertions, 0 deletions
diff --git a/testing/web-platform/tests/eyedropper/eye-dropper-abort-signal.tentative.https.html b/testing/web-platform/tests/eyedropper/eye-dropper-abort-signal.tentative.https.html new file mode 100644 index 0000000000..ff57b27028 --- /dev/null +++ b/testing/web-platform/tests/eyedropper/eye-dropper-abort-signal.tentative.https.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>EyeDropper Test: abort signal</title> +<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<button id="eyedropperbutton">Open eyedropper!</button> + +<script> + function clickOn(element) { + const actions = new test_driver.Actions(); + return actions.pointerMove(0, 0, {origin: element}) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + } + + promise_test(async t => { + const eyeDropperButton = document.getElementById("eyedropperbutton"); + eyeDropperButton.addEventListener("click", async () => { + let eyeDropper = new EyeDropper(); + let controller = new AbortController(); + controller.abort(); + await promise_rejects_dom(t, "AbortError", eyeDropper.open({signal: controller.signal})); + }); + await clickOn(eyeDropperButton); + }, "Calling EyeDropper.open with signal's aborted flag set should directly throw AbortError"); + + promise_test(async t => { + const eyeDropperButton = document.getElementById("eyedropperbutton"); + eyeDropperButton.addEventListener("click", () => { + let eyeDropper = new EyeDropper(); + let controller = new AbortController(); + this.step_timeout(() => { + controller.abort(); + }, 500); + promise_rejects_dom(t, "AbortError", eyeDropper.open({signal: controller.signal})); + }); + await clickOn(eyeDropperButton); + }, "Calling abort should dismiss the eyedropper"); + +</script> 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 |
