third_party/WebKit/LayoutTests/fast/forms/datalist/update-range-with-datalist.html

   1 <style>
   2 .test {
   3     margin: 0;
   4     padding: 10px;
   5     width: 300px;
   6     height: 60px;
   7     float: left;
   8 }
   9 </style>
  10
  11 <p>Tests 1-10 should have a tick at 80%. Tests 11 and 12 should have no ticks.</p>
  12
  13 <div class="test">
  14     <h4>Test 1: Changing option value</h4>
  15     <input type="range" list="list1" />
  16     <datalist id="list1">
  17         <option id="option1">20</option>
  18     </datalist>
  19     <script>
  20     function test1() {
  21         document.getElementById("option1").value = "80";
  22     };
  23     </script>
  24 </div>
  25
  26 <div class="test">
  27     <h4>Test 2: Changing option attribute</h4>
  28     <input type="range" list="list2" />
  29     <datalist id="list2">
  30         <option id="option2">20</option>
  31     </datalist>
  32     <script>
  33     function test2() {
  34         document.getElementById("option2").setAttribute("value", "80");
  35     };
  36     </script>
  37 </div>
  38
  39 <div class="test">
  40     <h4>Test 3: Changing option text content</h4>
  41     <input type="range" list="list3" />
  42     <datalist id="list3">
  43         <option id="option3">20</option>
  44     </datalist>
  45     <script>
  46     function test3() {
  47         document.getElementById("option3").textContent = "80";
  48     };
  49     </script>
  50 </div>
  51
  52 <div class="test">
  53     <h4>Test 4: Set datalist</h4>
  54     <input type="range" id="input4" />
  55     <datalist id="list4">
  56         <option>80</option>
  57     </datalist>
  58     <script>
  59     function test4() {
  60         document.getElementById("input4").setAttribute("list", "list4");
  61     };
  62     </script>
  63 </div>
  64
  65 <div class="test">
  66     <h4>Test 5: Set another datalist</h4>
  67     <input type="range" id="input5" list="list5-1" />
  68     <datalist id="list5-1">
  69         <option>20</option>
  70     </datalist>
  71     <datalist id="list5-2">
  72         <option>80</option>
  73     </datalist>
  74     <script>
  75     function test5() {
  76         document.getElementById("input5").setAttribute("list", "list5-2");
  77     };
  78     </script>
  79 </div>
  80
  81 <div class="test">
  82     <h4>Test 6: Reassign datalist id</h4>
  83     <input type="range" list="list6-1" />
  84     <datalist id="list6-2">
  85         <option>80</option>
  86     </datalist>
  87     <script>
  88     function test6() {
  89         document.getElementById("list6-2").id = "list6-1";
  90     };
  91     </script>
  92 </div>
  93
  94 <div class="test">
  95     <h4>Test 7: Reassign datalist in front</h4>
  96     <input type="range" list="list7-2" />
  97     <datalist id="list7-1">
  98         <option>80</option>
  99     </datalist>
 100     <datalist id="list7-2">
 101         <option>20</option>
 102     </datalist>
 103     <script>
 104     function test7() {
 105         document.getElementById("list7-1").id = "list7-2";
 106     };
 107     </script>
 108 </div>
 109
 110 <div class="test">
 111     <h4>Test 8: Insert datalist in front</h4>
 112     <input type="range" list="list8-1" />
 113     <datalist id="list8-1">
 114         <option>20</option>
 115     </datalist>
 116     <script>
 117     function test8() {
 118         var e = document.createElement("datalist");
 119         e.innerHTML = "<option>80</option>";
 120         e.id = "list8-1";
 121         var f = document.getElementById("list8-1");
 122         f.parentNode.insertBefore(e, f);
 123     };
 124     </script>
 125 </div>
 126
 127 <div class="test">
 128     <h4>Test 9: Insert option</h4>
 129     <input type="range" list="list9" />
 130     <datalist id="list9">
 131     </datalist>
 132     <script>
 133     function test9() {
 134         var e = document.createElement("option");
 135         e.value = "80";
 136         document.getElementById("list9").appendChild(e);
 137     };
 138     </script>
 139 </div>
 140
 141 <div class="test">
 142     <h4>Test 10: Remove option</h4>
 143     <input type="range" list="list10" />
 144     <datalist id="list10">
 145         <option id="option10">20</option>
 146         <option>80</option>
 147     </datalist>
 148     <script>
 149     function test10() {
 150         var e = document.getElementById("option10");
 151         e.parentNode.removeChild(e);
 152     };
 153     </script>
 154 </div>
 155
 156 <div class="test">
 157     <h4>Test 11: Insert non-datalist in front</h4>
 158     <input type="range" list="list11" />
 159     <datalist id="list11">
 160         <option>20</option>
 161     </datalist>
 162     <script>
 163     function test11() {
 164         var e = document.createElement("div");
 165         e.id = "list11";
 166         var f = document.getElementById("list11");
 167         f.parentNode.insertBefore(e, f);
 168     };
 169     </script>
 170 </div>
 171
 172 <div class="test">
 173     <h4>Test 12: Remove datalist</h4>
 174     <input type="range" list="list12" />
 175     <datalist id="list12">
 176         <option>20</option>
 177     </datalist>
 178     <script>
 179     function test12() {
 180         var e = document.getElementById("list12");
 181         e.parentNode.removeChild(e);
 182     };
 183     </script>
 184 </div>
 185
 186 <button id="button">Run tests.</button>
 187
 188 <script>
 189 if (window.testRunner)
 190     testRunner.dumpAsTextWithPixelResults();
 191
 192 function clickOn(element)
 193 {
 194     var x = element.offsetLeft + element.offsetWidth / 2;
 195     var y = element.offsetTop + element.offsetHeight / 2;
 196     eventSender.mouseMoveTo(x, y);
 197     eventSender.mouseDown();
 198     eventSender.mouseUp();
 199     eventSender.mouseMoveTo(0, 0);
 200 }
 201
 202 var button = document.getElementById("button");
 203 button.onclick = function() {
 204     test1();
 205     test2();
 206     test3();
 207     test4();
 208     test5();
 209     test6();
 210     test7();
 211     test8();
 212     test9();
 213     test10();
 214     test11();
 215     test12();
 216 };
 217 if (window.eventSender)
 218     clickOn(button);
 219 </script>