mq-display-mode.html | Explore in Territory

<html>
<head>
<title>Test the Manifest media query "display-mode" features.</title>
<script type="text/javascript" src="resources/media-utils.js"></script>
<script type="text/javascript" charset="utf-8">
  if (window.testRunner) testRunner.dumpAsText();

  const supportedValues = [
    "browser",
    "minimal-ui",
    "standalone",
    "fullscreen",
    "window-controls-overlay",
    "borderless",
  ];

  function testQueries() {
    [
      // OK values.
      "(display-mode)",
      ...supportedValues.map((mode) => `(display-mode: ${mode})`),

      // Unexpected values.
      "(display-mode: fine)",
      "(display-mode: 1)",
      "(display-mode: 3%)",
    ].forEach(query => logMatchMediaQuery(query));
  }

  function runTests() {
    if (!window.internals) return;

    for (const mode of supportedValues) {
      log(`------------- with '${mode}' display mode -------------`);
      internals.settings.setDisplayModeOverride(mode);
      testQueries();
    }
  }

</script>
</head>
<body onload="runTests()">
  <p>Test the <a href="http://www.w3.org/TR/mediaqueries-5/#display-mode">(display-mode: ...)</a> media features.</p>
  <div id="results"></div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/media/mq-display-mode.html
