Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(75)

Unified Diff: ManualTests/forms/list-picker.html

Issue 736883002: Implement <select> Popup Menu using PagePopup (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: ManualTests/forms/list-picker.html
diff --git a/ManualTests/forms/list-picker.html b/ManualTests/forms/list-picker.html
new file mode 100644
index 0000000000000000000000000000000000000000..bb4c2833af733daebc3a215da543ccafa5907b28
--- /dev/null
+++ b/ManualTests/forms/list-picker.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>List Picker test</title>
+<style>
+body {
+ background-color: #eeffff;
+}
+iframe {
+ z-index: 2147483647;
+ width: 100px;
+ height: 100px;
+ border: 0;
+ overflow: hidden;
+}
+</style>
+</head>
+<body>
+
+<p>This is a testbed for list picker.</p>
+
+<div>
+<select id="menu">
+ <option value="0">foo</option>
+ <option value="1">bar</option>
+ <option value="2">bar</option>
+ <optgroup label=bar>
+ <option value="4">bar</option>
+ <option value="5">bar</option>
+ </optgroup>
+ <option value="6">bar</option>
+</select>
+<iframe></iframe>
+
+<ol id="console" style="font-family:monospace;">
+</ol>
+
+<script>
+var arguments = {
+ selectedIndex: 0,
+ children: [{
+ type: "option",
+ label: "foo",
+ title: "",
+ value: 0,
+ ariaLabel: "",
+ disabled: false,
+ style: {
+ color: "black",
+ backgroundColor: "transparent",
+ fontSize: "11px",
+ fontWeight: "400",
+ fontFamily: ["sans-serif"],
+ visibility: "visible",
+ display: "block",
+ direction: "ltr",
+ unicodeBidi: "normal"
+ }
+ }, {
+ type: "option",
+ label: "bar",
+ title: "",
+ value: 1,
+ ariaLabel: "",
+ disabled: false,
+ style: {
+ color: "black",
+ backgroundColor: "transparent",
+ fontSize: "11px",
+ fontWeight: "400",
+ fontFamily: ["sans-serif"],
+ visibility: "visible",
+ display: "block",
+ direction: "ltr",
+ unicodeBidi: "normal"
+ }
+ }, {
+ type: "option",
+ label: "bar",
+ title: "",
+ value: 2,
+ ariaLabel: "",
+ disabled: false,
+ style: {
+ color: "black",
+ backgroundColor: "transparent",
+ fontSize: "11px",
+ fontWeight: "400",
+ fontFamily: ["sans-serif"],
+ visibility: "visible",
+ display: "block",
+ direction: "ltr",
+ unicodeBidi: "normal"
+ }
+ }, {
+ type: "optgroup",
+ label: "foo",
+ title: "",
+ ariaLabel: "",
+ disabled: false,
+ children: [{
+ type: "option",
+ label: "bar",
+ title: "",
+ value: 3,
+ ariaLabel: "",
+ disabled: false,
+ style: {
+ color: "black",
+ backgroundColor: "transparent",
+ fontSize: "11px",
+ fontWeight: "700",
+ fontFamily: ["sans-serif"],
+ visibility: "visible",
+ display: "block",
+ direction: "ltr",
+ unicodeBidi: "normal"
+ }
+ },
+ {
+ type: "option",
+ label: "bar",
+ title: "",
+ value: 4,
+ ariaLabel: "",
+ disabled: false,
+ style: {
+ color: "black",
+ backgroundColor: "transparent",
+ fontSize: "11px",
+ fontWeight: "400",
+ fontFamily: ["sans-serif"],
+ visibility: "visible",
+ display: "block",
+ direction: "ltr",
+ unicodeBidi: "normal"
+ }
+ }],
+ style: {
+ color: "black",
+ backgroundColor: "transparent",
+ fontSize: "11px",
+ fontWeight: "400",
+ fontFamily: ["sans-serif"],
+ visibility: "visible",
+ display: "block",
+ direction: "ltr",
+ unicodeBidi: "normal"
+ }
+ }, {
+ type: "option",
+ label: "bar",
+ title: "",
+ value: 5,
+ ariaLabel: "",
+ disabled: false,
+ style: {
+ color: "black",
+ backgroundColor: "transparent",
+ fontSize: "11px",
+ fontWeight: "400",
+ fontFamily: ["sans-serif"],
+ visibility: "visible",
+ display: "block",
+ direction: "ltr",
+ unicodeBidi: "normal"
+ }
+ }],
+ anchorRectInScreen: {
+ x: 1332,
+ y: 356,
+ width: 64,
+ height: 18,
+ },
+};
+
+function openListPicker(args) {
+ var frame = document.getElementsByTagName('iframe')[0];
+ var doc = frame.contentDocument;
+ doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
+ var commonCssLink = doc.createElement('link');
+ commonCssLink.rel = 'stylesheet';
+ commonCssLink.href = '../../Source/web/resources/pickerCommon.css?' + (new Date()).getTime();
+ doc.head.appendChild(commonCssLink);
+ var listPickerCssLink = doc.createElement('link');
+ listPickerCssLink.rel = 'stylesheet';
+ listPickerCssLink.href = '../../Source/web/resources/listPicker.css?' + (new Date()).getTime();
+ doc.head.appendChild(listPickerCssLink);
+ var commonJsScript = doc.createElement('script');
+ commonJsScript.src = '../../Source/web/resources/pickerCommon.js?' + (new Date()).getTime();
+ doc.body.appendChild(commonJsScript);
+ var listPickerJsScript = doc.createElement('script');
+ listPickerJsScript.src = '../../Source/web/resources/listPicker.js?' + (new Date()).getTime();
+ doc.body.appendChild(listPickerJsScript);
+
+ var pagePopupController = {
+ setValue: function(stringValue) {
+ window.log('string="' + stringValue + '"');
+ if (numValue == 0)
+ window.document.getElementById('menu').value = stringValue;
+ },
+ setValueAndClosePopup: function(numValue, stringValue) {
+ window.log('number=' + numValue + ', string="' + stringValue + '"');
+ if (numValue == 0)
+ window.document.getElementById('menu').value = stringValue;
+ },
+ }
+
+ setTimeout(function() {
+ frame.contentWindow.postMessage(JSON.stringify(args), "*");
+ frame.contentWindow.pagePopupController = pagePopupController;
+ }, 100);
+}
+
+function log(str) {
+ var entry = document.createElement('li');
+ entry.innerText = str;
+ document.getElementById('console').appendChild(entry);
+}
+
+openListPicker(arguments);
+</script>
+</body>
+</html>

Powered by Google App Engine
This is Rietveld 408576698