<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.a {background-color: red;}
@charset "XXX";
div.a {background-color: green !important;}
@charset "XXX";
div.b {background-color: green !important;}
</style>
</head>
<body>
    <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=36515">bug 36515</a>:
    CSS style definitions are ignored if they just follow a "@charset" which appears in lines other than the first line in stylesheet.</p>
    <p>There should be two green squares below:</p>
    <div class="a" style="height:100px; width:100px;"></div><br>
    <div class="b" style="height:100px; width:100px; background-color:red;"></div>
    <div style="height:5px; width:5px; background-color:green; visibility: hidden"></div>
    <div id="result">Testing...</div>
    <script>
        if (window.testRunner)
            testRunner.dumpAsText();
        var expected = document.defaultView.getComputedStyle(document.getElementsByTagName("div")[2], null).backgroundColor;
        var result = document.defaultView.getComputedStyle(document.getElementsByTagName("div")[0], null).backgroundColor == expected
            && document.defaultView.getComputedStyle(document.getElementsByTagName("div")[1], null).backgroundColor == expected;
        document.getElementById("result").innerHTML = result ? "PASS" : "FAIL";
    </script>
</body>
</html>
