| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| |
| .scroll { |
| height: 100px; |
| overflow: auto; |
| } |
| |
| .filler { |
| height: 200px; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <p>Ensure that simulated click on label elements uses the original mouse coordinates.</p> |
| <input type="checkbox" id="target" onclick="validateEventProperties(event)"> |
| <label for="target" onclick="storeEvent(event)">Click Me</label> |
| |
| <div class="scroll"> |
| <div class="filler"></div> |
| <input type="radio" id="target2" onclick="validateEventProperties(event)"> |
| <label for="target2" onclick="storeEvent(event)">Click Me</label> |
| </div> |
| |
| <pre id="out"></pre> |
| <script> |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function clickOn(element) |
| { |
| if (!window.eventSender) |
| return; |
| var rect = element.getBoundingClientRect(); |
| var x = rect.left + rect.width / 2; |
| var y = rect.top + rect.height / 2; |
| eventSender.mouseMoveTo(x, y); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| } |
| |
| function print(s) |
| { |
| document.getElementById('out').textContent += s + '\n'; |
| } |
| |
| var realClickEvent, simulatedEvent; |
| |
| function storeEvent(event) |
| { |
| realClickEvent = event; |
| } |
| |
| function validateEventProperty(name) |
| { |
| if (realClickEvent[name] === simulatedEvent[name]) |
| print('PASS: event.' + name + ' is same for both real and simulated event.'); |
| else |
| print('FAIL: event.' + name + ' is ' + simulatedEvent[name] + ', expected ' + realClickEvent[name]); |
| } |
| |
| function validateEventProperties(event) |
| { |
| simulatedEvent = event; |
| |
| validateEventProperty('clientX'); |
| validateEventProperty('clientY'); |
| validateEventProperty('layerX'); |
| validateEventProperty('layerY'); |
| validateEventProperty('pageX'); |
| validateEventProperty('pageY'); |
| validateEventProperty('screenX'); |
| validateEventProperty('screenY'); |
| validateEventProperty('x'); |
| validateEventProperty('y'); |
| } |
| |
| clickOn(document.querySelector('label')); |
| |
| print(''); |
| document.querySelector('.scroll').scrollTop = 999; |
| clickOn(document.querySelector('.scroll label')); |
| |
| </script> |
| </body> |
| </html> |
