<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><span class="vcard"><a class="email" href="mailto:joepeck@webkit.org" title="Joseph Pecoraro <joepeck@webkit.org>"> <span class="fn">Joseph Pecoraro</span></a>
</span> changed
<a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED FIXED - Web Inspector: Elements with the "hidden" attribute still show up if "display: flex;""
href="https://bugs.webkit.org/show_bug.cgi?id=152674">bug 152674</a>
<br>
<table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>What</th>
<th>Removed</th>
<th>Added</th>
</tr>
<tr>
<td style="text-align:right;">Status</td>
<td>NEW
</td>
<td>RESOLVED
</td>
</tr>
<tr>
<td style="text-align:right;">Resolution</td>
<td>---
</td>
<td>FIXED
</td>
</tr></table>
<p>
<div>
<b><a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED FIXED - Web Inspector: Elements with the "hidden" attribute still show up if "display: flex;""
href="https://bugs.webkit.org/show_bug.cgi?id=152674#c2">Comment # 2</a>
on <a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED FIXED - Web Inspector: Elements with the "hidden" attribute still show up if "display: flex;""
href="https://bugs.webkit.org/show_bug.cgi?id=152674">bug 152674</a>
from <span class="vcard"><a class="email" href="mailto:joepeck@webkit.org" title="Joseph Pecoraro <joepeck@webkit.org>"> <span class="fn">Joseph Pecoraro</span></a>
</span></b>
<pre>I believe this is behaving correctly. We match Firefox and Chrome here.
Web Inspector shows the style cascade being:
inline style:
display: flex
html attributes: (from `hidden`)
display: none
user agent styles for `div`:
display: block
The HTML Attributes section could just as easily have been treated as a user agent style like that recommended in the HTML spec:
<a href="https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute">https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute</a>
<a href="https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS">https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS</a>
[hidden] {
display: none;
}
In which case, the more-specific inline style of `display: flex` overrides it.
User styles (page styles) can include their own styles to make the hidden attribute stronger...
[hidden] {
display: none !important;
}
... but I think right now we are behaving as expected.</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>