ManualTests/optgroup-empty-and-nested.html

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