Skip to content

GitLab

T
tangled
Commit b2601d95 authored by Joey Arhar's avatar Joey Arhar Committed by Commit Bot
Browse files
Options

Update manual_tests/forms/color-suggestion-picker.html 

Before this change, color-suggestion-picker.html failed to open the
color picker.

Change-Id: I4301e50f6c5030760dd112092f49fc55410f420d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2466513Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/master@{#816453}
parent 90c57862
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 57 deletions
third_party/blink/manual_tests/forms/color-suggestion-picker.html
View file @ b2601d95
...@@ -2,82 +2,112 @@ ...@@ -2,82 +2,112 @@
<html> <html>
<head> <head>
<meta charset=utf-8> <meta charset=utf-8>
<title>Color Suggestion Picker test</title> <title>&lt;input type=color&gt;</title>
<style> <style>
body { body {
background-color: #eeffff; background-color: #eeffff;
} }
iframe { iframe {
z-index: 2147483647; z-index: 2147483647;
width: 180px; width: 180px;
height: 240px; height: 240px;
border: 0; border: 0;
overflow: hidden; overflow: hidden;
} }
textarea {
width: 350px;
height: 150px;
}
</style> </style>
</head> </head>
<body> <body>
<p>This is a testbed for a color suggestion picker.</p> <h3>This is a testbed for &lt;input type=color&gt;</h3>
<div><input type="color" id="color"></div> <h3>Regular popup &lt;input type=color&gt; <input type="color" id="color"></h3>
<iframe></iframe>
<ol id="console" style="font-family:monospace;"> <h3>Inline iframe &lt;input type=color&gt;</h3>
</ol> <div>Set arguments for the color picker with this textarea.</div>
<div>The arguments are used inside the picker as "global.params".</div>
<div>The string must be JSON formatted with double quotes.</div>
<div><textarea id=argsTextarea></textarea></div>
<div><button id=restartbutton>Restart picker with args</button></div>
<br>
<div id=iframecontainer></div>
<ol id="console" style="font-family:monospace;"></ol>
<script> <script>
var arguments = { argsTextarea.textContent = `{
values : ['#000000', '#404040', '#808080', '#c0c0c0', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff', '#404040', '#808080', '#c0c0c0', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff'], "selectedColor": "#aaaaaa"
otherColorLabel: 'Other...' }`;
};
restartbutton.onclick = openColorPicker;
function openColorPicker(args) {
var frame = document.getElementsByTagName('iframe')[0]; function openColorPicker() {
var doc = frame.contentDocument; const oldFrame = document.getElementById('coloriframe');
doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>'; if (oldFrame)
var commonCssLink = doc.createElement('link'); oldFrame.remove();
commonCssLink.rel = 'stylesheet'; const frame = document.createElement('iframe');
commonCssLink.href = '../../Source/core/html/forms/resources/pickerCommon.css?' + (new Date()).getTime(); frame.id = 'coloriframe';
doc.head.appendChild(commonCssLink); iframecontainer.appendChild(frame);
var link = doc.createElement('link'); const doc = frame.contentDocument;
link.rel = 'stylesheet';
link.href = '../../Source/core/html/forms/resources/colorSuggestionPicker.css?' + (new Date()).getTime(); // The following code sets up a color picker inside an iframe as similarly as
doc.head.appendChild(link); // possible to ColorChooserPopupUIController::WriteColorPickerDocument.
var commonJsScript = doc.createElement('script'); // https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/html/forms/color_chooser_popup_ui_controller.cc;l=97;drc=cc7f2a9e51671f702fd5e6a07c0ffda834fa8a38
commonJsScript.src = '../../Source/core/html/forms/resources/pickerCommon.js?' + (new Date()).getTime();
doc.body.appendChild(commonJsScript); doc.documentElement.innerHTML = `
var script = doc.createElement('script'); <head>
script.src = '../../Source/core/html/forms/resources/colorSuggestionPicker.js?' + (new Date()).getTime(); <meta charset='UTF-8'>
doc.body.appendChild(script); <link rel=stylesheet href="../../renderer/core/html/forms/resources/pickerCommon.css">
<link rel=stylesheet href="../../renderer/core/html/forms/resources/color_picker.css">
var pagePopupController = { </head>
setValueAndClosePopup: function(numValue, stringValue) { <body>
window.log('number=' + numValue + ', string="' + stringValue + '"'); <div id=main>Loading...</div>
if (numValue === 0) </body>
window.document.getElementById('color').value = stringValue; `;
},
setValue: function(value) { const pickerCommon = doc.createElement('script');
window.log('value="' + value + '"'); pickerCommon.src = "../../renderer/core/html/forms/resources/pickerCommon.js";
window.document.getElementById('color').value = value; doc.body.appendChild(pickerCommon);
},
closePopup: function() { const colorPicker = doc.createElement('script');
}, colorPicker.src = "../../renderer/core/html/forms/resources/color_picker.js";
} doc.body.appendChild(colorPicker);
setTimeout(function() { const colorPickerCommon = doc.createElement('script');
frame.contentWindow.postMessage(JSON.stringify(args), "*"); colorPickerCommon.src = "../../renderer/core/html/forms/resources/color_picker_common.js";
frame.contentWindow.pagePopupController = pagePopupController; doc.body.appendChild(colorPickerCommon);
}, 100);
const pagePopupController = frame.contentWindow.pagePopupController = {
setValueAndClosePopup: function(numValue, stringValue) {
window.log('number=' + numValue + ', string="' + stringValue + '"');
if (numValue === 0)
window.document.getElementById('color').value = stringValue;
},
setValue: function(value) {
window.log('value="' + value + '"');
window.document.getElementById('color').value = value;
},
closePopup: function() {
},
};
setTimeout(function() {
frame.contentWindow.postMessage(argsTextarea.textContent, "*");
frame.contentWindow.pagePopupController = pagePopupController;
}, 100);
} }
function log(str) { function log(str) {
var entry = document.createElement('li'); var entry = document.createElement('li');
entry.innerText = str; entry.innerText = str;
document.getElementById('console').appendChild(entry); document.getElementById('console').appendChild(entry);
} }
openColorPicker(arguments); openColorPicker();
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
third_party/blink/renderer/core/html/forms/resources/color_picker.js
View file @ b2601d95
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
/** /**
* @fileoverview Color picker used by <input type='color' /> * @fileoverview Color picker used by <input type='color' />
*
* This can be debugged with manual_tests/forms/color-suggestion-picker.html
*/ */
function initializeColorPicker() { function initializeColorPicker() {
......
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