| <!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| window.enablePixelTesting = true; |
| </script> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="../resources/picker-common.js"></script> |
| </head> |
| <body> |
| <style> |
| select { |
| padding-left: 20px; |
| background-color: #DDDDFF; |
| } |
| |
| option.styled { |
| font-style: italic; |
| font-variant: small-caps; |
| font-weight: bold; |
| font-family: cursive; |
| font-size: 24px; |
| background-color: green; |
| color: red; |
| } |
| </style> |
| <select id="menu"> |
| <option>foo</option> |
| <optgroup label="group" id="group"> |
| <option selected>bar</option> |
| </optgroup> |
| <option hidden>qux</option> |
| <option class="styled">baz</option> |
| </select> |
| <p id="description" style="opacity: 0"></p> |
| <div id="console" style="opacity: 0"></div> |
| <script> |
| var menu = document.getElementById('menu'); |
| menu.appendChild(new Option('before separator')); |
| menu.appendChild(document.createElement('hr')); |
| menu.appendChild(new Option('after separator')); |
| var group = document.getElementById('group'); |
| group.appendChild(document.createElement('hr')); |
| var nestedGroup = document.createElement('optgroup'); |
| nestedGroup.label = 'Nested group'; |
| nestedGroup.innerHTML = '<option>Should not be shown</option>'; |
| group.appendChild(nestedGroup); |
| openPicker(menu, finishJSTest, function () { |
| testFailed('picker didn\'t open') |
| finishJSTest(); |
| }); |
| </script> |
| </body> |
| </html> |
