third_party/WebKit/ManualTests/forms/list-picker.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset=utf-8>
   5 <title>List Picker test</title>
   6 <style>
   7 body {
   8     background-color: #eeffff;
   9 }
  10 iframe {
  11     z-index: 2147483647;
  12     width: 100px;
  13     height: 100px;
  14     border: 0;
  15     overflow: hidden;
  16 }
  17 </style>
  18 </head>
  19 <body>
  20
  21 <p>This is a testbed for list picker.</p>
  22
  23 <div>
  24 <select id="menu">
  25     <option value="0">foo</option>
  26     <option value="1">bar</option>
  27     <option value="2">bar</option>
  28     <optgroup label=bar>
  29         <option value="4">bar</option>
  30         <option value="5">bar</option>
  31     </optgroup>
  32     <option value="6">bar</option>
  33 </select>
  34 <iframe srcdoc="<!DOCTYPE html>"></iframe>
  35
  36 <ol id="console" style="font-family:monospace;">
  37 </ol>
  38
  39 <script>
  40 var pickerArguments = {
  41     selectedIndex: 0,
  42     children: [{
  43             type: "option",
  44             label: "foo",
  45             title: "",
  46             value: 0,
  47             ariaLabel: "",
  48             disabled: false,
  49             style: {
  50                 color: "black",
  51                 backgroundColor: "transparent",
  52                 fontSize: "11px",
  53                 fontWeight: "400",
  54                 fontFamily: ["sans-serif"],
  55                 visibility: "visible",
  56                 display: "block",
  57                 direction: "ltr",
  58                 unicodeBidi: "normal"
  59             }
  60         }, {
  61             type: "option",
  62             label: "bar",
  63             title: "",
  64             value: 1,
  65             ariaLabel: "",
  66             disabled: false,
  67             style: {
  68                 color: "black",
  69                 backgroundColor: "transparent",
  70                 fontSize: "11px",
  71                 fontWeight: "400",
  72                 fontFamily: ["sans-serif"],
  73                 visibility: "visible",
  74                 display: "block",
  75                 direction: "ltr",
  76                 unicodeBidi: "normal"
  77             }
  78         }, {
  79             type: "separator",
  80             label: "bar",
  81             title: "",
  82             value: 2,
  83             ariaLabel: "",
  84             disabled: false,
  85             style: {
  86                 color: "black",
  87                 backgroundColor: "transparent",
  88                 fontSize: "11px",
  89                 fontWeight: "400",
  90                 fontFamily: ["sans-serif"],
  91                 visibility: "visible",
  92                 display: "block",
  93                 direction: "ltr",
  94                 unicodeBidi: "normal"
  95             }
  96         }, {
  97             type: "option",
  98             label: "bar",
  99             title: "",
 100             value: 2,
 101             ariaLabel: "",
 102             disabled: false,
 103             style: {
 104                 color: "black",
 105                 backgroundColor: "transparent",
 106                 fontSize: "11px",
 107                 fontWeight: "400",
 108                 fontFamily: ["sans-serif"],
 109                 visibility: "visible",
 110                 display: "block",
 111                 direction: "ltr",
 112                 unicodeBidi: "normal"
 113             }
 114         }, {
 115         type: "optgroup",
 116         label: "foo",
 117         title: "",
 118         ariaLabel: "",
 119         disabled: false,
 120         children: [{
 121             type: "option",
 122             label: "bar",
 123             title: "",
 124             value: 3,
 125             ariaLabel: "",
 126             disabled: false,
 127             style: {
 128                 color: "black",
 129                 backgroundColor: "transparent",
 130                 fontSize: "11px",
 131                 fontWeight: "700",
 132                 fontFamily: ["sans-serif"],
 133                 visibility: "visible",
 134                 display: "block",
 135                 direction: "ltr",
 136                 unicodeBidi: "normal"
 137             }
 138         },
 139         {
 140             type: "option",
 141             label: "bar",
 142             title: "",
 143             value: 4,
 144             ariaLabel: "",
 145             disabled: false,
 146             style: {
 147                 color: "black",
 148                 backgroundColor: "transparent",
 149                 fontSize: "11px",
 150                 fontWeight: "400",
 151                 fontFamily: ["sans-serif"],
 152                 visibility: "visible",
 153                 display: "block",
 154                 direction: "ltr",
 155                 unicodeBidi: "normal"
 156             }
 157         }],
 158         style: {
 159             color: "black",
 160             backgroundColor: "transparent",
 161             fontSize: "11px",
 162             fontWeight: "400",
 163             fontFamily: ["sans-serif"],
 164             visibility: "visible",
 165             display: "block",
 166             direction: "ltr",
 167             unicodeBidi: "normal"
 168         }
 169     }, {
 170         type: "option",
 171         label: "bar",
 172         title: "",
 173         value: 5,
 174         ariaLabel: "",
 175         disabled: false,
 176         style: {
 177             color: "black",
 178             backgroundColor: "transparent",
 179             fontSize: "11px",
 180             fontWeight: "400",
 181             fontFamily: ["sans-serif"],
 182             visibility: "visible",
 183             display: "block",
 184             direction: "ltr",
 185             unicodeBidi: "normal"
 186         }
 187     }],
 188     anchorRectInScreen: {
 189         x: 1332,
 190         y: 356,
 191         width: 64,
 192         height: 18,
 193     },
 194 };
 195
 196 function openListPicker(args) {
 197     var frame = document.getElementsByTagName('iframe')[0];
 198     var doc = frame.contentDocument;
 199     doc.documentElement.innerHTML = '<!DOCTYPE html><head></head><body><div id=main>Loading...</div></body>';
 200     var commonCssLink = doc.createElement('link');
 201     commonCssLink.rel = 'stylesheet';
 202     commonCssLink.href = '../../Source/web/resources/pickerCommon.css?' + (new Date()).getTime();
 203     doc.head.appendChild(commonCssLink);
 204     var listPickerCssLink = doc.createElement('link');
 205     listPickerCssLink.rel = 'stylesheet';
 206     listPickerCssLink.href = '../../Source/web/resources/listPicker.css?' + (new Date()).getTime();
 207     doc.head.appendChild(listPickerCssLink);
 208     var commonJsScript = doc.createElement('script');
 209     commonJsScript.src = '../../Source/web/resources/pickerCommon.js?' + (new Date()).getTime();
 210     doc.body.appendChild(commonJsScript);
 211     var listPickerJsScript = doc.createElement('script');
 212     listPickerJsScript.src = '../../Source/web/resources/listPicker.js?' + (new Date()).getTime();
 213     doc.body.appendChild(listPickerJsScript);
 214
 215     var pagePopupController = {
 216         setValue: function(stringValue) {
 217             window.log('string="' + stringValue + '"');
 218             if (numValue == 0)
 219                 window.document.getElementById('menu').value = stringValue;
 220         },
 221         setValueAndClosePopup: function(numValue, stringValue) {
 222             window.log('number=' + numValue + ', string="' + stringValue + '"');
 223             if (numValue == 0)
 224                 window.document.getElementById('menu').value = stringValue;
 225         },
 226     }
 227
 228     setTimeout(function() {
 229         frame.contentWindow.postMessage(JSON.stringify(args), "*");
 230         frame.contentWindow.pagePopupController = pagePopupController;
 231     }, 100);
 232 }
 233
 234 function log(str) {
 235     var entry = document.createElement('li');
 236     entry.innerText = str;
 237     document.getElementById('console').appendChild(entry);
 238 }
 239
 240 document.getElementsByTagName('iframe')[0].onload = function () {
 241     openListPicker(pickerArguments);
 242 }
 243 </script>
 244 </body>
 245 </html>