| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <title>An element with id=test and role=listbox, which is owned by a combobox</title> |
| <style type="text/css"> |
| ul#test { |
| list-style-type: none; |
| width: 5em; |
| height: 3em; |
| border: 1px solid black; |
| margin-top: 0; |
| margin-left: 1em; |
| } |
| |
| ul#test > li { |
| margin-left -10em; |
| } |
| </style> |
| </head> |
| <body> |
| <p>An element with <code>id=test</code> and <code>role=listbox</code>, which is owned by a <code>combobox</code>:</p> |
| <input type="text" |
| aria-label="Comobox that owns zebra-zoom listbox" |
| role="combobox" |
| aria-expanded="true" |
| aria-owns="test" |
| aria-autocomplete="none" |
| aria-activedescendant="selected_option"> |
| <ul role="listbox" id="test"> |
| <li role="option">Zebra</li> |
| <li role="option" id="selected_option">Zoom</li> |
| </ul> |
| </body> |
| </html> |