matchmedium-query-api.html | Explore in Territory

<html>
<head>
<title>Test CSSOM View module: Media interface</title>
<script type="text/javascript" src="resources/media-utils.js"></script>
<script type="text/javascript" charset="utf-8">
  if (window.testRunner) testRunner.dumpAsText();

  function testQuery(query, expected) {
    var actual = window.styleMedia.matchMedium(query);
    log(`"${query}" evaluates to ${actual}: ${actual == expected ? "PASS" : "FAIL"}`);
  }

  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: 1px)", true);
    testQuery("(min-device-width: 50000px)", false);
  }
</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>
chromium/third_party/blink/web_tests/fast/media/matchmedium-query-api.html
