<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Window Test</title>
<style>
/* Background becomes pink in fullscreen mode. */
:fullscreen {
  background: pink;
}
</style>
<script>
function setup() {
  if (location.hostname == 'tests' || location.hostname == 'localhost')
    return;

  alert('This page can only be run from tests or localhost.');

  // Disable all elements.
  var elements = document.getElementById("form").elements;
  for (var i = 0, element; element = elements[i++]; ) {
    element.disabled = true;
  }
}

function send_message(test, params) {
  var message = 'WindowTest.' + test;
  if (typeof params != 'undefined')
    message += ':' + params;

  // Results in a call to the OnQuery method in window_test.cpp.
  window.cefQuery({'request' : message});
}

function minimize() {
  send_message('Minimize');
}

function maximize() {
  send_message('Maximize');
}

function restore() {
  minimize();
  setTimeout(function() { send_message('Restore'); }, 1000);
}

function fullscreenWindow() {
  send_message('Fullscreen');
}

function fullscreenBrowser() {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.getElementById('form').requestFullscreen();
  }
}

function position() {
  var x = parseInt(document.getElementById('x').value);
  var y = parseInt(document.getElementById('y').value);
  var width = parseInt(document.getElementById('width').value);
  var height = parseInt(document.getElementById('height').value);
  if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height))
    alert('Please specify a valid numeric value.');
  else
    send_message('Position', x + ',' + y + ',' + width + ',' + height);
}

function setTitlebarHeight() {
  const height = parseFloat(document.getElementById('title_bar_height').value);
  if (isNaN(height))
    send_message('TitlebarHeight');
  else
    send_message('TitlebarHeight', height);
}
</script>
</head>
<body bgcolor="white" onload="setup()">
<form id="form">
Click a button to perform the associated window action.
<br/><input type="button" onclick="minimize();" value="Minimize">
<br/><input type="button" onclick="maximize();" value="Maximize">
<br/><input type="button" onclick="restore();" value="Restore"> (minimizes and then restores the window as topmost)
<br/><input type="button" onclick="fullscreenWindow();" value="Toggle Window Fullscreen"> (works with Views)
<br/><input type="button" onclick="fullscreenBrowser();" value="Toggle Browser Fullscreen"> (uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API" target="_new">Fullscreen API</a>; background turns pink)
<br/><input type="button" onclick="position();" value="Set Position">
X: <input type="text" size="4" id="x" value="200">
Y: <input type="text" size="4" id="y" value="100">
Width: <input type="text" size="4" id="width" value="800">
Height: <input type="text" size="4" id="height" value="600">
<br/><input type="button" onclick="setTitlebarHeight();" value="Set Titlebar Height">
<input type="number" min="0" max="100" id="title_bar_height" value="50"> (works on macOS with Views)
</form>
</body>
</html>