Skip to content

Commit ca5841f

Browse files
ipopescu93chromium-wpt-export-bot
ipopescu93
authored and
chromium-wpt-export-bot
committed
[EyeDropper API] Update implementation to match explainer.
Explainer: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/EyeDropper/explainer.md I2P: https://groups.google.com/a/chromium.org/g/blink-dev/c/cPTMI1i6d7I/ The explainer was updated to address the tag review: - moved to a promise based design (EyeDropper.open() returns a Promise<ColorSelectionResult>) - renamed the selected color property to sRGBHex to make it clear that the color is a string and it is in sRGB (this allows room for future properties to be added) For now a manual test has been added, more test coverage is going to be added in follow-up CLs. Bug: 897309 Change-Id: Ib3631b94ff43cd59ba1640f0c295e233f058383a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3027321 Reviewed-by: Mason Freed <[email protected]> Commit-Queue: Ionel Popescu <[email protected]> Cr-Commit-Position: refs/heads/master@{#902121}
1 parent c4241ca commit ca5841f

File tree

2 files changed

+121
-0
lines changed

2 files changed

+121
-0
lines changed

‎eyedropper/manual/eye-dropper.tentative.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>EyeDropper API test</title>
5+
<style>
6+
#canvas {
7+
background-color: #ff0000;
8+
position: absolute;
9+
left: 250px;
10+
height: 300px;
11+
width: 300px;
12+
}
13+
#color {
14+
background: url("resources/eye_dropper_icon.svg") no-repeat;
15+
width: 20px;
16+
height: 20px;
17+
border: 0;
18+
padding: 10px;
19+
}
20+
#color:disabled {
21+
visibility: hidden;
22+
}
23+
#result {
24+
visibility: hidden;
25+
width: 50px;
26+
height: 50px;
27+
}
28+
#result.visible {
29+
visibility: visible;
30+
}
31+
#action {
32+
font-weight: bold;
33+
}
34+
#action.hidden {
35+
visibility: hidden;
36+
}
37+
#logger {
38+
position: absolute;
39+
top: 400px;
40+
}
41+
#reset {
42+
position: absolute;
43+
top: 40px;
44+
visibility: hidden;
45+
}
46+
#reset.visible {
47+
visibility: visible;
48+
}
49+
.passed {
50+
color: green;
51+
font-size: x-large;
52+
}
53+
.failed {
54+
color: red;
55+
font-size: x-large;
56+
}
57+
</style>
58+
</head>
59+
<body>
60+
This tests the EyeDropper API.<br><br><br>
61+
<div id="action">TODO: Click on the eye dropper icon.</div>
62+
<div id="canvas"></div>
63+
<button id="color"></button>
64+
<div id="result"></div>
65+
<ol id="logger"></ol>
66+
<button id="reset">Reset test!</button>
67+
68+
<script>
69+
function log(str) {
70+
let entry = document.createElement("li");
71+
entry.innerText = str;
72+
logger.appendChild(entry);
73+
return entry;
74+
}
75+
76+
document.getElementById("color").addEventListener("click", function() {
77+
action.innerHTML = "TODO: Click on the red canvas";
78+
log("eye dropper opened");
79+
let eyeDropper = new EyeDropper();
80+
eyeDropper.open()
81+
.then(colorSelectionResult => {
82+
let entry = log("color selected is " + colorSelectionResult.sRGBHex + " expected: #ff0000");
83+
84+
result.style.backgroundColor = colorSelectionResult.sRGBHex;
85+
result.classList.add("visible");
86+
87+
let span = document.createElement("span");
88+
let red = parseInt(colorSelectionResult.sRGBHex.substring(1, 3), 16);
89+
let green = parseInt(colorSelectionResult.sRGBHex.substring(3, 5), 16);
90+
let blue = parseInt(colorSelectionResult.sRGBHex.substring(5, 7), 16);
91+
// Make sure the selected color is close to pure red (#FF0000), but allow
92+
// some deviation due to monitor color calibration.
93+
if (red >= 0xC0 && green <= 0x3F && blue <= 0x3F) {
94+
span.innerText = "PASS ";
95+
span.classList.add("passed");
96+
} else {
97+
span.innerText = "FAIL ";
98+
span.classList.add("failed");
99+
}
100+
entry.prepend(span);
101+
reset.classList.add("visible");
102+
action.classList.add("hidden");
103+
color.disabled = true;
104+
})
105+
.catch(error => {
106+
log("no color was selected");
107+
});
108+
});
109+
110+
document.getElementById("reset").addEventListener("click", function() {
111+
action.innerHTML = "TODO: Click on the eye dropper icon.";
112+
action.classList.remove("hidden");
113+
result.classList.remove("visible");
114+
reset.classList.remove("visible");
115+
color.disabled = false;
116+
logger.innerHTML = "";
117+
})
118+
</script>
119+
</body>
120+
</html>

‎eyedropper/manual/resources/eye_dropper_icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)