optgroup-empty-and-nested.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <html>
  2. <head>
  3. <title>Empty and nested optgroup elements</title>
  4. </head>
  5. <body>
  6. <select>
  7. <!-- A div here is invalid. However, both IE and Firefox will walk into it
  8. and enumerate the elements inside. -->
  9. <div>
  10. <option value="1">Item one</option>
  11. <!-- this group has no children. We /should/ render it because that matches
  12. IE and FireFox. -->
  13. <optgroup label="Group one"></optgroup>
  14. <!-- this group has a text node child. It should render the same as group one. -->
  15. <optgroup label="Group two"> </optgroup>
  16. <!-- for an optgroup without a label, IE will show an empty, unselectable row.
  17. Firefox doesn't show it. We /do/ show it because someone might be using
  18. it as a spacer. -->
  19. <!-- Additionally, this has been updated to test the crash fixed in
  20. https://bugs.webkit.org/show_bug.cgi?id=26656. When setting the
  21. font-size in the <optgroup> to extra large, opening the select element
  22. must not leave any unpainted areas of overlapping text. -->
  23. <optgroup style="font-size: x-large;">
  24. <option value="2">Item inside an optgroup without a label</option>
  25. </optgroup>
  26. <!-- for an optgroup with an empty label, IE will show an empty,
  27. unselectable row. Firefox doesn't show it. We /do/ show it because
  28. someone might be using it as a spacer. -->
  29. <optgroup label="">
  30. <option value="3">Item inside an optgroup with an empty label</option>
  31. </optgroup>
  32. <div>
  33. <option value="4"></option>
  34. <optgroup label="Group three">
  35. <option value="5">Item two</option>
  36. <!-- nested groups are disallowed by the spec, but IE and Firefox will
  37. flatten the tree. We should match them. -->
  38. <optgroup label="Nested group 1"></optgroup>
  39. <optgroup label="Nested group 2">
  40. <optgroup label="Nested group 3">
  41. <option value="6">Item three</option>
  42. </optgroup>
  43. </optgroup>
  44. </optgroup>
  45. </div>
  46. <option value="7">Item four</option>
  47. </div>
  48. </select>
  49. <p>Click on the select element above. When it drops down you should see the following items in the list:</p>
  50. <ul>
  51. <li>Item one</li>
  52. <li><b>Group one</b></li>
  53. <li><b>Group two</b></li>
  54. <li><i>(unselectable, empty row)</i></li>
  55. <li>Item inside an optgroup without a label</li>
  56. <li><i>(unselectable, empty row)</i></li>
  57. <li>Item inside an optgroup with an empty label</li>
  58. <li><i>(selectable, empty row)</i></li>
  59. <li><b>Group three</b></li>
  60. <li>Item two</li>
  61. <li><b>Nested group 1</b></li>
  62. <li><b>Nested group 2</b></li>
  63. <li><b>Nested group 3</b></li>
  64. <li>Item three</li>
  65. <li>Item four</li>
  66. </ul>
  67. <p>The text of the rows of the dropdown must not overlap each other.</p>
  68. </body>
  69. </html>