<html>
<head>
<title>Test CSSOM View module: Media interface</title>
<style type="text/css">

</style>
<script type="text/javascript" charset="utf-8">
  if (window.testRunner)
    testRunner.dumpAsText();
  
  function log(m)
  {
    var results = document.getElementById('results');
    results.innerHTML += m + '<br>';
  }
  
  function testQuery(query, expected)
  {
    var isTrue = window.matchMedia(query).matches;

    var message = '\"' + query + '\" evaluates to ' + (isTrue ? 'true' : 'false');
    message += (isTrue == expected) ? ': PASS' : ': FAIL';
    log(message);
  }
  
  function runTests()
  {
    testQuery('screen', true);
    testQuery('projection', false);

    testQuery('all and (color)', true);
    testQuery('not projection and (color)', true);
    testQuery('(color)', true);
    testQuery('(color', true);
    testQuery('color', false);

    testQuery('garbage', false);

    testQuery('(min-device-width: 100px)', true);
    testQuery('(min-device-width: 50000px)', false);

    testQuery('(-webkit-animation: 1)', true);
    testQuery('(-webkit-transform-2d)', true);
  }

</script>
</head>
<body onload="runTests()">
  <p>Test the media interface: <a href="http://dev.w3.org/csswg/cssom-view/#the-media-interface" title="CSSOM View Module">http://dev.w3.org/csswg/cssom-view/#the-media-interface</a>.</p>
  <div id="results">
    
  </div>
</body>
</html>