<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Web Inspector: REGRESSION (Safari 7): Pseudo element rules are not labelled with media queries in Styles panel"
href="https://bugs.webkit.org/show_bug.cgi?id=147207">147207</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Web Inspector: REGRESSION (Safari 7): Pseudo element rules are not labelled with media queries in Styles panel
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Keywords</th>
<td>InRadar
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Web Inspector
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>drousso@apple.com
</td>
</tr>
<tr>
<th>CC</th>
<td>graouts@webkit.org, joepeck@webkit.org, jonowells@apple.com, mattbaker@apple.com, nvasilyev@apple.com, timothy@apple.com, webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>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: <a href="http://service-docs.adeslade.co.uk">http://service-docs.adeslade.co.uk</a>. 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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>