third_party/WebKit/LayoutTests/fast/forms/radio-checkbox-events-order.html

   1 <!DOCTYPE HTML>
   2
   3 <script src="../../resources/js-test.js"></script>
   4
   5 <body>
   6 <input type="checkbox" id="checkbox-btn1" onclick="doClickAction(event)" onchange="doChangeAction(event)"/>
   7 <input type="checkbox" id="checkbox-btn2" onclick="doClickAction(event); event.preventDefault()" onchange="doChangeAction(event)"/>
   8 <input type="checkbox" id="checkbox-btn3" onclick="this.value = this.checked;" onchange="message = 'changed';"/>
   9 <input type="radio" id="radio-btn1" onclick="doClickAction(event)" onchange="doChangeAction(event)"/>
  10 <input type="radio" id="radio-btn2" onclick="doClickAction(event); event.preventDefault()" onchange="doChangeAction(event)"/>
  11 <input type="radio" id="radio-btn3" onclick="this.value = this.checked;" onchange="message = 'changed';"/>
  12 <script>
  13 description('Tests the order of onclick and onchange');
  14 var message = '';
  15
  16 function doClickAction(e)
  17 {
  18     shouldBeEqualToString('message', '');
  19     message = 'clicked';
  20 }
  21
  22 function doChangeAction(e)
  23 {
  24     shouldBeEqualToString('message', 'clicked');
  25     message = 'changed';
  26 }
  27
  28 var checkbox1 = document.getElementById('checkbox-btn1');
  29 var checkbox2 = document.getElementById('checkbox-btn2');
  30 var checkbox3 = document.getElementById('checkbox-btn3');
  31 var radio1 = document.getElementById('radio-btn1');
  32 var radio2 = document.getElementById('radio-btn2');
  33 var radio3 = document.getElementById('radio-btn3');
  34
  35 debug('Tests for checkboxes:');
  36 message = '';
  37 checkbox1.click();
  38 shouldBeEqualToString('message', 'changed');
  39 shouldBeTrue('checkbox1.checked');
  40
  41 message = '';
  42 checkbox1.click();
  43 shouldBeEqualToString('message', 'changed');
  44 shouldBeFalse('checkbox1.checked');
  45
  46 message = '';
  47 checkbox2.click();
  48 shouldBeEqualToString('message', 'clicked');
  49 shouldBeFalse('checkbox2.checked');
  50
  51 message = '';
  52 checkbox1.checked = false;
  53 checkbox1.focus();
  54 eventSender.keyDown(' ');
  55 shouldBeEqualToString('message', 'changed');
  56 shouldBeTrue('checkbox1.checked');
  57
  58 message = '';
  59 checkbox1.focus();
  60 eventSender.keyDown(' ');
  61 shouldBeEqualToString('message', 'changed');
  62 shouldBeFalse('checkbox1.checked');
  63
  64 message = '';
  65 checkbox2.checked = false;
  66 checkbox2.focus();
  67 eventSender.keyDown(' ');
  68 shouldBeEqualToString('message', 'clicked');
  69 shouldBeFalse('checkbox2.checked');
  70
  71 debug('Updating |value| in click handler:');
  72 message = '';
  73 checkbox3.click();
  74 shouldBeEqualToString('message', 'changed');
  75
  76 debug('');
  77 debug('Tests for radio buttons:');
  78 message = '';
  79 radio1.click();
  80 shouldBeEqualToString('message', 'changed');
  81 shouldBeTrue('radio1.checked');
  82
  83 message = '';
  84 radio1.click();
  85 shouldBeEqualToString('message', 'clicked');
  86 shouldBeTrue('radio1.checked');
  87
  88 message = '';
  89 radio2.click();
  90 shouldBeEqualToString('message', 'clicked');
  91 shouldBeFalse('radio2.checked');
  92
  93 message = '';
  94 radio1.checked = false;
  95 radio1.focus();
  96 eventSender.keyDown(' ');
  97 shouldBeEqualToString('message', 'changed');
  98 shouldBeTrue('radio1.checked');
  99
 100 message = '';
 101 radio1.focus();
 102 eventSender.keyDown(' ');
 103 shouldBeEqualToString('message', '');
 104 shouldBeTrue('radio1.checked');
 105
 106 message = '';
 107 radio2.checked = false;
 108 radio2.focus();
 109 eventSender.keyDown(' ');
 110 shouldBeEqualToString('message', 'clicked');
 111 shouldBeFalse('radio2.checked');
 112
 113 debug('Updating |value| in click handler:');
 114 message = '';
 115 radio3.click();
 116 shouldBeEqualToString('message', 'changed');
 117 </script>
 118 </body>