Hi,
We have looked into this issue and we support media queries fine. The problem is the return value for certain style properties are not as "clean" with our component as Chrome browser. For example, for the following HTML code:
Code: HTML/ASPX
<p id="test" style="text-decoration:underline;" onclick="test();">
test
</p>
And the following JavaScript:
Code: JavaScript
function test()
{
var p = document.getElementById("test");
var s = document.defaultView.getComputedStyle(p);
alert(s.getPropertyValue("text-decoration"));
}
In this sample the CSS sets "text-decoration". "text-decoration" has three sub-properties: text-decoration-line, text-decoration-style and text-decoration-color. In the above code only text-decoration-line is set.
Click the text and Google Chrome will display "underline", but our component will display "underline solid rgb(0, 0, 0)". Both values are correct and the styles have been properly applied in both cases. However our component also returned a more complete value that also includes the default value for other two sub-properties: text-decoration-color and text-decoration-style where as Google Chrome does not. The W3C test page checks the return value for "underline" in this case, that's why our component fails the test.
Our component is based on Google Chrome's source code, so it appears that the current version of Google Chrome "cleaned up" the return value. We will need to sync to the latest code base in order to have the same result as Chrome. We do sync with Google Chrome's codebase rather frequently. So this problem should not last long.
However as already explained, failing the test does not mean the styles are not properly applied or media query does not work. Media query and the corresponding style should work fine.
Thanks!