<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 - CSS parser unable to recover after invalid @media block"
href="https://bugs.webkit.org/show_bug.cgi?id=149185">149185</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>CSS parser unable to recover after invalid @media block
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.10
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>hartman.wiki@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=261241" name="attach_261241" title="Reduced testcase">attachment 261241</a> <a href="attachment.cgi?id=261241&action=edit" title="Reduced testcase">[details]</a></span>
Reduced testcase
The attached testcase shows that after an invalid media query block inside <style>, the CSS parser is unable to recover and ignores anything and everything that will follow the invalid block.
Browsers like Chrome and Firefox, ignore the first statement after the invalid media query block (which in the testcase would have made the div blue), but then do apply any following statements (in the testcase making the div green).
This caused a serious CSS styling issue on Wikimedia Commons, where a good percentage of CSS statements was ignored by Safari. Downstream report in Wikipedia: <a href="https://phabricator.wikimedia.org/T112552#1643002">https://phabricator.wikimedia.org/T112552#1643002</a></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>