<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/ui-helper.js"></script>
<style>

:root {
  --focus-ring-size: 3px;
  --input-width: 160px;
  --input-height: 20px;
  --border-width: 1px;
}

input {
    caret-color: transparent;

    position: absolute;
    top: calc(2 * var(--focus-ring-size));
    left: calc(2 * var(--focus-ring-size));
    border: var(--border-width) solid black;
    padding: 0;
    width: var(--input-width);
    height: var(--input-height);
}

#overlay {
    position: absolute;
    top: var(--focus-ring-size);
    left: var(--focus-ring-size);
    background-color: red;
    border: var(--border-width) solid red;
    width: calc(var(--input-width) + 2 * var(--focus-ring-size));
    height: calc(var(--input-height) + 2 * var(--focus-ring-size));
}

</style>
</head>
<body>
<input id="test" type="text">
<div id="overlay"></div>
<script>
if (window.testRunner) {
    testRunner.waitUntilDone();
    let testElement = document.getElementById("test");
    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
    UIHelper.keyDown("\t", ["altKey"]);
}
</script>
</body>
</html>