Bug 58684

Overview: CSS selectors apply to shadow DOM elements that should only be targetable using pseudo-elements. For example, if a pseudo-element is a <div> in the shadow DOM, then any rule in div { … } will apply to it. Steps to reproduce: Open the attached HTML page. It contains a simple <video> element and two CSS selectors, div and input. Expected result: The video element should look as it does in Safari 5.0.5. Actual result: Buttons in the video controls are replaced by red backgrounds, and the font-size of text in the controls is 30px. Build: Tested with WebKit 6533.21.1, r83831 on OS X 10.6.7. Works fine in Safari 5.0.5. I have heard that the bug also happens in Safari 5.1. Notes: The shadow DOM of the video controls in this example is <div><div><input><input><input><div>Loading...</div><div><div>00:00</div><input precision="float" max="60.08"><div>-01:00</div></div><input><input><input><input><input><div><input precision="float" max="1" value="1"></div></div></div> (This can be seen in Safari 5.0.5 through the relatedTarget property of a mouseout event; a bug that appears to be fixed in the nightlies). However, the CSS should not apply since these elements are not in the DOM.