Media element controls' event dispatch does not follow HTML5 specification

Originator:chris
Number:rdar://17506414 Date Originated:30-Jun-2014
Status: Resolved:
Product:Safari Product Version:7
Classification: Reproducible:
 
According to the HTML specification, native controls on the media element should not trigger normal mouse
events:

“If the user agent exposes a user interface to the user by displaying controls over the media element, then
the user agent should suppress any user interaction events while the user agent is interacting with this
interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth
would not simultaneously be fired at elements on the page.)”

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#attr-media-controls

Steps to Reproduce:
1. Open http://www.quirksmode.org/html5/tests/video.html

2. Run the following JavaScript in the console:

Array.prototype.forEach.call(document.querySelectorAll('video'), function (i) {
    i.parentNode.addEventListener('mousedown', function (evt) { console.log(evt.type) });
    i.parentNode.addEventListener('mouseup', function (evt) { console.log(evt.type) });
    i.parentNode.addEventListener('click', function (evt) { console.log(evt.type) });
})

3. Click on the play/pause button on a <video> element with native controls


Expected Results:
Mouse events should not fire when the target is a native player control

Actual Results:
Mouse events are triggered and there's no way to distinguish the user intent from the event data

Version:
OS X

Comments


Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!