third_party/WebKit/LayoutTests/fast/forms/text/text-appearance-datalist-dynamic.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <script src="../resources/common.js"></script>
   5 <style>
   6 input::-webkit-calendar-picker-indicator {
   7     opacity: 1;
   8 }
   9 </style>
  10 <dl>
  11 <dt>Datalist follows:
  12 <dd><input list="dl1">
  13 <dt>Empty datalist:
  14 <dd><input list="dl-empty">
  15 <dt>Datalist without valid options:
  16 <dd><input list="dl-invalid" maxlength=3>
  17 <dt>Empty datalist becomes non-empty:
  18 <dd><input list="dl-empty-valid">
  19 <dt>Datalist becomes empty:
  20 <dd><input list="dl-valid-empty">
  21 <dt>Datalist disappears:
  22 <dd><input list="dl-disappear">
  23 <dt>No datalist with the speicified ID:
  24 <dd><input list="dl-no-id">
  25 <dt>No datalist with the speicified ID, then it appears:
  26 <dd><input list="dl-no-id-then-added">
  27 </dl>
  28
  29 <datalist id="dl1">
  30 <option>Suggestion</option>
  31 </datalist>
  32 <datalist id="dl-empty">
  33 </datalist>
  34 <datalist id="dl-invalid">
  35 <option>Suggestion</option>
  36 </datalist>
  37 <datalist id="dl-empty-valid">
  38 </datalist>
  39 <datalist id="dl-valid-empty">
  40 <option>Suggestion</option>
  41 </datalist>
  42 <datalist id="dl-disappear">
  43 <option>Suggestion</option>
  44 </datalist>
  45 <datalist id="dl-no-id-then-added-pre">
  46 <option>Suggestion</option>
  47 </datalist>
  48
  49 <script>
  50 function change() {
  51     $('dl-empty-valid').innerHTML = '<option>foo</option>';
  52     $('dl-valid-empty').innerHTML = '';
  53     $('dl-disappear').remove();
  54     $('dl-no-id-then-added-pre').id = 'dl-no-id-then-added';
  55     document.body.offsetLeft;
  56     testRunner.notifyDone();
  57 }
  58
  59 window.onload = function() {
  60     document.body.offsetLeft;
  61     setTimeout(change, 0);
  62 };
  63 testRunner.waitUntilDone();
  64 </script>
  65 </body>
  66 </html>