top_controls_scroll.html | Explore in Territory

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width">
<title>Browser Top Controls Scrolls</title>
<style>
  div {
    position: absolute;
    width: 100%;
    height: 20000px;
    background: linear-gradient(cyan, cyan 50%, blue 50%, blue);
    background-size: 100% 200px;
  }
  select {
    width: 100%;
    height: 100px;
  }
</style>
</head>
  <body>
  <select id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <h1>Browser Top Controls Scrolls Test Page</h1>
  <p>
    This page is used to test the browser top controls scroll behavior with page
    scrolls in Tablet Mode.
  </p>
  <input id="editable-element" type="text">
  <div></div>

  <script>
    let selectFocused = false;
    let selectChanged = false;
    let selectElement = document.getElementById('select');

    selectElement.onfocus = function() {
      selectFocused = true;
    };

    selectElement.onblur = function() {
      selectFocused = false;
    };

    selectElement.onchange = function() {
      selectChanged = true;
    };

    function getSelectedValue() {
      return selectElement.options[selectElement.selectedIndex].value;
    }

    function focusSelectElement() {
      selectElement.focus();
      return true;
    }
  </script>

  </body>
</html>
chromium/chrome/test/data/top_controls_scroll/top_controls_scroll.html
