<!DOCTYPE html>
<html>

<head>
  <title>Test app-region CSS property when "window-controls-overlay" in display-override member</title>
  <link rel="manifest" href="resources/display-override-member-app-region-window-controls-overlay.webmanifest" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <h1>Test app-region CSS property when "window-controls-overlay" in display-override member</h1>
  <style>
    #draggableRectangle {
      app-region: drag;
      background-color: blue;
      position: absolute;
      top: 25px;
      left: 25px;
      width: 250px;
      height: 250px;
      color: white;
    }

    #outerRectangle {
      background-color: green;
      position: relative;
      width: 300px;
      height: 300px;
      text-align: center;
    }

    #innerRectangle {
      app-region: no-drag;
      background-color: red;
      position: absolute;
      top: 50px;
      left: 50px;
      width: 150px;
      height: 150px;
    }
  </style>

  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="resources/display-override-member-media-feature-manual.js"></script>

  <script>
    setup({ explicit_timeout: true })
    var manual_test = async_test("app-region element drags window");

    window.addEventListener('DOMContentLoaded', function () {
      document.getElementById('outerRectangle').addEventListener('click', manual_test.unreached_func('click event fired on outer rectangle'));
      document.getElementById('innerRectangle').addEventListener('click', (e) => {e.stopPropagation();}, true);
    });
  </script>
</head>

<body>
  <h1>Description</h1>
  <p>This test validates that an element will drag the window around when running in "window-controls-overlay" mode.</p>
  <h1>Manual Test Steps:</h1>
  <p>
    <ol>
      <li> Install this app, and toggle into "window-controls-overlay" mode.</li>
      <li> Click and drag the blue rectangle containing the text "Drag Me". This element has the app-region:drag CSS property set.</li>
      <li> If the app window moves around as you drag the blue rectangle, <button onclick="manual_test.done()">Click Here</button>.</li>
    </ol>
  </p>
  <div id="outerRectangle">
    <div id="draggableRectangle">
      Drag Me
      <div id="innerRectangle">Not Draggable</div>
    </div>
  </div>
</body>
</html>