Summary: The Styles panel of the Web Inspector labels rules that are applied through media queries. However, this does not apply to pseudo elements. For these, rules do not appear in the panel until the query is true–consistent with ordinary elements–but they are not in any way marked or labelled as being the subject of a media query. This can be observed on the following site: http://service-docs.adeslade.co.uk. At a 670px viewport, the <div> with the classes ‘section’, and ‘download’ has padding applied, this rule is labelled by the media query. However, the Octocat background image applied as an ::after pseudo element to that same <div> does not have it’s layout changes (background-position, top, left, transform) labelled by the media query. Steps to Reproduce: 1. Create some basic HTML and CSS, making use of a ::before or ::after pseudo element. 2. Add a media query to change some style of the pseudo element at some breakpoint. Expected Results: In the Web Inspector Styles panel, the change in the pseudo element’s style should be labelled by the relevant media query. Actual Results: The change in the pseudo element’s style is not labelled as being the result of a truthy media query. Version: OS X 10.9; Safari 7. Still occurs in r160213 Nightly.
<rdar://problem/15611325>
Created attachment 257304 [details] Patch
Comment on attachment 257304 [details] Patch Clearing flags on attachment: 257304 Committed r187195: <http://trac.webkit.org/changeset/187195>
All reviewed patches have been landed. Closing bug.