Skip to content

GitLab

T
tangled
Commit 712f6cf4 authored by Ionel Popescu's avatar Ionel Popescu Committed by Chromium LUCI CQ
Browse files
Options

Add manual test for the eye dropper. 

Bug: 1148986
Change-Id: I816c94a2e12044fad3d8cef762848420f9652488
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2565393
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834384}
parent 946aa15c
Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 14 deletions
third_party/blink/manual_tests/forms/eye-dropper.html 0 → 100644
View file @ 712f6cf4
<!DOCTYPE html>
<html>
<head>
<title>EyeDropper test</title>
<style>
#canvas {
background-color: #ff0000;
position: absolute;
left: 250px;
height: 300px;
width: 300px;
}
#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 eye dropper in the color picker feature.<br><br><br>
<div id="action">TODO: Open the color picker.</div>
<div id="canvas"></div>
<input type="color" id="color">
<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: Open the eye dropper and click on the red canvas";
log("color picker opened");
})
document.getElementById("color").addEventListener("input", function(e) {
let entry = log("color updated to " + e.target.value + " expected: #ff0000");
let span = document.createElement("span");
if (e.target.value == "#ff0000") {
span.innerText = "PASS ";
span.classList.add("passed");
} else {
span.innerText = "FAIL ";
span.classList.add("failed");
}
entry.prepend(span);
e.target.disabled = true;
setTimeout(function() {
// hack to close the color picker without user action.
e.target.type="text";
e.target.type="color";
}, 500);
reset.classList.add("visible");
action.classList.add("hidden");
})
document.getElementById("reset").addEventListener("click", function() {
action.innerHTML = "TODO: Open the color picker.";
action.classList.remove("hidden");
reset.classList.remove("visible");
color.value = "#000000";
color.disabled = false;
logger.innerHTML = "";
})
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/renderer/core/html/forms/resources/color_picker.js
View file @ 712f6cf4
......@@ -479,19 +479,7 @@ class ColorPicker extends HTMLElement {
const newColor = event.detail.color;
if (!this.selectedColor.equals(newColor)) {
this.selectedColor = newColor;
// There may not be an exact match for newColor in the HueSlider or
// ColorWell, in which case we will display the closest match. When this
// happens though, we want the manually chosen values to remain the
// selected values (as they were explicitly specified by the user).
// Therefore, we need to prevent them from getting overwritten when
// onVisualColorChange_ runs. We do this by setting the
// processingManualColorChange_ flag here and checking for it inside
// onVisualColorChange_. If the flag is set, the manual color values
// will not be updated with the color shown in the visual color picker.
this.processingManualColorChange_ = true;
this.visualColorPicker_.color = newColor;
this.processingManualColorChange_ = false;
this.updateVisualColorPicker(newColor);
const selectedValue = newColor.asHex();
window.pagePopupController.setValue(selectedValue);
......@@ -520,6 +508,25 @@ class ColorPicker extends HTMLElement {
}
};
/**
* @param {!Color} newColor
*/
updateVisualColorPicker(newColor) {
// There may not be an exact match for newColor in the HueSlider or
// ColorWell, in which case we will display the closest match. When this
// happens though, we want the manually chosen values to remain the
// selected values (as they were explicitly specified by the user).
// Therefore, we need to prevent them from getting overwritten when
// onVisualColorChange_ runs. We do this by setting the
// processingManualColorChange_ flag here and checking for it inside
// onVisualColorChange_. If the flag is set, the manual color values
// will not be updated with the color shown in the visual color picker.
this.processingManualColorChange_ = true;
this.visualColorPicker_.color = newColor;
this.processingManualColorChange_ = false;
}
/**
* @param {!Event} event
*/
......@@ -597,7 +604,7 @@ class ColorPicker extends HTMLElement {
const selectedValue = new Color(window.updateData.color);
this.selectedColor = selectedValue;
this.manualColorPicker_.color = selectedValue;
this.visualColorPicker_.color = selectedValue;
this.updateVisualColorPicker(selectedValue);
const hexValue = selectedValue.asHex();
window.pagePopupController.setValue(hexValue);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment